Header block for use with homepage of websites and landing pages.

Dependencies

  • Foundation 6
  • FontAwesome
<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Foundation Blocks - Header 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="header-2">
        <div class="top-bar stacked-for-medium">
            <div class="grid-container">
                <div class="grid-x ">
                    <div class="cell small-10 large-1">
                        <span class="logo">FWR</span>
                    </div>
                    <div class="cell small-2 large-order-2 text-right hide-for-large">
                        <span data-responsive-toggle="main-nav" data-hide-for="large">
                            <button class="menu-icon" type="button" data-toggle></button>
                        </span>
                    </div>
                    <div class="small-12 large-11 large-order-3 grid-x" id="main-nav">
                        <ul class="dropdown menu vertical large-horizontal">
                            <li class="is-active"><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Features</a></li>
                            <li><a href="#">Pricing</a></li>
                            <li><a href="#">Contact</a></li>
                            <li><a href="#" class="loginbtn">Login</a></li>
                            <li><a href="#" class="hollow button">Sign Up</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid-x grid-padding-x align-middle va-height">
            <div class="cell small-12">
                <div class="header-content text-center">
                    <div class="header-intro">
                        <h1 class="header-intro-title">Get the header you needed for your awesome website.</h1>
                        <button class="button primary large">Get Started</button>
                        <div class="mockup-wrap">
                            <img src="//assets.free-website-resources.com/img/imac-bg.png" alt="mockup" class="img-fluid">
                        </div>
                    </div>
                    <div class="grid-x grid-padding-x header-features">
                        <div class="cell medium-4 text-center header-feature">
                            <h5 class="header-feature-title text-uppercase">Fresh Design</h5>
                            <p class="text-muted">FWR blocks bring in an air of fresh design with their creative layouts and
                                blocks, which are easily customizable</p>
                        </div>
                        <div class="cell medium-4 text-center header-feature">
                            <h5 class="header-feature-title text-uppercase">Clean Code</h5>
                            <p class="text-muted">FWR blocks are the cleanest pieces of HTML blocks, which are built with
                                utmost care to quality and usability.</p>
                        </div>
                        <div class="cell medium-4 text-center header-feature">
                            <h5 class="header-feature-title text-uppercase">Perfect Tool</h5>
                            <p class="text-muted">FWR blocks is a perfect tool for designers, developers and agencies
                                looking to create stunning websites in no time.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /.header-2 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>
// Foundation variables and mixins
@import "~foundation-sites/scss/foundation";

// Variables
$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$header-font-family: $body-font-family;
$primary: #5863F8;
$white: $white;
$body-background: rgba($primary, .1);
$white: #fff;
$gray: #6c757d;
$light-gray: #e9ecef;
$dark-gray: #343a40;

$menu-icon-border: rgba($black, .1);
$menu-icon-color: rgba($black, .5);

$button-radius: 4px;
$large-button-radius: 50px;

// Custom CSS
body {
  background: $body-background;
  font-family: #{$body-font-family} !important;
}

