From 949a5bc4738b0cd932ae6d3d13847cd17c6ff778 Mon Sep 17 00:00:00 2001
From: youngderrick82 <youngderrick82@gmail.com>
Date: Sun, 10 Mar 2024 04:47:36 -0500
Subject: [PATCH] Updated styling and format of header

---
 assets/dots.png | Bin 528 -> 1555 bytes
 index.html      |  19 +++++++--------
 styles.css      |  61 ++++++++++++++++++++++++++++++++++++------------
 3 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/assets/dots.png b/assets/dots.png
index 263184ccf64848efea97d73cd50185b3b0880c5c..85c4947fa4f1a1db67f9d7884bc8eebcf14e1d37 100644
GIT binary patch
delta 1512
zcmV<E1sD2|1d|MqB#}8Be*g(^NLh0L01FTR01FTSts}j4000H3Nkl<ZXhZE<U1%d!
z7;Sdfb={TF>e^H=Z9r3Taho=axYmV5MX|UvscVZr?31vIN|RLIgi`Y4TNCib3T;ZI
zNCRo1;A^RUaD5Y>Tv1nQ7gnjZg(%uKNj=}pmuWI{=YImF+XIK&f0^9xoP0BL@BQYc
zzCEDn5aAfNhX(g{Lcw70w9n@YfET0DXk>73@H9?)eo?~V@F{q-fYC@K^5oFa(Ea?8
zIcN+SArJ_hLANpRcd$$$HKgO!j*gBGbGcj_hd2WJd;<Q(x@w<w_<S@sH}?RC2w|8I
zM8Y5$)QanIC!J2ef5f4-fY`^uziYINxH~pB_9BOBpqmf^FM*XBAuBAWQmNNi!V(Y@
z1#SBz5{auUQ3qi{2#A1oO{%QS&(B|CDMO%d5L7>2R#{$HSm<Rb1$qf>se)~>xw(0#
zSS+@(oG#G!Pj##v!e@JHYpaFjBxn*s$Jf<?PMFPR3oI!FfBMiPt%<YCOeQnSk`hD-
z{iqId!dNVJmnDTjpRd$0P8g5J*DIBZGV_TNa{5fyF%$}wVWj)mq0f#w#tGq5f=?&Q
z3KQ~-zy(QE1$@@5?(2p~=v9{9Yjo+;!mS$gMZAQc+s4&$-QC^P+>s7cz=fn))Dy7J
zE$ILdCFIG~e?yt_9~zoq^g!#JYhVm*qvrdb4}}T+!mTR|3=AxxG5XS9bL$HI{r&Yi
z@=)3b7ONzkc0*h>8mQM;QV96GEsC{6_IaNrC1?_wn3%W^olELqJDi%DDnaVFtSCl4
zpFfGd|Ego{5I)GK;%7+-nuG|+Wb!ElII87P36sh5e=KDP6qpwf<J5=l&I>H1K$s8#
z0ap-c%M2HSOkQRQOK{<Hg(d2sn-BrF^gL#(U6E)lF&_2`g#z6f%@wl(_&j6P2NiZ1
zA-dJPVM0~Fuotyi0dv0c5=H|OGfa7We0*(lbMp%%bB?<^27JQs`4T=wl}`!9?yZfD
zjnB|6e<b%7!}c~7x<7__Ka7^<|DSMbUH-&dK))6G^j=1<7(auQq$!T}<qkTI5<2L(
zw-dswa|~<)qg?>+oHhjTI16_6^z?N0_4S?N)8?RA&J5_50)GS5D>~JD%UCO}&CJZ4
z;qHzBt@prRLG?BO`FsnX>$9`7XSur&h6zFBe+lp(7B%B;I-P!wLu~=E9iXz9ny^IW
z5{GJ_n-Bt>Y&MohMn*2Oge4%R3$*J~fzO*PQ3qi{2%z^`yCzjuP}fCS$`I(=N&RbL
z?T~h8UtuW)dI?#*{X+7N=0hx}3-q<RK`$hHc2P&x)pnX$4l~PjG!M#0&VXc2PESuy
zfAXOa@JXPdpHLhFJ|}Xy+^2jfK{Rc@!>ubUEiKVTy3w@$0k^KOva&*B@VI;g$Tw;q
zIOWxjCheS_XITx<$JJ|omGmA3pCHR>$B-z<DPg1;v;=%c8<0*X0}bJ$EEkO~eFEI7
zK`Xyc{?ijY%x&XpIoi?0z+dCTI<&X9f72$UCx8##rN-}^VhnBL37|Jx4OUlIH_&+H
zvxW<&_=pm^&8;iM<MEp?`hyQe_>Nmwh{a+z`A-@0P}&C;D=H9`0q2CcYBW$kW=SFZ
ze*X<otR1q?TP!I-lhESgBCQ>!TS`X6Vn<Wyqbw;zKA&$xUsp>67VjNMosbn}e+WyT
zL?ZDt0vt`NymM-)>K+~*?nR6nALW<3Duf9UMn^|4Bhc2*lgVU~OrB*4OMp)dv9^+8
zA7NFmn-F1ga`G}(Vw!q|!d3E)CjHi_TNxMuK5xLsv>>kW>Ecig3=^sX&*~6nlg}fO
zi1KRz4M^HK&1SRTpyGWO-3;F(Ud@0nc@ASQ1<hr=-790b>XXT2mQjq}KtIE=>15|L
zgoge%r^pNET{`a-px=t-5s-YS0@ws^!|MmM^k^F5Xy^2x<B%oP)bu}<JSvuFQ$Rof
O0000<MNUMnLSTZhCCXL+

