Item: Header
Rating: 3.4
Author: bephf

2 Downloads
10 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  <!-- unrecognized -->
<div class="teacher-banner">
  Are you a teacher in need of funding? <a href="#">Set up your classroom »</a>
  <i class="fa fa-times" id="hidethisshit"></i>
</div>
<header class="unrecognized">
    <nav>
      <a href="#" id="DClogo">DonorsChoose.org</a>
      <a href="#" class="give-button">Give Now</a>
      <a href="#">About</a>|
      <a href="#">Help</a>
    </nav>
    <nav class="personalized">
      <a href="#">Sign In</a>
    </nav>
</header>

<!-- recognized donor -->
<header class="recognized donor">
    <nav>
      <a href="#" id="DClogo">DonorsChoose.org</a>
      <a href="#" class="give-button">Give Now</a>
      <a href="#">About</a>|
      <a href="#">Help</a>
    </nav>
    <nav class="personalized">
      <a href="#">My Account<i class="fa fa-caret-down"></i></a>
    </nav>
</header>

<!-- recognized teacher -->
<header class="recognized teacher">
    <nav>
      <a href="#" id="DClogo">DonorsChoose.org</a>
      <a href="#" class="give-button">Give Now</a>
      <a href="#">About</a>|
      <a href="#">Help</a>
    </nav>
    <nav class="personalized">
      <a href="#" id="classroom-trigger">My Classroom<i class="fa fa-caret-down"></i></a>|
      <div class="subnav classroom">
        <ul>
          <li><a href="#"><i class="fa fa-rocket"></i>Projects</a></li>
          <li><a href="#"><i class="fa fa-bookmark"></i>Public Page</a></li>
          <li><a href="#"><i class="fa fa-briefcase"></i>Classroom Info</a></li>
          <li class="new-project"><a href="#"><i class="fa fa-plus"></i>New Project</a></li>
      </div>
        <a href="#" id="account-trigger">My Account<i class="fa fa-caret-down"></i></a>
<div class="subnav account">
  <span class="greetings">Welcome Sebastian!</span>
        <ul>
          <li><a href="#"><i class="fa fa-smile-o"></i>Donor Profile</a></li>
          <li><a href="#"><i class="fa fa-heart"></i>Favorites</a></li>
          <li><a href="#"><i class="fa fa-flash"></i>Giving History</a></li>
          <li><a href="#"><i class="fa fa-flag"></i>Campaigns</a></li>
          <li><a href="#"><i class="fa fa-envelope"></i>Email Preferences</a></li>
          <li><a href="#"><i class="fa fa-gear"></i>Account Settings</a></li>
          <li><a href="#"><i class="fa fa-sign-out"></i>Sign Out</a></li>
      </div>        
    </nav>
</header>
<div class="cart-banner">
  <div class="message">
  Complete your donation of $50 to Mrs. Garrett’s classroom <a href="#" class="button"><i class="fa fa-shopping-cart"></i>Check Out</a>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>


/*Downloaded from https://www.codeseek.co/bephf/header-habcL */
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
/* GLOBAL RESETS TO MIMIC ACTUAL STYLES */
body {
  font-family: arial;
  color: #424242;
  line-height: 1.4;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  color: #20A1D4;
  text-decoration: none;
}

.teacher-banner {
  background: #fafafa;
  margin: 0 -1em 1em;
  padding: .75em 0;
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: #666;
  border-bottom: 1px solid #eaeaea;
  position: relative;
}
.teacher-banner .fa {
  position: absolute;
  right: 1em;
  color: #ccc;
  top: 1em;
}

