1) Index - HTML Created With BOOTSTRAP

1)index.
html Created With BOOTSTRAP

<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel=
"stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?
family=Spartan:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" r
el="stylesheet"/>
<title>Photolab</title>
</head>
<body>
<div class="p-3 mb-2 bg-dark text-white">
<nav class="navbar navbar-expand-lg "style="background-color: #e3f2fd;">
<div class="container-fluid">
<a class="navbar-brand" href="#">Photolab</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navi
gation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<a class="nav-link" href="gallery.html">Blogs With Us</a>
</li>
<a class="nav-link" href="contact.html">Contact Us </a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<figure>
<h1 align="center" class="display-1">PhotoLab</h1>
<blockquote align="center" class="blockquote ">
<p>"Photography is a way of feeling, of touching, of loving. What you have caught on
film is captured forever ... It remembers little things, long after you have forgotten everyt
hing."</p>
</blockquote>
<figcaption align="center"class="blockquote-footer">
-Aaron Siskind <cite title="Source Title">in Photolab</cite>
</figcaption>
</figure>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
aria-label="Slide 2"></button>
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./blog1.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Snowy Hills</h5>
<p>By Artun Martin.</p>
</div>
</div>
<div class="carousel-item">
<img src="./insta-1.jpg" class="d-block w-100" alt="...">
<h5>Candid Camera</h5>
<p>By Loren Ipsum.</p>
</div>
</div>
<div class="carousel-item">
<img src="./photographer.jpg" class="d-block w-100" alt="...">
<h5>Instax Square</h5>
<p>By Rajeev Sindu</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
<footer class="bg-dark text-center text-white">

<div class="container p-4">

<section class="mb-4">

<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-facebook-f"></i
></a>

><i class="fab fa-twitter"></i
></a>

><i class="fab fa-google"></i
></a>

><i class="fab fa-instagram"></i
></a>

><i class="fab fa-linkedin-in"></i
></a>

><i class="fab fa-github"></i
></a>
</section>

<section class="">
<form action="">

<div class="row d-flex justify-content-center">

<div class="col-auto">
<p class="pt-2">
<strong>Sign up for our newsletter</strong>
</p>
</div>



<div class="col-md-5 col-12">

<div class="form-outline form-white mb-4">
<input type="email" id="form5Example2" class="form-control" placeholde
r="Email Address" />
</div>
</div>

<div class="col-auto">

<button type="submit" class="btn btn-outline-light mb-4" onclick="send()";>
Subscribe
</button>
</div>

</div>

</form>
</section>

<section class="mb-4">
<p>
'PhotoLab' is an innovative and service program for encouraging Less Known Photos
in India for more dedications .
Innovative and service program for program for encouraging Less Known Photos in I
ndia for more dedications .
</p>
</section>

<section class="">
<div class="row">

<div align="center" class="">
<h5 class="text-uppercase">SUPPORT</h5>

<ul align="center" class="list-unstyled mb-0">
<li>
<a href="#!" class="text-white">Help</a>
</li>
<li>
<a href="#!" class="text-white">Guides</a>
</li>
<li>
<a href="#!" class="text-white">Privacy</a>
</li>
<li>
<a href="#!" class="text-white">Policies</a>
</li>
</ul>
</div>

</div>

</section>
</div>

<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2021 Copyright:
<a class="text-white" href="index.html">PhotolabIndia.com</a>
</div>

</footer>
<script>
function send(){
alert("You Have Successfully Suscribed");
}
</script>
</html>
OUTPUT:
2)gallery.html Created with BOOTSTRAP
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel=
"stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Photolab</title>
</head>
<body>

<nav class="navbar navbar-expand-lg "style="background-color: #e3f2fd;">
<div class="container-fluid">
<a class="navbar-brand" href="#">Photolab</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navi
gation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<a class="nav-link" href="gallery.html">Blogs With Us</a>
</li>
<a class="nav-link" href="contact.html">Contact Us </a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<figure>
<h1 align="center" class="display-1">PhotoLab</h1>
<blockquote align="center" class="blockquote ">
<p>"Photography is a way of feeling, of touching, of loving. What you have caught on
film is captured forever ... It remembers little things, long after you have forgotten everyt
hing."</p>
</blockquote>
<figcaption align="center"class="blockquote-footer">
-Aaron Siskind <cite title="Source Title">in Photolab</cite>
</figcaption>
</figure>
</div>
<div class="card-group">
<div class="card">
<img src="./gallery1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">By R.K</h5>
<p class="card-text">This is a wider card with supporting text below as a natural l
ead-in to additional content. This content is a little bit longer.This is a wider card with s
upporting text below as a natural lead-in to additional content. This content is a little bit
longer.</p>
<p class="card-text"><small class="text-muted"> Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<h5 class="card-title">By D.K</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to ad
ditional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<h5 class="card-title">By SNS</h5>
ead-in to additional content. This card has even longer content than the first to show that e
qual height action.</p>
</div>
</div>
</div>
<div class="card-group">
<div class="card">
<h5 class="card-title">By Kunal</h5>
ead-in to additional content. This content is a little bit longer.This is a wider card with s
upporting text below as a natural lead-in to additional content. This content is a little bit
longer.</p>
</div>
</div>
<div class="card">
<h5 class="card-title">By Raj </h5>
<p class="card-text">This card has supporting text below as a natural lead-in to ad
ditional content.</p>
</div>
</div>
<div class="card">
<h5 class="card-title">By Preet Bhansali</h5>
ead-in to additional content. This card has even longer content than the first to show that e
qual height action.</p>
</div>
</div>
</div>
</body>
<footer class = "footer">
<div class = "footer-container container">
<div>
<h2>Preet Bhansali</h2>
<p>— Eve Arnold</p>
</div>
<div>
<h3>Free Subscription!</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, facere eius! Ip
sam laborum modi, cumque dolor incidunt animi nam magni.</p>
<div class = "subs">
<i class = "fas fa-envelope"></i>
<input type = "email" id = "email" placeholder="Email Address">
<button type="button" class="btn btn-primary btn-sm">SUBSCRIBE</button>

</div>
</div>
</div>
<p align="center">© Copyright Photolab . SIMPLE AND NICE TEMPLATE</p>
</div>
</div>
</footer>
</html>
OUTPUT:
CONCLUSION:
Thus various CSS properties were studied and implemented in the photography website.

1) Index - HTML Created With BOOTSTRAP

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1) Index - HTML Created With BOOTSTRAP

Uploaded by

Copyright:

Available Formats

1)index.

html Created With BOOTSTRAP

You might also like