Call to action block for use with 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 - CTA 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">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="cta-1 bg-light py-3 py-md-5">

        <div class="container text-center py-4">
            <h1 class="cta-title">Sign Up now and get 20% off</h1>
            <form class="cta-form form-inline my-5 justify-content-center mx-auto">

                <label class="sr-only" for="email">Your email address</label>
                <input type="text" class="form-control mb-3 mb-lg-0 mr-lg-3" id="email" placeholder="Email">

                <label class="sr-only" for="pswd">Create Password</label>
                <input type="password" class="form-control mb-4 mb-lg-0 mr-lg-3" id="pswd" placeholder="Create Password">

                <button class="btn btn-primary px-4">Sign Up</button>
            </form>
            <p>By signing up, you agree to our <a href="#" class="cta-link d-inline-block">Terms of Use</a> for <strong>FWR Blocks</strong>.</p>
        </div>

    </div>
    <!-- /.cta-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;

// Custom CSS
.cta-title {
  font-size: 1.75rem;
  color: $gray-800;
}

.cta-link {
  color: $body-color;
  padding-bottom: $spacer/8;
  border-bottom: 2px solid $gray-300;
  transition: color .3s, border-color .3s;

  @include hover-focus {
    text-decoration: none;
    color: $primary;
    border-bottom-color: $primary;
  }
}

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

.form-control {
  &:focus {
    box-shadow: 0 0 0 .2rem rgba($primary, .25);
    border-color: $primary;
  }
}


@include media-breakpoint-up(sm) {

  .cta-form {
    max-width: 400px;

    .form-control {
      width: 100%;
      display: block;
    }
  }

}


@include media-breakpoint-up(md) {

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

}


@include media-breakpoint-up(lg) {

  .cta-form {
    max-width: none;

    .form-control {
      display: inline-block;
      width: auto;
      min-width: 260px;
    }
  }

}


@include media-breakpoint-up(lg) {

  .cta-form {
    .form-control {
      min-width: 300px;
    }
  }

}
.cta-title {
  font-size: 1.75rem;
  color: #343a40;
}

.cta-link {
  color: #212529;
  padding-bottom: 0.125rem;
  border-bottom: 2px solid #dee2e6;
  -webkit-transition: color .3s, border-color .3s;
  transition: color .3s, border-color .3s;
}

.cta-link:hover, .cta-link:focus {
  text-decoration: none;
  color: #5863f8;
  border-bottom-color: #5863f8;
}

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

.form-control:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(88, 99, 248, 0.25);
  border-color: #5863f8;
}

@media (min-width: 576px) {
  .cta-form {
    max-width: 400px;
  }
  .cta-form .form-control {
    width: 100%;
    display: block;
  }
}

@media (min-width: 768px) {
  .cta-title {
    font-size: 2.5rem;
  }
}

@media (min-width: 992px) {
  .cta-form {
    max-width: none;
  }
  .cta-form .form-control {
    display: inline-block;
    width: auto;
    min-width: 260px;
  }
}

@media (min-width: 992px) {
  .cta-form .form-control {
    min-width: 300px;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL2N0YS9jYWxsLXRvLWFjdGlvbi0x