MyFirstCodePen

In this example below you will see how to do a MyFirstCodePen with some HTML / CSS and Javascript

This is just a scratch model, I'm still in the learning phase

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

<head>
  <meta charset="UTF-8">
  <title>MyFirstCodePen</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="site-header">

  <div class='logo'>
    <a href="#" class="RS">
      <center>KRS</center>
    </a>
  </div>

  <nav class="site-nav">

    <ul>

      <li class="color1"><a href="https://www.instagram.com/i2ohit.shrestha">Instagram</a></li>

      <li class="color2"><a href="https://www.facebook.com/120HEAT?ref=bookmarks">Facebook</a></li>

      <li class="color3"><a href="https://open.spotify.com/user/124103439">Spotify</a></li>

    </ul>

  </nav>

  <div class="account-action">


    <div class="account-dropdown">

    </div>

  </div>


</header>

<body>


  <br><img src="https://upload.wikimedia.org/wikipedia/commons/8/80/Flatirons_Winter_Sunrise_edit_2.jpg" /><br>


</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/120hit/myfirstcodepen-GqKJpZ */
@media (max-width: 600px) {
  .site-header {
    flex-wrap: wrap;
    /* "flex-wrap" wraps the context, ex the header menu tabs on the site. when you descale the browser tab the context will not stay in one line unless you do the flex wrap code   */
  }

  .site-nav {
    order: 2;
    /* by defalut, the flex items are laid out in the source code, but the Order Property Controls the Order in whcih they apperar  in the flex container */
    background: white;
    width: 100%;
  }
}
.site-header {
  background: #0D1313;
  color: white;
  display: flex;
  /* this defines a flex container; it can be either inline or block, this also enables a flex context to all DIRECT children */
  flex-wrap: wrap;
  /* "flex-wrap" wraps the context, ex the header menu tabs on the site. when you descale the browser tab by default the content tab will stay in one line unless you do the flex wrap code   */
}

.RS {
  text-decoration: none;
  color: #345678;
  list-style: none;
  display: flex;
  margin: 0;
  font-family: helvetica;
  font-weight: bold;
  padding: 0;
  width: 100%;
  height: auto;
}

.site-nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  font-family: helvetica;
  font-weight: bold;
  padding: 0;
  width: 100%;
  height: auto;
}
.site-nav a {
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  padding: 15px;
  display: inline-block;
  text-shadow: 3px 3px 3px #020202;
}

.color1 a {
  background: #f77737;
}

.color2 a {
  background: #3b5998;
}

.color3 a {
  background: #96bf48;
}

img {
  width: 100%;
  height: auto;
  padding: 0px 0px 0px 0px;
}

.logo {
  padding: 10px 10px 20px 13px;
  height: auto;
}

Comments