h1, h5 {
  font-family: $header-font-family;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-muted {
  color: $gray;
}

.grid-container {
  max-width: 70rem;
  width: 100%;
}

.lead {
  font-weight: 300;
}

.top-bar {
  background-color: $white;
  color: $white;
  padding-left: 0;
  padding-right: 0;
  //@include padding-direction('horizontal', 1);

  .logo {
    font-size: 1.25rem;
    color: $primary;
    font-weight: 700;
    display: inline-block;
    margin-top: 3px;
  }

  ul {
    background-color: transparent;
  }
}

.menu {
  width: 100%;
  margin-top: 10px;

  a {
    color: rgba($black, .5);
    border-radius: $button-radius;
    margin-left: 0;
    margin-right: 0;

    &:hover {
      color: rgba($black, .5);
      background-color: $light-gray;
    }
  }

  &.dropdown {
    a {
      padding: 9px 15px 12px;
    }
    .is-active a {
      color: $white;
      background-color: $primary;
      border-radius: 4px;
    }
    li a.loginbtn{
      color: $primary;
      text-align: center;
    }
  }
}

.menu-icon {
  margin-top: 0;
  border: solid 1px $menu-icon-border;
  border-radius: 4px;
  padding: 18px;
  width: 50px;

  &:after {
    background: $menu-icon-color;
    box-shadow: 0 7px 0 #{$menu-icon-color}, 0 14px 0 #{$menu-icon-color};
    margin: 10px 12px;
    width: 26px;
  }
}

.top-bar-buttons {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.button {
  border-radius: $large-button-radius;
  margin-bottom: 0;

  &.primary {
    @include button-style($primary, 'auto', $white);
  }

  &.hollow {
    @include button-hollow-style($primary);
    border-radius: $button-radius;
    font-size: 15px;

    &:hover, &:focus, &:active {
      background-color: $primary;
      border-color: $primary;
      color: $white;
    }
  }
}

.header-feature {
  padding-bottom: 1.5rem;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    height: 2px;
    width: 80px;
    left: 50%;
    top: -1.5rem;
    transform: translateX(-50%);
    margin-bottom: 2rem;
    background-color: rgba($primary, .2);
  }
}

.header-intro {
  max-width: 700px;
  margin: 0 auto;

  .button {
    margin-top: 1rem;
    @include padding-direction('vertical', .75);
  }
}

.va-height {
  min-height: calc(100vh - 56px);
  @include padding(2, 1, 2, 1);

  .header-content {
    max-width: 1100px;
    margin: 0 auto;

    .fas {
      width: 60px;
      height: 60px;
      background-color: $primary;
      border: 2px solid #ddd;
      border-radius: 50%;
      font-size: 1.5rem;
      line-height: 3.5rem;
      color: $white;
    }

    .lead {
      line-height: 1.5;
    }
  }
}

.header-intro-title {
  font-size: 1.875rem;
  font-weight: normal;
  line-height: 1.2;
  color: $dark-gray;
}

.mockup-wrap {
  margin-top: 1rem;
}

.header-features {
  margin-top: 1.5rem;
}

.header-feature {
  margin-top: 1rem;

  p {
    line-height: 1.5;
  }
}

.header-feature-title {
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}


@media #{breakpoint(medium)} {

  .va-height {
    @include padding-direction('vertical', 3);
  }

  .header-intro {
    .button {
      margin-top: 1.5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }

  .header-intro-title {
    font-size: 2.5rem;
  }

  .header-features {
    margin-top: 3rem;
  }

  .header-feature {
    margin-top: 0;
  }

}

@media #{breakpoint(large)} {

  .header-content {
    h1 {
      font-size: 2.5rem;
    }
  }

  .top-bar {
    padding-top: 1rem;
    padding-bottom: 1rem;

    .menu {
      margin-top: 0;
      @include flex-align('right', null);

      > li {
        > a {
          padding-left: 1rem;
          padding-right: 1rem;
          margin-left: .375rem;
          margin-right: .375rem;
        }
      }
    }
  }

  .top-bar-buttons {
    margin-top: 0;
    margin-bottom: 0;

    .button {
      @include padding-direction('horizontal', .75);
    }
  }

  .header-features {
    margin-top: 3rem;
  }

}

