body { display: flex; flex-direction: column; background-image: url("images/background.png"); background-size: cover; align-items: center; justify-content: center; font-family: sans-serif, monospace; } *{ padding: 0px; margin: 0px; } html { height: auto; width: auto; } div.container { display: flex; flex-direction: column; box-sizing: content-box; width: 100%; height: auto; margin: 0px; justify-content: center; align-items: center; } div { margin: 20px; } /* ---------------- Container --------------- */ div.box { display: flex; flex-direction: column; border-radius: 10px; background-color: #236427; width: 50%; font-size: 100%; height: auto; padding: 20px; background-color: rgba(56,156,62, 0.7); align-items: center; } div.dual_box { display: flex; width: 100%; height: auto; margin: 10px; overflow: hidden; justify-content: space-evenly; } div.dual_box31 { display: flex; flex-direction: column; width: 100%; height: auto; margin: 10px; overflow: hidden; justify-content: space-evenly; align-items: center; } img.dual_img { width: 40%; height: 100%; } img.img3 { width: 50%; height: 70%; } div.texti{ display: flex; flex-direction: column; justify-content: space-evenly; align-items: flex-start; } /* ----------- Barre de navigation ------------ */ .topnav { display: flex; flex-direction: row; justify-content: space-evenly ; align-items: center; width: 100%; background-color: #236427; overflow: hidden; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: #04AA6D; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; display: flex; flex-direction: column; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } /* ----------- RESTE ------------ */ div { margin: 20px; } div.box3 { display: flex; flex-direction: column; border-radius: 10px; background-color: rgba(56,156,62, 0.7); width: 60%; height: auto; padding: 20px; justify-content: space-evenly; align-items: center; } /* Produits */ div.box2 { display: flex; flex-direction: column; background-color: rgba(35,100,39, 0.5); width: 1000px; height: 900px; padding: 20px; justify-content: space-evenly; align-items: center; } div.choix { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; } div.s1 { display: flex; flex-direction: row; background-color: rgba(56,156,62, 0.7); width: 500px; height: 150px; padding: 20px; justify-content: space-evenly; align-items: center; border-radius: 10px; } .l { display: block; color: white; text-align: center; text-decoration: none; } .pres { width: 170px; } .pres2 { height: 150px; } .imgvend { height: 300px; margin-left: 20px; } .imgvend2 { width: 250px; margin-left: 20px; } .vend { width: 550px; height: 350px; display: flex; flex-direction: row; background-color: rgba(56,156,62, 0.7); justify-content: space-evenly; align-items: center; border-radius: 10px; } .texte { margin-left: 50px; } /*Qui sommes nous*/ div.s2 { display: flex; flex-direction: row; background-color: rgba(56,156,62, 0.7); width: 500px; height: 150px; padding: 20px; justify-content: space-evenly; align-items: center; border-radius: 10px; text-align:center; } div.s3 { display: flex; flex-direction: column; background-color: rgba(56,156,62, 0.7); width: 300px; height: 450px; padding: 20px; justify-content: space-evenly; align-items: center; border-radius: 10px; text-align:center; } .imgqsn { height: 250px; } .acv { text-decoration:none; color: #ffffff; } /* ---------- FOOTER --------- */ .footer{ display: flex; position: relative; justify-content: center; background-color: #236427; width: 100%; } /* ---------- Contact ----------- */ fieldset{ font-size: larger; width: 500px; border:transparent; } input { width: 100%; height: 20px; background-color: #d2d6d9; border-radius: 5px; } textarea.message{ height: 200px; width: 100% ; display: block; background-color: #d2d6d9; border-radius: 5px; font-size: 15px; resize: none; } input.send{ height: 25px; width: 20%; margin-left: 40%; } button.haut{ font-size: 200%; text-align: center; position: fixed; width: 50px; height: 50px; border: transparent; border-radius: 45px; left: calc(100% - 55px); bottom: 5px; } /* Tissu */ div.texte2 p{ margin-left: 30px; } div.texte2 { display: block; font-size: 100%; background-color: rgba(56,156,62, 0.7); border-radius: 10px; } div.texte2 ol.liste1{ list-style-type: "-"; } div.texte2 ol li{ float:none; margin-left: 10%; } div.texte2 img{ width: 15%; display: block; margin-left: auto; margin-right: auto; padding-right: 130px; } div.transfo img{ width: 40%; } div.textile img{ width: 30%; } div.texte2 ol{ list-style-type: upper-roman; } /*burger menu*/