Program:
1) index.html:
2) post.html:
Output:
i) index.html:
ii) post.html (Mobile View)
1) index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>News Portal</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<!-- Popper.js first, then Bootstrap JS -->
<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/5.0.0-alpha1/js/bootstrap.min.js"
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-success border">
<a class="navbar-brand h1" href="#"> The News </a>
<button class="navbar-toggler" type="button" data-target="#newsMenu" data-toggle="collapse"
aria-controls="newsMenu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="newsMenu">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#"> Home </a>
<a class="nav-item nav-link" href="#"> News </a>
<a class="nav-item nav-link" href="#"> Contact </a>
<a class="nav-item nav-link" href="#"> About </a>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-12">
<div class="jumbotron border bg-warning">
<h1 class="display-4 text-center text-capitalize font-weight-bold"> Get the Latest News on Trending
Topics.</h1>
<hr class="my-4">
<p class="lead pl-2"> Subscribe for the latest news </p>
<button type="button" class="btn btn-danger mb-2 ml-2"> Subscribe </button>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<h4 class="text-center"> Headlines </h4>
<hr class="my-4">
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-s-12">
<div class="card">
<img src="https://images.unsplash.com/photo-1504711331083-9c895941bf81?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
class="card-img-top" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">News Title <span
class="badge rounded-pill text-dark bg-warning">New</span></h5>
<p class="card-text"> News Description </p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-s-12">
<div class="card">
<img src="https://images.unsplash.com/photo-1504711331083-9c895941bf81?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
class="card-img-top" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">News Title <span
class="badge rounded-pill text-dark bg-warning">Trending</span></h5>
<p class="card-text"> News Description </p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-s-12">
<div class="card">
<img src="https://images.unsplash.com/photo-1504711331083-9c895941bf81?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
class="card-img-top" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">News Title </h5>
<p class="card-text"> News Description </p>
<a href="#" class="btn btn-danger">Read More</a>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-md-4">
<img src="https://images.unsplash.com/photo-1560177112-fbfd5fde9566?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60"
class="img-fluid">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<h1> News Title </h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Cupidatat ea nisi in exercitation consectetur cillum occaecat Lorem cillum duis. Dolor
adipisicing commodo eiusmod amet do aliqua dolore ullamco Lorem tempor mollit culpa.
Consequat id ad Lorem eiusmod. Id fugiat id ex in anim cillum ullamco ipsum cupidatat irure
ea fugiat. Sit laboris elit exercitation non eu dolor labore laboris eu. Tempor eu ad nulla
occaecat sit duis ea qui laborum dolor. Officia sint ipsum commodo ullamco ad sunt dolor.
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary">Read More</button>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-md-4">
<img src="https://images.unsplash.com/photo-1560177112-fbfd5fde9566?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60"
class="img-fluid">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<h1> News Title </h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Cupidatat ea nisi in exercitation consectetur cillum occaecat Lorem cillum duis. Dolor
adipisicing commodo eiusmod amet do aliqua dolore ullamco Lorem tempor mollit culpa.
Consequat id ad Lorem eiusmod. Id fugiat id ex in anim cillum ullamco ipsum cupidatat irure
ea fugiat. Sit laboris elit exercitation non eu dolor labore laboris eu. Tempor eu ad nulla
occaecat sit duis ea qui laborum dolor. Officia sint ipsum commodo ullamco ad sunt dolor.
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary">Read More</button>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-md-4">
<img src="https://images.unsplash.com/photo-1560177112-fbfd5fde9566?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60"
class="img-fluid">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<h1> News Title </h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Cupidatat ea nisi in exercitation consectetur cillum occaecat Lorem cillum duis. Dolor
adipisicing commodo eiusmod amet do aliqua dolore ullamco Lorem tempor mollit culpa.
Consequat id ad Lorem eiusmod. Id fugiat id ex in anim cillum ullamco ipsum cupidatat irure
ea fugiat. Sit laboris elit exercitation non eu dolor labore laboris eu. Tempor eu ad nulla
occaecat sit duis ea qui laborum dolor. Officia sint ipsum commodo ullamco ad sunt dolor.
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary">Read More</button>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-md-4">
<img src="https://images.unsplash.com/photo-1560177112-fbfd5fde9566?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60"
class="img-fluid">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<h1> News Title </h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Cupidatat ea nisi in exercitation consectetur cillum occaecat Lorem cillum duis. Dolor
adipisicing commodo eiusmod amet do aliqua dolore ullamco Lorem tempor mollit culpa.
Consequat id ad Lorem eiusmod. Id fugiat id ex in anim cillum ullamco ipsum cupidatat irure
ea fugiat. Sit laboris elit exercitation non eu dolor labore laboris eu. Tempor eu ad nulla
occaecat sit duis ea qui laborum dolor. Officia sint ipsum commodo ullamco ad sunt dolor.
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary">Read More</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2) post.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Post Portal</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<!-- Popper.js first, then Bootstrap JS -->
<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/5.0.0-alpha1/js/bootstrap.min.js"
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-success border">
<a class="navbar-brand h1" href="#"> The News </a>
<button class="navbar-toggler" type="button" data-target="#newsMenu" data-toggle="collapse"
aria-controls="newsMenu" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="newsMenu">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#"> Home </a>
<a class="nav-item nav-link" href="#"> News </a>
<a class="nav-item nav-link" href="#"> Contact </a>
<a class="nav-item nav-link" href="#"> About </a>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"> Nav-1 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Nav-2 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Nav-3 </a>
</li>
</ul>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<img class="img-fluid"
src="https://images.unsplash.com/photo-1546422904-90eab23c3d7e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60">
<div class="h3"> Heading </div>
<p>
Ullamco excepteur aute eu laborum enim id tempor ex. Tempor laborum deserunt amet in ut
aliqua. Ut id duis commodo veniam eiusmod minim consequat et. Nulla eu qui laboris eiusmod
exercitation duis nulla pariatur incididunt veniam consectetur ipsum eu. Do est
reprehenderit reprehenderit cupidatat. Qui id laboris amet veniam in nulla nostrud sit qui
esse adipisicing do.
Dolore id aliqua fugiat duis consequat aute pariatur tempor do ad sit eu dolor. Est deserunt
ut sit laborum ullamco anim. Duis et ipsum consectetur consectetur nulla quis commodo sunt
aliquip ex quis in ullamco. Non aute excepteur ex dolor voluptate sit deserunt. Proident sit
ea in incididunt voluptate dolore voluptate eu non dolore Lorem irure. Aliqua proident
cupidatat mollit culpa sunt culpa esse non.Ipsum esse reprehenderit nisi minim. Laboris
incididunt eiusmod incididunt mollit ullamco cillum laboris ea adipisicing consequat.
Eiusmod deserunt sit anim aliquip qui ad magna adipisicing dolor do. Duis qui pariatur
adipisicing minim et dolor. Laboris exercitation nulla et voluptate occaecat in esse in
magna aute ea proident.
Laboris elit consequat duis voluptate pariatur sunt fugiat consectetur do laborum ea. Magna
pariatur proident labore dolore deserunt elit amet et irure do anim. Magna ipsum sint
officia qui eu enim aliqua eu sint cillum consectetur minim incididunt. Sint ullamco
cupidatat ut esse voluptate laborum amet quis non fugiat minim quis irure.
</p>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-4 col-md-12">
<div class="h5"> Contact Form </div>
<hr>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" placeholder="Enter Email">
</div>
<button type="submit" class="btn btn-danger mt-4"> Submit </button>
</form>
</div>
</div>
</div>
</body>
</html>
Output:
i) index.html:
ii) post.html (Mobile View)
