The Web Design Survival Guide | HTML Example 6

by todaly1

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <link rel="stylesheet" href="css-for html-example-6.css">
  </head>
  <body>
    <header>
     <h2>h2 Headline inside the header tag</h2>
    </header>
    <nav class="navbar">
       <ul>
       <li><a href="#">Menu Link 1</a></li>
       <li><a href="#">Menu Link 2</a></li>
       <li><a href="#">Menu Link 3</a></li>
       <li><a href="#">Menu Link 4</a></li>
       <li><a href="#">Menu Link 5</a></li>
       </ul>
     </nav>
    <main>
      <section id="section-1">
        <article>
         <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo totam velit, debitis quam quia, minus praesentium voluptatibus nisi explicabo quasi placeat enim dolor sapiente sit similique architecto, consequatur ex! Veritatis, explicabo beatae aut esse quisquam qui ea deleniti fugit, dolorum eos unde. Explicabo, modi, velit nam libero odio adipisci nisi omnis?</p>
         </div>
         <div class="column">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate officia maxime quidem reprehenderit odit autem dolorem minima repellendus pariatur repellat consectetur laboriosam ex sapiente ducimus aliquam modi, magnam iusto minus numquam, itaque, consequuntur adipisci, est molestiae. Delectus nisi labore quod est, iste quibusdam excepturi optio eos fuga.</p>
         </div>
        </article>
      </section>
    </main>
    <footer>
       <p><a href="http://www.thewebdesignsurvivalguide.com" target="_blank">©2019 The Web Design Survival Guide</a></p>
    </footer>
  </body>
</html>

CSS

@charset "UTF-8";
/* CSS Document */

body{
font-family: "Open Sans", Arial, sans-serif;
}
      
header{
background-color: lightgray;
padding: 5px;
}

h2{ 
font-size: 24px;
padding: 10px;
font-weight: normal;
text-transform: uppercase;
}

a:link{
color: #50baba;
}

a:visited{
color: #5a84b3;
}

a:hover{
color: #cccccc;
text-decoration: underline;
}

a:active{
color: #50baba;
}

#nav-example{
background-color: #000000;
padding: 2px;
height: 30px;
}

.navbar ul li{
float: left;
list-style: none;
padding-right: 15px;
font-size: 14px;

}

#section-1{
background-color: grey;
padding: 5px;
overflow: auto;
}

.column{
width: 47%;
float: left;
background-color: white;
margin: 5px;
padding: 5px;
}

footer{
background-color: black;
padding: 5px;
font-size: 14px;
font-style: italic;
color: white;
clear: both;
padding-left: 15px;
}