html{ scroll-behavior: smooth; } body{ margin: 0; font-family: Arial, Helvetica, sans-serif; background-image: url("Images/bg.jpg"); background-attachment: fixed; background-repeat: no-repeat; } /*NAVBAR*/ a{ color: black; text-decoration: none; } .header{ background-color: white; width: 100%; z-index: 3; overflow: auto; position: fixed; } .header ul{ margin: 0; padding : 0; list-style: none; overflow: hidden; background-color: white; } .header ul a{ display: block; padding: 20px; border-right: 1px solid #aaa; text-decoration: none; } .header ul a:hover{ background-color: #ddd; } .header ul input{ display: block; font-size: 20px; padding: 0.1vw; margin-left: 3%; border: none; border-bottom: 0.2vw solid grey; margin-top: 0; } .header ul input:focus{ border-bottom: 0.2vw solid rgb(20, 178, 231); background-color: rgba(0,0,0,0.1); transition-duration: 0.2s; } .header .logo { float: left; display: block; font-size: 2em; text-decoration : none; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; padding: 10px 20px; } .header .menu { clear: both; max-height: 0; transition: max-height 0.3s ease-out; } .header .menu-icon{ padding: 28px 20px; position: relative; float: right; cursor: pointer; } .header .menu-icon .nav-icon{ background: #333; display: block; height: 2px; width: 18px; position: relative; transition: background 0.2s ease-out; } .header .menu-icon .nav-icon:before{ background: #333; content:""; display: block; height: 100%; position: absolute; width: 100%; top: 5px; transition: all 0.2s ease-out; } .header .menu-icon .nav-icon:after{ background: #333; content:""; display: block; height: 100%; position: absolute; width: 100%; transition: all 0.2s ease-out; top: -5px; } .header .menu-btn{ display: none; } .header .menu-btn:checked ~ .menu{ max-height: 240px; } .header .menu-btn:checked ~ .menu-icon .nav-icon{ background-color: transparent; } .header .menu-btn:checked ~ .menu-icon .nav-icon:before{ transform: rotate(-45deg); top: 0; } .header .menu-btn:checked ~ .menu-icon .nav-icon:after{ transform: rotate(45deg); top: 0; } /*======================================== 1990 652*/ /*Slide des promotions*/ div#slider { width: 100%; max-width: 1920px; margin: auto; } div#slider figure { position: relative; width: 500%; margin: 0; padding: 0; font-size: 0; text-align: left; } div#slider figure img { width: 20%; height: auto; float: left; } div#slider { width: 100%; max-width: 1920px; overflow: hidden } @keyframes slidy { 0% {left: 0%;} 20% {left: 0%;} 25% {left: -100%;} 45% {left: -100%;} 50% {left: -200%;} 70% {left: -200%;} 75% {left: -300%;} 95% {left: -300%;} 100% {left: -400%;} } div#slider figure { position: relative; width: 500%; margin: 0; padding: 0; font-size: 0; left: 0; text-align: left; animation: 16s slidy infinite; } /*============================================*/ /* TOUT NOS PRODUITS*/ .flex-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; background-color: rgb(234, 234, 234); } .flex-container>div { box-shadow: 0.3vw 0.3vw 2px grey; width: 40%; margin: 1vw; text-align: center; font-size: 30px; } .flex-container>div>a>img{ width: 50%; } .flex-container>div>a>p{ font-size: 40px; } .flex-container .ok:hover a>img{ width: 100%; transition-duration: 0.5s; } .title{ padding: 5vw 1vw; background-color: rgba(255, 255, 255, 0.548); } .title>h1{ font-size: 60px; text-align: center; color: rgb(0, 0, 0); } .spec{ text-align: left; font-size: 25px; background-color: rgba(255, 255, 255, 0.651); color: black; width: 100%; } .rupt{ text-align: center; float: right; z-index: 3; background-color: rgba(0, 0, 0, 0.829); color: red; width : 100%; font-size: 25px; } .out{ opacity: 0.4; } .top{ padding: 5vw 1vw; } .top>h1{ color: white; font-size: 60px; text-align: center; } .top>h2{ font-size: 50px; color: rgb(204, 204, 204); text-align: center; } /*============================================*/ /* QUI SOMMES NOUS ?*/ .content { background-color: rgb(234, 234, 234); padding: 1vw; } #nous table{ width: 100%; margin-top: 2%; } #nous img{ display: block; margin: auto; border-radius: 1vw; width: 30%; margin-bottom: 3%; } #nous h2{ font-size: 40px; padding-top: 2vw; margin: 0; } #nous h3{ color: rgb(53, 53, 53); } #nous td{ text-align: center; } #nous ul { list-style-type: none; }