Minor styling changes; added like button to text absolute positioning.

Author: devmodo

wip/03-CSS-Fundamentals/index.html

@@ -49,6 +49,11 @@ <h2>The Basic Language of the Web: HTML</h2>
             height="200"
             class="post-image"
             />
+
+            <!--Because of the absolution position of this button, it'll be at the bottom, right corner.
+            Because the button is inside the container now, it is absolute relative to the container
+            element which is limited to 1200px wide.-->        
+            <button>❤️Like</button>
         </header>
 
         <p>
@@ -148,6 +153,8 @@ <h4>Related posts</h4>
         <footer>
         <p id="copyright" class="copyright text">Copyright &copy; 2027 by The Code Magazine.</p>
         </footer>
+        
     </div> <!--This is the main div closure-->
+
   </body>
 </html>

wip/03-CSS-Fundamentals/style.css

@@ -5,22 +5,27 @@
     padding: 0;
 }
 
+/*PAGE SECTIONS*/
 body {
     color: #444;
     border-top: 10px solid #1098ad;
+    position: relative; 
+    /*Any absolute items in this container must be in a relative container for absolute to work.*/
 }
 
 .container {
     width: 1200px;
     /*This will split the page and center the content in the container.*/
     margin: 0 auto;
+    position: relative;
 }
 
 .main-header {
     background-color: #f7f7f7;
     padding: 20px 40px;
     margin-bottom: 60px;
-    height: 80px;
+    /*height: 80px;*/ /*This is normally not done; typically don't set a fixed height.*/
+    height: auto;
 }
 
 nav {
@@ -44,6 +49,7 @@ aside {
     width: 500px;
 }
 
+/*SMALLER ELEMENTS*/
 h1, h2, h3 {
     color: #1098ad;
 }
@@ -103,10 +109,32 @@ li:last-child {
 
 .post-image {
     /*This little trick maintains the aspect ratio.*/
+    /*Images are inline-block elements by default.*/
     width: 100%;
     height: auto;
 }
 
+nav a:link {
+    margin-right: 30px;
+    margin-top: 10px;
+    display: inline-block; 
+}
+
+/*Chained psuedoclasses.*/
+nav a:link:last-child {
+    margin-right: 0;
+}
+
+button {
+    font-size: 22 px;
+    padding: 10px;
+    cursor: pointer;
+    position: absolute;
+    bottom: 50px;
+    right: 50px;
+
+}
+
 /*In the nth child, specify the number in ().
 li:nth-child(2) {
     color: red;
@@ -140,8 +168,6 @@ footer p {
     font-size: 16px;
 }
 
-
-
 /*Class selector*/
 .related-author {
     font-size: 18px;