[Topic-09] Display, Pt. 2

In this example below you will see how to do a [Topic-09] Display, Pt. 2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Media-Ed-Online, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Media-Ed-Online ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>[Topic-09] Display, Pt. 2</title>
  
  
  <link rel='stylesheet prefetch' href='css/gmvpka.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
   <header>
      <p style="text-transform: capital">A menu with a default display:</p>
      <div class="menu-item">
         Home
      </div>
      <div class="menu-item">
         Services
      </div>
      <div class="menu-item">
         About
      </div>
      <div class="menu-item">
         Contact
      </div>
   </header>

   <header class="">
      <p>A menu with items displayed inline:</p>
      <div class="menu-item display-inline">
         Home
      </div>
      <div class="menu-item display-inline">
         Services
      </div>
      <div class="menu-item display-inline">
         About
      </div>
      <div class="menu-item display-inline">
         Contact
      </div>
   </header>

   <header class="">
      <p>A menu with items displayed inline as blocks:</p>
      <div class="menu-item display-inline-block">
         Home
      </div>
      <div class="menu-item display-inline-block">
         Services
      </div>
      <div class="menu-item display-inline-block">
         About
      </div>
      <div class="menu-item display-inline-block">
         Contact
      </div>
   </header>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Media-Ed-Online/topic-09-display-pt-2-MOJqvQ */
header {
    background-color: #d0d0d0;
    font-family: sans-serif;
    font-size: 14pt;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding: 0.5em;
}

.menu-item {
    margin: auto;
    padding: 0.5em;
    min-width: 100px;
    color: #fff;
    background-color: goldenrod;
      line-height: 2.1em;
}

.menu-item:hover {
    background-color: gold;
    color: #333;
}

.display-inline {
    display: inline;
}
.display-inline-block {
    display: inline-block;
}

Comments