Absolute positioning

ronanmoriarty · ronanmoriarty · Feb 5, 2025 · Jan 31, 2025 · Jan 31, 2025 · Jan 31, 2025
commit ff9208b8f69107c9f0f0c2b7012fde3b8155de8b
diff --git a/starter/03-CSS-Fundamentals/.vscode/settings.json b/starter/03-CSS-Fundamentals/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}
diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>The Basic Language of the Web: HTML</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="styles.css" />
   </head>
 
   <body>
@@ -39,14 +39,18 @@ <h2>The Basic Language of the Web: HTML</h2>
             width="50"
           />
 
-          <p id="author">Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
+          <p id="author">
+            Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
+          </p>
 
-          <img class="post-image"
+          <img
+            class="post-image"
             src="img/post-img.jpg"
             alt="HTML code on a screen"
             width="500"
             height="200"
           />
+          <button class="like-button">❤️ Like</button>
         </header>
 
         <p>
@@ -57,8 +61,8 @@ <h2>The Basic Language of the Web: HTML</h2>
         </p>
 
         <p>
-          In this post, let's focus on HTML. We will learn what HTML is all about,
-          and why you too should learn it.
+          In this post, let's focus on HTML. We will learn what HTML is all
+          about, and why you too should learn it.
         </p>
 
         <h3>What is HTML?</h3>
@@ -70,8 +74,8 @@ <h3>What is HTML?</h3>
         </p>
         <p>
           HTML consists of elements that describe different types of content:
-          paragraphs, links, headings, images, video, etc. Web browsers understand
-          HTML and render HTML code as websites.
+          paragraphs, links, headings, images, video, etc. Web browsers
+          understand HTML and render HTML code as websites.
         </p>
         <p>In HTML, each element is made up of 3 parts:</p>
 
@@ -93,8 +97,8 @@ <h3>What is HTML?</h3>
         <h3>Why should you learn HTML?</h3>
 
         <p>
-          There are countless reasons for learning the fundamental language of the
-          web. Here are 5 of them:
+          There are countless reasons for learning the fundamental language of
+          the web. Here are 5 of them:
         </p>
 
         <ul>
@@ -126,7 +130,12 @@ <h4>Related posts</h4>
             <p class="related-author">By Jonas Schmedtmann</p>
           </li>
           <li>
-            <img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
+            <img
+              src="img/related-2.jpg"
+              alt="Lightning"
+              width="75"
+              heigth="75"
+            />
             <a href="#">The Unknown Powers of CSS</a>
             <p class="related-author">By Jim Dillon</p>
           </li>
@@ -143,7 +152,11 @@ <h4>Related posts</h4>
         </ul>
       </aside>
 
-      <footer><p id="copyright" class="copyright text">Copyright &copy; 2027 by The Code Magazine.</p></footer>
+      <footer>
+        <p id="copyright" class="copyright text">
+          Copyright &copy; 2027 by The Code Magazine.
+        </p>
+      </footer>
     </div>
   </body>
 </html>
diff --git a/starter/03-CSS-Fundamentals/styles.css b/starter/03-CSS-Fundamentals/styles.css
@@ -1,183 +1,196 @@
 * {
-    /* border-top: 10px solid #1098ad; */
-    margin: 0;
-    padding: 0;
+  /* border-top: 10px solid #1098ad; */
+  margin: 0;
+  padding: 0;
 }
 
 /* PAGE SECTIONS */
 
 .container {
-    width: 800px;
-    margin: 0 auto;
-
+  width: 800px;
+  margin: 0 auto;
+  position: relative;
 }
 
 nav {
-    font-size: 18px;
+  font-size: 18px;
 }
 
 article {
-    margin-bottom: 60px;
+  margin-bottom: 60px;
 }
 
 body {
-    color: #444;
-    font-family: sans-serif;
-    border-top: 10px solid #1098ad;
+  color: #444;
+  font-family: sans-serif;
+  border-top: 10px solid #1098ad;
 }
 
 .main-header {
-    background-color: #f7f7f7;
-    padding: 20px 40px;
-    margin-bottom: 60px;
-    height: 80px;
+  background-color: #f7f7f7;
+  padding: 20px 40px;
+  margin-bottom: 60px;
+  height: 80px;
 }
 
 .post-header {
-    margin-bottom: 40px;
+  margin-bottom: 40px;
+  position: relative;
 }
 
 aside {
-    background-color: #f7f7f7;
-    border-top: 5px solid #1098ad;
-    border-bottom: 5px solid #1098ad;
-    padding: 50px 0;
-    width: 500px;
+  background-color: #f7f7f7;
+  border-top: 5px solid #1098ad;
+  border-bottom: 5px solid #1098ad;
+  padding: 50px 0;
+  width: 500px;
 }
 
 /* SMALLER ELEMENTS */
 
