Nicolas

front/css/main.css

@@ -17,6 +17,243 @@
     /* insert styles here */
 }
 
+*{
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+
+head{
+
+    background-image: url(../images/pexels-pixabay-236937.jpg);
+}
+
+.row{
+display: flex;
+justify-content: space-around;
+
+height: 80px;
+width: 100%;
+background-color: rgb(124, 122, 122);
+opacity: 0.74;
+border: none;
+z-index: 100;
+position: fixed;
+}
+
+.imglogo{
+    width: 150px;
+    height: 80px;
+}
+
+.linkpage{
+    display: flex;
+
+}
+
+a {
+    text-decoration: none;
+    box-shadow: none;
+    padding: 0px 10px 0px 20px;
+    color:white;
+}
+
+a:hover{
+
+    color: #C57ED3;
+    border-color: #C57ED3;
+
+}
+.carbone{
+    margin-left: 50px;
+    margin-top: 30px;
+    display: flex;
+
+}
+  .section1 {
+    background: url(../images/pexels-pixabay-236937.jpg);
+    width: 100%;
+    height: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-size: cover; 
+    background-position: center;
+} 
+.presentation{
+    display: flex;
+    width: 50%;
+
+    flex-direction: column;
+    align-items: center;
+    color: white;
+}
+.section2-1{
+    width: 45%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.animate__animated.animate__lightSpeedInLeft {
+    --animate-duration: 1s;
+    padding-left: 120px;
+  }
+
+.section2-2{
+
+    background: url(/front/images/carr_6893.jpg);
+    border-radius: 10px;
+    width: 50%;
+    height: 350px;
+    background-size: 100% auto; 
+    background-position: center;
+}
+.transport{
+    display: flex;
+    margin-top: 40px;
+    width: 100%;
+    height: 600px;
+
+}
+.section3-2{
+    width: 40%;
+
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+
+}
+.animate__animated.animate__lightSpeedInRight{
+    width: 60%;
+    --animate-duration: 1s;
+
+}
+
+
+.duoimg {
+    display: flex;
+    padding: 0px 10px 0px 10px;
+    width: 100%;
+  }
+.imgbus{
+
+    width: 50%;
+    height: 300px;
+    margin-left: 10px;
+    background: url(../images/Mercedes-Benz_Citaro_C2_-_RTM_Marseille-1024x576-2.jpg) no-repeat;
+    background-size: 100% auto; 
+    background-position: center;
+
+}
+.imgmetro{
+    width: 50%;
+    height: 300px;
+
+    background: url(../images/1200x680_index.jpg) no-repeat;
+    background-size: 100% auto; 
+    background-position: center;
+}
+
+.imgtram{
+    width: 97.5%;
+    height: 300px;
+    margin-left: 10px;
+    background: url(../images/768x492_tramway-marseille.jpeg) no-repeat;
+    background-size: 100% auto; 
+    background-position: center;
+
+}
+
+.recyclage{
+    display: flex;
+    margin-top: 10px;
+    width: 100%;
+    height: 500px;
+}
+.section4-1{
+    width: 50%;
+}
+.section4-2{
+    width: 50%;
+}
+.imgtri{
+
+    height: 500px;
+    background: url(../images/borne-tri-2021.jpeg) no-repeat;
+    background-size: cover; 
+    background-position: center;
+
+}
+
+.footer {
+    display: flex;
+    margin-top: 30px;
+    flex: 1;
+    flex-direction: row;
+    flex-wrap: wrap;
+    border: 1px solid #707070;
+    padding-bottom: 40px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .footer a {
+    flex-basis: 30%;
+    text-align: center;
+    padding: 10px;
+  }
+
+  .footer img {
+    height: 70px;
+    object-fit: contain;
+  }
+
+  .smaller {
+    height: 40px !important;
+  }
+/* 
+.container {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    scroll-behavior: smooth;
+    overflow: auto;
+    scroll-snap-type: y mandatory;
+
+}
+.section {
+    width: 100%;
+    height: 100vh;
+    background-size:  cover;
+
+} */
+ /* .section1 {
+    background: url(../images/pexels-pixabay-236937.jpg);
+    width: 100%;
+    height: 500px;
+
+    background-size: 100% auto; on peut utilsé un cover a la place
+    background-position: center;
+} 
+/* .section:nth-child(2) {
+    background: url(https://cdn.pixabay.com/photo/2015/06/02/12/59/narrative-794978_960_720.jpg);
+}
+.section:nth-child(3) {
+    background: url(https://cdn.pixabay.com/photo/2016/09/08/22/43/books-1655783_960_720.jpg);
+}
+.section:nth-child(3) {
+    background: url(https://cdn.pixabay.com/photo/2015/12/19/20/32/paper-1100254_960_720.jpg);
+}
+.section:nth-child(4) {
+    background: url(https://cdn.pixabay.com/photo/2016/03/26/22/21/books-1281581_960_720.jpg);
+}
+.section:nth-child(5) {
+    background: url(https://cdn.pixabay.com/photo/2014/05/03/00/46/notebook-336634_960_720.jpg);
+} */ */
+