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

Dependencies

  • Bootstrap 4
  • FontAwesome
<!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 1</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">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="header-1">

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

            <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample09">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item active">
                        <a class="nav-link mx-md-2" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mx-md-2" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mx-md-2" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mx-md-2" href="#">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link mx-md-2" href="#">Blog</a>
                    </li>
                </ul>
                <div class="my-3 my-lg-0">
                    <a class="btn btn-outline-light mr-1" href="#">Sign In</a>
                    <a class="btn btn-primary" href="#">Sign Up</a>
                </div>
            </div>
        </nav>

        <div class="jumbotron d-flex align-items-center mb-0">
            <div class="container">
                <div class="header-content mx-auto text-center">
                    <span class="fas fa-bookmark"></span>
                    <h1 class="display-4 my-3 mt-md-4">Hello, world!</h1>
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid autem dolore dolorem ea inventore molestiae nemo neque non, quidem recusandae soluta tenetur! Aut eaque, placeat!</p>
                    <p class="mt-3 mt-md-5">
                        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                    </p>
                </div>
            </div>
        </div>

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

    <!-- 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;
$border-color:  #ddd;

// Custom CSS
.header-content {
  max-width: 600px;

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

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

// MD breakpoint
@include media-breakpoint-up(md) {

  .jumbotron {
    min-height: calc(100vh - 3.5rem);
  }

}
.header-content {
  max-width: 600px;
}

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

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

@media (min-width: 768px) {
  .jumbotron {
    min-height: calc(100vh - 3.5rem);
  }
}
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL2hlYWRlci9oZWFkZXItMQ==