<!-- Header start -->
<header>
<div class="container">
<nav>
<h2 class="logo">CRL</h2>
<div class="nav-menu">
<ul class="nav-list">
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
<li class="nav-item"><a href="#">Sign In</a></li>
<li class="nav-item nav-btn"><a href="#">Sign Up</a></li>
</ul>
</div>
<div class="burger-nav">
<div></div>
<div></div>
<div></div>
</div>
</nav>
</div>
</header>
<!-- Header end -->
<!-- Hero section start -->
<section class="hero">
<div class="container">
<div class="row">
<div class="col">
<h2 class="hero-headline">Responsive laouts <span style="color: #A59678;">don't have to be a struggle</span></h2>
</div>
<div class="col">
<p class="hero-para-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit non nemo iusto repudiandae corrupti sint? Porro soluta autem ipsum facilis obcaecati.
</p>
<button class="hero-btn">I want to learn</button>
</div>
</div>
</div>
</section>
<!-- Hero section end -->
<!-- Core values section starts from here -->
<section class="values">
<div class="container">
<div class="row">
<div class="col">
<h3 class="value-heading">Mobile First</h3>
<p class="para-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis facere doloribus autem repellat et, corrupti animi facilis accusantium consequuntur aliquam.
</p>
</div>
<div class="col">
<h3 class="value-heading">Efficient</h3>
<p class="para-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis facere doloribus autem repellat et, corrupti animi facilis accusantium consequuntur aliquam.
</p>
</div>
<div class="col">
<h3 class="value-heading">Done right</h3>
<p class="para-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis facere doloribus autem repellat et, corrupti animi facilis accusantium consequuntur aliquam.
</p>
</div>
</div>
</div>
</section>
<!-- Core values section ends from here -->
<!-- Content sidebar area starts from here -->
<section class="content-body-sidebar">
<div class="container cbs">
<div class="content-body">
<h2 class="content-heading">
It doesn’t have to be so hard
</h2>
<p class="content-para-line">
Lorem ipsum dolor sit am et , consec tetur a dipiscin g elit , sed do
eiusm od tempor in cididunt ut labore et dolore ma gna aliqua. Ut
enim a d minim veniam. Lorem ipsum dolor sit am et , consec tetur
a dipiscin g elit , sed do eiusm od tempor in cididunt ut labore et
dolore ma gna aliqua. Ut enim a d minim veniam.
</p>
<img src="https://i.ibb.co/Cv55wN2/torsten-dederichs-WRr-Gflm-Umo-unsplash.jpg" class="content-img" alt="">
<p class="content-para-line">
Lorem ipsum dolor sit am et , consec tetur a dipiscin g elit , sed do
eiusm od tempor in cididunt ut labore et dolore ma gna aliqua. Ut
enim a d minim veniam. Lorem ipsum dolor sit am et , consec tetur
a dipiscin g elit , sed do eiusm od tempor in cididunt ut labore et
dolore ma gna aliqua. Ut enim a d minim veniam.
</p>
</div>
<div class="content-sidebar">
<div class="sidebar-row">
<div class="col">
<h3 class="content-sidebar-heading">Break it down</h3>
<p class="content-sidebar-para-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis facere doloribus autem repellat et, corrupti animi facilis accusantium consequuntur aliquam.
</p>
</div>
<div class="col">
<h3 class="content-sidebar-heading">Work your way up</h3>
<p class="content-sidebar-para-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis facere doloribus autem repellat et, corrupti animi facilis accusantium consequuntur aliquam.
</p>
</div>
<div class="col">
<h3 class="content-sidebar-heading">Just empty</h3>
<p class="content-sidebar-para-line">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis facere doloribus autem repellat et, corrupti animi facilis accusantium consequuntur aliquam.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Content sidebar area ends from here -->
<footer>
<div class="container">
<h2 class="footer-heading-main">just scratching the surface</h2>
<div class="footer-row">
<div class="col footer-about">
<h3 class="footer-heading">About our company</h3>
<p class="footer-para-line">
Lorem ipsum dolor sit am et , consec tetur a dipiscin g
elit , sed do eiusm od tempor in cididunt ut labore et
dolore ma gna aliqua. Ut enim a d minim veniam
</p>
</div>
<div class="col">
<h3 class="footer-heading">Getting around</h3>
<div class="footer-list">
<p class="footer-para-line">Home<p>
<p class="footer-para-line">About<p>
<p class="footer-para-line">Contact<p>
</div>
</div>
<div class="col">
<h3 class="footer-heading">Other things</h3>
<div class="footer-list">
<p class="footer-para-line">Lorem ipsum<p>
<p class="footer-para-line">dolor<p>
<p class="footer-para-line">sit amet<p>
<p class="footer-para-line">consectetur<p>
</div>
</div>
<div class="col">
<h3 class="footer-heading">And more</h3>
<div class="footer-list">
<p class="footer-para-line">Lorem ipsum<p>
<p class="footer-para-line">dolor<p>
<p class="footer-para-line">sit amet<p>
<p class="footer-para-line">consectetur<p>
</div>
</div>
</div>
</div>
</footer>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html
{
font-family: 'Poppins', sans-serif;
font-weight: 300;
}
body
{
width: 100%;
height: auto;
}
img
{
width: 100%;
height: auto;
}
header
{
background: #2E323F;
}
.container
{
padding: 10px;
}
nav
{
display: flex;
justify-content: space-between;
align-items: center;
}
.logo
{
color: #fff;
font-size: 30px;
font-weight: 800;
}
.nav-menu
{
display: none;
}
.burger-nav
{
background: #fff;
height: 40px;
width: 40px;
border-radius: 4px;
padding: 8px 5px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}
.burger-nav:hover
{
opacity: 0.8;
}
.burger-nav div
{
width: 100%;
height: 5px;
background: #3B4050;
}
.hero
{
background: #3B4050;
padding: 30px 0;
}
.hero-headline
{
color: #fff;
font-size: 40px;
font-weight: 900;
line-height: 48px;
}
.hero-para-line
{
color: #ecf0f1;
margin: 20px 0;
}
.hero-btn
{
color: #fff;
background-color: #A59678;
border: none;
border-radius: 50px;
padding: 8px 25px;
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
cursor: pointer;
}
/* ------- Hero section stling ends here ----------- */
/* ---------------- Core values ----------- */
.values
{
padding: 30px 0;
background-color: #dfe4ea;
}
.row
{
display: flex;
flex-direction: column;
gap: 50px;
padding: 20px;
}
.value-heading
{
font-size: 22px;
text-align: center;
color: #A59678;
}
.para-line
{
font-size: 14px;
text-align: center;
padding-top: 10px;
}
/* ---------------- Core values ends here ----------- */
/* --------------- Content body section --------------- */
.content-body-sidebar
{
padding: 40px 0px;
}
.content-heading
{
font-size: 1.2rem;
color: #A59678;
}
.content-sidebar
{
padding: 40px 0;
}
.sidebar-row
{
display: flex;
flex-direction: column;
gap: 20px;
}
.sidebar-row > .col
{
background-color: #2E323F;
padding: 25px;
}
.content-sidebar-heading
{
color: #fff;
text-align: center;
}
.content-sidebar-para-line
{
color: #dfe4ea;
font-size: 14px;
text-align: center;
}
/* --------------- Content body section ends here --------------- */
/* --------------- Footer ---------------- */
footer
{
background: #2E323F;
padding: 30px 0;
}
.footer-heading-main
{
font-size: 30px;
line-height: 34px;
color: #fff;
margin-bottom: 20px;
}
.footer-row
{
display: flex;
flex-direction: column;
gap: 26px;
}
.footer-heading
{
color: #A59678;
font-size: 22px;
padding-bottom: 6px;
}
.footer-para-line
{
color: #dfe4ea;
font-size: 14px;
}
/* --------------- Footer ends ---------------- */
/* ----------------------------------------------------------------- */
/* ---------------- Media query for Tablet Screen -------------------- */
/* ----------------------------------------------------------------- */
@media screen and (min-width: 700px) and (max-width: 1000px)
{
.hero-headline
{
font-size: 68px;
line-height: 78px;
}
.row
{
gap: 20px;
}
.hero-para-line
{
margin: 20px 0;
}
}
/* ----------------------------------------------------------------- */
/* ---------------- Media query for Desktop Screen -------------------- */
/* ----------------------------------------------------------------- */
@media screen and (min-width: 1000px)
{
.container
{
max-width: 1200px;
margin: 0 auto;
}
.nav-menu
{
display: inline-block;
}
.nav-list
{
display: flex;
align-items: center;
gap: 30px;
list-style: none;
}
.nav-item
{
text-decoration: none;
}
.nav-item a
{
color: #fff;
font-size: 17px;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
}
.nav-btn
{
background: #A59678;
padding: 6px 15px;
border-radius: 50px;
}
.burger-nav
{
display: none;
}
.hero
{
padding: 70px;
}
.row
{
flex-direction: row;
align-items: flex-end;
}
.hero-headline
{
font-size: 80px;
line-height: 0.9;
}
.content-body-sidebar
{
padding: 100px 0;
}
.cbs
{
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 50px;
}
.content-img
{
margin: 30px 0;
}
footer
{
padding: 80px 0;
}
.footer-heading-main
{
font-size: 60px;
text-align: center;
line-height: 1.5;
}
.footer-row
{
justify-content: space-between;
flex-direction: row;
/* gap: 40px; */
}
.footer-row .col
{
/* width: 20%; */
}
.footer-about
{
width: 30%;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.