Scribd
Upload
2 views1 page

HTML tutorial

The document is an HTML template for a blog page featuring a photo carousel. It includes a title, sample blog content, and a carousel with three images. The page is styled using Bootstrap and includes necessary scripts for functionality.

Uploaded by

koriw63838
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views1 page

HTML tutorial

The document is an HTML template for a blog page featuring a photo carousel. It includes a title, sample blog content, and a carousel with three images. The page is styled using Bootstrap and includes necessary scripts for functionality.

Uploaded by

koriw63838
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

# Blog Page with Photo Carousel

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Page</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">


<h1>My Blog Post</h1>
<p>This is a sample blog post content. Here you can write about various
topics.</p>

<div id="photoCarousel" class="carousel slide" data-ride="carousel">


<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="Image 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="Image 2">
</div>
<div class="carousel-item">
<img src="image3.jpg" class="d-block w-100" alt="Image 3">
</div>
</div>
<a class="carousel-control-prev" href="#photoCarousel" 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="#photoCarousel" role="button" data-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></
script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>
</body>
</html>

You might also like