A modern and clean header block with features section for use with homepage of websites and landing pages.

Dependencies

  • Bootstrap 4

Attribution

<!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 3</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 class="bg-light">

    <div class="header-3">

        <div class="header-inner pb-4">
            <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
                <div class="container">

                    <a class="navbar-brand" href="#">FWR</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mx-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#">About <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Features</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Pricing</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Contact</a>
                            </li>
                        </ul>
                        <button class="btn btn-login mt-4 mt-lg-0">Login</button>
                    </div>

                </div>
            </nav>

            <div class="container py-4 py-md-5 mt-xl-5">

                <div class="row align-items-md-center pb-xl-5">
                    <div class="col-md-6 order-md-2 px-4">
                        <img src="//assets.free-website-resources.com/img/banner-illustration.svg" alt="High Quality Ready Made Blocks" class="img-fluid d-block mx-auto">
                    </div>
                    <div class="col-md-6 order-md-1 px-4 mt-4 mt-md-0">
                        <h1 class="jumbotron-title">High Quality Ready Made Blocks</h1>
                        <p class="lead">The main aim of creating FWR blocks is to help designers, developers and agencies create websites and web apps quickly and easily. Each and every block uses minimal custom styling and is based on the robust Bootstrap framework.</p>
                        <button class="btn btn-lg btn-primary mt-4 mt-md-5">Get Started</button>
                    </div>
                </div>

            </div>
        </div>

        <div class="features-container position-relative">
            <div class="container">
                <div class="features-wrap mb-4 mb-md-5">

                    <div class="row">
                        <div class="feature col-md-4 d-xl-flex">
                            <div class="feature-icon flex-shrink-0 mb-3 mb-xl-0 mr-xl-4">
                                <img src="//assets.free-website-resources.com/img/icon-design.svg" alt="Fresh Design">
                            </div>
                            <div>
                                <h3 class="feature-title mb-3">Fresh Design</h3>
                                <p class="feature-text">FWR blocks bring in an air of fresh design with their creative layouts and blocks, which are easily customizable</p>
                            </div>
                        </div>
                        <div class="feature col-md-4 d-xl-flex mt-4 mt-md-0">
                            <div class="feature-icon flex-shrink-0 mb-3 mb-xl-0 mr-xl-4">
                                <img src="//assets.free-website-resources.com/img/icon-code.svg" alt="Clean Code">
                            </div>
                            <div>
                                <h3 class="feature-title mb-3">Clean Code</h3>
                                <p class="feature-text">FWR blocks are the cleanest pieces of HTML blocks, which are built with utmost care to quality and usability</p>
                            </div>
                        </div>
                        <div class="feature col-md-4 d-xl-flex mt-4 mt-md-0">
                            <div class="feature-icon flex-shrink-0 mb-3 mb-xl-0 mr-xl-4">
                                <img src="//assets.free-website-resources.com/img/icon-tool.svg" alt="Perfect Tool">
                            </div>
                            <div>
                                <h3 class="feature-title mb-3">Perfect Tool</h3>
                                <p class="feature-text">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>

    </div>

    <!-- 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;
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{rgba($white,.65)}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>"), "#", "%23");

// Custom CSS
.header-3 {
  .navbar-brand {
    font-weight: bold;
    color: $primary;
  }
}

.header-inner {
  background-color: rgba($primary,.1);
}

.navbar-brand {
  font-size: 1.125rem;
}

.navbar-toggler {
  padding: 2px 6px;
  border: none;
  background-color: $primary;
}

.navbar-toggler-icon {
  background-image: $navbar-light-toggler-icon-bg !important;
}

.btn-primary {
  @include button-variant($primary, $primary);
  text-transform: uppercase;
}

.btn-lg {
  font-size: 1.25rem;
  height: 64px;
  border-radius: 40px;
  padding-left: 4rem;
  padding-right: 4rem;
}

.jumbotron-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: $primary;
  margin-bottom: 20px;
}

.lead {
  font-size: 1.125rem;
  line-height: 2;
  color: $gray-800;
}

