Feature/40 scroll down (#51)

* Added mobile navigation Needs review from communication team * Add scroll down link * Closes #40 fix class name
virto-network · Aug 23, 2023 · 9c392de · 9c392de
1 parent 7d55ade
commit 9c392de
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 5 deletions.
diff --git a/_includes/down.svg b/_includes/down.svg
diff --git a/_includes/footer.liquid b/_includes/footer.liquid
@@ -1,4 +1,4 @@
-<footer>
+<footer id="footer">
         <a href="#" class="logo">
             {% include "virto_logo_small.svg" %}
         </a>

diff --git a/_includes/nav.liquid b/_includes/nav.liquid
@@ -1,3 +1,4 @@
+
 <nav class="{{ class }} top-nav" aria-label="Principal">
 	<div class="max row bold">
 		<a href="/#home" id="virto-logo" role="menuitem" aria-label="Inicio">

diff --git a/css/index.css b/css/index.css
@@ -71,6 +71,12 @@ a, button, p, .subtitle {
     align-items: center;
 }
 
+.scroll-down-link {
+	position: absolute;
+	top: 80%;
+	left: 90%;
+}
+
 /*Home*/
 #home, .top-nav { background-color: var(--clr-green-lighter);   }
 #home button { background-color: var(--clr-green-darker); }
@@ -106,6 +112,13 @@ a, button, p, .subtitle {
     #local-community .max  {
         align-content: flex-start;
     }
+	.scroll-down-link {
+		position: static;
+		margin: 2rem auto;
+		left: auto;
+		top: auto;
+		transform: none;
+	  }
 }
 
 #home .max, #presentacion .max {
@@ -262,10 +275,10 @@ a.center-arrow.dark-olive-text.boldest {
 
 /*Media queries*/
 @media screen and (max-width:1200px) {
-    figure { display: flex; } 
-    section>article { flex-direction: column; }
+    figure, .scroll-link { display: flex; } 
+    section>article, .scroll-link { flex-direction: column; }
     #local-community .max {
         align-items: start;
         gap: 2rem;
     }
-}
+}
diff --git a/index.liquid b/index.liquid
@@ -13,11 +13,16 @@ layout: index.liquid
 			<h1 class="bold">Aquí podrás construir y comerciar con comunidades <span>en todo el mundo.</span></h1>
 			<p class="regular">Sigue con nosotros y descubre cómo hacerlo.</p>
 			<button class="regular">Aprender cómo</button>
+			<a href="#footer" class="scroll-down-link dark-olive-text center-arrow">Ir al final
+				<figure class="link-arrow">
+						{% include "down.svg" %}
+				</figure>
+	 		</a>
 		</div>
 		<figure class="logo image">
 			{% include "Ilustraciones_1_Slider 1.svg" %}
 		</figure>
-	 </article>
+	</article>
 </section>
 
 <section id="presentacion">