From 30886f80d5d50464c7471161fb3dd0412dc3ff7e Mon Sep 17 00:00:00 2001
From: ail3ngrimaldi <ailengrimaldi1@gmail.com>
Date: Fri, 4 Aug 2023 13:11:27 -0300
Subject: [PATCH] Section 5 responsive

Changed way to add svg, unable to resize it to a smaller width. Fixed font-sizes, weights and text-alignment
---
 css/index.css     | 21 ++++++++++------
 img/underline.svg | 63 +++++++++++++++++++++++++++++++++++++++++++++++
 index.liquid      |  7 ++----
 3 files changed, 78 insertions(+), 13 deletions(-)
 create mode 100644 img/underline.svg

diff --git a/css/index.css b/css/index.css
index 88703f6..d8142aa 100644
--- a/css/index.css
+++ b/css/index.css
@@ -231,20 +231,17 @@ a.center-arrow.dark-olive-text.boldest {
 #you-decide { background-color: var(--clr-lavender-lightest); flex-direction: column; gap:5rem;}
 #you-decide h2 {
     text-align: center;
+    font-size: clamp(2.5rem, 5vw, 5.75rem);
     line-height: 1;
 }
+
+#you-decide h3 { text-align: center;}
 #you-decide h2 span {
     display: block;
     margin-bottom: 5px;  
 }
-#you-decide h2 figure svg{
-    width: 30vw;
-    height: auto;
-    position: relative;
-    bottom: 70px;
-}
 
-#you-decide button { background-color: var(--clr-green-darker); margin: -3rem 0 6rem 0; }
+#you-decide button { background-color: var(--clr-green-darker); margin: -3rem 0 3rem 0; }
 #you-decide>article.max {
     align-items: center;
 	display: flex;
@@ -259,12 +256,20 @@ a.center-arrow.dark-olive-text.boldest {
     align-items: center;
     justify-content: center;
     text-align: center;
+    gap: 2em;
 }
 
 #you-decide>article svg {
     fill: var(--clr-olive-darker);
     height: 4rem; width: 4rem;
-    margin-bottom: 1.5rem;
+}
+
+.underlined-element::after {
+    content: url('../img/underline.svg');
+    position: relative;
+    bottom: 3vh;
+    width: 10vw;
+    height: auto;
 }
 
 /*Media queries*/
