ajout de strapi

This commit is contained in:
Julie Chaumard
2025-12-07 23:10:08 +01:00
parent da639e4d73
commit 5deafb7d50
94 changed files with 2221 additions and 27 deletions

View File

@@ -0,0 +1,214 @@
@use '../base/colors' as *;
@use '../layout/media_queries';
.header_full {
display: grid;
grid-template-rows: 130px auto auto;
@include media_queries.media_min(tablet_600) {
grid-template-columns: 1fr 500px 1fr;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 1fr 890px 1fr;
}
@include media_queries.media_min(desktop_1000) {
grid-template-columns: auto 980px auto;
}
@include media_queries.media_min(desktop_1100) {
grid-template-columns: auto 1090px auto;
}
@include media_queries.media_min(desktop_1200) {
grid-template-columns: auto 1160px auto;
}
@include media_queries.media_min(desktop_1300) {
grid-template-columns: 1fr 1250px 1fr;
}
@include media_queries.media_min(desktop_1500) {
grid-template-columns: 1fr 1420px 1fr;
}
@include media_queries.media_min(desktop_1800) {
grid-template-columns: 1fr 1700px 1fr;
}
nav {
color: $blanc;
a {
color: $blanc;
}
}
.header_navigation {
grid-column: 2;
grid-row: 1;
z-index: 10;
}
.obscur {
grid-column: 1 / -1;
grid-row: 1;
z-index: 5;
//background-color: #0000007a;
background-color: rgba(0,0,0,.4);
}
.header-img_cont {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.header-img_text {
grid-column: 2;
grid-row: 3;
color: $blanc;
width: 650px;
margin-left: 80px;
margin-bottom: 150px;
.header-img_titre {
margin-bottom: 10px;
text-transform: uppercase;
font-family: 'barlow_black';
font-size: 50px;
}
.header-img_description {
margin-bottom: 20px;
font-family: 'barlow_regular';
font-size: 20px;
}
.decouvrir {
display: flex;
.decouvrir_icone {
margin-top: 2px;
margin-right: 5px;
}
.decouvrir_texte {
font-family: 'barlow_regular';
font-size: 18px;
}
}
}
}
.header_full_2 {
display: grid;
@include media_queries.media_min(tablet_600) {
grid-template-rows: 117px auto auto;
}
@include media_queries.media_min(tablet_900) {
grid-template-rows: 117px auto auto;
}
@include media_queries.media_min(desktop_1800) {
grid-template-rows: 130px auto auto;
}
@include media_queries.media_min(tablet_600) {
grid-template-columns: 1fr 500px 1fr;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 1fr 890px 1fr;
}
@include media_queries.media_min(desktop_1000) {
grid-template-columns: auto 980px auto;
}
@include media_queries.media_min(desktop_1100) {
grid-template-columns: auto 1090px auto;
}
@include media_queries.media_min(desktop_1200) {
grid-template-columns: auto 1160px auto;
}
@include media_queries.media_min(desktop_1300) {
grid-template-columns: 1fr 1250px 1fr;
}
@include media_queries.media_min(desktop_1500) {
grid-template-columns: 1fr 1420px 1fr;
}
@include media_queries.media_min(desktop_1800) {
grid-template-columns: 1fr 1700px 1fr;
}
nav {
color: $noir;
a {
color: $noir;
}
}
.header_navigation {
grid-column: 2;
grid-row: 1;
z-index: 10;
}
.obscur {
grid-column: 1 / -1;
grid-row: 1;
z-index: 5;
background-color: rgb(255 255 255 / 98%);
}
.header-img_cont {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.header-img_text {
grid-column: 2;
grid-row: 3;
color: $blanc;
width: 650px;
margin-left: 80px;
margin-bottom: 150px;
.header-img_titre {
display: inline-block;
background-color: $rouge_transparent;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase;
font-family: 'barlow_black';
font-size: 50px;
}
.header-img_description {
display: inline-block;
background-color: $rouge_transparent;
padding-bottom: 20px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
font-family: 'barlow_regular';
font-size: 20px;
}
.decouvrir {
display: flex;
.decouvrir_icone {
display: inline-block;
background-color: $rouge_transparent;
padding-top: 2px;
padding-left: 10px;
padding-right: 5px;
padding-bottom: 5px;
}
.decouvrir_texte {
display: inline-block;
background-color: $rouge_transparent;
padding-bottom: 5px;
font-family: 'barlow_regular';
font-size: 18px;
padding-right: 10px;
}
}
}
}

View File

@@ -0,0 +1,136 @@
@use '../base/colors' as *;
@use '../layout/media_queries';
.header_navigation_topbar {
display: flex;
justify-content: flex-end;
font-family: 'brandontext_regular';
font-size: 16px;
.header_nav_item {
margin-right: 30px;
&:last-child {
margin-right: 0px;
}
}
.header_nav_lang {
display: flex;
font-family: 'brandontext_medium';
.header_nav_lang_item {
margin-right: 4px;
&:last-child {
margin-right: 0px;
}
}
}
}
.header_navigation_main {
display: grid;
grid-template-rows: 1fr;
@include media_queries.media_min(tablet_600) {
grid-template-columns: 140px 1fr;
}
@include media_queries.media_min(tablet_900) {
grid-template-columns: 140px 1fr;
}
@include media_queries.media_min(desktop_1000) {
grid-template-columns: 200px 1fr;
}
@include media_queries.media_min(desktop_1200) {
grid-template-columns: 200px 1fr;
}
@include media_queries.media_min(desktop_1500) {
grid-template-columns: 240px 1fr;
}
@include media_queries.media_min(desktop_1800) {
grid-template-columns: 240px 1fr;
}
}
.header_nav_logo {
margin-top: -17px;
}
.header_nav_cont {
margin-left: 30px;
margin-right: 30px;
.header_nav {
display: flex;
justify-content: center;
font-family: 'brandontext_regular';
@include media_queries.media_min(tablet_600) {
font-size: 18px;
}
@include media_queries.media_min(tablet_900) {
font-size: 20px;
}
@include media_queries.media_min(desktop_1200) {
font-size: 22px;
}
@include media_queries.media_min(desktop_1500) {
font-size: 24px;
}
@include media_queries.media_min(desktop_1800) {
font-size: 26px;
}
.header_nav_item {
margin-right: 34px;
@include media_queries.media_min(tablet_600) {
margin-right: 20px;
}
@include media_queries.media_min(tablet_900) {
margin-right: 22px;
}
@include media_queries.media_min(desktop_1200) {
margin-right: 28px;
}
@include media_queries.media_min(desktop_1500) {
margin-right: 30px;
}
@include media_queries.media_min(desktop_1800) {
margin-right: 34px;
}
&:last-child {
margin-right: 0px;
}
}
.nav_icone {
display: flex;
.nav_icone_img {
margin-right: 6px;
@include media_queries.media_min(tablet_600) {
margin-top: 1px;
}
@include media_queries.media_min(tablet_900) {
margin-top: 1px;
}
@include media_queries.media_min(desktop_1800) {
margin-top: 2px;
}
img {
@include media_queries.media_min(tablet_600) {
width: 83%;
}
@include media_queries.media_min(tablet_900) {
width: 83%;
}
@include media_queries.media_min(desktop_1800) {
width: 100%;
}
}
}
}
}
}