Feature block to highlight features of your product, web application or mobile application or any SaaS (Software-as-a-Service) application.

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 - Feature 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="feature-1 py-4 py-md-5">

        <div class="container">

            <div class="row">
                <div class="feature-intro text-center col-md-10 col-xl-8 mx-md-auto">
                    <h1 class="feature-title mb-3">FWR Blocks features</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 Boootstrap framework.</p>
                    <button class="btn btn-lg btn-outline-primary mt-4 px-md-5">Learn More</button>
                </div>
            </div>

            <div class="row feature-list mt-5 pt-md-3">
                <div class="col-md-4">
                    <div class="feature-box text-center p-3 p-md-4 mx-auto">
                        <div class="feature-icon mx-auto">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <h5 class="feature-title 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>
                <div class="col-md-4 mt-4 mt-md-0">
                    <div class="feature-box text-center p-3 p-md-4 mx-auto">
                        <div class="feature-icon mx-auto">
                            <i class="fas fa-code"></i>
                        </div>
                        <h5 class="feature-title 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>
                <div class="col-md-4 mt-4 mt-md-0">
                    <div class="feature-box text-center p-3 p-md-4 mx-auto">
                        <div class="feature-icon mx-auto">
                            <i class="fas fa-wrench"></i>
                        </div>
                        <h5 class="feature-title 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>
    <!-- /.feature-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
.feature-box {
  border: 2px solid $border-color;
  border-radius: $border-radius;
  transition: background-color .3s;
  position: relative;
  max-width: 380px;

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

    &:before, &:after {
      width: calc(100% + 4px);
      height: calc(100% + 4px);
    }

    &:before {
      transition: width .2s linear, height .2s linear .2s;
      border-top-color: $primary;
      border-right-color: $primary;
    }

    &:after {
      transition: width .2s linear .4s, height .2s linear .6s;
      border-bottom-color: $primary;
      border-left-color: $primary;
    }
  }

  &:before, &:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-radius: $border-radius;
    border: 2px solid transparent;
  }

  &:before {
    left: -2px;
    top: -2px;
  }

  &:after {
    right: -2px;
    bottom: -2px;
  }
}

.feature-icon {
  width: 60px;
  height: 60px;
  padding: 10px;

  .fas {
    font-size: 1.5rem;
    line-height: 2.5rem;
    color: $primary;
  }
}

.btn-outline-primary {
  @include button-outline-variant($primary);
  border: 2px solid rgba($primary, .75);
}
.feature-box {
  border: 2px solid #dee2e6;
  border-radius: 0.25rem;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
  position: relative;
  max-width: 380px;
}

.feature-box:hover {
  background-color: rgba(88, 99, 248, 0.1);
}

.feature-box:hover:before, .feature-box:hover:after {
  width: calc(100% + 4px);
  height: calc(100% + 4px);
}

.feature-box:hover:before {
  -webkit-transition: width .2s linear, height .2s linear .2s;
  transition: width .2s linear, height .2s linear .2s;
  border-top-color: #5863f8;
  border-right-color: #5863f8;
}

.feature-box:hover:after {
  -webkit-transition: width .2s linear .4s, height .2s linear .6s;
  transition: width .2s linear .4s, height .2s linear .6s;
  border-bottom-color: #5863f8;
  border-left-color: #5863f8;
}

.feature-box:before, .feature-box:after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  border-radius: 0.25rem;
  border: 2px solid transparent;
}

.feature-box:before {
  left: -2px;
  top: -2px;
}

.feature-box:after {
  right: -2px;
  bottom: -2px;
}

.feature-icon {
  width: 60px;
  height: 60px;
  padding: 10px;
}

.feature-icon .fas {
  font-size: 1.5rem;
  line-height: 2.5rem;
  color: #5863f8;
}

.btn-outline-primary {
  color: #5863f8;
  background-color: transparent;
  background-image: none;
  border-color: #5863f8;
  border: 2px solid rgba(88, 99, 248, 0.75);
}

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

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL2ZlYXR1cmUvZmVhdHVyZS0x