Landing page fini (sauf carroussel et responsive)

Author: ClaireAmor

assets/css/styles.css

@@ -8,6 +8,7 @@
     margin: 0;
     padding: 0;
     font-family: 'Roboto', sans-serif;
+    scroll-behavior: smooth;
 }
 
 ul, ol {
@@ -35,10 +36,24 @@ h2 {
     font-family: 'Futura', sans-serif;
     font-size: 50px;
     letter-spacing: 0.2rem;
+    color: #3ED899;
+}
+
+h3 {
+    font-family: 'Futura', sans-serif;
+    font-size: 30px;
+    color: #062B51;
+}
+
+.color-title-background {
     color: #062B51;
 }
 
 /*Header*/
+header {
+    background-image: url("../images/background.png");
+    background-size: cover;
+}
 .main-header {
     height: 100vh;
     display: flex;
@@ -51,12 +66,11 @@ h2 {
     height: 100%;
 }
 .text-content {
-    background-image: url("../images/header/Fond.jpg");
     background-size: cover;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    flex:7;
+    flex:6;
     padding-left: 125px;
 }
 
@@ -70,7 +84,7 @@ h2 {
 }
 
 .text-content p {
-    font-size: 18px;
+    font-size: 30px;
 }
 
 form {
@@ -90,12 +104,13 @@ form {
     font-size: 18px;
     border-radius: 100px 0 0 100px;
     color: rgba(0, 0, 0, .46);
+    margin-right: -1px;
 }
 
 .input-button-mail {
     margin-left: -4px;
     border-radius: 0 100px 100px 0;
-    color: #062B51;
+    color: #3ED899;
     font-weight: 700;
 }
 
@@ -105,18 +120,16 @@ form {
 }
 
 .img-content {
-    background-color: white;
     display: flex;
     align-items: center;
     justify-content: center;
-    flex:3;
+    flex:4;
 }
 
 .mocup-size {
     width: auto;
-    height: 120%;
+    height: 100%;
     position: absolute;
-    transform: rotate(-10deg);
     top: 0;
 }
 
@@ -136,19 +149,23 @@ form {
     50%  {bottom: 5%;}
     100% {bottom: 3%;}
 }
+
+
 /*About Us*/
 
 .about-us-content {
-    margin: 0 125px;
+    margin: 80px 125px;
     display: grid;
-    grid-template-columns: 50% 50%;
+    grid-template-columns: 65% 35%;
     height: 70vh;
     overflow: hidden;
 }
 
 .text-about-us {
     font-size: 24px;
     padding-top: 20px;
+    display: flex;
+    position: relative;
 }
 
 .text-content-about-us {
@@ -168,24 +185,60 @@ form {
 }
 
 .img-about-us {
-    height: 100%;
-    width: 100%;
+    height: 80%;
+}
+
+
+/*Etapes*/
+#section-steps {
+    padding: 80px 125px;
+    background-color: #FFE1E8;
+    display: grid;
+    grid-template-columns: 40% 60%;
+    /* height: 70vh; */
+    overflow: hidden;
+}
+
+.title-step {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+}
+
+.step {
+    display: flex;
+    flex-direction: inline;
+}
+
+.step p {
+    font-size: 24px;
+    margin-top: 10px;
+}
+
+.image-content-step {
+    width: 400px;
+}
+
+.text-content-step {
+    display: flex;
+    margin-left: 25px;
+    flex-direction: column;
+    justify-content: center;
 }
 
 /*Questions*/
 #section-question {
     padding: 115px 250px;
-    background-color: #062B51;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }
 #question {
     font-family: 'Futura', sans-serif;
-    font-size: 70px;
+    font-size: 50px;
     margin-bottom: 50px;
-    color: #FFF8F3;
 }
 
 .questions {
@@ -198,7 +251,7 @@ form {
     width: 100%;
     margin: 10px 0;
 
-    background-color: #FFF8F3;
+    border-bottom: #062B51 1px solid;
 
     cursor: pointer;
 }
@@ -211,8 +264,7 @@ form {
 }
 
 .questions img {
-    padding-right: 20px;
-    height: 16px;
+    height: 50px;
 }
 
 .social-icon-facebook {
@@ -230,28 +282,53 @@ form {
     height: 50px;
 }
 
+
+.avis {
+    text-align: center;
+    padding: 50px 0;
+}
+
+/*Downoad*/ 
+
+#section-download {
+    padding: 80px 250px ;
+    background-color: #3ED899;
+    text-align: center;
+}
+
+#section-download p {
+
+    margin: 25px 0;
+    font-size: 24px;
+}
+
 /*Footer*/
 
 footer {
-    padding: 100px 375px;
+    position: relative;
+    height: auto;
+    padding: 50px 375px 0 375px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    border-top: 1px solid #062B51;
+}
+
+.logo-footer {
+    margin: 30px 0 0 0;
 }
 
 .content-footer{
     display: contents;
 }
 
 #slogan {
-    margin: 30px 0 70px 0;
     font-size: 17px;
     color: #062B51;
     opacity: .5;
 }
 #menu {
+    margin: 100px 0;
     width: 100%;
     display: flex;
     justify-content: space-between;
@@ -274,8 +351,11 @@ footer {
 }
 
 #network {
-    margin-top: 70px;
+    height: auto;
     width: 200px;
     display: flex;
     justify-content: space-between;
+    position: absolute;
+    top: 85px;
+    right: 80px;
 }

assets/images/button/AppStore.png assets/images/AppStore.png

@@ -1 +1,55 @@
-let isScrollable = [];
+// let idScrollable = [
+//   "section-presentation",
+//   "section-about-us",
+//   "section-steps",
+//   "section-question",
+//   "section-footer",
+// ];
+
+// let resetScrollDeltaHandle;
+
+// let index = 0;
+// let delta = 0;
+// let minDelta = 20;
+
+// let count = 0;
+
+// function next() {
+//   console.log(delta);
+
+//   if (delta > 0) {
+//     index++;
+//   } else {
+//     index--;
+//   }
+
+//   if (index < 0) {
+//     index = idScrollable.length - 1;
+//   }
+
+//   if (index > idScrollable.length - 1) {
+//     index = 0;
+//   }
+
+//   window.location.href = "#" + idScrollable[index];
+//   delta = 0;
+// }
+
+// window.addEventListener(
+//   "wheel",
+//   (event) => {
+//     event.preventDefault();
+//     event.stopPropagation();
+//     window.clearTimeout(resetScrollDeltaHandle);
+//     delta += event.deltaY * 0.01;
+//     if (delta > minDelta || delta < -minDelta) {
+//       next();
+//     }
+//     count++;
+//     console.log(count);
+//     resetScrollDeltaHandle = window.setTimeout(() => {
+//       delta = 0;
+//     }, 100);
+//   },
+//   { passive: false }
+// );