🚧 Continued on with coder coder's front end tutorial

aliases

@@ -529,6 +529,10 @@ alias egghead="librewolf https://egghead.io/ &"
 alias demo2s="librewolf https://www.demo2s.com &"
 # mothereffinghsl hsl color picker site
 alias mothereffinghsl="librewolf https://mothereffinghsl.com/ &"
+# nice color picker for hex/rgb/hsl
+alias colordesigner="librewolf https://colordesigner.io/ &"
+# site for calculating clamping for responsive font sizes
+alias typography-calc="librewolf https://royalfig.github.io/fluid-typography-calculator/ &"
 # svgsprites creates sprites from dragging svg files into its
 alias {svgsprites,svgsprite}="librewolf https://svgsprit.es &"
 # unsplash.com is an api site for developers to import and use photos

coder_coder.css

@@ -1,4 +1,4 @@
-/* LEFT OFF AT PART 2 1:07 */
+/* LEFT OFF AT PART 2 2:09 */
 
 /* This document contains boilerplate css tips/tricks
  * garnered from the youtuber, coder_coder's youtube series, "Building a
@@ -54,6 +54,12 @@ html {
 /* 0 out all margin all body to clear default margins */
 body {
   margin: 0;
+  font-family: 'Space Grotesk', sans-serif;
+  background-color: var(--bg-body);
+  color: var(--text1);
+  font-size: var(--fs-18);
+  line-height: 1.56;
+  padding-bottom: 30rem;
 }
 
 /* removes default margins */
@@ -61,12 +67,67 @@ h1, h2, h3, p {
     margin-top: 0;
 }
 
+h1, h2, h3 {
+    line-height: 1;
+}
+
+/* once again she uses fluid-topgraphy-calculator to calculate clamp of h1 font
+ * size*/
+/*
+ * min font size 40px
+ * max font size 88px
+ * min viewport 375px
+ * max viewport 1000px
+ */
+h1 {
+    font-size: 2.5rem;
+    font-size: clamp(2.5rem, 0.7rem + 7.68vw, 5.5rem);
+    margin-bottom: 24px;
+}
+
+@media (min-width: 600px) {
+    h1 {
+        margin-bottom: 60px;
+    }
+}
+
+@media (min-width: 600px) {
+    h1 {
+        margin-bottom: 43px;
+    }
+}
+
+p {
+    /* coder coder's default line-height for p tags */
+    /* line-height: 1.3; */
+    line-height: 1.5;
+    font-size: 1rem;
+    font-size: clamp(1rem, 0.8rem + 0.9vw, 1.125rem);
+    color: var(--text2);
+    margin-bottom: 24px;
+}
+
 a {
   /* automatically adds an ease-in-out animation on color property whenever
      * there's a hover event change */
   transition: color var(--transition);
 }
 
+a.underline {
+    display: inline-block;
+    font-size: 1rem;
+    line-height: 1.625;
+    letter-spacing: 2.29px;
+    font-weight: 700;
+    text-decoration: none;
+    text-transform: uppercase;
+    color: var(--text1);
+    background-image: linear-gradient(to right, var(--accent) 75%, var(--accent) 75%);
+    background-position: 0 2.1em;
+    background-repeat: repeat-x;
+    background-size: 8px 2px;
+}
+
 a:hover {
   color: var(--accent);
 }
@@ -169,7 +230,10 @@ a:hover {
 /* HERO */
 .hero {}
 
-.hero__wrapper {}
+.hero__wrapper {
+    padding-bottom: 80px;
+    border-bottom: 1px solid var(--text2);
+}
 
 .hero__image {
     position: absolute;
@@ -180,15 +244,38 @@ a:hover {
     display: block;
 }
 
+.hero__rings {
+    position: absolute;
+    right: 50%;
+    top: 130px;
+    z-index: -1;
+}
+
+.hero__circle {
+    position: absolute;
+    top: 254px;
+    right: 0;
+    translate: 50%;
+}
+
 .hero__text {
     position: relative;
-    /* calculated by the header height - the image height */
+    /* calculated by the header height - the image height + space below towards
+     * main content*/
     /* she realizes not to use top, but instead margin-top, because top doesn't
      * effect the entire flow of the page, while margin-top does */
-    margin-top: 295px;
+    margin-top: 335px;
     text-align: center;
 }
 
+/* she grabs an interesting css tricks here, using a linear gradeint to create an
+ * underline and using background-position to position it where she desires*/
+h1 > span {
+    background-image: linear-gradient(to right, var(--accent) 75%, var(--accent) 75%);
+    background-position: 0 1.18em;
+    background-repeat: repeat-x;
+    background-size: 8px 4px;
+}
 /* .hero__description {} */
 
 /* .hero__contact {} */

coder_coder.html

@@ -100,23 +100,37 @@
                         >
                         <source media="(min-width: 37.5em)"
                         srcset="/assets/images/image-profile-tablet.webp"
-                        >
+                        />
                         <img
                         class="hero__image"
                         src="/assets/images/image-profile-mobile.webp"
                         alt="picture of Adam Keyes"
                         width="174"
                         height="383"
-                        >
+                        />
                     </picture>
-
+                    <img
+                        class="hero__rings"
+                        src="/assets/images/pattern-rings.svg"
+                        alt=""
+                        width="530"
+                        height="129"
+                    />
+                    <img
+                        class="hero__circle"
+                        src="/assets/images/pattern-circle.svg"
+                        alt=""
+                        width="129"
+                        height="129"
+                    />
                     <div class="hero__text">
-                        <h1 class="hero__headline">Nice to meet you! I'm Adam Keyes.</h1>
+                        <h1 class="hero__headline">Nice to meet you! I'm
+                            <span>Adam Keyes</span>.</h1>
                         <p class="hero__description">
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                             sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         </p>
-                        <a href="" class="hero__contact">Contact me</a>
+                        <a href="" class="hero__contact underline">Contact me</a>
                     </div>
 
                 </div>