@media #{breakpoint(xlarge)} {

  .top-bar-buttons {
    .button {
      @include padding-direction('horizontal', 1);
    }
  }

  .header-content {
    @include padding-direction('vertical', 1.5);
  }

}
/**
 * Foundation for Sites by ZURB
 * Version 6.4.4-rc1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
body {
  background: rgba(88, 99, 248, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
}

h1, h5 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.text-uppercase {
  text-transform: uppercase;
}

.text-muted {
  color: #6c757d;
}

.grid-container {
  max-width: 70rem;
  width: 100%;
}

.lead {
  font-weight: 300;
}

.top-bar {
  background-color: #fff;
  color: #fff;
  padding-left: 0;
  padding-right: 0;
}

.top-bar .logo {
  font-size: 1.25rem;
  color: #5863F8;
  font-weight: 700;
  display: inline-block;
  margin-top: 3px;
}

.top-bar ul {
  background-color: transparent;
}

.menu {
  width: 100%;
  margin-top: 10px;
}

.menu a {
  color: rgba(10, 10, 10, 0.5);
  border-radius: 4px;
  margin-left: 0;
  margin-right: 0;
}

.menu a:hover {
  color: rgba(10, 10, 10, 0.5);
  background-color: #e9ecef;
}

.menu.dropdown a {
  padding: 9px 15px 12px;
}

.menu.dropdown .is-active a {
  color: #fff;
  background-color: #5863F8;
  border-radius: 4px;
}

.menu.dropdown li a.loginbtn {
  color: #5863F8;
  text-align: center;
}

.menu-icon {
  margin-top: 0;
  border: solid 1px rgba(10, 10, 10, 0.1);
  border-radius: 4px;
  padding: 18px;
  width: 50px;
}

.menu-icon:after {
  background: rgba(10, 10, 10, 0.5);
  -webkit-box-shadow: 0 7px 0 rgba(10, 10, 10, 0.5), 0 14px 0 rgba(10, 10, 10, 0.5);
          box-shadow: 0 7px 0 rgba(10, 10, 10, 0.5), 0 14px 0 rgba(10, 10, 10, 0.5);
  margin: 10px 12px;
  width: 26px;
}

.top-bar-buttons {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.button {
  border-radius: 50px;
  margin-bottom: 0;
}

.button.primary {
  background-color: #5863F8;
  color: #fff;
}

.button.primary:hover, .button.primary:focus {
  background-color: #1827f5;
  color: #fff;
}

.button.hollow {
  border: 1px solid #5863F8;
  color: #5863F8;
  border-radius: 4px;
  font-size: 15px;
}

.button.hollow:hover, .button.hollow:focus {
  border-color: #0711a1;
  color: #0711a1;
}

.button.hollow:hover.disabled, .button.hollow:hover[disabled], .button.hollow:focus.disabled, .button.hollow:focus[disabled] {
  border: 1px solid #5863F8;
  color: #5863F8;
}

.button.hollow:hover, .button.hollow:focus, .button.hollow:active {
  background-color: #5863F8;
  border-color: #5863F8;
  color: #fff;
}

.header-feature {
  padding-bottom: 1.5rem;
  position: relative;
}

.header-feature:before {
  content: '';
  position: absolute;
  height: 2px;
  width: 80px;
  left: 50%;
  top: -1.5rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-bottom: 2rem;
  background-color: rgba(88, 99, 248, 0.2);
}

.header-intro {
  max-width: 700px;
  margin: 0 auto;
}

.header-intro .button {
  margin-top: 1rem;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.va-height {
  min-height: calc(100vh - 56px);
  padding-top: 2rem !important;
  padding-right: 1rem !important;
  padding-bottom: 2rem !important;
  padding-left: 1rem !important;
}

.va-height .header-content {
  max-width: 1100px;
  margin: 0 auto;
}

.va-height .header-content .fas {
  width: 60px;
  height: 60px;
  background-color: #5863F8;
  border: 2px solid #ddd;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 3.5rem;
  color: #fff;
}

.va-height .header-content .lead {
  line-height: 1.5;
}

.header-intro-title {
  font-size: 1.875rem;
  font-weight: normal;
  line-height: 1.2;
  color: #343a40;
}

.mockup-wrap {
  margin-top: 1rem;
}

.header-features {
  margin-top: 1.5rem;
}

.header-feature {
  margin-top: 1rem;
}

.header-feature p {
  line-height: 1.5;
}

.header-feature-title {
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

@media (min-width: 40em) {
  .va-height {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .header-intro .button {
    margin-top: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .header-intro-title {
    font-size: 2.5rem;
  }
  .header-features {
    margin-top: 3rem;
  }
  .header-feature {
    margin-top: 0;
  }
}

@media (min-width: 64em) {
  .header-content h1 {
    font-size: 2.5rem;
  }
  .top-bar {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .top-bar .menu {
    margin-top: 0;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .top-bar .menu > li > a {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: .375rem;
    margin-right: .375rem;
  }
  .top-bar-buttons {
    margin-top: 0;
    margin-bottom: 0;
  }
  .top-bar-buttons .button {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
  }
  .header-features {
    margin-top: 3rem;
  }
}

@media (min-width: 75em) {
  .top-bar-buttons .button {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .header-content {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvZm91bmRhdGlvbi9oZWFkZXIvaGVhZGVyLTI=