.btn.btn-primary

.btn style is predefined from bootstrap

HTML
<a class="btn btn-primary" href="#">Primary Button</a>

CSS
/*Display*/ .btn.btn-primary {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
background-color: #1656db;
color: #ffffff;
border-color: none;
border-radius: 5px;
}
/*Hover*/
.btn.btn-primary:hover {
background-color: #dfecff;
color: #000000;
border-color: none;
}

.btn.btn-outline-primary

.btn style is predefined from bootstrap

HTML
<a class="btn btn-outline-primary" href="#">Primary Outline Button</a>

CSS
/*Display*/ .btn.btn-outline-primary {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
background-color: #ffffff;
color: #0d6efd;
border-color: none;
border-radius: 5px;
border: #0d6efd solid 1px;
}
/*Hover*/
.btn.btn-outline-primary:hover {
background-color: #0d6efd;
color: #ffffff;
}

.btn.btn-event

.btn style is predefined from bootstrap

HTML
<a class="btn btn-event" href="#">Event Button</a>

CSS
/*Display*/
.btn.btn-event {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: #ffffff;
background-color: #6191E1;
border-color: none;
border-radius: 5px;
}
/*Hover*/
.btn.btn-event:hover {
background-color: #dfecff;
color: #000000;
}

.btn.btn-left

.btn style is predefined from bootstrap

HTML
<a class="btn btn-primary" href="#">❮</a>

CSS
/*Display*/ .btn.btn-primary {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
background-color: #1656db;
color: #ffffff;
border-color: none;
border-radius: 5px;
}
/*Hover*/
.btn.btn-primary:hover {
background-color: #dfecff;
color: #000000;
border-color: none;
}

.btn.btn-right

.btn style is predefined from bootstrap

HTML
<a class="btn btn-primary" href="#">❯</a>

CSS
/*Display*/ .btn.btn-primary {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
background-color: #1656db;
color: #ffffff;
border-color: none;
border-radius: 5px;
}
/*Hover*/
.btn.btn-primary:hover {
background-color: #dfecff;
color: #000000;
border-color: none;
}

.event-time

HTML
<div class="row event-description">
<div class="col-xl-4 col-lg-4 col-md-4 coach-call-times">
<div class="border-time">
<a href="#event-time">
<h3>April</h3>
<p>17<b>th</b><br></p>
<h3>7:00 pm - 7:30 pm</h3>
</a>
</div>
</div>
</div>

CSS
.event-description p {
font-size: 5rem;
line-height: 4rem;
margin: 0;
}

.event-description p b {
font-size: 1rem;
}

.coach-call-times .border-time{
border: 2px solid #1661E0;
border-radius: 10px;
padding-top: 10px;
color: #1661E0;
text-decoration: none;
}

.coach-call-times .border-time:hover{
color: #fff;
background-color:#1661E0;
cursor: pointer;
}

.coach-call-times a{
text-decoration: none;
color: #1661E0;
}

.coach-call-times a:hover{
color: #fff;
text-decoration: none;
cursor: pointer;
}

text-hero

HTML
<header class="hero-wos">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-6 col-sm-12">
<h1>Women of Success</h1>
<h2>Connect | Share/Learn | Shine</h2>
<p class="p-hero">Helping Women in Real Estate 🏡</p>
<a href="#" class="btn btn-primary">Our Membership</a> </div>
<div class="col-lg-4 col-md-6 col-sm-12">
<img src="#">
</div>
</div>
</div>
</header> CSS
.hero-wos h1, .hero-wos h2 {
font-size: 5rem;
font-family: 'Secuela';
}
.hero-wos h2{
font-size: 2rem;
text-transform: capitalize;
}
.hero-wos {
background-color: #4885ef;
color: white;
padding: 50px 0;
min-height: 400px;
}
.hero-wos p{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

large-quote

Short quotes, stats, titles and statements

HTML
<p class="large-quote">
<i class="fa-solid fa-quote-left"></i>
Short quotes, stats, titles and statements
<i class="fa-solid fa-quote-right"></i>
</p>

CSS
.large-quote {
font-size: 2rem;
color: rgb(22, 97, 224);
font-family: 'Secuela';
text-align: center;
}