updated

chase-west · Feb 20, 2024 · c11e242 · c11e242
1 parent d5a47d1
commit c11e242
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -35,13 +35,16 @@
   </header>
     <main>
       <h1>Coding Reno</h1>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
+        <path fill-rule="evenodd" d="M8 15.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm-.5-8.5a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7 11.293V7.5a.5.5 0 0 1 .5-.5z"/>
+      </svg>
     </main>
 <div class="slides">
   <div class="container marketing">
     <!-- START THE FEATURETTES -->
 
     <hr class="featurette-divider">
-    <div class="slideInFromLeft">
+    <div class="animate.slideInFromLeft">
       <div class="row featurette">
         <div class="col-md-7">
           <h2 class="featurette-heading fw-normal lh-1">Simple, weekly based projects.<span class="text-body-secondary"></span></h2>
@@ -54,7 +57,7 @@ <h2 class="featurette-heading fw-normal lh-1">Simple, weekly based projects.<spa
     </div>
 
     <hr class="featurette-divider">
-    <div class="slideInFromRight">
+    <div class="animate.slideInFromRight">
       <div class="row featurette">
         <div class="col-md-7 order-md-2">
           <h2 class="featurette-heading fw-normal lh-1">Find a community.<span class="text-body-secondary"></span></h2>
@@ -67,7 +70,7 @@ <h2 class="featurette-heading fw-normal lh-1">Find a community.<span class="text
     </div>
 
     <hr class="featurette-divider">
-    <div class="slideInFromBottom">
+    <div class="animate.slideInFromBottom">
       <div class="row featurette">
         <div class="col-md-7">
           <h2 class="featurette-heading fw-normal lh-1">Present every week.<span class="text-body-secondary"></span></h2>

diff --git a/styles.css b/styles.css
@@ -66,7 +66,17 @@ body.dark main h1 {
 }
 
 main {
-    padding: 2rem;
+  padding: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh; /* Ensure the section takes up the full height of the viewport */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Light box shadow */
+}
+
+main svg {
+  position: absolute; /* Position the arrow absolutely */
+  bottom: 20px; /* Adjust the distance from the bottom */
 }
 
 main h1 {
@@ -112,6 +122,25 @@ main h1 {
       transform: translateY(0);
     }
   }
+.animate {
+  opacity: 0;
+}
+
+.animate.slideInFromTop {
+  animation: slideInFromTop 1s ease-out forwards;
+}
+
+.animate.slideInFromBottom {
+  animation: slideInFromBottom 1s ease-out forwards;
+}
+
+.animate.slideInFromRight {
+  animation: slideInFromRight 1s ease-out forwards;
+}
+
+.animate.slideInFromLeft {
+  animation: slideInFromLeft 1s ease-out forwards;
+}
 
 
 footer {