Birdman

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

Thumbnail
This awesome code was written by 0319AM, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0319AM ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="header">
        <div class="dropdown">

          <img src="https://s3.amazonaws.com/codecademy-content/projects/2/birdman/menu.svg" width="30px">
          <ul class="dropdown-menu">
            <li><a href="#">Work</a></li>
            <li><a href="#">Studio</a></li>
          </ul>
        
        </div>
        <h1 class="logo">Birdman</h1>
      </div>

      <div class="main">
        <div class="container">
            <h1>We design interfaces</h1>
          </div>
        </div>
        
      </div>
    </div>

    <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0319AM/birdman-WErKqe */
html, body {
  margin: 0;
  padding: 0;
  font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
  background: url('bg.jpg') no-repeat center center fixed;
  background-size: cover;
  padding: 20px 0;
}

.header .logo {
  font-size: 28px;
  letter-spacing: 4px;
  margin: 0;
  margin-left: 10px;
  text-transform: uppercase;
  font-weight: normal;
}

.dropdown,
.logo {
  display: inline-block;
  vertical-align: text-top;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  border-radius:0px; 
  box-shadow:none; 
  border:none;
  min-width: 200px;
  top: 28px;
  background-color: #000;
}

.dropdown-menu li {
  margin-left: 0;
  float:none;
}

.dropdown-menu li a {
  color:#fff;
  padding: 5px 0;
  text-align: center;
}

.dropdown-menu li a:hover {
  background-color:#ffff00;
  color:#000; 
}

.main {
  position: relative;
  top: 80px;
}

.main h1 {
  background-color:rgba(255,255,0,0.5); 
  display:inline; 
  color: #000;
  font-size:170px;
  line-height:150px;  
  text-transform: lowercase;
}

.main h2 {
  font-size: 60px;
  margin: 40px 0;
}

.main .btn {
  border-radius: 0px;
  font-size: 18px;
  color: 3333;
}

.main .btn-default {
  background-color: rgba(255,255,255,0.5);
  padding: 16px 26px;
}

@media (max-width: 800px) {
  .main h1 {
    font-size: 60px;
    line-height: 50px;
  }
}

/*Downloaded from https://www.codeseek.co/0319AM/birdman-WErKqe */
var main = function() {
  $("img").click(function() {
    $(".dropdown-menu").toggle();
  })
}
 
$(document).ready(main);

Comments