lets push on droplet

main_project/settings.py

@@ -1,5 +1,7 @@
 from pathlib import Path
 
+#rajouter une section 'ceux qui nous ont déjà fait confiance'
+
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent

vc_website/static/main.js

@@ -74,26 +74,59 @@ let silverBtn = document.getElementById('silver');
 let simpleBtn = document.getElementById('simple');
 let mainBtn = document.getElementById('main');
 
+let silvSpeech = document.getElementById('silBSpeech');
+let simpSpeech = document.getElementById('simBSpeech');
+let mainSpeech = document.getElementById('mainBSpeech');
+
+let silverPrise = document.getElementById('silverPrise');
+let simplePrise = document.getElementById('simplePrise');
+let mainPrise = document.getElementById('mainPrise');
+
 function silver() {
 
     silverBtn.classList.add('active');
+    silvSpeech.classList.add('active');
+    silverPrise.classList.add('active');
+
     simpleBtn.classList.remove('active');
+    simpSpeech.classList.remove('active'); 
+    simplePrise.classList.remove('active');
+
     mainBtn.classList.remove('active');
+    mainSpeech.classList.remove('active');
+    mainPrise.classList.remove('active');
+
 
 }
 
 function main() {
 
-    silverBtn.classList.remove('active');
-    simpleBtn.classList.remove('active');
     mainBtn.classList.add('active');
+    mainSpeech.classList.add('active');
+    mainPrise.classList.add('active');
+
+    simpleBtn.classList.remove('active');
+    simpSpeech.classList.remove('active');
+    simplePrise.classList.remove('active');
+
+    silverBtn.classList.remove('active');
+    silvSpeech.classList.remove('active');
+    silverPrise.classList.remove('active');
 
 }
 
 function simple() {
 
-    silverBtn.classList.remove('active');
     simpleBtn.classList.add('active');
+    simpSpeech.classList.add('active');
+    simplePrise.classList.add('active');
+
+    silverBtn.classList.remove('active');
+    silvSpeech.classList.remove('active');
+    silverPrise.classList.remove('active');
+
     mainBtn.classList.remove('active');
+    mainSpeech.classList.remove('active');
+    mainPrise.classList.remove('active');
 
 }

vc_website/static/vc_website/carousel.css