diff --git a/img/underline.svg b/img/underline.svg
new file mode 100644
index 0000000..6424d6b
--- /dev/null
+++ b/img/underline.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 542.4 20.3" style="enable-background:new 0 0 542.4 20.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#85DA8B;}
+	.st1{fill:#BD9FE3;}
+	.st2{clip-path:url(#SVGID_00000164496048648062549270000016024651444683778187_);}
+	.st3{fill:#51CB59;}
+	.st4{fill:#A8E6A5;}
+	.st5{fill:#2F9AE6;}
+	.st6{opacity:0.25;clip-path:url(#SVGID_00000164496048648062549270000016024651444683778187_);}
+	.st7{fill:#FFFFFF;}
+	.st8{fill:#10352B;}
+	.st9{fill:#FA8181;}
+	.st10{fill:#915FD0;}
+	.st11{fill:#091E18;}
+	.st12{fill:#BFE9F8;}
+	.st13{clip-path:url(#SVGID_00000150820925177192423440000013905800932518842767_);}
+	.st14{opacity:0.25;clip-path:url(#SVGID_00000182504509797803148340000008505702256948252293_);fill:#FFFFFF;}
+	.st15{clip-path:url(#SVGID_00000129919550569753904560000015198702425483392159_);}
+	.st16{fill:#00A8E3;}
+	.st17{fill:#F3F5F4;}
+	.st18{filter:url(#Adobe_OpacityMaskFilter);}
+	.st19{fill:#020202;}
+	.st20{mask:url(#SVGID_00000054971460773979071940000018161688345042129321_);}
+	.st21{fill:#80D4F1;}
+	.st22{filter:url(#Adobe_OpacityMaskFilter_00000003801063434447594960000012884615673781660346_);}
+	.st23{mask:url(#SVGID_00000090992778321848801350000015213625344790539173_);}
+	.st24{fill-rule:evenodd;clip-rule:evenodd;fill:#A8E6A5;}
+	.st25{clip-path:url(#SVGID_00000173841043625702852130000002948128963595093897_);}
+	.st26{fill:#F2D54C;}
+	.st27{opacity:0.25;clip-path:url(#SVGID_00000145753993832802891440000017347787027252907179_);fill:#F3F5F4;}
+	.st28{fill:#F0F0F0;}
+	.st29{fill-rule:evenodd;clip-rule:evenodd;fill:#80D4F1;}
+	.st30{fill:#DECFF1;}
+	.st31{clip-path:url(#SVGID_00000142860206107362018040000001062027097615624353_);fill:#BD9FE3;}
+	.st32{clip-path:url(#SVGID_00000142860206107362018040000001062027097615624353_);fill:#915FD0;}
+	.st33{clip-path:url(#SVGID_00000142860206107362018040000001062027097615624353_);}
+	.st34{fill:url(#SVGID_00000178901701428167342540000002582738433692095167_);}
+	.st35{fill:url(#SVGID_00000116235262913690121030000005419835356698222515_);}
+	.st36{fill:url(#SVGID_00000140010660862796351490000000598654095037138869_);}
+	.st37{fill:url(#SVGID_00000063617528959081435740000006964697286569570705_);}
+	.st38{fill:url(#SVGID_00000075124613143917444150000018240500453907572114_);}
+	.st39{fill:url(#SVGID_00000074413962581776462740000004457700110952390308_);}
+	.st40{fill:url(#SVGID_00000085969842960157353220000007148409046863971485_);}
+	.st41{fill:url(#SVGID_00000090254029211390595990000008282518454327277476_);}
+	.st42{fill:url(#SVGID_00000047743319943337199690000009414625900987162302_);}
+	.st43{fill:url(#SVGID_00000147202916534722058110000006491196382155853191_);}
+	.st44{fill:url(#SVGID_00000148628278107054824570000013142908204414084520_);}
+	.st45{fill:url(#SVGID_00000178195100212748143600000000778766191780129437_);}
+	.st46{fill:url(#SVGID_00000170263647834883975490000016440462043053458080_);}
+	.st47{fill-rule:evenodd;clip-rule:evenodd;fill:#DECFF1;}
+	.st48{clip-path:url(#SVGID_00000120533219697276378980000000531552768232069547_);}
+	.st49{fill:#3B5A51;}
+	.st50{fill:#E3E3E3;}
+	.st51{fill:#617A73;}
+	.st52{fill:#405E55;}
+	.st53{fill:none;stroke:#51CB59;stroke-width:3;stroke-miterlimit:10;}
+	.st54{fill:none;stroke:#A8E6A5;stroke-width:3;stroke-miterlimit:10;}
+</style>
+<path class="st53" d="M0.3,18.8c0,0,222-39,542,0"/>
+</svg>
diff --git a/index.liquid b/index.liquid
index c47e143..3f6e43d 100644
--- a/index.liquid
+++ b/index.liquid
@@ -109,12 +109,9 @@ reduciendo costos y brindándote más beneficios.</p>
 
 <section id="you-decide">
 	<h3 class="subtitle bolder dark-olive-text">Tú decides y ayudas a mejorar tu entorno.</h3>
-	<h2 class="dark-olive-text bold">
+	<h2 class="dark-olive-text bolder">
 		<span>¡Así, juntos hacemos un </span>
-		<span>mundo mejor!</span>
-		<figure class="logo center">
-			{% include "underline.svg" %}
-		</figure>
+		<span class="underlined-element">mundo mejor!</span>
 	</h2>
 	<button>Aprender cómo</button>
 	{% assign matrix_to = "#virto-network:virto.community?via=virto.community" %}