-h1, h2, h3 {
-    color: #1098ad;
+h1,
+h2,
+h3 {
+  color: #1098ad;
 }
 
 h1 {
-    font-size: 26px;
-    text-transform: uppercase;
-    font-style: italic;
+  font-size: 26px;
+  text-transform: uppercase;
+  font-style: italic;
 }
 
 h2 {
-    font-size: 40px;
-    margin-bottom: 30px;
+  font-size: 40px;
+  margin-bottom: 30px;
 }
 
 h3 {
-    font-size: 30px;
-    margin-top: 40px;
+  font-size: 30px;
+  margin-top: 40px;
 }
 
 h4 {
-    font-size: 20px;
-    text-align: center;
-    text-transform:uppercase;
+  font-size: 20px;
+  text-align: center;
+  text-transform: uppercase;
 }
 
 p {
-    font-size: 22px;
-    line-height: 1.5;
-    margin-bottom: 15px;
+  font-size: 22px;
+  line-height: 1.5;
+  margin-bottom: 15px;
 }
 
 li {
-    font-size: 20px;
-    margin-bottom: 10px;
+  font-size: 20px;
+  margin-bottom: 10px;
 }
 
 li:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 /* article header p {
     font-style: italic;
 } */
 
 #author {
-    font-style: italic;
-    font-size: 18px;
+  font-style: italic;
+  font-size: 18px;
 }
 
 #copyright {
-    font-size: 16px;
+  font-size: 16px;
 }
 
 .related-author {
-    font-size: 18px;
-    font-weight: bold;
+  font-size: 18px;
+  font-weight: bold;
 }
 
 .related {
-    list-style: none;
+  list-style: none;
 }
 
-ol, ul {
-    margin-left: 50px;
-    margin-bottom: 20px;
+ol,
+ul {
+  margin-left: 50px;
+  margin-bottom: 20px;
 }
 
 li:first-child {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 li:last-child {
-    font-style: italic;
+  font-style: italic;
 }
 
 li:nth-child(even) {
-    /* color: red; */
+  /* color: red; */
 }
 
 article p:first-child {
-    color: red; /* doesn't work as expected as a paragraph is not the first element in the article */
+  color: red; /* doesn't work as expected as a paragraph is not the first element in the article */
 }
 
 article p:last-child {
-    color: red; /* whereas this works fine as the last element in the article is a paragraph */
+  color: red; /* whereas this works fine as the last element in the article is a paragraph */
 }
 
 /* Styling links */
 a:link {
-    color: #1098ad;
-    text-decoration: none;
+  color: #1098ad;
+  text-decoration: none;
 }
 
 a:visited {
-    /* color: #777; */
-    color: #1098ad;
+  /* color: #777; */
+  color: #1098ad;
 }
 
 a:hover {
-    color: orangered;
-    font-weight: bold;
-    text-decoration: underline orangered;
+  color: orangered;
+  font-weight: bold;
+  text-decoration: underline orangered;
 }
 
 a:active {
-    background-color: black;
-    font-style: italic;
+  background-color: black;
+  font-style: italic;
 }
 
 a {
-    color: red;
+  color: red;
 }
 
 .post-image {
-    width: 50%;
-    height: auto;
+  width: 100%;
+  height: auto;
 }
 
 nav a:link {
-    /* background-color: orangered;
+  /* background-color: orangered;
     margin: 20px;
     padding: 20px;
     display: block; */
-    margin-right: 30px;
-    margin-top: 10px;
-    display: inline-block;
+  margin-right: 30px;
+  margin-top: 10px;
+  display: inline-block;
 }
 
 nav a:link:last-child {
-    margin-right: 0;
+  margin-right: 0;
+}
+
+.like-button {
+  font-size: 22px;
+  padding: 20px;
+  cursor: pointer;
+  position: absolute;
+  bottom: 50px;
+  right: 50px;
 }
 
 /* Resolving conflicts */