absolute position

Author: 张欧文

starter/03-CSS-Fundamentals/index.html

@@ -17,6 +17,19 @@ <h6>The Basic Language of the Web: HTML</h6>
     -->
 
     <div class="container">
+      <!-- <div class="test">
+        <p class="test">
+          All modern websites and web applications are built using three
+          <em>fundamental</em>
+          technologies: HTML, CSS and JavaScript. These are the languages of the
+          web.
+        </p>
+
+        <p class="test">
+          In this post, let's focus on HTML. We will learn what HTML is all
+          about, and why you too should learn it.
+        </p>
+      </div> -->
       <header class="main-header">
         <h1>📘 The Code Magazine</h1>
 
@@ -148,7 +161,7 @@ <h4><strong>Related posts</strong></h4>
               height="75"
             />
             <a href="#">Why JavaScript is Awesome</a>
-            <p class="related-author">By Matilda</p>
+            <p class="r🚢elated-author">By Matilda</p>
           </li>
         </ul>
       </aside>
@@ -159,5 +172,7 @@ <h4><strong>Related posts</strong></h4>
         </p>
       </footer>
     </div>
+
+    <button class="like">🌋like!!</button>
   </body>
 </html>

starter/03-CSS-Fundamentals/style.css

@@ -5,6 +5,7 @@
 
 body {
   border-top: #1098ad solid 10px;
+  position: relative;
 }
 
 article {
@@ -69,10 +70,22 @@ footer p {
   font-size: 16px;
 }
 
+nav a:link {
+  margin: 10px;
+  margin-top: 10px;
+  display: inline-block;
+}
+
+nav a:link:last-child {
+  margin-right: 0;
+}
 /* article header p {
   font-style: italic;
 } */
 
+/* .test {
+  display: inline-block;
+} */
 #author {
   font-style: italic;
   font-size: 18px;
@@ -160,3 +173,13 @@ a:active {
 /* #copyright {
   color: orangered;
 } */
+.like {
+  font-size: 33px;
+  cursor: pointer;
+  padding: 10px;
+  position: absolute;
+  /* top: 0;
+  left: 0; */
+  bottom: 50px;
+  right: 50px;
+}