delta 475
zcmV<10VMvD43GqnBoYa5NLh0L01FcU01FcV0GgZ_ks%*{0i{VqK~#7F?U?bgLqHIR
z*Q+2UBo!n|&;gau0VPlYDxd@<Xh8*ZaL<}C6OZG_?i(Zf&FmkEF`rG`SwBnlz=imM
zi}8I8bzKKZl7Q!V@OV7HvaF$O+aA8l^BgE3^QaYyqENTn4cFLe-S2mmWtln(rAOOP
z5CofozZFG)k=hHjXR#qXVXtH?yg*YpJhO(<G(9XC3vZz<xID9l@IL)igzKSg+qHh!
zJV5=cjTOhS;{11Xp2@admL*V8Rh9M_r)Sbo(=<RuUDw)UoE~eq@5T@PgNzcT8521@
z*B*WPod>9Ry<Xa5oSsQT&*u}USi5LW&!i#8aexYc*LAhWSUvB1I6kCIhQzJHhvpib
zp4p^;<HV;TlgXRQvpAd{nSjR%!%&&R;nBW6;0b#rzVEBOP<vKi@Nnib86t5#m`vFJ
z;Q>=&zniFj&z~$v{0@i1t;yOH3eRNpxdIYnogHcD>_~Dd$*BR7oJw+fP%@Szr-U9!
zPEC<M<dn!G$?4gV<kS>NPN_Wad$=U0nv&#{&?Cv|Qb}^k=#k{~>_|gr=NF5>=+DK<
Rx|#q0002ovPDHLkV1hbY<gfq$

diff --git a/index.html b/index.html
index f0064c2..adbfa57 100644
--- a/index.html
+++ b/index.html
@@ -7,13 +7,13 @@
     <link rel="stylesheet" href="/styles.css" />
   </head>
   <nav class="navbar">
-    <div class="logo flex flex-grow">
+    <div class="logo flex">
       <img class="logo-bolt" src="/assets/tiny-bolt.png" alt="logo-bolt" />
       <p>Thunderplains2024</p>
     </div>
-    <div class="link-container flex-grow">
+    <div class="link-container">
       <ul class="links">
-        <li class="link">SPONSOR</li>
+        <li class="link"><a>SPONSOR</a></li>
         <li class="link">|</li>
         <li class="link">SPEAK</li>
         <li class="link">|</li>
@@ -33,19 +33,18 @@
           <img src="/assets/Logomark_Bolt.png" alt="" class="header-img" />
         </div>
         <div class="text-wrapper">
-          <h1>
-            <span class="info"
-              >Oct. 10, 2024 <span class="subhead">|</span> OKC, </span
-            >ThunderPlains<span class="subhead"> Developer Conference</span>
-          </h1>
+            <span class="info">10.10.24 <span class="subhead-divider"> | </span>OKC, OK</span
+            >
+            <h1 class="header-text">ThunderPlains</h1>
+            <h2 class="sub-header"> Developer Conference</h2>
           <h1 class="comment">
-            ThunderPlains is an electrifying tech event that you dont want to
+            ThunderPlains is an electrifying tech event that you don't want to
             miss!
           </h1>
           <p class="intro">
             Explore the latest trends, gain value insights, and connect whit
             like-minded individuals who share your passion for technology.
-            Whethere you're a seasoned developer or just staring out,
+            whether you're a seasoned developer or just staring out,
             ThunderPlains has something for everyone.<strong
               >Join us in 2024!</strong
             >
diff --git a/styles.css b/styles.css
index e6f5163..f6ad3a5 100644
--- a/styles.css
+++ b/styles.css
@@ -10,7 +10,7 @@
 body {
   margin: 0;
   padding: 0;
-  color: white;
+  color: var(--white);
 }
 
 nav {
@@ -18,20 +18,24 @@ nav {
   height: 2rem;
   background: var(--darkGrey);
   align-items: center;
+  justify-content: space-between;
   padding: 0px 5em;
 }
 
 .logo {
   margin: 0;
+  margin-right: -2.9em;
+  font-size: 1.25rem;
 }
 
 .logo-bolt {
   height: 1.5rem;
+  padding-top: 1em;
 }
 
 .links {
   display: flex;
-  margin: 0;
+  padding: 0;
 }
 
 .link {
@@ -39,6 +43,9 @@ nav {
   margin: 5px;
 }
 
+.socials {
+}
+
 header {
   margin-top: 0;
   padding-top: 3em;
@@ -51,6 +58,10 @@ header {
   height: 40rem;
 }
 
+.subhead-divider {
+  color: var(--magenta);
+}
+
 section {
   margin: auto;
   max-width: 1240px;
@@ -61,19 +72,22 @@ section {
   text-align: center;
   width: 100%;
   height: auto;
+  z-index: 2;
 }
 
-/* .img-wrapper::after {
-    position: absolute;
-    background: url(/assets/dots.png);
-    background-size: .7rem;
-    content: " ";
-    width: 100%;
-    height: 100%;
-    top: 0;
-    bottom: 0;
-    left: 0;
-  } */
+.img-wrapper::after {
+  position: absolute;
+  background: url(/assets/dots.png);
+  background-repeat: repeat;
+  background-size: 1rem;
+  content: " ";
+  width: 80vw;
+  height: 77.5vh;
+  top: -50px;
+  left: 58%;
+  opacity: 2%;
+  z-index: -1;
+}
 
 .header-img {
   height: 30em;
@@ -83,6 +97,21 @@ section {
 .text-wrapper {
   height: 500px;
   width: 100%;
+  z-index: 10;
+}
+
+.header-text {
+  font-size: 3rem;
+  margin-bottom: 0px;
+  font-family: "Murecho", sans-serif;
+}
+
+.sub-header {
+  font-family: "Lato", sans-serif;
+  font-size: 2em;
+  font-weight: 500;
+  margin-top: 0;
+  color: var(--magenta);
 }
 
 .flex-grow {
@@ -102,11 +131,13 @@ section {
 .btn {
   display: flex;
   margin: auto;
+  z-index: 2;
 }
 
 .header-btn {
   background: var(--magenta);
   height: 2rem;
+  min-width: 8em;
   width: 12.5vw;
   font-size: 24px;
   border-radius: 4px;
@@ -144,8 +175,8 @@ section {
 
 #volunteer {
   position: relative;
-  left: 0.6rem;
-  top: 0.3rem;
+  left: 0.9rem;
+  top: 1.2rem;
   height: 2.3em;
   rotate: -8deg;
 }