html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}
body{
min-height: 100vh;
}
main{
min-height: 100vh;
}
footer p, footer a{
color: rgb(222, 222, 222);
text-decoration: none;
}
footer{
height: 17px;
width: 100%;
background-color: rgb(72, 72, 72);
}
.footer1{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 20px;
margin-right: 20px;
}
@media all and (min-width:481px){
#nav2{
display: none;
}
header nav ul{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
header nav ul li a{
color: rgb(222, 222, 222);
text-decoration: none;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
header{
background-color: rgb(72, 72, 72);
}
.div_listing{
}
.a{
font-size: 60px;
text-decoration: none;
}
.ad{
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
height: 100vh;
padding-top: 150px;
}
#main1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.conteneur{
margin: 40px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
min-height: 100vh;
width: 65%;
}
.conteneur li{
display: flex;
flex-direction: column;
align-items: center;
}
.img_listing{
width: 300px;
height: 425px;
}
.img_listing:hover{
transform: scale(1.01);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.img_modif{
width: 50px;
}
#logo{
width: 40px;
}
.top{
height: 100px;
border-bottom: solid 2px black;
width: 86%;
}
.top h1{
text-align: center;
padding-top: 40px;
font-size: 40px;
}
.reponse_txt{
text-align: center;
padding-top: 40px;
font-size: 40px;
}
.top1{
display: flex;
flex-direction: column;
align-items: center;
}
.form_r2{
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
main .form_r1{
background-color: rgb(235, 235, 235);
border: solid 1px black;
width: 600px;
height: 300px;
border-radius: 25px;
}
#form_r{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
#label_r{
font-size: 30px;
}
#input_r{
width: 80%;
height: 10%;
border-radius: 25px;
}
#input_re{
width: 30%;
height: 10%;
border-radius: 25px;
}
.p_1{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 40px;
text-align: center;
position: absolute;
top: 40%;
right: 37%;
width: 400px;
height: 200px;
background-color: rgba(184, 184, 184, 0.7);
border-radius: 25px;
}
#img_shop1{
position: relative;
width: 100%;
height: 100%;
}
}
@media all and (max-width: 480px) {
#nav1 {
display: none;
}
#nav2 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: relative; /* Ajout du positionnement relatif */
}
.menu {
display: none;
z-index: 1000;
position: absolute; /* Ajout du positionnement absolu */
top: 100%; /* Position sous la barre de navigation */
left: 0; /* Alignement à gauche */
background-color: rgb(72, 72, 72); /* Couleur de fond */
width: 100%; /* Largeur pleine */
padding: 10px 0; /* Espacement intérieur */
box-sizing: border-box; /* Boîte de dimension incluse */
}
.bouton {
background-color: rgb(72, 72, 72); /* Couleur de fond */
color: rgb(222, 222, 222); /* Couleur du texte */
border: none;
padding: 5px 10px;
cursor: pointer;
position: absolute; /* Ajout du positionnement absolu */
top: 0; /* Alignement en haut */
right: 0; /* Alignement à droite */
}
#img_menu{
width:25px ;
}
.bouton:hover {
background-color: rgb(52, 52, 52); /* Couleur de fond au survol */
}
header nav ul li a {
color: rgb(222, 222, 222);
text-decoration: none;
}
li {
list-style: none;
}
header {
background-color: rgb(72, 72, 72);
}
.conteneur {
margin: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.conteneur li{
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.img_listing {
width: 300px;
height: 425px;
}
.img_listing:hover{
transform: scale(1.01);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
#logo {
width: 40px;
margin-left: 7%;
}
.top{
height: 100px;
border-bottom: solid 2px black;
width: 86%;
}
.top h1{
text-align: center;
padding-top: 40px;
font-size: 35px;
}
.top1{
display: flex;
flex-direction: column;
align-items: center;
}
.form_r2{
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
}
main .form_r1{
background-color: rgb(235, 235, 235);
border: solid 1px black;
width: 300px;
height: 400px;
border-radius: 25px;
}
#form_r{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
#label_r{
font-size: 30px;
}
#input_r{
width: 80%;
height: 10%;
border-radius: 25px;
}
#input_re{
width: 30%;
height: 10%;
border-radius: 25px;
}
.reponse_txt{
text-align: center;
padding-top: 30px;
font-size: 30px;
}
.p_1{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 20px;
text-align: center;
position: absolute;
top: 15%;
right: 30%;
width: 200px;
height: 100px;
background-color: rgba(184, 184, 184, 0.7);
border-radius: 25px;
}
#img_shop1{
position: relative;
width: 100%;
height: 100%;
}
}
/* Ajout de style pour le menu déroulant */
.menu.show {
display: block;
}