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

Dependencies

  • Bootstrap 4
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <!-- Styles -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="header-2">

        <nav class="navbar navbar-expand-md navbar-light bg-white py-md-3">
            <div class="container">
            <a class="navbar-brand font-weight-bold" href="#">FWR</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-2-nav" aria-controls="header-2-nav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-md-center mt-3 mt-md-0" id="header-2-nav">
                <div class="navbar-nav ml-auto">
                    <a class="nav-item nav-link active px-2 px-lg-3 rounded" href="#">Home<span class="sr-only">(current)</span></a>
                    <a class="nav-link mx-md-2 px-2 px-lg-3 rounded" href="#">About</a>
                    <a class="nav-link mx-md-2 px-2 px-lg-3 rounded" href="#">Features</a>
                    <a class="nav-link mx-md-2 px-2 px-lg-3 rounded" href="#">Pricing</a>
                    <a class="nav-link mx-md-2 px-2 px-lg-3 rounded" href="#">Contact</a>
                    <a class="btn btn-link mr-2" href="#">Login</a>
                    <a class="btn btn-outline-primary" href="#">Sign Up</a>
                </div>
            </div>
            </div>
        </nav>

        <div class="py-4 py-md-5 bg-light-primary">
            <div class="container py-xl-4">
                <div class="header-intro text-center mx-md-auto">
                    <h1 class="header-intro-title">Get the header you needed for your awesome website.</h1>
                    <button class="btn btn-lg btn-primary btn-rounded px-4 mt-3 mt-md-4">Get Started</button>

                    <div class="mockup-wrap mt-3">
                        <img src="//assets.free-website-resources.com/img/imac-bg.png" alt="mockup" class="img-fluid">
                    </div>
                </div>
                <div class="row mt-4 mt-md-5">
                    <div class="col-md-4 text-center px-xl-4 mt-3 mt-md-0 header-feature">
                        <h5 class="text-uppercase mb-3">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="col-md-4 text-center px-xl-4 mt-3 mt-md-0 header-feature">
                        <h5 class="text-uppercase mb-3">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="col-md-4 text-center px-xl-4 mt-3 mt-md-0 header-feature">
                        <h5 class="text-uppercase mb-3">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>
    <!-- /.header-2 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
// Bootstrap variables and mixins
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Variables
$primary:               #5863f8;
$danger:                #e33535;
$btn-border-radius-lg:  1.5rem;
$border-primary:        rgba($primary, .2);

// Custom CSS
.bg-light-primary {
  background-color: rgba($primary, .1);
}

.navbar-light {
  .navbar-brand {
    color: $primary;
  }
}

.nav-link {
  transition: background-color .3s, color .3s;

  @include hover {
    background-color: $gray-200;
  }

  &.active {
    background-color: $primary;
    color: $white !important;
  }
}

.btn-link {
  color: $primary;

  @include hover {
    background-color: rgba($primary, .1);
    text-decoration: none;
  }
}

.header-intro-title {
  font-size: 1.875rem;
  color: $gray-800;
}

.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);
  }
}

.btn-primary {
  @include button-variant($primary, $primary);

  &.btn-rounded {
    border-radius: $btn-border-radius-lg;
  }
}

.btn-outline-primary {
  @include button-outline-variant($primary)
}


@include media-breakpoint-up(md) {

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

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

}
.bg-light-primary {
  background-color: rgba(88, 99, 248, 0.1);
}

.navbar-light .navbar-brand {
  color: #5863f8;
}

.nav-link {
  -webkit-transition: background-color .3s, color .3s;
  transition: background-color .3s, color .3s;
}

.nav-link:hover {
  background-color: #e9ecef;
}

.nav-link.active {
  background-color: #5863f8;
  color: #fff !important;
}

.btn-link {
  color: #5863f8;
}

.btn-link:hover {
  background-color: rgba(88, 99, 248, 0.1);
  text-decoration: none;
}

.header-intro-title {
  font-size: 1.875rem;
  color: #343a40;
}

.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);
}

.btn-primary {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-primary:hover {
  color: #fff;
  background-color: #3341f6;
  border-color: #2735f6;
}

.btn-primary:focus, .btn-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #2735f6;
  border-color: #1b2af5;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

.btn-primary.btn-rounded {
  border-radius: 1.5rem;
}

.btn-outline-primary {
  color: #5863f8;
  background-color: transparent;
  background-image: none;
  border-color: #5863f8;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
  color: #5863f8;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #5863f8;
  border-color: #5863f8;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.5);
}

@media (min-width: 768px) {
  .header-intro {
    max-width: 700px;
  }
  .header-intro-title {
    font-size: 2.5rem;
  }
}
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL2hlYWRlci9oZWFkZXItMg==