Responsive Landing Page with Bootstrap
Building a responsive website is one of the considerations for developers to adjust what user needs. As a web developer, you may consider what your codes look like in mobile view whether users are convenient using it as in a desktop landscape.
I just made a simple responsive landing page using bootstrap (version 4).
Feel free to use it for learning
Cheers~
Html:
<!doctype html>
<html lang=”en”>
<head>
<! — Required meta tags →
<meta charset=”utf-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<! — Bootstrap CSS →
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>
<! — fonts →
<link rel=”preconnect” href=”https://fonts.gstatic.com">
<link href=”https://fonts.googleapis.com/css2?family=Barlow:wght@500&display=swap" rel=”stylesheet”>
<! — css style →
<link rel=”stylesheet” href=”style.css”>
<title>Landing page</title>
</head>
<body>
<! — navbar →
<nav class=”navbar navbar-expand-lg navbar-light”>
<div class=”container”>
<a class=”navbar-brand” href=”#”>the_panthom.tech</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNavAltMarkup” aria-controls=”navbarNavAltMarkup” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNavAltMarkup”>
<div class=”navbar-nav ml-auto”>
<a class=”nav-item nav-link active” href=”#”>Home <span class=”sr-only”>(current)</span></a>
<a class=”nav-item nav-link” href=”#”>Pricing</a>
<a class=”nav-item nav-link” href=”#”>Features</a>
<a class=”nav-item nav-link” href=”#”>About</a>
<a class=”nav-item button btn btn-primary” href=”#”>Join us</a>
</div>
</div>
</div>
</nav>
<! — end navbar →
<! — jumbotron →
<div class=”jumbotron jumbotron-fluid”>
<div class=”container”>
<h1 class=”display-4">Work <span>better</span> and <span>faster</span> with us</h1>
<p class=”lead”>Get professional landing pages for your bussiness. We help you to build your dream</p>
<a href=”” class=”button btn btn-primary”>Get started</a>
</div>
</div>
<! — end jumbotron →
<! — container →
<div class=”container”>
<! — info panel →
<div class=”row justify-content-center”>
<div class=”col-10 info-panel”>
<div class=”row”>
<div class=”col-lg”>
<img src=”img/Frame2.jpg” alt=”Html” class=”float-left rounded”>
<h3>HTML</h3>
<p>Take html template</p>
</div>
<div class=”col-lg”>
<img src=”img/Frame3.jpg” alt=”CSS” class=”float-left rounded”>
<h3>CSS</h3>
<p>Take CSS template</p>
</div>
<div class=”col-lg”>
<img src=”img/Frame4.jpg” alt=”JavaScript” class=”float-left rounded”>
<h3>Javascript</h3>
<p>Take JavaScript template</p>
</div>
</div>
</div>
</div>
<! — end info panel →
</div>
<! — end container →
<! — training →
<div class=”row justify-content-md-center training”>
<div class=”col-auto”>
<img src=”img/training.jpg” alt=”training” class=”img-fluid rounded”>
</div>
<div class=”col-auto”>
<h3>Learn base on real project</h3>
<p>Get real project from big Start-up companies</p>
<a href=”” class=”button btn btn-primary”>Learn more ></a>
</div>
</div>
<! — end training →
<! — testimonial →
<section class=”testimonial”>
<div class=”row justify-content-center”>
<div class=”col-8">
<h5>What they said about the program</h5>
<p>”The learning process was fun and challenging”</p>
</div>
</div>
<div class=”row justify-content-center”>
<div class=”col-6 justify-content-center d-flex”>
<figure class=”figure”>
<img src=”img/f2.jpg” class=”figure-img img-fluid rounded-circle” alt=””>
</figure>
<figure class=”figure”>
<img src=”img/f1.jpg” class=”figure-img img-fluid rounded-circle first” alt=””>
<figcaption class=”figure-caption”>
<h6>Greta</h6>
<p>UI/UX</p>
</figcaption>
</figure>
<figure class=”figure”>
<img src=”img/f3.jpg” class=”figure-img img-fluid rounded-circle” alt=””>
</figure>
</div>
</div>
</section>
<! — end testimonial →
<! — footer →
<div class=”row footer”>
<div class=”col text-center”>
<p>© 2021 | Muh.Abd.Rauf Lamada</p>
</div>
</div>
<! — end footer →
<! — Optional JavaScript →
<! — jQuery first, then Popper.js, then Bootstrap JS →
<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”></script>
</body>
</html>
CSS:
/* navbar */
.navbar{
position: relative;
z-index: 1;
}
.navbar-brand{
font-family: barlow;
font-weight: bolder;
}
/* jumbotron */
.jumbotron{
background-image: url(img/jumbotron.jpg);
background-size: cover;
height: 600px;
text-align: center;
position: relative;
}
.jumbotron .container{
position: relative;
z-index: 1;
}
.jumbotron::after{
content: ‘’;
display: block;
height: 100%;
width: 100%;
position :absolute;
background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
bottom: 0;
}
.jumbotron, .display-4{
color: #fff;
margin-top: 150px;
font-weight: 100;
}
.jumbotron .lead{
margin-bottom: 40px;
}
.jumbotron .display-4 span{
font-weight: 500;
}
/* button */
.button{
text-transform: uppercase;
border-radius: 40px;
}
/* info-panel */
.info-panel{
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
border-radius: 12px;
background-color: #fff;
margin-top: -100px;
padding: 30px;
}
.info-panel img{
width: 60px;
height: 60px;
margin-right: 10px;
margin-bottom: 20px;
}
.info-panel h3{
font-size: 16px;
font-weight: bolder;
margin-top: 5px;
color: #323232;
}
.info-panel p{
font-size: 14px;
color: #656565;
font-weight: bold;
margin-top: -3px;
}
h5{
text-align: center;
font-style: italic;
font-size: 18px;
margin-top: 120px;
color: #323232;
}
/* training */
.training{
margin-top: 150px;
}
.training img{
width: 500px;
}
.training h3{
font-size: 30px;
color: #212121;
font-weight: bold;
padding-top: 30px;
}
.training p{
font-size: 16px;
color: #656565;
}
/* testimonial */
.testimonial p{
font-style: italic;
text-align: center;
padding-top: 6px;
padding-bottom: 5px;
}
.testimonial .figure img{
width: 60px;
height: 60px;
opacity: 0.5;
margin: 20px 10px 15px;
}
.testimonial .figure img.first{
width: 80px;
height: 80px;
opacity: 1;
margin: 10px;
}
.testimonial .figure-caption h6{
text-align: center;
font-size: 16px;
color: #212121;
}
.testimonial .figure-caption p{
text-align: center;
font-size: 10px;
font-weight: bold;
margin-top: -10px;
}
.testimonial .figure-caption{
text-align: center;
}
/* for desktop */
@media (min-width: 992px) {
.navbar-brand, .nav-link{
color: #fff !important;
}
.nav-link{
text-transform: uppercase;
margin-right: 30px;
}
.nav-link:hover::after{
content: ‘’;
display: block;
border-bottom: 3px solid #0077b6;
width: 50%;
margin: auto;
padding-bottom: 5px;
margin-bottom: -8px;
}
.jumbotron{
margin-top: -70px;
}
}
/* footer */
.footer{
background-color: #323232;
min-height: 100px;
}
.footer p{
color: #fff;
font-weight: bold;
padding-top: 50px;
}