@@ -0,0 +1,76 @@
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-600px);
+  }
+}
+.slider-container {
+  padding-top: 30px;
+  background-color: #f1f1f1;
+  height: 150px;
+  display: flex;
+  width: 100%;
+  margin: 0px auto;
+  flex-direction: column;
+  justify-content: center;
+  justify-content: center;
+}
+.slider-container .title {
+  width: 80%;
+  max-width: 600px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+}
+.slider-container .title .line {
+  height: 2px;
+  width: 100%;
+  max-width: 600px;
+  background-color: #8e55ed;
+}
+.slider-container .title h3 {
+  font-family: "area-normal", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  color: #2e2e35;
+  width: max-content;
+}
+
+.slider {
+  background: #f1f1f1;
+  height: 200px;
+  margin: auto;
+  overflow: hidden;
+  position: relative;
+  width: 80%;
+  max-width: 600px;
+  display: flex;
+  align-content: center;
+}
+.slider::after {
+  right: 0;
+  top: 0;
+  transform: rotateZ(180deg);
+}
+.slider::before {
+  left: 0;
+  top: 0;
+}
+.slider .slide-track {
+  animation: scroll 40s linear infinite;
+  display: flex;
+  align-items: center;
+  width: 600px;
+}
+.slider .slide {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.slider .slide img {
+  width: 150px;
+  height: 75px;
+  margin: 0px 30px;
+}/*# sourceMappingURL=carousel.css.map */

vc_website/static/vc_website/carousel.scss

@@ -0,0 +1,110 @@
+// colors
+$navbar: #d4b8d7;
+$links: #333;
+$logo: #8e55ed;
+
+$lightBlack: #1f1f23;
+$black: #0e0e10;
+$middleBlack: #18181b;
+$heavyBlack: #2e2e35;
+
+$white: #f1f1f1;
+$whiteGrey: #eaeaea;
+
+
+@mixin white-gradient {
+    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+$animationSpeed: 40s;
+
+// Animation
+@keyframes scroll {
+    0% {
+        transform: translateX(0);
+    }
+
+    100% {
+        transform: translateX(calc(-150px * 4))
+    }
+}
+
+
+// Styling
+.slider-container {
+    padding-top: 30px;
+    background-color: $white;
+    height: 150px;
+    display: flex;
+    width: 100%;
+    margin: 0px auto;
+    flex-direction: column;
+    justify-content: center;
+    justify-content: center;
+
+    .title {
+        width: 80%;
+        max-width: 600px;
+        margin: auto;
+        display: flex;
+        flex-direction: column;
+
+        .line {
+            height: 2px;
+            width: 100%;
+            max-width: 600px;
+            background-color: $logo;
+        }
+
+        h3 {
+            font-family: "area-normal", sans-serif;
+            font-weight: 700;
+            font-style: normal;
+            color: #2e2e35;
+            width: max-content;
+        }
+
+    }
+}
+
+.slider {
+    background: $white;
+    height: 200px;
+    margin: auto;
+    overflow: hidden;
+    position: relative;
+    width: 80%;
+    max-width: 600px;
+    display: flex;
+    align-content: center;
+
+    &::after {
+        right: 0;
+        top: 0;
+        transform: rotateZ(180deg);
+    }
+
+    &::before {
+        left: 0;
+        top: 0;
+    }
+
+    .slide-track {
+        animation: scroll $animationSpeed linear infinite;
+        display: flex;
+        align-items: center;
+        width: calc(150px * 4);
+    }
+
+    .slide {
+        display: flex;
+        justify-content: center;
+        align-content: center;
+
+        img {
+            width: 150px;
+            height: 75px;
+            margin: 0px 30px;
+        }
+    }
+}

vc_website/static/vc_website/header.css

@@ -149,7 +149,7 @@ header .absoluteBtn .divcoverMore {
   justify-content: center;
   align-items: center;
   text-decoration: none;
-  color: #8e55ed;
+  color: #f1f1f1;
   overflow: hidden;
 }
 header .absoluteBtn .divcoverMore .bgLink {
@@ -172,4 +172,22 @@ header .absoluteBtn .divcoverMore:hover i, header .absoluteBtn .divcoverMore:foc
 }
 header .absoluteBtn .divcoverMore:hover .bgLink, header .absoluteBtn .divcoverMore:focus .bgLink {
   left: 0px;
+}
+header .titleH1 {
+  color: #f1f1f1;
+  position: absolute;
+  bottom: 220px;
+  left: 7%;
+  width: 80%;
+}
+header .titleH1 span {
+  border-bottom: 3px solid #8e55ed;
+}
+@media (max-width: 800px) {
+  header .titleH1 {
+    font-size: 1.5em;
+  }
+  header .titleH1 br {
+    display: none;
+  }
 }/*# sourceMappingURL=header.css.map */

vc_website/static/vc_website/header.scss

@@ -218,7 +218,7 @@ header {
             align-items: center;
 
             text-decoration: none;
-            color: $logo;
+            color: $white;
 
             overflow: hidden;
 
@@ -252,5 +252,26 @@ header {
         }
     }
 
+    // H1 title 
+    .titleH1 {
+        color: $white;
+        position: absolute;
+        bottom: 220px;
+        left: 7%;
+        width: 80%;
+
+        span {
+            border-bottom: 3px solid $logo;
+        }
+    }
 
+    @media (max-width: 800px) {
+        .titleH1 {
+            font-size: 1.5em;
+
+            br {
+                display: none;
+            }
+        }
+    }
 }