Add wheel on every pages

MisterAzix · Oct 30, 2020 · 560285c · 560285c
1 parent cb9fba7
commit 560285c
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 14 deletions.
diff --git a/activity.html b/activity.html
@@ -258,6 +258,10 @@ <h2 style="text-align: center">RECHERCHE</h2>
         <!--========================================-->
 
         <section class="section-1">
+            <img class="wheel wheel-right wheel-1" src="img/section/weel.png" alt="Weel" />
+            <img class="wheel wheel-left wheel-2" src="img/section/weel.png" alt="Weel" />
+            <img class="wheel wheel-right wheel-3" src="img/section/weel.png" alt="Weel" />
+
             <h1 class="titre">ACTIVITÉS</h1>
 
             <div class="activity">
@@ -459,5 +463,7 @@ <h4>Recevez nos actualités</h4>
         <script src="js/toolbar.js"></script>
         <!-- Navbar -->
         <script src="js/navbar.js"></script>
+        <!-- Wheel rotation -->
+        <script src="js/wheel.js"></script>
     </body>
 </html>
diff --git a/collections.html b/collections.html
@@ -254,6 +254,9 @@ <h2 style="text-align: center">RECHERCHE</h2>
         <!--========================================-->
 
         <section class="section-1">
+            <img class="wheel wheel-right wheel-1" src="img/section/weel.png" alt="Weel" />
+            <img class="wheel wheel-left wheel-2" src="img/section/weel.png" alt="Weel" />
+
             <h1>COLLECTIONS</h1>
 
             <div class="statue">
@@ -376,7 +379,7 @@ <h2>Le Centre Jean Moulin</h2>
 
             <div class="musée-goupil">
                 <div class="img-et-description">
-                    <img src="img/section/goupil-peinture.jpg" />
+                    <img class='' src="img/section/goupil-peinture.jpg" />
                     <p class="description-goupil">
                         "Les Botteleurs", Salon de 1850, d’après Jean-François
                         Millet (1814-1875) <br />(c) mairie de Bordeaux, photo
@@ -535,5 +538,7 @@ <h4>Recevez nos actualités</h4>
         <script src="js/toolbar.js"></script>
         <!-- Navbar -->
         <script src="js/navbar.js"></script>
+        <!-- Wheel rotation -->
+        <script src="js/wheel.js"></script>
     </body>
 </html>
diff --git a/exposition.html b/exposition.html
@@ -254,10 +254,10 @@ <h2 style="text-align: center">RECHERCHE</h2>
         <!--========================================-->
 
         <section class="grande-section-1">
-            <h1>EXPOSITIONS</h1>
+            <img class="wheel wheel-right wheel-1" src="img/section/weel.png" alt="Weel" />
+            <img class="wheel wheel-left wheel-2" src="img/section/weel.png" alt="Weel" />
 
-            <img class="top-weel" src="img/section/weel.png" alt="Weel" />
-            <img class="bottom-weel" src="img/section/weel.png" alt="Weel" />
+            <h1>EXPOSITIONS</h1>
 
             <div class="section-1">
                 <img src="img/section/salle_rouge.jpg" />
@@ -472,5 +472,7 @@ <h4>Recevez nos actualités</h4>
         <script src="js/toolbar.js"></script>
         <!-- Navbar -->
         <script src="js/navbar.js"></script>
+        <!-- Wheel rotation -->
+        <script src="js/wheel.js"></script>
     </body>
 </html>
diff --git a/style/activity.css b/style/activity.css
@@ -36,11 +36,39 @@ h2 {
     color: #A32F2F;
 }
 
+/*==================== SPLITTER ====================*/
+
 .splitter {
     display: block;
     height: 400px;
 }
 
+/*==================== WHEELS ====================*/
+
+.wheel {
+    position: absolute;
+    transform-origin: center center;
+}
+
+.wheel-1 {
+    bottom: -300px;
+    left: -100px;
+    width: 500px;
+}
+
+.wheel-2 {
+    top: 500px;
+    right: -200px;
+    width: 400px;
+}
+
+
+.wheel-3 {
+    top: 200px;
+    left: -100px;
+    width: 300px;
+}
+
 /*============= Section 1 ==============*/
 
 

diff --git a/style/collections.css b/style/collections.css
@@ -43,6 +43,25 @@ h2 {
     height: 400px;
 }
 
+/*==================== WHEELS ====================*/
+
+.wheel {
+    position: absolute;
+    transform-origin: center center;
+}
+
+.wheel-1 {
+    bottom: 550px;
+    left: -100px;
+    width: 300px;
+}
+
+.wheel-2 {
+    bottom: 100px;
+    right: -200px;
+    width: 400px;
+}
+
 /*============= Statue ==============*/
 
 

diff --git a/style/exposition.css b/style/exposition.css
@@ -44,24 +44,27 @@ h2 {
     height: 400px;
 }
 
-/*============= Grande Section 1 ==============*/
+/*============= WHEELS ==============*/
 
-.top-weel {
+.wheel {
     position: absolute;
+    transform-origin: center center;
+}
+
+.wheel-1 {
     top: -300px;
     right: -300px;
     width: 600px;
-    transform-origin: center center;
 }
 
-.bottom-weel {
-    position: absolute;
-    bottom: 50px;
-    left: -400px;
-    width: 550px;
-    transform-origin: center center;
+.wheel-2 {
+    bottom: 100px;
+    left: -200px;
+    width: 400px;
 }
 
+/*============= Grande Section 1 ==============*/
+
 .grande-section-1 {
     background-color: #FFF8F3;
     position: relative;
@@ -70,6 +73,7 @@ h2 {
     padding: 200px 0px 50px;
     overflow: hidden;
 }
+
 /*============= section 1 ==============*/
 
 

diff --git a/style/shop.css b/style/shop.css
@@ -20,7 +20,7 @@ h1 {
 }
 
 .h1-margin-top {
-    margin-top: 170px;
+    margin-top: 200px;
 }
 
 h2 {
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,7 @@ h1 { @@
     }
     .h1-margin-top {
-        margin-top: 170px;
+        margin-top: 200px;
     }
     h2 {
@@ Expand Down @@