d-2022
Décrivez ici votre problème ou ce que vous cherchez à faire.
Entourez votre code en utilisant "```" pour bien le mettre en forme. (ne copiez pas trop de code)"`
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
width: 100%;;
height: auto;
margin: 0 auto;
display: block;}
header_div1{width: 60%;
margin: 0 auto;
margin-bottom: 200px;
display: flex;
justify-content: space-between;}
header{
width: 100%;
height:600px;
margin: 0 auto;
display: inline-block;
background-image: url("../images/header-bg.jpg");
background-size:cover;
background-repeat: no-repeat;
background-position: center center;
}
.logo{
width: 250px;
height: auto;
margin-top: 20px;
display: block;
}
.menu{
width: 200px;
height: auto;
margin-top: 20px;
margin-right: 300px;
float: right;
}
ul{
width: 400px;
display: flex;
justify-content: space-around;
list-style-type: none;
align-content:flex-end;
}
.menu ul li a{
text-decoration: none;
color: white;
}
display: block;
text-align: center;
margin: 0 auto;
width: 40%;}
h1{
color: white;
margin-bottom: 100px;
}
bouton{width: 150px;
height: 40px;
margin: 0 auto;
color: white;
border-radius: 5px;
background-color: #D3BF0B;
border: white;}
section1{width: 80%;
margin: 0 auto;
padding: 50px, auto 50px auto;
display: block;
justify-content: space-around;}
h2 {
text-align: center;
margin-top: 50px;
margin-bottom: 30px;
}text-align: center;
margin-bottom: 50px;
color: darkgrey;
}
.articles{
width: 90%;
height: 450px;
margin: 0 auto;
display: flex;
text-align: center;
justify-content: space-between;
}
.article_services{
width: 30%;
display: block;
text-align: center;
}
h3{
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.article_services p{
line-height: 2;
}
width: 100%;
height: auto;
display: block;
padding-top: 50px;
text-align: center;
background-color: lightgray;}
portfolio_images{width: 80%;
height: auto;
margin: 0 auto ;
padding: 80px;
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
section2 p{ display: block;
text-align: center;
margin-bottom: 30px;
font-size: 1em;
font-style: italic;
color: darkgray;}
portfolio_images article{width: 30%;
height: auto;
margin-bottom: 20px;
text-align: center;
background-color: white;}
.galerie{
width: 100%;
}
footer{
width: 100%;
}
width: 100%;
height: auto;
padding: 50px 0;
background-color: black;
background-image: url("../images/map-image.png");
background-size:cover;
background-repeat: no-repeat;
background-position: center center;}
formulaire h2{color: white;
margin-top: 50px;
margin-bottom: 50px;}
formulaire p {color: white;
text-align: center;
margin-bottom: 30px;}
form{
width: 100%;
height: auto;
margin:0 auto;
padding: 0;
display: block;
}
.form_flex{
width: 72%;
height: auto;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.coordonnees, .message{
width: 48%;
}
.coordonnees div{
width: 100%;
margin-bottom: 30px;
}
.coordonnees div input{
width: 100%;
height: 50px;
}
.message textarea{
width: 100%;
height: 210px;
}
.reseauxsociaux{
width: 30%;
height: auto;
margin: 0 auto;
}
.button{
text-align: center;
}
.button button{
padding: 10px 40px;
background-color: #FFC800;
opacity: 80%;
color: white;
font-weight: 700;
}
width: 100%;
background-color: white;
display: flex;
justify-content: space-between;}
footer p {width: 30%;
height: auto;
margin: 0 auto; }
footer div:nth-child(2){width: 30%;
height: auto;
display: flex;}
.confidentialite a {
color: black;
text-decoration: none;
}
@media screen and (max-width: 1200px){
#container{
width: 100%;
}
#section2{
flex-wrap: wrap;
}
#portfolio_images article{
width: 48%;
}
#footer{
flex-direction: column;
text-align: center;
}.header {
width: 100%;
height: auto;
margin: 50px auto;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header li a {
display: block;
padding: 20px 20px;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
background-color: white;
opacity: 60%;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
nav .menu{
width: 400px;
display: block;
color: white;
}.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
@media screen and (max-width:500px){
header{
width: 100%;
height: auto;
flex-direction: column;
}
#main_logo{
margin: 20px auto;
}
#header_div1{
width: 90%;
display: block;
margin: 0 auto;
}
.header li {
float: left;}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
.articles{
width: 100%;
height: auto;
flex-wrap: wrap;
}
.article_services{
width: 100%;
}
#portfolio_images article{
width: 100%;
}
#portfolio_images{
flex-wrap: wrap;
}
#footer{
flex-direction: column;
text-align: center;
}
.form_flex{
width: 100%;
display: block;
margin: 0 auto;
}
#infos{
width: 100%;
margin: 0 auto;
}
.coordonnees, .message{
width: 100%;
margin: 0 auto;
padding: 0 50px;}
#portfolio_images{
padding: 0; }
#title{
width: 90%;
margin-bottom: 130px;
}
.menu{
width: 100%;;
height: auto;
margin: 20px auto;
float: none;}
ul{
width: 100%;;
}
.menu ul li{
width: calc(100% / 5);
} }
`"
Ce que je veux
Décrivez ce que vous cherchez à obtenir.
Ce que j'obtiens
Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(
1 réponse
Hello, déjà je vais reposter ton code en propre x)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
container{
width: 100%;;
height: auto;
margin: 0 auto;
display: block;
}
header_div1{
width: 60%;
margin: 0 auto;
margin-bottom: 200px;
display: flex;
justify-content: space-between;
}
header{
width: 100%;
height:600px;
margin: 0 auto;
display: inline-block;
background-image: url("../images/header-bg.jpg");
background-size:cover;
background-repeat: no-repeat;
background-position: center center;
}
.logo{
width: 250px;
height: auto;
margin-top: 20px;
display: block;
}
.menu{
width: 200px;
height: auto;
margin-top: 20px;
margin-right: 300px;
float: right;
}
ul{
width: 400px;
display: flex;
justify-content: space-around;
list-style-type: none;
align-content:flex-end;
}
.menu ul li a{
text-decoration: none;
color: white;
}
title{
display: block;
text-align: center;
margin: 0 auto;
width: 40%;
}
h1{
color: white;
margin-bottom: 100px;
}
bouton{
width: 150px;
height: 40px;
margin: 0 auto;
color: white;
border-radius: 5px;
background-color: #D3BF0B;
border: white;
}
section1{
width: 80%;
margin: 0 auto;
padding: 50px, auto 50px auto;
display: block;
justify-content: space-around;
}
h2 {
text-align: center;
margin-top: 50px;
margin-bottom: 30px;
}
section1 p{
text-align: center;
margin-bottom: 50px;
color: darkgrey;
}
.articles{
width: 90%;
height: 450px;
margin: 0 auto;
display: flex;
text-align: center;
justify-content: space-between;
}
.article_services{
width: 30%;
display: block;
text-align: center;
}
h3{
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.article_services p{
line-height: 2;
}
section2{
width: 100%;
height: auto;
display: block;
padding-top: 50px;
text-align: center;
background-color: lightgray;
}
portfolio_images{
width: 80%;
height: auto;
margin: 0 auto ;
padding: 80px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
section2 p{
display: block;
text-align: center;
margin-bottom: 30px;
font-size: 1em;
font-style: italic;
color: darkgray;
}
portfolio_images article{
width: 30%;
height: auto;
margin-bottom: 20px;
text-align: center;
background-color: white;
}
.galerie{
width: 100%;
}
footer{
width: 100%;
}
formulaire{
width: 100%;
height: auto;
padding: 50px 0;
background-color: black;
background-image: url("../images/map-image.png");
background-size:cover;
background-repeat: no-repeat;
background-position: center center;
}
formulaire h2{
color: white;
margin-top: 50px;
margin-bottom: 50px;
}
formulaire p {
color: white;
text-align: center;
margin-bottom: 30px;
}
form{
width: 100%;
height: auto;
margin:0 auto;
padding: 0;
display: block;
}
.form_flex{
width: 72%;
height: auto;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.coordonnees, .message{
width: 48%;
}
.coordonnees div{
width: 100%;
margin-bottom: 30px;
}
.coordonnees div input{
width: 100%;
height: 50px;
}
.message textarea{
width: 100%;
height: 210px;
}
.reseauxsociaux{
width: 30%;
height: auto;
margin: 0 auto;
}
.button{
text-align: center;
}
.button button{
padding: 10px 40px;
background-color: #FFC800;
opacity: 80%;
color: white;
font-weight: 700;
}
footer{
width: 100%;
background-color: white;
display: flex;
justify-content: space-between;
}
footer p {
width: 30%;
height: auto;
margin: 0 auto;
}
footer div:nth-child(2){
width: 30%;
height: auto;
display: flex;
}
.confidentialite a {
color: black;
text-decoration: none;
}
@media screen and (max-width: 1200px){
#container{
width: 100%;
}
#section2{
flex-wrap: wrap;
}
#portfolio_images article{
width: 48%;
}
#footer{
flex-direction: column;
text-align: center;
}
.header {
width: 100%;
height: auto;
margin: 50px auto;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header li a {
display: block;
padding: 20px 20px;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
background-color: white;
opacity: 60%;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
nav .menu{
width: 400px;
display: block;
color: white;
}
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
@media screen and (max-width:500px){
header{
width: 100%;
height: auto;
flex-direction: column;
}
#main_logo{
margin: 20px auto;
}
#header_div1{
width: 90%;
display: block;
margin: 0 auto;
}
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
.articles{
width: 100%;
height: auto;
flex-wrap: wrap;
}
.article_services{
width: 100%;
}
#portfolio_images article{
width: 100%;
}
#portfolio_images{
flex-wrap: wrap;
}
#footer{
flex-direction: column;
text-align: center;
}
.form_flex{
width: 100%;
display: block;
margin: 0 auto;
}
#infos{
width: 100%;
margin: 0 auto;
}
.coordonnees, .message{
width: 100%;
margin: 0 auto;
padding: 0 50px;
}
#portfolio_images{
padding: 0;
}
#title{
width: 90%;
margin-bottom: 130px;
}
.menu{
width: 100%;;
height: auto;
margin: 20px auto;
float: none;
}
ul{
width: 100%;;
}
.menu ul li{
width: calc(100% / 5);
}
}Ensuite c'est quoi le problème avec le menu? tu essayes de faire quoi? (déjà il y a un petit problème, il y a beaucoup trop de code CSS pour le menu x))