Assignment
unknown
html
3 years ago
7.8 kB
2
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assigntment</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<!-- <link rel="stylesheet" href="Project.css"> -->
<link rel="stylesheet" type="text/css" href="css/all.min.css">
<!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> -->
<link href="https://fonts.googleapis.com/css2?family=Supermercado+One&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- ========================== CSS Style Start ========================== -->
<style>
.website_title
{
font-family: 'Supermercado One', cursive;
font-size: 40px;
}
.text
{
font-family: 'Supermercado One', cursive;
font-size: 20px;
}
.hr11
{
border: 15px dashed black;
}
</style>
<!-- ========================== CSS Style End ========================== -->
</head>
<body>
<div class="container">
<!-- ======================= NAVBAR START ============================== -->
<header >
<div class="row">
<div class="col-2 m-auto">
<h1 class="text-dark text-center website_title mb-0 py-2">Blitx</h1>
</div>
<div class="col-5"></div>
<div class="col-5">
<ul class="nav justify-content-center py-3">
<li class="nav-item"><a class="my-link-style text-dark nav-link" href="#"> <b class="text">HOME</b> </a></li>
<li class="nav-item"><a class="my-link-style text-dark nav-link" href="#"> <b class="text">ABOUT</b> </a></li>
<li class="nav-item"><a class="my-link-style text-dark nav-link" href="#"> <b class="text">PROJECTS</b> </a></li>
<li class="nav-item"><a class="my-link-style text-dark nav-link" href="#"> <b class="text">BLOG</b> </a></li>
<li class="nav-item"><a class="my-link-style text-dark nav-link" href="#"> <b class="text">CONTACT</b> </a></li>
</ul>
</div>
</div>
</header>
<!-- ======================= NAVBAR END ============================== -->
<!-- ======================= Carousel START ============================== -->
<h2><br></h2>
<div id="demo" class="carousel slide " data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://bestcoverpix.com/wp-content/uploads/2014/06/keep-smiling-fb-cover-photos.png" alt="Iamge 1" style="width:100%;">
</div>
<div class="carousel-item">
<img src="https://bestcoverpix.com/wp-content/uploads/2014/08/smile-best-quote-fb-cover-photo.png" alt="Image 2" style="width:100%;">
</div>
<div class="carousel-item">
<img src="https://bestcoverpix.com/wp-content/uploads/2014/01/summertime.jpg" alt="Iamge 3" style="width:100%;">
</div>
<div class="carousel-item">
<img src="https://bestcoverpix.com/wp-content/uploads/2013/11/advent5.jpg" alt="Image 4" style="width:100%;">
</div>
</div>
</div>
<div class="bg-warning ">
<h4> <b>
JESUSTYPOGRAPHYWALLPAPER
</h4></b>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero sint beatae, quibusdam, porro fugiat id dolor minus voluptatibus ea tempora eius modi. Vitae incidunt molestiae at velit rem reprehenderit placeat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt cupiditate, autem quod error tempore iure veritatis. Voluptatem quod, debitis eveniet sit tenetur, quo quae iure cumque totam optio harum blanditiis.
</p>
</div>
<!-- ======================= Carousel END ============================== -->
<div class="row">
<div class="col-3">
<p>
<div class="row">
<div class="col-3">
<i class=" fa-5x fas fa-search"></i>
</div>
<div class="col-8">
<h3>
CHECK OUT OUR LATEST PROJECTS
</h3>
</div>
</div>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum nemo cupiditate hic quidem exercitationem adipisci, quod, quae asperiores quas, voluptas consequuntur neque tenetur. Culpa quibusdam a optio earum? Obcaecati, voluptates.
</p>
<h4>
>> FIND OUT MORE
</h4>
</div>
<div class="col-1"></div>
<div class="col-3">
<p>
<div class="row">
<div class="col-3">
<i class=" fa-5x fas fa-star"></i>
</div>
<div class="col-8">
<h3>
GUARANTESS 5 STAR QUALITY WORK
</h3>
</div>
</div>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum nemo cupiditate hic quidem exercitationem adipisci, quod, quae asperiores quas, voluptas consequuntur neque tenetur. Culpa quibusdam a optio earum? Obcaecati, voluptates.
</p>
<h4>
>> FIND OUT MORE
</h4>
</div>
<div class="col-1"></div>
<div class="col-3">
<p>
<div class="row">
<div class="col-3">
<i class=" fa-5x fas fa-envelope"></i>
</div>
<div class="col-8">
<h3>
STAY CONNECTED BY READING THE BLOG </h3>
</div>
</div>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum nemo cupiditate hic quidem exercitationem adipisci, quod, quae asperiores quas, voluptas consequuntur neque tenetur. Culpa quibusdam a optio earum? Obcaecati, voluptates.
</p>
<h4>
>> FIND OUT MORE
</h4>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-5">
<hr class="hr11">
</div>
<div class="col-2">
<h4 style="text-align: center;"> <b>
<br>
MY LATEST WORK
</b>
</h4>
</div>
<div class="col-5">
<hr class="hr11">
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>