🚧 Continued documenting coder coder's process

coder_coder.css

@@ -1,4 +1,4 @@
-/* LEFT OFF AT BEGINNING OF PART 2 */
+/* LEFT OFF AT PART 2 1:07 */
 
 /* This document contains boilerplate css tips/tricks
  * garnered from the youtuber, coder_coder's youtube series, "Building a
@@ -56,6 +56,11 @@ body {
   margin: 0;
 }
 
+/* removes default margins */
+h1, h2, h3, p {
+    margin-top: 0;
+}
+
 a {
   /* automatically adds an ease-in-out animation on color property whenever
      * there's a hover event change */
@@ -160,3 +165,30 @@ a:hover {
     margin-inline-end: auto;
   }
 }
+
+/* HERO */
+.hero {}
+
+.hero__wrapper {}
+
+.hero__image {
+    position: absolute;
+    top: 0;
+    /* how to center position:absolute elems */
+    left: 50%;
+    translate: -50%;
+    display: block;
+}
+
+.hero__text {
+    position: relative;
+    /* calculated by the header height - the image height */
+    /* 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;
+    text-align: center;
+}
+
+/* .hero__description {} */
+
+/* .hero__contact {} */

coder_coder.html

@@ -70,7 +70,7 @@
         </header>
         <main id="main">
             <section class="hero">
-                <div class="wrapper">
+                <div class="wrapper hero__wrapper">
                     <!-- srcset allows for very responsive design, see:
                     https://cloudfour.com/thinks/responsive-images-the-simple-way/ -->
                     <!-- she calculates the sizes by comparing the width of the
@@ -79,6 +79,7 @@
                     media queries of the various sizes, it is 0.02 pixels less
                     than our media queries to ensure no overlap-->
                     <!-- the final 445px is the max width of the image-->
+                    <!--
                    <img src="/assets/images/image-profile-mobile.webp"
                    alt="picture of Adam Keyes"
                    srcset="
@@ -88,7 +89,36 @@
                    sizes="(max-width: 599.98px) 46.4vw, (max-width: 999.98px)
                    42vw, 445px"
                    />
-                    <h1>Nice to meet you! I'm Adam Keyes.</h1>
+                    -->
+
+                    <!-- She ends up deciding to use picture because the above
+                        results in the images not resizing due to the particular
+                        constraints of the images she is working with-->
+                    <picture>
+                        <source media="(min-width: 62.5em)"
+                        srcset="/assets/images/image-profile-desktop.webp"
+                        >
+                        <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>
+
+                    <div class="hero__text">
+                        <h1 class="hero__headline">Nice to meet you! I'm Adam Keyes.</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>
+                    </div>
+
                 </div>
             </section>
         </main>