<!DOCTYPE html>
<html lang="en">
  <head class="post-header"> 
  <meta charset="UTF-8" />  </head>
  <link href="Style.Css" rel="stylesheet"/>
  <body>
    <div class="container">
    <header class="main-header">
    <h1>📘The Code Magazine</h1> 
    <nav> 
    <a href="#">Blog</a>
    <a href="#"> Challenges </a>
    <a href="#"> Flexbox </a>
    <a href="#"> CSS Grid </a> </nav> 
    <button> ❤️Like</button>
  </header>

  <!-- <div class="clear"></div>  -->
<article> 
  
  <header>
    <p id="author" class="author" ><strong>Posted by Laura Jones on Monday, June 21st 2027</strong></p>
    <img src="img/laura-jones.jpg" alt="Laura Jones author" height="50" width="50" class="author-image"/> </header>
  

    <h2>The Basic Language of the Web: HTML</h2>
    <img src="img/post-img.jpg" alt="HTML code on a screen" width="500" height="200" class="post-img"/> 
   
    
    <p>
      All modern websites and web applications are built using three fundamental
      technologies: HTML, CSS and JavaScript. These are the languages of the
      web. 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>

    <p>
      HTML stands for <strong>H</strong>yper <strong>T</strong>ext <strong></strong>M</strong>arkup <strong>L</strong>anguage. It's a markup language that web
      developers use to structure and describe the content of a webpage (not a
      programming language). 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.
    </p>
    <p>
     <p>In HTML, each element is made up of 3 parts: </p> 
     <ol><li>The opening tag </li>
      <li>The closing  tag </li>
      <li>The actual element </li> </ol> 
      You can learn more at the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank"> MDN Web Docs. </a> 
      <h3>Why should you learn HTML?</h3>
      <p>There are countless reasons for learning the <em>fundamental</em>
      language of the web. Here are 5 of them: </p>
      <ul><li>To be able to use the fundamental
      web dev language</li> 
      <li>To hand-craft beautiful websites instead of relying on
      tools like Worpress or Wix To build web applications </li>
      <li>To impress friends and family</li>
     <li> To have fun 😃 </li></ul>
     <br> 
      <p>Hopefully you learned something new here. See you next time!</p>
    </p> </article>

<aside> <h4>Related posts</h4>

<ul class="related"> <li>
  <img src="img/related-1.jpg" alt="How to learn web development" height="75" width="75" /> <a href="#">How to learn web development</a>
  <p class="related-author">By Jonas Schmedmann</p>  
</li> 
<li>
  <img src="img/related-2.jpg"alt="The unknown power of CSS" height="75" width="75" /> <a href="#">The unknown power of CSS</a> <p class="related-author"> By Jim Dillon </p>
</li> 
<li>
  <img src="img/related-3.jpg" alt="Why Javascript is awesome" height="75" width="75"  /> <a href="#"> Why JavaScript is awesome </a>  <p class="related-author">By Matilda</p>
</li class="related"> 
</ul></aside>
<footer><p id="copyright" class="copyright" class="text"> Copyright &copy; 2027 by The Code Magazine</p></footer>
</div>

  </body>
</html>
* {
  margin: 0;
  padding: 0;
}
/* Page Section */
body {
color: #444;
font-family: sans-serif; 
position: relative; 
}


.container {
  width: 1200px;
  /* margin-left: auto;
  margin-right: auto; */
  margin: 0 auto;}

  .main-header {
    background-color: #f7f7f7;
    /* padding: 20px;
    padding-left: 40px;
    padding-right: 40px; */
    padding: 20px 40px;
    margin-bottom: 60px;
    /* height: 80px; */
  }

  nav a:link {
    font-size: 18px; 
    /* margin: 20px;
    padding: 20px; */
    margin-right: 30px;
    margin-top: 10px;
    display: inline-block;
    text-align: center; 
  }
nav { font-size: 18px; 
  text-align: center;

}
  button {
    font-size: 27px;
    padding:20px;
    cursor: pointer;

    position: absolute; 
    bottom: 50px; 
    right: 50px;
  

  }
  nav a:link:last-child {
    margin-right: 0;

  }

  article {
    margin-bottom: 60px;
  }
    
  aside {
    background-color: #f7f7f713;
    border-top: 5px solid #1098ad;
    border-bottom: 5px solid #1098ad;
  
    /* padding-top: 50px;
    padding-bottpm: 50px; */
    padding: 50px 0;
    width: 500px;
  }
  .post-header {
    margin-bottom: 40px;
    position: relative; 
  } 
  }

h1 {
   color: #1098ad; 
   font size: 32px; 
   text-transform: uppercase; 
   margin-bottom: 20px;
}

/*footer p {
  font-size: 16px;*/

#author {
  font-style: italic;
  font-size: 18px;
}
#copyright {
  font-size: 16px;
}

.related-author {
  font-size: 18px;
  font-weight: bold;
}
.related {
  list-style: none;
}

h1,
h2,
h3 {
  color: #1098ad;
  background-color: whitesmoke;


}

h1 {
  font-size: 26px;
  text-transform: uppercase;
  font-style: italic;
  border: 2px border-top: strong #1098ad;
}
h2 {
  font-size: 40px;
  margin-top: 30px;
  margin-bottom: 5px;
  /* position: relative; */
}

h3 {
  font-size: 30px;
  margin-top: 40px;
  margin-bottom: 20px;
}

h4 {
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 5px;
}

p {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 15px;
}

ul,ol { margin-left: 50px;
  margin-bottom: 20px;

}

li {
  font-size: 20px;
  margin-bottom: 10px;

}

li:last-child {
  margin-bottom: 0;
}


.first-li {
  font-weight: bold;
}

.post-image {
  width: 100%;
  height: auto;
  /* margin: 100px; */
}


/* li:first-child {
  /* font-weight: bold; */

/* li:last-child { */
/* font-style: italic; */
/* */
/* *
styling links */

a:link {
  color: #teal;
  text-decoration: none;
}

a:hover {
  color: red;
  font-weight: bold;
  text-decoration: underline #teal;
}
a:active {
  color: teal;
  font-style: italic;
}
a:visited {
  text-decoration: none;
  color: teal;


}
/* resolving conflicts */
/* #copyright {
  color: #444;
}
.copyright {
  color: blue;
}
.text {
  color: yellow;
}
.footer p {
  color: green; */
/* } */
h1::first-letter {
  font-style: normal;
  margin-right: 5px;
}

/* h3 + p:first-line {
  color: teal; 
} */
h2::after {
  content:"TOP";
  color: #000;
  background-color: #ffe70e;
  font-size: 16px;
  font-weight: bold;
  padding-top: 5px 10px;
  position: absolute; 
  top: -10px;
  right: -25px;

}
/* floats */
.author-image {
  float: left;

}
.author {
  /* padding-left:
  padding-top: 10px; */
  float: left;
  margin-left: 20px;


}
/* */
/* .author {
  float: left;
} */
/* .author-image {
  float: left;
} */

/* .author {
  padding-top: 18px;
  float: left;
  margin-left: 20px;
} */
/* .author {
  /* float: left; */
  margin-top: 10px;
  margin-left: 20px; */
}
/* h1 {
  float: left;
} */
/* nav {
  float: right;
} */
/* .clear {
  clear: both;
} */

article {
  width: 825px;
  float: left;

}
aside {
  width: 300px;
  float: right;

}
footer {
  clear: both;

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.