.cart-banner {
  background: #424242;
  margin: -6em -1em 1em;
  padding: .75em 1em;
  color: #dcdcdc;
  font-style: italic;
  font-size: 14px;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  box-shadow: inset 0 2px 0 #333;
}
.cart-banner .message {
  margin: 0 auto;
  max-width: 960px;
  text-align: right;
}
.cart-banner .button {
  display: inline-block;
  background: #1CBC2C;
  text-shadow: 0 1px 1px #1AB029;
  border: 1px solid #1AB029;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  margin-left: 1em;
  padding: 0 1em;
  height: 40px;
  line-height: 40px;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 0 #1AB029;
  cursor: pointer;
}
.cart-banner .button .fa {
  margin-right: .5em;
}
.cart-banner .button:hover {
  border-color: #169923;
  text-shadow: 0 1px 1px #169923;
  box-shadow: inset 0 -1px 0 0 #169923;
}
.cart-banner .button:active, .cart-banner .button.loading {
  box-shadow: none;
  line-height: 52px;
}

header {
  position: relative;
  max-width: 960px;
  margin: 0 auto 6em;
}

nav {
  line-height: 40px;
  height: 40px;
  color: #eaeaea;
  font-size: 14px;
}
nav a {
  color: #444;
  display: inline-block;
  padding: 0 .75em 0 .5em;
  vertical-align: middle;
}
nav a:hover {
  color: #222;
}
nav a#DClogo {
  padding-left: 0;
  color: #EF5F3C;
}
nav a.give-button {
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: inset 0 -1px 0 0 #eaeaea;
  border-radius: 3px;
  height: 40px;
  line-height: 40px;
  padding: 0 1em;
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;
}
nav a.give-button:hover {
  border-color: #dcdcdc;
  box-shadow: inset 0 -1px 0 0 #dcdcdc;
}
nav a.give-button:active {
  box-shadow: none;
  line-height: 42px;
}
nav.personalized {
  position: absolute;
  right: 0;
  top: 0;
  /* Stroke */
  /* Fill */
}
.recognized nav.personalized > a {
  position: relative;
}
.recognized nav.personalized > a .fa {
  margin-left: .5em;
}
nav.personalized .triggered {
  position: relative;
}
nav.personalized .triggered:before,
nav.personalized .triggered:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-top: 0;
  z-index: 2;
}
nav.personalized .triggered:before {
  bottom: -1px;
  right: 32px;
  /* If 1px darken stroke slightly */
  border-bottom-color: #dcdcdc;
  border-width: 8px;
}
nav.personalized .triggered:after {
  bottom: -2px;
  right: 32px;
  border-bottom-color: #fff;
  border-width: 8px;
}
nav .subnav {
  display: none;
  position: absolute;
  right: 0;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 3px;
  width: 200px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  color: #828282;
}
nav .subnav .greetings {
  display: block;
  padding: 0 .75em;
  font-style: italic;
  border-bottom: 1px solid #fafafa;
}
nav .subnav .fa {
  color: #dcdcdc;
  width: 16px;
  text-align: center;
  margin-right: .5em;
  font-size: 16px;
}
nav .subnav.classroom {
  left: -5em;
}
nav .subnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .subnav ul li a {
  display: block;
  border-bottom: 1px solid #fafafa;
  padding: 0 .75em;
}
nav .subnav ul li a:hover {
  background: #fafafa;
}
nav .subnav ul li:last-child a {
  border-bottom: 0;
}
nav .subnav ul .new-project a {
  background: #F4FAFD;
  font-weight: bold;
  border-top: 1px solid #eaeaea;
  margin-top: -1px;
}
nav .subnav ul .new-project a:hover {
  background: #EEF7FC;
}


/*Downloaded from https://www.codeseek.co/bephf/header-habcL */
$("#account-trigger").click(function() {
  $(".account").toggle();
  $(this).toggleClass('triggered');
});
$("#classroom-trigger").click(function() {
  $(".classroom").toggle();
  $(this).toggleClass('triggered');
});
$("#hidethisshit").click(function() {
  $(".teacher-banner").slideUp();
});

Comments

More from bephf

Header

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

Technologies

Comments

More from bephf

Teacher reg1b

Teacher reg 2b

Teacher reg 3b

Teacher reg 3

You Might Also Like

Paint with CSS Grid: Luna Lovegood

A Pen by Muhammad Mahbubur Rahman

Transition Easing

Background transition

A Pen by Curso Iot

I forgot how .addClass() works in jQuery

SCSS Pixel art mixin

Test JSON