.nav-link {
  font-size: 0.875rem;
  color: $gray-600;
  text-transform: uppercase;

  .navbar .navbar-nav & {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.btn-login {
  background-color: $white;
  font-size: 16px;
  font-weight: bold;
  color: $primary;
  text-transform: uppercase;
  padding-left: 24px;
  padding-right: 24px;
  height: 40px;
  border-radius: 25px;
  box-shadow: $box-shadow-sm;
  transition: box-shadow .3s, color .3s;

  @include hover-focus-active {
    color: darken($primary,10%);
    box-shadow: $box-shadow;
  }
}

// Features
.features-container {
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50%;
    max-height: 100px;
    background-color: rgba($primary,.1);
    z-index: 0;
  }
}

.features-wrap {
  background-color: $white;
  padding: 30px;
  border-radius: 30px;
  box-shadow: 0 3px 30px rgba($black, .1);
  position: relative;
  z-index: 1;
}

.feature {
  padding-bottom: 24px;
  border-bottom: 2px solid rgba($primary,.1);

  &:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}

.feature-icon {
  width: 50px;
  height: 50px;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.feature-title {
  font-size: 1.25rem;
  color: $primary;
}

.feature-text {
  color: $gray-600;

  &:last-child {
    margin-bottom: 0;
  }
}


@include media-breakpoint-up(md) {

  // Features
  .feature {
    padding-bottom: 0;
    padding-left: 24px;
    padding-right: 24px;
    border-bottom: none;
    border-right: 2px solid rgba($primary, .1);

    &:last-child {
      border-right: none;
    }
  }

}


@include media-breakpoint-up(xl) {

  .navbar {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .jumbotron-title {
    font-size: 2rem;
    margin-bottom: 40px;
  }

  .lead {
    font-size: 1.25rem;
  }

  .navbar-brand {
    font-size: 1.5rem;
  }

  .navbar {
    .navbar-nav {
      .nav-link {
        font-size: 1rem;
        padding-left: 30px;
        padding-right: 30px;
      }
    }
  }

  .btn-login {
    height: 50px;
    padding-left: 30px;
    padding-right: 30px;
  }

  // Features
  .features-wrap {
    padding: 40px;
    border-radius: 50px;
    box-shadow: 0 3px 40px rgba($black, .1);
  }

  .feature-icon {
    width: 65px;
    height: 65px;
  }

  .feature-title {
    font-size: 1.5rem;
  }

}


@media (min-width: 1540px) {

  .container {
    max-width: 1540px;
  }

  .jumbotron-title {
    font-size: 2.5rem;
  }

  // Features
  .features-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .feature {
    padding-left: 40px;
    padding-right: 40px;
  }

  .feature-icon {
    width: 65px;
    height: 65px;
  }

}


.header-3 .navbar-brand {
  font-weight: bold;
  color: #5863F8;
}

.header-inner {
  background-color: rgba(88, 99, 248, 0.1);
}

.navbar-brand {
  font-size: 1.125rem;
}

.navbar-toggler {
  padding: 2px 6px;
  border: none;
  background-color: #5863F8;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='rgba(255, 255, 255, 0.65)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
}

.btn-primary {
  color: #fff;
  background-color: #5863F8;
  border-color: #5863F8;
  text-transform: uppercase;
}

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

.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #3341f6;
  border-color: #2735f6;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(113, 122, 249, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(113, 122, 249, 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(113, 122, 249, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(113, 122, 249, 0.5);
}

.btn-lg {
  font-size: 1.25rem;
  height: 64px;
  border-radius: 40px;
  padding-left: 4rem;
  padding-right: 4rem;
}

.jumbotron-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #5863F8;
  margin-bottom: 20px;
}

.lead {
  font-size: 1.125rem;
  line-height: 2;
  color: #343a40;
}

.nav-link {
  font-size: 0.875rem;
  color: #6c757d;
  text-transform: uppercase;
}

.navbar .navbar-nav .nav-link {
  padding-left: 20px;
  padding-right: 20px;
}

.btn-login {
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  color: #5863F8;
  text-transform: uppercase;
  padding-left: 24px;
  padding-right: 24px;
  height: 40px;
  border-radius: 25px;
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
          box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  -webkit-transition: color .3s, -webkit-box-shadow .3s;
  transition: color .3s, -webkit-box-shadow .3s;
  -o-transition: box-shadow .3s, color .3s;
  transition: box-shadow .3s, color .3s;
  transition: box-shadow .3s, color .3s, -webkit-box-shadow .3s;
}

.btn-login:hover, .btn-login:focus, .btn-login:active {
  color: #2735f6;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.features-container::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  max-height: 100px;
  background-color: rgba(88, 99, 248, 0.1);
  z-index: 0;
}

.features-wrap {
  background-color: #fff;
  padding: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
          box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.feature {
  padding-bottom: 24px;
  border-bottom: 2px solid rgba(88, 99, 248, 0.1);
}

.feature:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.feature-icon {
  width: 50px;
  height: 50px;
}

.feature-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.feature-title {
  font-size: 1.25rem;
  color: #5863F8;
}

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

.feature-text:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .feature {
    padding-bottom: 0;
    padding-left: 24px;
    padding-right: 24px;
    border-bottom: none;
    border-right: 2px solid rgba(88, 99, 248, 0.1);
  }
  .feature:last-child {
    border-right: none;
  }
}

@media (min-width: 1200px) {
  .navbar {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .jumbotron-title {
    font-size: 2rem;
    margin-bottom: 40px;
  }
  .lead {
    font-size: 1.25rem;
  }
  .navbar-brand {
    font-size: 1.5rem;
  }
  .navbar .navbar-nav .nav-link {
    font-size: 1rem;
    padding-left: 30px;
    padding-right: 30px;
  }
  .btn-login {
    height: 50px;
    padding-left: 30px;
    padding-right: 30px;
  }
  .features-wrap {
    padding: 40px;
    border-radius: 50px;
    -webkit-box-shadow: 0 3px 40px rgba(0, 0, 0, 0.1);
            box-shadow: 0 3px 40px rgba(0, 0, 0, 0.1);
  }
  .feature-icon {
    width: 65px;
    height: 65px;
  }
  .feature-title {
    font-size: 1.5rem;
  }
}

@media (min-width: 1540px) {
  .container {
    max-width: 1540px;
  }
  .jumbotron-title {
    font-size: 2.5rem;
  }
  .features-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
  .feature {
    padding-left: 40px;
    padding-right: 40px;
  }
  .feature-icon {
    width: 65px;
    height: 65px;
  }
}
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL2hlYWRlci9oZWFkZXItMw==