From a7298c00d939d67112633fb0254e1eb1cdebadc1 Mon Sep 17 00:00:00 2001
From: Maria Raykova <maria.raykova@uconn.edu>
Date: Fri, 8 May 2020 12:28:51 -0400
Subject: [PATCH] added section 7

---
 css/main.css  |  82 +++++++++++++++++++++++++++++++++++++++++++++-----
 img/arrow.png | Bin 0 -> 1121 bytes
 index.html    |  20 +++++++-----
 3 files changed, 86 insertions(+), 16 deletions(-)
 create mode 100644 img/arrow.png

diff --git a/css/main.css b/css/main.css
index 3f9d090..ebca029 100644
--- a/css/main.css
+++ b/css/main.css
@@ -95,7 +95,7 @@ textarea {
     font-weight: 400;
     padding: 10px 30px;
     margin: 0;
-    font-size: 14pt;
+    font-size: 12pt;
   }
 
   .tiny {
@@ -103,7 +103,7 @@ textarea {
   }
 
   .small {
-    font-size: 14pt;
+    font-size: 12pt;
   }
 
   .title {
@@ -214,16 +214,67 @@ textarea {
   }
 
   #section-6-img{
-    width: min-content;
+    width: 50vw;
     margin: 0 auto;
   }
 
+  #section-6-img img {
+    max-width: 100%;
+  }
+
   #section-6-text {
     text-align: center;
     max-width: 35%;
     margin: 0 auto;
   }
 
+  #section-7 {
+    background-color: #323969;
+    text-align: center;
+    padding: 50px;
+  }
+
+  #section-7 input {
+    border-radius: 3px;
+    background-color: #474d78;
+    border-color: #848bbd;
+    color: white;
+    padding: 15px;
+    border-style: solid;
+    border-width: 1px;
+    margin: 10px;
+  }
+
+  #trial-flex-container {
+    display: flex;
+    justify-content: center;
+  }
+
+  #trial-img {
+    align-self: flex-end;
+    margin-right: 3px;
+  }
+
+  #trial-text {
+    align-self: flex-start;
+  }
+
+  ::placeholder {
+    color: white;
+    font-size: 12pt;
+  }
+
+  #section-7 form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #section-7 button {
+    width: 200px;
+  }
+
+  /* ----------START OF MEDIA QUERIES------------ */
+
   @media (min-width: 484px) {
     #section-1 {
       background-image: url(/img/bg-1_md.jpeg);
@@ -232,10 +283,7 @@ textarea {
     #section-1 .tiny {
       color:#282828;
     }
-    #section-1 h1 {
-      font-size: 50pt;
-    }
-
+    
     #section-5 {
       background-image: url(/img/bg-2_md.jpeg);
     }
@@ -246,6 +294,9 @@ textarea {
       background-image: url(/img/bg-1_lg.jpeg);
       min-height: 800px;
     }
+    #section-1 h1 {
+      font-size: 50pt;
+    }
     #section-2 {
       grid-template-columns: 1fr max(40%);
       grid-template-rows: auto auto auto auto;
@@ -315,7 +366,22 @@ textarea {
       display: flex;
       justify-content: space-evenly;
     }
