Bootstrap Snippet Bootstrap 5 Hero Area using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
        <!--====== Style css ======-->
    <link rel="stylesheet" href="https://cdn.ayroui.com/1.0/css/starter.css" />
</head>
<!--====== HEADER ONE PART START ======-->
<section class="header-area header-one">
   <div class="header-content-area">
      <div class="container">
         <div class="row align-items-center">
            <div class="col-lg-6 col-12">
               <div class="header-wrapper">
                  <div class="header-content">
                     <h1 class="header-title">
                        Unlimited Friendly & Easy Customisable
                     </h1>
                     <p class="text-lg">
                        Stop wasting time and money designing and managing a website
                        that doesn’t get results. Happiness guaranteed!
                     </p>
                     <div class="header-btn rounded-buttons">
                        <a
                           class="btn primary-btn-outline btn-lg"
                           href="javascript:void(0)"
                           >
                        DOWNLOAD NOW
                        </a>
                     </div>
                  </div>
                  <!-- header content -->
               </div>
            </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* ===== Buttons Css ===== */
.header-one .header-content-area .primary-btn-outline {
  border-color: var(--primary);
  color: var(--primary);
}
.header-one .header-content-area .active.primary-btn-outline, .header-one .header-content-area .primary-btn-outline:hover, .header-one .header-content-area .primary-btn-outline:focus {
  background: var(--primary-dark);
  color: var(--white);
}
.header-one .header-content-area .deactive.primary-btn-outline {
  color: var(--dark-3);
  border-color: var(--gray-4);
  pointer-events: none;
}
/*===== HEADER ONE =====*/
.header-one {
  position: relative;
}
.header-one .header-content-area {
  background-color: var(--primary);
  position: relative;
  padding: 130px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-one .header-content-area {
    padding: 100px 0;
  }
}
@media (max-width: 767px) {
  .header-one .header-content-area {
    padding: 60px 0;
  }
}
@media only screen and (min-width: 1400px) {
  .header-one .header-content-area {
    height: 900px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap 5 Hero Area"
Bootstrap 4.1.1 Snippet by ayroui

Related: See More

Questions / Comments:

"Bootstrap 5 Hero Area" Bootstrap 4.1.1 Snippet by ayroui

Related: See More

Questions / Comments:

"Bootstrap 5 Hero Area"
Bootstrap 4.1.1 Snippet by ayroui