feat: project page header with transitions (#52) by Sergestra

* feat: add header with hero section to all project pages
ASEAN-Build-The-Earth · Oct 30, 2021 · 7aee42f · 7aee42f
2 parents bb834f4 + 1ca3721
commit 7aee42f
Show file tree

Hide file tree

Showing 8 changed files with 479 additions and 45 deletions.
diff --git a/Projects/Luym_Building/index.html b/Projects/Luym_Building/index.html
@@ -41,14 +41,20 @@
       </div>
     </div>
   </nav>
-  <h1>Luym Building</h1>
-  <hr>
+  <header>
+    <div class="container">
+      <h1><i class="fas fa-palette"></i> Projects</h1>
+      <h4>Luym Building</h4>
+      <button id="scrollActivate" type="button" class="btn btn-light viewmore"><span><i class="fas fa-chevron-down"></i>
+          Explore</span></button>
+    </div>
+  </header>
   <div class="content">
     <div class="container">
       <h4>Information about Luym Building</h4>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid sunt obcaecati vitae labore, earum recusandae
         culpa unde nisi cum praesentium illo eum consequatur corrupti possimus ab eligendi quibusdam quas error.</p>
-      <h4 class="tagBlock"><i class="fas fa-images"></i> Images</h4>
+      <h4 id="scrollHere" class="tagBlock"><i class="fas fa-images"></i> Images</h4>
       <div class="imgWrapper">
         <img src="../../Assets/Images/Project_Images/Luym_Building/cover.png">
       </div>
@@ -58,7 +64,18 @@ <h4 class="tagBlock"><i class="fas fa-images"></i> Images</h4>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
-    </script>
+  </script>
+  <!-- Load jQuery -->
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+  <!-- Scroll to div animation -->
+  <script>
+    $("#scrollActivate").click(function () {
+      $('html, body').animate({
+        scrollTop: $("#scrollHere").offset().top
+      }, 600);
+    });
+  </script>
 </body>
 
 </html>
diff --git a/Projects/Luym_Building/style.css b/Projects/Luym_Building/style.css
@@ -33,21 +33,72 @@ body {
   color: black;
 }
 
-h1 {
-  text-align: center;
-  margin-top: 8px;
+/*
+NOTE: Several css properties include the !important property to overide Bootstrap's css.
+*/
+header {
+  background-image: url(https://buildtheearth.net/uploads/3042561af33a985e5ea938c3749f7f493c960dc4.png);
+  background-repeat: none;
+  background-size: cover;
+  background-position: 50% 0%;
+  position: relative;
 }
 
-.container {
-  max-width: 1440px;
-  margin: 0 auto;
+header::after {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  z-index: 1;
+  background-color: rgba(0,0,0,0.75);
+}
+
+header .container {
+  position: relative;
+  z-index: 2;
   padding: calc(var(--pt8) * 12) calc(var(--pt8) * 3);
 }
 
+header h1 {
+  font-weight: bold;
+  margin-bottom: calc(var(--pt8) * 4);
+}
+
+header h1,
+header h4 {
+  color: #ffffff;
+}
+
+header .viewmore {
+  background-color: #47bb2a !important;
+  color: #ffffff;
+  border-color: #47bb2a;
+  /* Font */
+  text-transform: uppercase;
+}
+
+header .viewmore::after {
+  background-color: #3ca123;
+}
+
+.viewmore i {
+  transition: var(--ease-out-expo);
+}
+
+header .viewmore:hover.viewmore i {
+  transform: rotate(-90deg);
+}
+
 .content {
   max-width: 800px;
   margin: 0 auto;
-  margin-bottom: calc(var(--pt8) * 6);
+}
+
+.content .container {
+  padding: calc(var(--pt8) * 12) calc(var(--pt8) * 3);
 }
 
 .content h4 {
@@ -105,3 +156,54 @@ h1 {
   /* Zoom-in effect */
   transform: scale(1.3);
 }
+
+.viewmore {
+  position: relative;
+  overflow: hidden;
+  margin-top: 1rem;
+  padding: 1rem 3rem !important;
+  background-color: #e6e6e6 !important;
+  /* Font */
+  font-size: 0.875rem !important;
+}
+
+.viewmore:hover {
+  background-color: #dddddd !important;
+}
+
+.viewmore span {
+  position: relative;
+  z-index: 3;
+}
+
+.viewmore:hover.viewmore span {
+  color: #ffffff;
+}
+
+.viewmore::after {
+  content: "";
+  width: 0;
+  height: 100%;
+  background-color: var(--bs-dark);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  /* Transition */
+  transition: var(--ease-out-expo);
+}
+
+.viewmore:hover:after {
+  width: 100%;
+}
+
+@media (max-width: 770px) {
+  header h1,
+  header h4 {
+    text-align: center;
+  }
+
+  header .viewmore {
+    width: 100%;
+  }
+}
diff --git a/Projects/Mandalay_Palace/index.html b/Projects/Mandalay_Palace/index.html
@@ -41,14 +41,20 @@
       </div>
     </div>
   </nav>
-  <h1>Mandalay Palace</h1>
-  <hr>
+  <header>
+    <div class="container">
+      <h1><i class="fas fa-palette"></i> Projects</h1>
+      <h4>Mandalay Palace</h4>
+      <button id="scrollActivate" type="button" class="btn btn-light viewmore"><span><i class="fas fa-chevron-down"></i>
+          Explore</span></button>
+    </div>
+  </header>
   <div class="content">
     <div class="container">
       <h4>Information about Mandalay Palace</h4>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid sunt obcaecati vitae labore, earum recusandae
         culpa unde nisi cum praesentium illo eum consequatur corrupti possimus ab eligendi quibusdam quas error.</p>
-      <h4 class="tagBlock"><i class="fas fa-images"></i> Images</h4>
+      <h4 id="scrollHere" class="tagBlock"><i class="fas fa-images"></i> Images</h4>
       <div class="imgWrapper">
         <img src="../../Assets/Images/Project_Images/Mandalay_Palace/cover.png">
       </div>
@@ -62,13 +68,21 @@ <h4 class="tagBlock"><i class="fas fa-images"></i> Images</h4>
       <div class="imgWrapper">
         <img src="../../Assets/Images/Project_Images/Mandalay_Palace/2.png">
       </div>
-      <br>
-      <br>
     </div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
-    </script>
+  </script>
+  <!-- Load jQuery -->
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+  <!-- Scroll to div animation -->
+  <script>
+    $("#scrollActivate").click(function () {
+      $('html, body').animate({
+        scrollTop: $("#scrollHere").offset().top
+      }, 600);
+    });
+  </script>
 </body>
 
 </html>
diff --git a/Projects/Mandalay_Palace/style.css b/Projects/Mandalay_Palace/style.css
@@ -33,21 +33,72 @@ body {
   color: black;
 }
 
-h1 {
-  text-align: center;
-  margin-top: 8px;
+/*
+NOTE: Several css properties include the !important property to overide Bootstrap's css.
+*/
+header {
+  background-image: url(https://buildtheearth.net/uploads/3042561af33a985e5ea938c3749f7f493c960dc4.png);
+  background-repeat: none;
+  background-size: cover;
+  background-position: 50% 0%;
+  position: relative;
 }
 
-.container {
-  max-width: 1440px;
-  margin: 0 auto;
+header::after {
+  display: block;
+  content: '';
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  z-index: 1;
+  background-color: rgba(0,0,0,0.75);
+}
+
+header .container {
+  position: relative;
+  z-index: 2;
   padding: calc(var(--pt8) * 12) calc(var(--pt8) * 3);
 }
 
+header h1 {
+  font-weight: bold;
+  margin-bottom: calc(var(--pt8) * 4);
+}
+
+header h1,
+header h4 {
+  color: #ffffff;
+}
+
+header .viewmore {
+  background-color: #47bb2a !important;
+  color: #ffffff;
+  border-color: #47bb2a;
+  /* Font */
+  text-transform: uppercase;
+}
+
+header .viewmore::after {
+  background-color: #3ca123;
+}
+
+.viewmore i {
+  transition: var(--ease-out-expo);
+}
+
+header .viewmore:hover.viewmore i {
+  transform: rotate(-90deg);
+}
+
 .content {
   max-width: 800px;
   margin: 0 auto;
-  margin-bottom: calc(var(--pt8) * 6);
+}
+
+.content .container {
+  padding: calc(var(--pt8) * 12) calc(var(--pt8) * 3);
 }
 
 .content h4 {
@@ -105,3 +156,58 @@ h1 {
   /* Zoom-in effect */
   transform: scale(1.3);
 }
+
+.viewmore {
+  position: relative;
+  overflow: hidden;
+  margin-top: 1rem;
+  padding: 1rem 3rem !important;
+  background-color: #e6e6e6 !important;
+  /* Font */
+  font-size: 0.875rem !important;
+}
+
+.viewmore:hover {
+  background-color: #dddddd !important;
+}
+
+.viewmore span {
+  position: relative;
+  z-index: 3;
+}
+
+.viewmore:hover.viewmore span {
+  color: #ffffff;
+}
+
+.viewmore::after {
+  content: "";
+  width: 0;
+  height: 100%;
+  background-color: var(--bs-dark);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  /* Transition */
+  transition: var(--ease-out-expo);
+}
+
+.viewmore:hover:after {
+  width: 100%;
+}
+
+.btn {
+  margin-left: 0 !important;
+}
+
+@media (max-width: 770px) {
+  header h1,
+  header h4 {
+    text-align: center;
+  }
+
+  header .viewmore {
+    width: 100%;
+  }
+}