-
+    
+    #section-7 form {
+      flex-direction: row;
+    }
+    #form-flex-container {
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+    } 
+    #section-7 input {
+      width: 20vw;
+    }
+    #section-7 button {
+      width: 20vw;
+    } 
+    
   }
 
   @media (min-width: 1921px) {
diff --git a/img/arrow.png b/img/arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b1011ac4a027ed8863c15bef0f316320ed138e5
GIT binary patch
literal 1121
zcmeAS@N?(olHy`uVBq!ia0vp^LO`s-!3HE--ex@qQjEnx?oJHr&dIz4aspB#JkxxA
z8MJ_G4hAMhAqHlU5+Gz~&tzZ$vl$rFfHVUG^8!YM>;fjZtk42xI9mmzaGB`ET%aM5
znIRD+5xzcF$@#f@i7EL>sd^Q;1t0|sHWgMtW^QUpqC!P(PF}H9g{=};g%ywu64qBz
z04piUwpEJo4N!2-FG^J~)icpEP_pAvP*AWbN=dT{a&d!d2l8x{GD=Dctn~HE%ggo3
zjrH=2()A53EiLs8jP#9+bb%^#i!1X=5-W7`ij^UTz|3(;Elw`VEGWs$&r<-Io0ybe
zT4JlD1hNPYAnq*5Ohed|R}A$Q(1ZFQ8GS=N1AVyJK&>_)Q7iwV%v7MwAoJ}EZNMr~
z#Gv-r=z}araty?$U{Rn~?YM08;lXCd<#R|ql7WFK%G1R$#DjO~HGl7rK#AiYcV70X
z_Yl6Ax#)^#bjHg7mdIQsX7vI^#~)%w;%e`rw+KXSeZ|^wDCgEz%`9P;30<w-3AcEA
zXDA!#a?L%H^ygpR_Y<*C<`yqww<}Jc^V#OR<@0&g*CXE8FAiH>sr7LGj%!Lk1uQqc
zu8i~jS-5uxi))`joq)2%yGgJ6mpaJgN*q?Y_i#$EqEN^Z>HZB}*LSe`p4T&xh_q?7
zs%$!Kv4%_L^?KuGpNW?D@*gM~ZHSL%TYW<HjMH2n#ok}CGfo;sWEaW3TGElZBq3g9
z#&^j{a*vJW7A#actK#=SIj!JUNmi|jW~WTpgyRfv#LZ^(xd-XbbG*AE;nFT{;|WXD
z?l?1kf4JrE-))|ku3B^lihO9BUD&<2bjDA4)yG_0Hk=P^3ZCJlxvA}gsQim%uR>Z6
zE}LMrv*UY2b8!ay>u0YU`?P=XJr8i-WmWs5&FJ#4!xt?>UPxRDP+YEk^vB<Tg)Fl+
z^v0TqXo>urTD*I=^YV~|@fVoPm1Cy#e_QBezp*ncW3LpK=r6{*VzCw{%P!oXqkQh^
zwJTi#;ny!RJvT^?SN|-Wx4=2{g$|?b@ioh`xu%}1?abccxyfwhw`(fvK1KRpKk<Rv
zaIdVJ?gQ3$i{$5CNd77FD$e(^U~+Q2LBHG`M{~agOly-<GQxj5hVP$wNJ;+F4qn^q
zU+25I-Y@Lo*{{s?;(L^R-mF8>E4mXkZv8x0Z}b1}kN4r1CyE76w`=DyQJuSl_i@BA
zExw+Dh1@--oTN)Q*9UOjd%eo7t$y;QU6#A8E*uJDzJ0K*S7(v_cZThD5uN6VyK6xi
N*3;F`Wt~$(697a#s3ZUY

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 90befd2..6098dc4 100644
--- a/index.html
+++ b/index.html
@@ -131,16 +131,20 @@
   <section class="white" id="section-7">
     <p class="salmon medium small">THIS FORM DOESN'T HAVE TO WORK</p>
     <h3 class="medium title">But create it anyway. Use the right fields...</h3>
-    <form>
-      <input>
-      <input>
-      <input>
+    <div id="form-flex-container">
+      <form class="small">
+        <input type="text" id="name" placeholder="FULL NAME">
+        <input type="text" id="email" placeholder="YOUR EMAIL">
+        <input type="text" id="password" placeholder="PASSWORD">
+      </form>
       <div>
-        <img>
-        <p class="small">30 days free trial for all.</p>
+        <div id="trial-flex-container">
+        <img id="trial-img" src="img/arrow.png">
+        <p id="trial-text" class="small">30 days free trial for all.</p>
+        </div>
+        <button class="salmon-button">TRY NOW</button>
       </div>
-      <button class="salmon-button">TRY NOW</button>
-    </form>
+    </div>
     <p class="tiny">And some small text should go here.</p>
   </section>