This is a Photograph webpage and we show all types of photos like Wedding Photography, Birthday Photography, Natural Photography, Fashion Photography etc.
Program Code:-
app.py:
from flask import Flask, render_template
app= Flask(__name__)
@app.route("/")
def home():
return render_template("home.html")
if __name__ == '__main__':
app.run(debug=True)
Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Photography</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
body {
background-color:#848B79;
}
h1 {
font-family: -apple-system;
}
p {
font-family: Dancing Script;
}
h2 {
font-family: Roboto;
}
#carouselExample {
width: 50%;
height: 500px;
margin: auto;
}
carousel-item img {
width: 100%;
height 500px;
object-fit: cover;
}
@media (max-width:768px) {
#carouselExample {
height: 300px;
}
</style>
<body>
<!-- Header -->
<header class="text-white text-center py-5">
<div class="container">
<h1>PHOTOGRAPHY</h1>
<p class="lead">Photography is the art, science and practice creating images by recording light, either electronically through image sensor or chemically via a light-sensitive material such as photographic film. </p>
</div>
</header>
<div class="container">
<h1 class="text-center mb-4">Image Gallery</h1>
<div class="row row-cols-1 rows-cols-sm-2 row-cols-md-3">
<!--Image 1-->
<div class="col">
<div class="card">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUK1ummKX7uqIaqMB_O4V4jBW3Lc_q_iAd_Cobvz6Sg8Kc9UXKXVHnzgzA81MeNN_6tHdLTSfgJHJc_FSkmPBs4-L3usMHl_NaSJngMlbQAKTAiA95d2lb3w8QA5IcCtktmwCSuY7JIodydPMaJwaTCMk5TX6T2mdExKpPHIJ9JC66-FHOt6SPdioQFm9/s1856/Zainab-Sir-4.webp" class="card-img-top gallery-img" alt="Gallery image 1">
<div class="card-body">
</div>
</div>
</div>
<!-- image 2 -->
<div class="col">
<div class="card">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgENwkmjQZ9LvQehBYlUiMKWlF_3LfK5_mIvzNR0xWOH8s3ZSWR63Kgz5-3MXV8Db9gIilarshbkEi-ZhcgU7F8HNiofbnSAvAf9kZ7zmrexiWmViyVnRNjajypLgeCzffq_2Vxb8u9jEVuczYKbLn8sri8wVhpjlJx9RIcK2MzMGUtTHsL2-LBpI-XE8M/s5293/arp00582-copy.webp" class="card-img-top gallery-img" alt="Gallery 2">
<div class="card-body">
</div>
</div>
</div>
<!-- Image 3 -->
<div class="col">
<div class="card">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4YcivWQcHWkZ9rAVcO7kA-gkDi_pt-IOl2RbaIxVtdOpvhI2SXT6td-D__rVPdiG_5ddoO5bkqKykVgjG-Ru4k686cSAhDblXpf5bfApqqAYDJZ59i_As9jxhDs7i3iMp38K9B-2KUqNPBf51lCN0wKNYt_wu1jmr51GsjNFluG7S5lFNoEehJuOsuUJt/s5471/wedding-8021285.jpg" class="card-img-top gallery-img" alt="Gallery image 3">
<div class="card-body">
</div>
</div>
</div>
<!--Image 1-->
<div class="col">
<div class="card">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDBza6Dmm-NFUkF5Kvb9W0hlxwGtbGilPsG0qzx_dJZMGIIcUTHaLpPFGXHNHH8S_A8xkt-PLz1vqQKOexY6Jw_2xJ-nZSs8Rn-oNNGjJRgAxX5EW3e4MRW_d9i5jL4LM0qBYhFXcgwVhR_-ZtT0NP6m3Nb9zkIHTqpPtSIhoK3zDGgcO5-yY4khkojYdj/s5472/couple-4615557.jpg" class="card-img-top gallery-img" alt="Gallery image 1">
<div class="card-body">
</div>
</div>
</div>
<!-- image 2 -->
<div class="col">
<div class="card">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-xJ618HclFkASbYw3FZQK1xkkq0OGB6DclxOocKUBDR4F3jAgZo9V2jAUW-pTyXHmSsB2YAHM7c9jsWqOe_aNt1Oi1gp_BWnsxmija-20u1YkkerrLZ_pDz4_e5vpNpznjYhodMW0-4m1Ix3xWtXzyRg_x33Rlfp0Mv0LUYf3u4GL-Y7HYYmFll2AecaY/s5760/balancing-1868051.jpg" class="card-img-top gallery-img" alt="Gallery 2">
<div class="card-body">
</div>
</div>
</div>
<!-- Image 3 -->
<div class="col">
<div class="card">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxW03qV9hHr_Zjqp0YMVubLvuBWM6aKBKTrzA0V5kSQZIzVOJpqR-Ma2JOIjj-hbWvAT-IQmhPNI-bDhyQo-cL6zz1GpC9HDXpUnM1h22oflU4j6MtEBzXmtqjvMRognxiow6H3hMKvKNT5SFpOjTiCK6OGvQCR3aQV-XKoVSFKLkfmipfjG3tlOVifW23/s290/images%20%283%29.jpeg" class="card-img-top gallery-img" alt="Gallery image 3">
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
<h2 class="text-center"> Nature Photography</h2>
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- Carousel items (slides) -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxW03qV9hHr_Zjqp0YMVubLvuBWM6aKBKTrzA0V5kSQZIzVOJpqR-Ma2JOIjj-hbWvAT-IQmhPNI-bDhyQo-cL6zz1GpC9HDXpUnM1h22oflU4j6MtEBzXmtqjvMRognxiow6H3hMKvKNT5SFpOjTiCK6OGvQCR3aQV-XKoVSFKLkfmipfjG3tlOVifW23/s290/images%20%283%29.jpeg" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe9mYlW4HJtCLsYjT0GFA0-DhEtYNxr8VeYFK7eJF_hCdPuqsj8VmsLWBynDTA5rAhy3haJUnThOPC6As87NsbT4p_cVcYry63qlCFyKND1tZpp6JRuIFusJzRbcIgLhY0oZqjrK8XoXi5GMbcQys2ArkLqYfE0pt8ZtqzxTTQGZhCj1WX4EgrebQGBFjp/s320/theraputic-benefits-nature-photography-85891-image41645665.webp" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOv6lk3DY0kgl6NPlsw22NOakyxMkU-VztCKUYI-Ir-J3LnApNxd6XD2Ni_D7FRdjU7S2oaPl1i7HwY-p8cgtFQMjv4GNaGy8FId8vQsqmo8hMWlwMlN46mJaiZXr4vDfT4eWp1CdJ4SnkC40HeCVtkQYWnwnf7kRdgyK3OAR8In_I0yEN6ih1i8qv426j/s320/canon-get-inspired-urban-nature-photography-tips-1-1920x1080-tint.jpeg" class="d-block w-100" alt="Slide 3">
</div>
</div>
<!-- Controls (previous and next buttons) -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<h2 class="text-center">Wedding Photography</h2>
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- Carousel items (slides) -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4YcivWQcHWkZ9rAVcO7kA-gkDi_pt-IOl2RbaIxVtdOpvhI2SXT6td-D__rVPdiG_5ddoO5bkqKykVgjG-Ru4k686cSAhDblXpf5bfApqqAYDJZ59i_As9jxhDs7i3iMp38K9B-2KUqNPBf51lCN0wKNYt_wu1jmr51GsjNFluG7S5lFNoEehJuOsuUJt/s5471/wedding-8021285.jpg" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht0SpNS3VV_nZ1iuwZklEMme0ecTQGO6xv-ZEbrmZYzUlPcnnpQwfZEYybksF7cw89TfvnvLF7ks2JUzpEEXhvytWnEKZhOpAMqrhxI7Wvfu5PACdeKFK1u5f9rzHkXN4haeqJ0Iw8XAi8GVEBwUmLIdb83U8Jfn8HvE1sjGyLNF77q21xJArENKUB91eM/s4000/wedding-1867318.jpg" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDBza6Dmm-NFUkF5Kvb9W0hlxwGtbGilPsG0qzx_dJZMGIIcUTHaLpPFGXHNHH8S_A8xkt-PLz1vqQKOexY6Jw_2xJ-nZSs8Rn-oNNGjJRgAxX5EW3e4MRW_d9i5jL4LM0qBYhFXcgwVhR_-ZtT0NP6m3Nb9zkIHTqpPtSIhoK3zDGgcO5-yY4khkojYdj/s5472/couple-4615557.jpg" class="d-block w-100" alt="slide 2">
</div>
</div>
<!-- Controls (previous and next buttons) -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<h2 class="text-center">Birthday Photography</h2>
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- Carousel items (slides) -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUK1ummKX7uqIaqMB_O4V4jBW3Lc_q_iAd_Cobvz6Sg8Kc9UXKXVHnzgzA81MeNN_6tHdLTSfgJHJc_FSkmPBs4-L3usMHl_NaSJngMlbQAKTAiA95d2lb3w8QA5IcCtktmwCSuY7JIodydPMaJwaTCMk5TX6T2mdExKpPHIJ9JC66-FHOt6SPdioQFm9/s1856/Zainab-Sir-4.webp" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgENwkmjQZ9LvQehBYlUiMKWlF_3LfK5_mIvzNR0xWOH8s3ZSWR63Kgz5-3MXV8Db9gIilarshbkEi-ZhcgU7F8HNiofbnSAvAf9kZ7zmrexiWmViyVnRNjajypLgeCzffq_2Vxb8u9jEVuczYKbLn8sri8wVhpjlJx9RIcK2MzMGUtTHsL2-LBpI-XE8M/s320/arp00582-copy.webp" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV1XpQD8Egtj7Xl0ucXMzg9DUz8Vui6KDfNaCAGoT1VH5-3fmYJIgIjNC4PYeTXZ2ORC1kr5D0Rw9ZtpSUkiBNs832b0fa5eUky34SgkTLTOGCoQHGGyxIpOLwiupFxgeR6kIzQcxMbhCTaerWcnITvxJM_YeC5zemAj-KtGZ5b53Bx4dKrcA9cEFyvSW5/s320/Baby_pre_birthday_photo_shoot_Pune_Edita_photography_089.jpg" class="d-block w-100" alt="Slide 3">
</div>
</div>
<!-- Controls (previous and next buttons) -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<h2 class="text-center">Fashion Photography</h2>
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
<!-- Carousel items (slides) -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuO8LUfVnT7AGH3zmnvOCGEzxKlBVnJg5ziDGA8Wcw__D5NCCAYkeSoWA99qr1Wfzbv9Ysyx3sSiivZ0eu8PyprvcH7sCDyzRsWvqpQ-BTE2gOtWQZpvAUwWeEwbaCDSeoiJXRu6-tLojC224fog6RTWs4fv9JoutKqxyGyj4AHVhKAljb-sg4EFONdzYD/s7360/woman-1870004.jpg" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-xJ618HclFkASbYw3FZQK1xkkq0OGB6DclxOocKUBDR4F3jAgZo9V2jAUW-pTyXHmSsB2YAHM7c9jsWqOe_aNt1Oi1gp_BWnsxmija-20u1YkkerrLZ_pDz4_e5vpNpznjYhodMW0-4m1Ix3xWtXzyRg_x33Rlfp0Mv0LUYf3u4GL-Y7HYYmFll2AecaY/s5760/balancing-1868051.jpg" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf0DgSiW31Y6-PsV3-nOkXqTh08PliSa19Zkx0ztJ3lWDg77duQaQ-tJMCqQC6wc9OPg3o-QHfw4chH3fmLDeEkWqW1pPN4UnsqDWo2scRwKzzOLIXEO9xJKqqY9q9jMts26rz6DAwQTLCjk67iR4zNVs9y-TRBCkoIid6DPaDzi9ZRyMMS1KQgSRVWpHv/s960/fashion-4335675_960_720.jpg" class="d-block w-100" alt="Slide 3">
</div>
</div>
<!-- Controls (previous and next buttons) -->
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--Footer -->
<footer class="text-light py-4">
<div class="container">
<div class="row">
<!-- column 1: About section -->
<div class="col-md-4">
<h5>About Us</h5>
<p>Photography is the art, science and practice creating images by recording light, either electronically through image sensor or chemically via a light-sensitive material such as photographic film.</p>
</div>
<!-- Column 2: Links Section -->
<div class="col-md-4">
<h5>Menu</h5>
<ul class="list-unstyled">
<li><a href="#" class="text-light">Home</a></li>
<li><a href="#" class="text-light">Services</a></li>
<li><a href="#" class="text-light">Contact us</a></li>
<li><a href="#" class="text-light">Privacy Policy</a></li>
</ul>
</div>
<!-- Column 3: contact section -->
<div class="col-md-4">
<h5>Contact Us</h5>
<address>
Vishkapatnam,
india
<strong>Email:</strong> <a href="mailto:info@example.com" class="text-light">nithinkumarnk999@gamil.com</a>
<strong>Phone:</strong> +91 7680034566
</address>
</div>
</div>
<hr class="bg-light">
<div class="row">
<div class="col text-center">
<p>© 2024 Photography. All rights reversed.</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS nad dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
0 Comments