Project Description : In this project, I created a Hapoflix website designed to showcase my web development skills. Built using HTML, CSS, JavaScript and Python Flask. this site is fully responsive, adapting smoothly to mobile, tablet, and desktop screens.Key features Hapoflix Description, Gallery image overlay with watch now, Categories, About us, Faq Section and key features about Hapoflix with rhombus card. This project allowed me to apply responsive design principles and improve my front-end coding abilities.
Code:-
app.py('from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("home.html")
@app.route("/categories")
def categories():
return render_template("categories.html")
@app.route("/movie")
def movie():
return render_template("movie.html")
@app.route("/comedy")
def comedy():
return render_template("comedy.html")
@app.route("/song")
def song():
return render_template("song.html")
@app.route("/webseries")
def webseries():
return render_template("webseries.html")
@app.route("/cartoon")
def cartoon():
return render_template("cartoon.html")
@app.route("/sports")
def sports():
return render_template("sports.html")
if __name__ == "__main__":
app.run(debug=True)')
cartoon.html('<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>CARTOON</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
body {
background-color:#CFECEC;
}
.overlay-container {
position: relative;
overflow: hidden;
}
overlay-image {
display: block;
width: 100%;
}
.overlay-title {
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
width: 100%;
text-align: center;
position: absolute;
bottom:0;
left:0;
opacity:0;
transition: opacity 0.5s ease-in-out;
}
.overlay-container:hover .overlay-title {
opacity: 1;
}
.shadow-transition {
transition: box-shadow 0.3s ease-in-out;
}
.shadow-transition:hover {
box-shadow: 0 16px 32px rgba(0,0,0,0.6);
}
</style>
<body>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZrVIhY4CuENRrPUvg-vviVNNuWymNk71fMf12jeNO1HGQ0v1JXYZvEhrKiP4lgRYGKMY8BqJjnOR32hFM97D6WKs33PhWvbJPF4vZMWToFtEyOUDmEeeEMcWDT3iYqwn3NGKLJJLQEGb969FT_U-4OIgw-B0J18mxSG7w3cxlUlBO4_1737siGZW0g7AF/s1920/4a35c033f66805ba67d017dbd3ce2ab01a12b1801ffa6197ceb72420d6ea087d.jpg" alt="Image 1" class="img-fluid">
<a href="https://youtu.be/gGslvfeQocU?si=9_V11Ywel1L0gDpM" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghHBT4EgammFvyx23u1sYIRCK-iwW3NWXAcy6PPFLvdHlsowYQ9NDDVvXpzDjZCKgMBXddgU25ejibIgA0tuLb5gLI8YmdL5UzDBfJjpIz9OpDsQf26U-bTltqitqNI4hpGox1NH0FL5f1H6_ZUk78lBvx-QlqBKETvQUk_Rli04zfU6v_6UluCjTtVDBv/s686/hq720%20%2810%29.jpg" alt="Image 2" class="img-fluid">
<a href="https://youtu.be/EpkUomB_16g?si=gEoV7z_fZcwbwF1i" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiyefO_lj-jfwXgDDm-jWTgjS5xddFQLumHOgxuBsH7UcW2pQ2cAiXeQM1-7JETffcu5OCq0VdrFMi4bLXuZVEkL183A6RZmlEoa-JZDEgrg7xUu5TBKwdxpP6cQXHlNdV7vuwB3t6Okx8vGq-mNDxkjydiQPZRQTRwvkN-U18hfxfFP0vzBVdWMuOV-pU/s686/hq720%20%2811%29.jpg" alt="Image 3" class="img-fluid">
<a href="https://youtu.be/EVnY-K75tl8?si=1sj73cT-oll2P3Wf" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaQqOpMnL2SaLKhx4MOYK36rJJQD4VFrQMgJqhx9-T0YikyejPzTzdKFK-PQWX7swKkkMr67g-ZhV6CUEQ7ShTKpfoUpYMkxd_xwgagMSfe3VG4wzn_c0Fopkmu12wzYZCYpz0IdPyXip7s-eCX8f6CB7BNKvf4DPUXxQb8KK2i1XUCrFLfkyweedfwg5b/s1600/MV5BZGYxMWQwMWYtMTFkZS00OGNlLTk0ZTMtOTYxZDkzM2YyYTBjXkEyXkFqcGc@._V1_.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/_MqnLDvnt7A?si=iK72tJToKAdL6eX7" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_5RMpqoQXk189DILKKW6338SsX1M5DX0Th_orOjezCCE0TRPbkDPXOdcRub6MFO-VZQre4XWNwXUYmN-7BJ-He-PVlYjcgbW1cRZTL0gvTuGLpvpfAXbiTBT5RtQhNy6Qv6fRUO0lrP8-hXflSIpxC4rqcxxYXeh3CSd6LzzhE818EDowx_YwTL19Zwlf/s686/hq720%20%2812%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/chDzys9QnIs?si=i1SwWR88TSzIxnTi" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioGn9SmKI92kOTVong4FIyOLnQPxaedtiOxyRbsGbB7hOliX7Kn3TK_ABkJVnbSlMYz-GOCT3jwIYtaLm3CjjshjfuyfEElB0DtFyAqqbaEEstMCv9ffczcRy22fbDaTi9ja1FqZjycI_Pz0VffMe_9hfm9fL-rLlm5UZGY0KIbci2sRd3Qs4LbEqLjUWP/s275/images%20%283%29.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/AYPbvXQl5M0?si=LtJQorSlbmPKkyrq" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJIcarUHBPV4cb4CrAyy2zNebEdxVGok_cAxVaPMV5qkakEh5My8NnxY5XW0hDeWtblXgSmMCzrdxJE8DnB7hZL7yVfXDwblYlcNnlBRswtOR09_RJlMmSlIiP6w7X19gvRL7imIgzFm_I30JJh2LGfLUxZikC9hKSQnZmsr73vht5cHi6AbRJIxbiKDiv/s275/images%20%284%29.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/8vzVS7gpqq8?si=aCUxDWcyqeNAlRpU" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAQx3MIORFFINdNKyqsM_x74GFX98tNd3BglKnej_7YwIdg0uAJr194Wud0hk7HnO2YEb4BmyPcaGlP4L_KYsCc23VqwWvtr4uEXpvFme0CeIvB70UsSb1zQ35BqU1XcxgWbSUITb6WqM6bPXQxtbQ_hztTCA1WJnPrMmXIhZzjCG37ungx795cmcwYQyd/s850/medium-little-krishna-wallpapers-canvas-print-art-medium-size-original-imafkjb5d2zxfbpz.webp" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/3V-dmbxWcz4?si=stKMSpAZUF57cP6y" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxtI4YBHhu3O6hwufsUhPnw7CeQNI6M1s_T2-QQHyRn4TsaMmUzxxbgYM_qKaruioURXsptgdW_VAE2r7xqzf3UFBNGHRqHZwV4kBTee072hcOBTlbgN1cCKOFhjhJC0NlBXgjjYCUuaIKoJGtheS0NPfjLLsHPQbKPUmPtXOx9Np4FXu528zurIsGf9N6/s1280/maxresdefault%20%2826%29.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/DeJGKQbmBgw?si=lh3VJpwLQKAEtDd-" class=" btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popper/js/@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>')
categories.html('<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
body {
background-color:#CFECEC;
}
.card {
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
transform: translateY(-5px);
}
</style>
<body>
<div class="container my-4">
<div class="card shadow bg-primary text-white">
<div class="card-body">
<a href="{{ url_for('movie') }}" class="btn btn-primary">MOVIES</a>
<p class="card-text">Movies are visual stories told through moving images and sound, designed to entertain, inform, or inspire.</p>
</div>
</div>
</div>
<div class="container my-4">
<div class="card shadow">
<div class="card-body bg-success text-white">
<a href="{{ url_for('comedy') }}" class="btn btn-success">COMEDY</a>
<p class="card-text">Comedy is a genre of entertainment that uses humour to amuse and entertain audiences.</p>
</div>
</div>
</div>
<div class="container my-4">
<div class="card shadow bg-info text-black">
<div class="card-body">
<a href="{{ url_for('song') }}" class="btn btn-info">SONGS</a>
<p class="card-text">Songs are musical compositions that combine melodies, lyrics, and rhythms to express emotions, tell stories, or convey messages.</p>
</div>
</div>
</div>
<div class="container my-4">
<div class="card shadow bg-danger text-black">
<div class="card-body">
<a href="{{ url_for('webseries') }}" class="btn btn-danger">WEB SERIES</a>
<p class="card-text">A web series is a series of scripted or non-scripted videos released online, often in episodic form, typically designed for streaming platforms.</p>
</div>
</div>
</div>
<div class="container my-4">
<div class="card shadow bg-secondary text-white">
<div class="card-body">
<a href="{{ url_for('cartoon') }}" class="btn btn-secondary">CARTOONS</a>
<p class="card-text">Cartoons are animated visual content, often humorous, created for entertainment, typically targeting children or family audiences.</p>
</div>
</div>
</div>
<div class="container my-4">
<div class="card shadow bg-dark text-white">
<div class="card-body">
<a href="{{ url_for('sports') }}" class="btn btn-dark">SPORTS</a>
<p class="card-text">Sports are competitive physical activities or games that aim to improve skills, provide entertainment, and promote physical fitness.</p>
</div>
</div>
</div>
<!-- Bootstrap JS and 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>')
comedy.html('<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>COMEDY</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
body {
background-color:#CFECEC;
}
h2 {
font-family: Palatino;
}
.overlay-container {
position: relative;
overflow: hidden;
}
overlay-image {
display: block;
width: 100%;
}
.overlay-title {
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
width: 100%;
text-align: center;
position: absolute;
bottom:0;
left:0;
opacity:0;
transition: opacity 0.5s ease-in-out;
}
.overlay-container:hover .overlay-title {
opacity: 1;
}
.shadow-transition {
transition: box-shadow 0.3s ease-in-out;
}
.shadow-transition:hover {
box-shadow: 0 16px 32px rgba(0,0,0,0.6);
}
</style>
<body>
<div class="container my-4">
<h2 class="text-center">TELUGU</h2>
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAuxHXwgwAVBprf6an7OsDEYrlaOGkm3aHY9pVviNsQBfhXfW2RrrvnLG6v3EkVsqaF6cSr14BcukDazjhLCuoxn3NVFEvnty4j5SyxQdKcmwV6kok-9WyQWIH5Tqt3VB2eoGIkn_MYJbcBmQVqVij553c1RwiVm_yFfZEkgY5cD_rVaIsWmSUijq3CbNm/s899/1170x658withlogo148271964.webp" alt="Image 1" class="img-fluid">
<a href="https://youtu.be/BaoV1ulP4Vg?si=HKye7Pj1ZwPKGSDg" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdS6ReIMK10EXhkNWtdqBdEiAckNeRLvehYViPqKE6fP1tq4nh5PWqIEKXnOuJBDn863cBg0186pffF0AxwE5fNUBMXMiVlc3O6CumytvYA7-wPsWfZq00Kl6Jb53thhvQ_ygKffC1Fw2Mabts5iHA217KoOJ_nbJcBYp4FICsVkSHjrdBnXKFBnnrsMyt/s686/hq720%20%281%29.jpg" alt="Image 2" class="img-fluid">
<a href="https://youtu.be/sTccn9OQNQc?si=6LwA0kjBL7_HtIKk" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<h2 class="text-center">HINDI</h2>
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ5jZwzfWwrwX77u6oAHNSY8QDlJqzKkdkh4MKETzQm3jjeQdyGTa4IvIe-TgjMkXSY7bLiPH4FjkokiPBIBEaStCIKaTdwEB7gN5W6KYUxBF8e5hYjDJbqHEamFOJu_sRXqQ4Gq4SrHCBhDQXxmQW_y5URrQ3AmJrGswHe3SyGP8CscQwP_erGSk6mzvu/s1280/maxresdefault%20%288%29.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/uvxgHUoPatY?si=eRQcymL2SzUOyAHq" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR5Xul1m9fjl0N-yGXgOthGFEYFQqXFf0Bl06-ogEV9OXtbGambOt9lxvTTG7uvqF8eeQshiuEcB3MKW51qLCKHrnFy1YKdAd792A7oP0BhsWQaSp8aey42av63kI0Yvs9loEwTxCqYXNnur2q3MPjzW5sEugum9RMZ8wTSGV5wpJiUC2Dj_c36ekQT-As/s1280/maxresdefault%20%289%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/hyRV2ckCCRY?si=m6eXs9o6T-WKBgda" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<! Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popper/js/@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackapath.bootstrapcdn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>')
home.html('<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>HAPOFLIX</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
body {
background-color:#93FFE8;
}
.carousel-item {
max-width: 100%;
max-height: 750px;
}
.carousel-inner img {
width: 100%;
height: auto;
object-fit: cover;
}
.rhombus-card {
width: 150px;
height: 150px;
background-color: #faf9fa;
transform: rotate(45deg);
display: flex;
justify-content: center;
margin: 10px;
border: 1px solid #ddd;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.rhombus-card-content {
transform: rotate(-45deg);
text-align: center;
}
.rhombus-card {
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
border-radius: 10px;
}
.rhombus-card:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.3), 0 12px 24px rgba(0,0,0,0.2);
transform: translate(-10px);
}
.card {
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
transform: translate(-5px);
}
.dropdown:focus-within .dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 0;
}
.center-content {
width: 100%;
justify-content: center;
align-items: center;
}
.colored-box {
background-color:;
border: ipx solid #f56cb;
padding-left:80px;
padding-right:80px;
borer-radius: 10px;
}
.content-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 300px;
}
h1 {
font-family:Luminari;
color: #045D5D;
}
h2 {
font-family:Courier;
color: #045D5D;
}
p {
font-family: Palatino;
}
h5 {
font-family: Georgia;
}
</style>
<body>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsLuzcvQHqqIEiG7n52LNf5xD02mLNJQ1MKSKnbCrSK_AS3_QVWDm5WwG5wp_Qg9s4y3S6mrm85jSeMsx7B-gxh9I1ht0a9ibWIvySHS2goXXrdHFft3_nygQZRdWHyFMPsEbrBsVssnEgZ4GHqGcNJufBGZ-8Oug5d5Ko_CrKh_Cwh6oHQ5nLO0HuDgMl/s1200/venomLastDance.webp" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<a href="https://youtu.be/js6F9bvVghY?si=cgOWJe_CWeEFQq4w" class="btn btn-primary">Watch Now</a>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgarbN9CWQeprjXA_cQM93c-C3NWg23jcch3-giwFkXTlWAwKTaa8dd0ZGvaL5ZlpRhdAVXh73WRaaJQm7GrtWJiHeBKD2ToPYbD5bLLvhfZbRUb9hNheaFOH_v56HNbpaC2BTh_MFo9so5JpveqBbHhZ553VKtwQ9yPmgEQjfLLCHDObFtNkH2sRKqHkwf/s665/230650_thumb_665.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<a href="https://youtu.be/y1-w1kUGuz8?si=QJ5AE88N6-KhKQPT" class="btn btn-primary">Watch Now</a>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9wGH7vCHeiP2kCXiXLE-WkZmC9lRQh21ph1M052f9t-uMIOvfjzfMtldemcvNEfLgWaqPmcesOe2_gSFIWNoOa6ufNCE26QAjnmORuMAmiDipg5O68YsltyC6FU-o4qvSY7Ac82WjNxGwAoWI-rtsbTZ9VFUEK0HR8DrX-JxIXmQxGhGQHaXqxjoAWI3u/s1280/113587323.jpeg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<a href="https://youtu.be/5cx7rvMvAWo?si=FZ530AGSz_xP0LPF" class="btn btn-primary">Watch Now</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<h1 class="text-center">HAPO-FLIX</h1>
<div class="container center-content mt-5">
<div class="text-center">
<!-- Home and About Links -->
<div class="mb-4">
<a href="#" class="mx-2">Home</a>
<!-- Search Bar -->
<div class="mb-5">
<form class="d-flex justify-content-center">
<input class="form-control w-50 me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
<!-- DropDown -->
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="{{ url_for('categories') }}">CATEGORIES</a></li>
<li><a class="dropdown-item" href="{{ url_for('webseries') }}">WEBSERIES</a></li>
<li><a class="dropdown-item" href="{{ url_for('song') }}">SONGS</a></li>
<li><a class="dropdown-item" href="{{ url_for('cartoon') }}">CARTOON</a></li>
<li><a class="dropdown-item" href="{{ url_for('sports') }}">SPORTS</a></li>
<li><a class="dropdown-item" href="{{ url_for('comedy') }}">COMEDY</a></li>
<li><a class="dropdown-item" href="{{ url_for('movie') }}">MOVIE</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container mt-3">
<h2 class="text-center">KEY-FEATURES</h2>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-auto">
<div class="rhombus-card bg-primary text-white">
<div class="rhombus-card-content">
<h5 class="text-center">1</h5>
<p>High Quality
Video Playback</p>
</div>
</div>
</div>
<div class="col-auto">
<div class="rhombus-card bg-success text-white">
<div class="rhombus-card-content">
<h5>2</h5>
<p>User-Friendly
Interface</p>
</div>
</div>
</div>
<div class="col-auto">
<div class="rhombus-card bg-info text-white">
<div class="rhombus-card-content">
<h5>3</h5>
<P> Multi-Format
Support</P>
</div>
</div>
</div>
<div class="col-auto">
<div class="rhombus-card bg-warning text-white">
<div class="rhombus-card-content">
<h5>4</h5>
<p>Seamless
Streaming</p>
</div>
</div>
</div>
<div class="col-auto">
<div class="rhombus-card bg-danger text-white">
<div class="rhombus-card-content">
<h5>5</h5>
<p>Cross-Platform Compatibility</p>
</div>
</div>
</div>
</div>
<!-- Jumbotron Section -->
<div class="container mt-5">
<div class="p-5 mb-4 bg-info rounded-3">
<div class="container my-5">
<h2 class="display-5 fw-bold">About Us</h2>
<p class="col-md-8 fs-4">
Hapoflix Video Player is a cutting-edge media player designed to deliver an exceptional video streaming and playback experience. Whether you're watching movies, binge-watching TV shows, or exploring your favourite video content Hapoflix ensures seamless performance and high-quality visuals.
</p>
<a href="" class="btn btn-primary btn-lg" type="button">Learn More</a>
</div>
</div>
</div>
<!-- FAQ -->
<div class="container-fluid colored-box my-5">
<h2 class="text-center mb-4">Hapoflix Video Player FAQ</h2>
<div class="faq coloured-box">
<!-- FAQ 1 -->
<div class="faq-item">
<h5 class="faq-question">What is Hapoflix Video Player?</h5>
<div class="faq-answer">
<p>Hapoflix Video Player is a cutting-edge video player designed for streaming high-quality video content across devices.</p>
</div>
</div>
<hr>
<!-- FAQ 2 -->
<div class="faq-item">
<h5 class="faq-question">How can I customize the player?</h5>
<div class="faq-answer">
<p>You can customize the Hapoflix player using JavaScript APIs for adjusting themes, playback speed, captions, and more.</p>
</div>
</div>
<hr>
<!-- FAQ 3 -->
<div class="faq-item">
<h5 class="faq-question">Does Hapoflix support multiple video formats?</h5>
<div class="faq-answer">
<p>Yes, Hapoflix supports MP4, WebM, HLS, and other popular video formats for seamless playback.</p>
</div>
</div>
<hr>
<!-- FAQ 4 -->
<div class="faq-item">
<h5 class="faq-question">Can I integrate Hapoflix with third-party analytics?</h5>
<div class="faq-answer">
<p>Absolutely! Hapoflix provides APIs and hooks for integrating third-party analytics like Google Analytics and Mixpanel.</p>
</div>
</div>
</div>
</div>
<!-- Customer Reviews -->
<div class="content-wrapper">
<div class="middle-background">
<div class="container my-5">
<h2 class="text-center mb-4">What our Customers Says</h2>
<div class="row row-cols-1 row-cols-md-3 g-4 middle-background">
<!-- Card 1 -->
<div class="col">
<div class="card h-100 bg-primary text-light">
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<p class="card-text">
"The Hapoflix Video Player is simply amazing! The streaming quality is top-notch, and the interface is very user-friendly. Highly recommended!"
</p>
</div>
<div class="card-footer">
<small class="text-muted">Posted 2 days ago</small>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="col">
<div class="card h-100 bg-info text-light">
<div class="card-body">
<h5 class="card-title">Jane Smith</h5>
<p class="card-text">
" I love how seamless and fast the Hapoflix player is. It handles high-quality videos without any buffering. It's my go-to player now!"
</p>
</div>
<div class="card-footer">
<small class="text-muted">Posted 1 week ago</small>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="col">
<div class="card h-100 bg-success text-light">
<div class="card-body">
<h5 class="card-title">Alex Johnson</h5>
<p class="card-text">
"Fantastic experience! The Hapoflix Video Player offers everything I need, from crisp visuals to excellent sound quality."
</p>
</div>
<div class="card-footer">
<small class="text-muted">Posted 3 days ago</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container my-5">
<div class="text-center">
<p class="mb-0">© 2024 HAPO-FLIX. Powered By HAPO.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script>
// JavaScript for FAQ toggle functionality
document.addEventListener('DOMContentLoaded', () => {
const faqQuestions = document.querySelectorAll('.faq-question');
faqQuestions.forEach(question => {
question.addEventListener('click', () => {
const answer = question.nextElementSibling;
const isVisible = answer.style.display === 'block';
// Hide all answers
document.querySelectorAll('.faq-answer').forEach(ans => ans.style.display = 'none');
// Toggle current answer
answer.style.display = isVisible ? 'none' : 'block';
});
});
});
</script>
<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>')
movie.html('<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>MOVIES</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
body {
background-color:#CFECEC;
}
h2 {
font-family: Palatino;
}
.overlay-container {
position: relative;
overflow: hidden;
}
overlay-image {
display: block;
width: 100%;
}
.overlay-title {
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
width: 100%;
text-align: center;
position: absolute;
bottom:0;
left:0;
opacity:0;
transition: opacity 0.5s ease-in-out;
}
.overlay-container:hover .overlay-title {
opacity: 1;
}
.shadow-transition {
transition: box-shadow 0.3s ease-in-out;
}
.shadow-transition:hover {
box-shadow: 0 16px 32px rgba(0,0,0,0.6);
}
</style>
<body>
<div class="container my-4">
<h2 class="text-center">TELUGU</h2>
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9g3sayxsRrlrLNZzKsAeRErauFMyeCr5F37v05t1FwTS1tbZlyyKGCnvqRoUfTYmvGhIOVr0pF3ur7K7bTJ3Tcjj2GiwDXutuCAtpCbIXZ4c_vBrNKac18x5h-bTeV4WNhiBmzyfd9GU86jjr7ZKiw0JNULrAmGUgvONgr3c-r7ogncrZ9S9VL4MQf4a/s600/rebel01.jpg" alt="Image 1" class="img-fluid">
<a href="https://youtu.be/nf1OpDXnrCc?si=_bPfOlGPxzapN8GA" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfMWUFoh2fnKS1MERnH6AmiZFABEE_t3TJkYdsBwS9uFLrgJybC6RxivjaKxXI50oCxBEb3tta6kt5vvKOn6tVqDpTa4ENsJwCuxbIH6RYcNdMIsMKsWlHhw2rHYrBusURehT-8oq5epX4gNMKBNC_zjCUDCYwYo4odnDuB63ptpOeqkl3v5-563gjKOmd/s720/centralized_123928952020_02_25_06_12_57_720.webp" alt="Image 2" class="img-fluid">
<a href="https://youtu.be/u8q24sqwPgQ?si=jmuqg_H6W9YkXYPM" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXlv33AbeuMrF41iTZvJF7WMIQevp7kIK81xUTYO5uB4yiVhGEFPirYbi67W7h4XzGdUuW_okry6uZknP0qA6wQyWp02EFJ43SGWhxr4BHg-RUqgOavgAWvhscTm4PNz2mTfbmcVosQZF1MV53f8WF0_g_m2NRqLQxdAPA5Qqj_sxMeMOZOTOK2aLwevF1/s1280/maxresdefault%20%282%29.jpg" alt="Image 3" class="img-fluid">
<a href="https://youtu.be/b8dvhBPrGtw?si=abxdbOWNVZRU3rks" class=" btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFcEQ1CFBO5ZiglFA9akrvIGVbLUHMpL0fyh-jSTb7iwFTgrvzkUzuQESaNs4ZUCT-iqFecJF109cTors9edz0Er6jzUMP6FDvN6rxMFoTBDrzibVR5eHe3vvQ7eooNheX28fIDHmuTfyuKQAPbl6FRi2vE47UpcnwaXNhyphenhyphen0MTwjbAYXCUKdtTzeSGqGu4/s1280/maxresdefault.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/LS6XiINMc2s?si=ROJmc8nLwT50YUsH" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDlMijc26el0Ny9uslhyphenhyphen1ZfHOty0fNrZLoyljFo3_M0VXJCKjd7tDBjSgPVqHfXU-dilnjnD0N4QLYlgEmqAGab9nbSq4hlMN9Q7PzwyX8-3L699sUg3ClMwZU9JbOxTjQ6RR33_hHo1OBHzlBlmcx9VQTYAcQVKCx0_rWsRmOQQwZY4ppQw8JiQhLAO7d/s1280/maxresdefault%20%281%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/fj7yMojOjUE?si=KbWtx_aZkCRaHC2v" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzTi0V5Vr_v3HmaNiKV0kw8RRSMrgEnpdU4FPpZsLz7cb6IUgCjCODHwCttya2HH3otT4UNyV1zh5NownGTVLA1YJcOhKYKUr1gUcJwOK177dBz253qokEs1IwTHXrNMrdsnVNlt5Z8exo3v5X7lCKjAkGmVuKWYVvKrYxaGZYvgO-h11dOmxecdWRus5N/s1280/maxresdefault%20%283%29.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/w4l6yDmoepA?si=Ipxk3loOAX4-dJw1" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<h2 class="text-center">HINDI</h2>
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://lh3.googleusercontent.com/-XytNKHw8WVw/Zz31wN_aCCI/AAAAAAAAHqA/wNpiS4stlEkQb9MbqegRSpUMuDGnTyXegCK4BGAsYHg/s1170/1170x658withlogo9654fe840a3545b2bc393c99b0a680831ad2624ad0a247318ec6c942548d6ccc.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/MT0hGJL6m7k?si=CxCiGGgzTKL_rcHz" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidNgeFjjOqMBvw1KC4SddA0r40U2miwGzyHTcKhyICbpFwcCR2t0KpGCFf6l_tnwCIR3VBnpeHgHI0uF_byUkggnIJJ6D_6E0QiJw7uXT78vhwDIpsJLj3vIK-0QiuLPk_OAwe3LXRjH77Q3DX46xNXMivQnkz0wm3a9okHMS59gxMsBtJc5ESsVr5JfpM/s1280/maxresdefault%20%284%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/x9hAS926Rjo?si=62VqDTnuxQFci_7Z" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSZDi46Rm_-56-r1Bh8dKS_gXXctLGyAVnAUy-fTp4LPbSkyWaR7DJx9PCjpvy1MPHCRBYvCLR5JvWi3pU8WhvuaXDrDAqJldI-PMBReGBNVCmaXNojnZb5wT1qs5vR4tIIUzSc53VDIMXqCsYzRKblndJRHuyb5B49GdaXIrM6MyGx27ynYwtPq_5Sqpl/s1216/Screen-Shot-2021-10-26-at-6.48.45-AM.png" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/aZzyaY9gR7s?si=TdDegvYVGGRB6bLS" class=" btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://lh3.googleusercontent.com/-_2guWM9prjY/Zz32-MWGSfI/AAAAAAAAHq8/F8rGoeItbqIc5x6pvphNC7wDaf_uYjcKACK4BGAsYHg/s1280/maxresdefault%2B%25286%2529.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/2RxijtaJjRQ?si=7l6XTXBjhytfnS2s" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJKRC-IfgfFVcbE0kyCdvnRi3pMJLUiWr79YB81YARv2D0aNfsMgZymupLYW0pWk7jIGoeK5kKX4axho2asM6AH3AAoJSDzoG2h1pccIPweGUsrh1K4s8yLxYZflLuNGWQMI4VEAiYNEPD-bvgaLtglDXnuoOIn__8BP0RSTvb5cNAV7XWmJm1fm1Jtlv/s706/pk-box-office-heres-the-daily-breakdown-of-aamir-khan-anushka-sharmas-satirical-drama-of-2014-0001.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/Z8mUx0OZ0Os?si=eRDgHz2Z9qaAyVrF" class=" btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjahgHFF-ALMFkl6Kksuk-kfVuLNrAcV_yT7HvAw7LVHfprgHgQRMmBcdmfjCKodIshv03lmJX5g4UhVF7KUX5sXcHE0bNuwbSHPZ1Ijn1TVCftthcg8OOb7xCqFQUD7EFmZpd_fxF3L0pfF6xouZewuSnDKqtXqWDCA_i7WxsWfRx3gygv7Vagwv-uWamj/s767/krrish_767x430.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/BzeS2uaSj2k?si=NlJMS3KJUQQFZwo3" class="overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<h2 class="text-center">ENGLISH</h2>
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7KTCRgU7ah_jyqrWZEY7yFJx1JpeoYyGTmFVFj5tUzvQ0kJoBpd9yrVBfPP_TMIbTDC_ZVr4BVRhV4XkfAOXM5i63VfXyeIUnSk4PyLOa3kvEbpa2dl2zfsyXI95Vtmosrgm9T0yz-StFW0jvybADoI3pmW8BxDORqxiVY-kCEoMADjuzRYkMIw_x3KhV/s1200/A-poster-of-Harry-Potter-and-the-Goblet-of-Fire-Harry-Potter-movies-in-order.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/80SkI3tzXkU?si=k4pIn7miG_Zjbip3" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtTTqkvOrp_0bdW8yFeE95EVWck51OllS33JFoz42tL0Z-xQsVdDM48k4eTvDVi94ic86l53y1y1mGrT8fOUUNrHW_tH_oivJXdhljh229s6nIu5SBa4VnLg-CjdSTBp3O9H4gM3GHz-GTZghxC8iNtCnalFXhAYPP9rxruqd90nHiV_VBFIs83bgJwsx3/s1280/maxresdefault%20%287%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/7S0C5tZxBPw?si=tR867V0Ax7Jm_tQs" class=" btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvfEuwoGhQCLvZ0oIxk7M4IYoHiLSQeKt2y5prR0SI4mAJWNJU20xp7qRDJ2sEFa_T7nI9ANLMeadjwWRzhk5-J_smlS_hsxXE9-1_uYQdfG0LEFn13NN70YZbcGp3sIqWjsHlhVNkvzT0noZOODIrvTGxZzRqUgqhcYIk-SOUANOGjaeJauSGUaFC6A46/s640/ee4f38e3186058941a7e2b54e8a31e0d_1920x1080.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/g0q6v7mXoJw?si=YSbUxylXSfG9s12-" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTE0xZ_lcYsyyQlbYRb3Ifbs4QuigKgSu_LmsT0u8Eip_2uX9qQu_5xJUN6OqbgXjPE9H_UbOFtLqMwGDWyNlsnIg-1fxkQqUmgmy_vn_97XUDQ1o_PeMuaz6eFQ2i2VhPQbWI8PvsCPBWdNF0Oe4EB55MB2vOK9LtR7iBgb7Hgk6D9JgyCmBHGo5vIwfm/s1200/your-thoughts-on-the-jungle-book-1967-v0-cxoiw3stzt4b1.webp" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/mSCc07PWLns?si=rUdFUpBfXvNUf8pt" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheSwNmAoieRs0CCB54b1OObmhkhW-7z3RvOv4J7-l1nqAKzI788hf0n3LX-ekg0nQNeLc8ofsRLcFrr1XFB5M8iBnIc03Ji-qmNHxiubUbtEI2yyXXwo0EUpbBiuQIzZ_y0O4Xps7vHC65GqGl4Owys8F5ba43ZfDFZJiVC3oWjnh1WBuiNdOSUN0pO4RT/s1200/scale.webp" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/R3EjM7Lfcvo?si=R4FcChkeOvmb8bjk" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ7YqZKQG0XrQgHdPWGFXjx8lMihVvehaykeB3zpGSadrdj7JlfAKiF-NIRRhj7taJk00JSUJ5RQft3p4BwymfHUHl7AoZwAsfKKKsQgk0pnsU4OOCtpBtfVWnwZ2qFPX5lel1o7vsIrFzX0G1DBl8qJ31p86PpB3h2es8lQ1Q45_vuZxBqJG1U51U12TB/s1199/Screenshot-2023-02-13-at-8.01.58-AM.webp" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/51EN2VrdpAo?si=ovZGcL3aDdz51WVM" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popper/js/@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackapth.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>')
song.html('<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>SONGS</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
body {
background-color:#CFECEC;
}
h2 {
font-family: Palatino;
}
.overlay-container {
position: relative;
overflow: hidden;
}
overlay-image {
display: block;
width: 100%;
}
.overlay-title {
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
width: 100%;
text-align: center;
position: absolute;
bottom:0;
left:0;
opacity:0;
transition: opacity 0.5s ease-in-out;
}
.overlay-container:hover .overlay-title {
opacity: 1;
}
.shadow-transition {
transition: box-shadow 0.3s ease-in-out;
}
.shadow-transition:hover {
box-shadow: 0 16px 32px rgba(0,0,0,0.6);
}
</style>
<body>
<div class="container my-4">
<h2 class="text-center">TELUGU</h2>
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWqMyVNyW92owHasea516uGkGBKAost0MIUildiozrlOVjyD42hUG8QiZW5xHR5hQD3UhUMeMnLmy5rz9j8jItVROxIO52GZPqgMb4gAj4KwNQO2MN__VCCryQKHYnv6u9Cqgy7yN54xPvw6hTwKLYyXFYTdkVYlFpkA-45R17WepR8XAVWs-Dd1uRRXo3/s1280/maxresdefault%20%2812%29.jpg" alt="Image 1" class="img-fluid">
<a href="https://youtu.be/Zz1M1iVEkwM?si=3HIPmlydkdHdG0m1" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkKz6RAZBR9bpRDQ0qdwtM5Mu8okFc97xGUGVqmcWlvwVBjYqVSzXzSPf-Iz3ixQWLxxclEbH6NdZlz1GoHJvuCfl50EILIKHN9oGDkiqQBs23z0x4UvLejkDL35ziQs7zoii2pP30nMaX_kN78dER8UdK5W7ArPFnUfgKsd7iaJ6XsXcr8j5xf2DA67Fi/s300/images%20%2824%29.jpeg" alt="Image 2" class="img-fluid">
<a href="https://youtu.be/5vsOv_bcnhs?si=hIXtTFGw89j4qZ0V" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKcM2Nc8Pt_XNuIz5qDqvAjKdnKQepXZXn6_dfuuT7x1TN3xDd2E1s2xvvgYyF1KxcrVjmo4fRsZHjz_bZLd9Mi29ZfLecHj0wGjk-prno85v564kzb5weUmi4Vn_3rfBGd68EFKXqOtx4Y9KVLaVVJ0yfcI11E0HxnFVa5OL-dDLaIPfIDWKGOFomNT4Z/s640/640x360_a7b1d5a6-52b1-4346-90bf-da56a3e9f664.jpg" alt="Image 3" class="img-fluid">
<a href="https://youtu.be/VYKk1KOEq84?si=OOaV331PqNmVe5lV" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivEt81-EhLCIHqJ8euxgLpLJtcxON2fWeagsv7uAugwF49Vdgw2Kx62UUiZYoq6ZkRbHXJA4ZFLA5hqqhE2uM8XKfGn4khs_NPVtl0qu7p38Usi6D9aI5ZmnTe7LKqudbstqluPFWxk_x4IutczXneJkJDBldxf6-gWkD24ZkU6RP1S2Duh0UCSl_tGRET/s1280/maxresdefault%20%2811%29.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/VQ2-HPwxAZY?si=SNmeI2WAvZcfLhkK" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKBJfieEa4GzqC6-kgGm7jowF1vxmzvpDxCRTYhohdsAb5eJT_YwKJtgi5UBCb7rMSC0MkLlgNx3mp25qpfZfFj7IJBULUfOjIOyAmiHr3KglZcmElnH-6gKQzLjt9nDGpiEVs0e2oGu0-TExpqZsxPSLrJ_Q_HBWV_8gPdt3_bb1z3HuLWgCeAa_SU4fD/s1280/maxresdefault%20%2813%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/rQ3B4b4Htmw?si=yVpPXmyOO3PJFJHy" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWt8L4IMEoraLkVnrbj1KQR-1jmHQH_VFOyYm1_PQIa4RmhSTEEaQ9g0e9lRgAw15-PYMhfmDJFeJdNp5vBQlY15r1kn3yoCWlyZGo5wBu58TdMtF1LuQeGde3QPjfqs1-nxleHSPH2YZlWqj5teKz0sY14_JkubciETNZq9Pi7sxNEiDm1q0Tz0RMmLxu/s1280/maxresdefault%20%2810%29.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/QQwDeJFSVvc?si=7HHnzYLA6k9xIeAk" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<h2 class="text-center">HINDI</h2>
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJExngB6hoTdWXDYIp1YXlMrXIJhvgizLEvfd4rtbOU5PsXEgctZm0dUJWX_NtH1rJMAJlL0q6BLiojyIDnPDzvZp-Yi_zrP01zp_GBfTfiYHZBFj8f9_Lhm3g1RLhZLjo9HOEnp7X44ckbeUAmBflXagfwVsLMpcsLE732_aC4oQUh8nYKTdAllt8lWm/s686/hq720%20%282%29.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/hVCYwwFwGEE?si=DMVkupi7OqiA3q3c" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjifHJo6dvDuTEPtjarvvjrCM0mz4-xTPJ2IDmB_odHtwl44-OQiG0zxf3etl7B7GaSPyRfKQz0CPwRBoI5slijKDLa8UqC-0WU6FYoXesnc7h_5pgqSM8mi3K46deMTH9vui0Wa99FxdgDhGmDTrnT4Tc4UOuJc3m7po-i1KL8DtobDeiojqj5nXTDGFfv/s686/hq720%20%283%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/RLzC55ai0eo?si=y7XrmOwORzb_RXrK" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpwciI8qvvzI8kXShmJePLySNTkBEHJ8E6YgN1NJCUQzKv1pwcOpv0fRvL5u-a0cABIw3OPaBObP94j1QP0vxZkWxH0uK3NNNy3DwHR8kT3wg3FyBat5TE972PrUd01-GCp0BsakyE7Pz865J4GTvlnI8pYFUtA9qvbi5W7auLRA16YK1hlATkMZdroHAQ/s1280/maxresdefault%20%2814%29.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/nCD2hj6zJEc?si=JO5X85ZHIKZ323xH" class=" btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT3QNIo4JMkYwGj2ID3QxZgyA9A2dzR_ejFOInpeHZ_94pJcapHW-anQAJ7Cnu-eovKUcV7XE285D79TkndOAIkldqZpJQ9SvspcwPZRvDA2us8Fge6vYlHnkbAk5S0K1-IVZ6f9BRzaBQ3xrpAkgllxl7G2Q_euiot4F2NrBN8z8bZqXx046Gvd-Zysz2/s1280/maxresdefault%20%2815%29.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/Umqb9KENgmk?si=Hlq91h3yu1ext1wI" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4PebuuZynD1lTcpqq8j00WwP-YJhT3PiL5tESoQjeLdQPePAM0o8ZRLfzi_BJoA8YqB6JghZ-kjp_M4p_OQYintUVrZFlrD4mxi6YlAdgJ0iq8E8O62_82jflFUjcn9drCD7AibYLKZdfa8j92XYxk5zUkXsq56Dnq8wlsRbW77EOjZk0fXKb3yiXosx/s1280/maxresdefault%20%2817%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/oGneAab3e88?si=VXTq7Zv1_uDWJA33" class=" btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0YIuWWsmkNO74vN44oJVq6yzuDmx7jtRFv0ketQTITgIfyaUHRA9JKYDYkDc0de7BnRBrD-KAJGNp8lg1ZlE5EhvqNNS0hLFEVWQaTWXzKxHUoefOUataajNIL7azdfIyqMJIRZunT8uGDARP68jAMDlhI_aKafYZwIQNoRNoXaA-kwXtZGw9bkHTBiG7/s1280/maxresdefault%20%2818%29.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/FQS7i2z1CoA?si=nOAJMiEsSdya9owu" class="overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<h2 class="text-center">ENGLISH</h2>
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwCexOUBSBc9Xk4gldd9j2X6c4hJy1-DUkcZDxh7c2iMVK0dqhiKoVQZkP46ytFagNdYJyKDQWfsFLnseAc3yv0uobV4wBG5j2z53G4kkjI4Q6SGFYyXn6r50iUuumnmajovfMeO30P9kVEtNWgsiboz3_vj4K8iFoPgioAzNCtJt9r8WXkQfE90cSfJ5J/s300/images.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/kffacxfA7G4?si=bifElIyug36TV_vn+" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw3LcG_K2T0JYQvHt3p5azsIBFSRFYeXBKeWkMBYuTAmw-sBR_AUyJ_oVxBUw_AX_JE506Q7JUW16A_W3SXx7QhbYv-rxL2bIK-0Dvfk-HwMEcc4NhYksOkcwOmbyaokmbbOgt64d8hZWEqEWcjIMDaVJvjwxGQXiTEy__IAWQTyF0atw64Jmp3CYoarsL/s640/sddefault.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/euCqAq6BRa4?si=GyBOizzYyQMkjzOn" class=" btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgESmKnrKlpOChcXM9vvi2fMAnJyOR4v6dGdFeeuTf9Zgrc_56GhvOiYS6SF2G7LCjDEsl2B3teLXfWsApT9kgD__FWNDbaGrs37Gw4a6LJgjHbYCZN8fgnckyTkx1uKixe_U8bWmjGRA1_BXX7NtM7Pmhv4R6nN45FwU41sOP9ejOJdc9XkKkFGXF6VRAL/s225/images%20%282%29.png" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/i6xmPM-aw44?si=ORReLYqHG05ir0oz" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTmM5kWaAnr7MIv4elrTG8uE-WG1H3h8O-FQO_glvGmt3MjnPXQuzEEdM_2Lrxf_b7aXX1wazoTvAEKTSFMMKBx_6QJxPIWqe53KAo5u0K7jy9mAALViJwFrQ9Wqlt7zT5hjjEywDzRkhywzLejhGh4uAh_oyjh__ekqZWXPP7FbpQ13C9m_tbAI30SUku/s1280/maxresdefault%20%2820%29.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/7wtfhZwyrcc?si=tdNHlmLl_hxGgxqB" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlVZ9274-ph5UkQl001JE-gx_oFcnFjoMYtAX7KG1inQebcwjkh-gQfYeZT3H16m6GO0YpRwBs0QM1B2_QLzKhsKNOIQytgJtdyByle0JILsgW_MohfY5H2eQQxHN5gZ8wFatsydN4j1dGwcu-FGqByAY9135mT9hrzDNJQmfENkHzvGrz6P3nP8RnlNcW/s300/images%20%282%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/nYh-n7EOtMA?si=_-L6zKvqtXKA6lwjhttps://youtu.be/nYh-n7EOtMA?si=_-L6zKvqtXKA6lwj" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7rLQXttFgp36oxR59VIT9AvN0n809uZ2-z9VAnqlkpsGiUDxf3laeFxzjoWi8hSfTtGvdY0CFMHnGcODTQEAvyN_j0D3ee1SR6rBde0d08_GXSiFIdfHCEF1yzy5WxwJN_v3HJg4MKG-olq9WFoPjLpa_w2tp5pOgSXh_CjwgohIR1FWgBgkM5yuQ1wAQ/s299/images%20%281%29.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/BerNfXSuvJ0?si=_CYGdnuQeyEYocsA" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<! Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popper/js/@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>')
sports.html('<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SPORTS</title>
<meta name="viewpoint" content="width=devices-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
body {
background-color:#CFECEC;
}
h2 {
font-family:Palatino;
}
.overlay-container {
position: relative;
overflow: hidden;
}
overlay-image {
display: block;
width: 100%;
}
.overlay-title {
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
width: 100%;
text-align: center;
position: absolute;
bottom:0;
left:0;
opacity:0;
transition: opacity 0.5s ease-in-out;
}
.overlay-container:hover .overlay-title {
opacity: 1;
}
.shadow-transition {
transition: box-shadow 0.3s ease-in-out;
}
.shadow-transition:hover {
box-shadow: 0 16px 32px rgba(0,0,0,0.6);
}
</style>
<body>
<div class="container my-4">
<h2 class="text-center">CRICKET</h2>
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjImBBJxbiHhAjUnMPVMlQUq4AeWxXNGYB8Aa88uzKWnB_u90THveCJV19TTLlWvIQ6SGshdSI2w6XKT0AP0aXYV-Z9PRgJwkIr17cdRyVc1xcG2Owxh3gNXbKmxo7uraQioZy_lhlg_54JrgkDEWcuLXNQTfvXJ_lkjJg74aO3FxYlO3IVMYNxsjWFvvP9/s800/258211.3.webp" alt="Image 1" class="img-fluid">
<a href="https://youtu.be/1OaBsf2XM20?si=DAiBAHOhGjqCLvrH" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt5Rm-bOPa5TBEDW39DNED9gXjK_OFgwiIVBXr7X7sDJZb7A7lcfSPf8UJafmx0_dnAE7miDNfZMIXkMV7BynO1wyH3flh7VEnD3j111Xu9bdjYbqPXCdEDV7kw6tdMA-rMNkVcCDleFJsyK4e7J6mpqLN2BEpElrhknOeCyuZMIHMDLpbzVL9bGbi1VFf/s1296/273293.6.webp" alt="Image 2" class="img-fluid">
<a href="https://youtu.be/P3ta9Wzn3gg?si=aOo8dGC7lBJIo28P" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiasAlx5KXMZZyVsUsaYJLkHv-H-1s93tG26gfYPQ97YIiat6BD8P_dTA2cSI2DNKaCKTb2T0n00GtT5BFqthJEeIBRhtZpHJfE53Eng0bU0ZoJcCxbwH9B5JoiP0eAwrM2OoeD_SOAzAzkitjszqew9GH0SJik5d71sHmacW-6cdPz5mA6yg0juTeH1z1q/s549/IMG_1709623771708.webp" alt="Image 3" class="img-fluid">
<a href="https://youtu.be/ZLRDcUR21vw?si=rsMrqWuZvsdMW1gI" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<h2 class="text-center">FOOTBALL</h2>
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdOgpfZ981MeTwwfFx1t0VKNtx7IWYflNUaGotdm8XEBBfoHALJCGSQHRMGGvgxOE32yp7cgtzLCKVV65yqsKivdBY9Qrz4eKdeQEoDb6z1XUK-Mq9UiinDfI33JUUx1OtIaNkyex6f34Vb5YIhaI2_-eu8BeCvgI1kDO6FEggUJefOq9o5hVVpemyXo0/s300/images%20%285%29.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/4fyMegRF_Ao?si=-FS0lzmk8jS6hLVU" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSlGFkF6hyEWmCKOE2X1cAQw_7z5XWNSjMzZjY2hWWuHJ8-LQma5b7XQDXPQsYwK0_j3fskX76LyF744rNYUfZ5jlFhYnS52g2a87TCMwt5-dv9FBJXIbpJC5oj5KlBu3l4s8bdvPLOvsqK-b2ifF4fRJeWlIVef5qppqawM-YgELaPpNun-RX1Hom6rAX/s1280/maxresdefault%20%2829%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/KZw6iTKPq4k?si=kPbZNZskEj5qI8ei" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxCwER0KOH5CfC-YdKGK4Dtl3bTX2f17SAI3Of9iuOeNGd0ewOzIsfBz-hDG_tWly76UEQM7B0yZSTFtTxi_IUfvkHSypypU_iSw5Qq-fbFWIbj8V-wsDLaUwdT49NHDgorKOogLCzhwb61lVE80vWKtIEaA3MY4WJyJTdez3UvnU0ptyTlUitKFY3yxsY/s280/images%20%286%29.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/hEFXulAIFk4?si=PXbtxp2_TCmkq3g7" class=" btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<h2 class="text-center">KABBADI</h2>
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxmB-il2u0WY9iP4QY8PcZlPPI0Or-hQNTmCkKsgKT83xmZP4kMH5pIrZMsxpfdJf3XmAPRiPdDVP7b_rjP0AeWS2tT6ggjiYu6OKW_b6tvrrKtWxQTgmBRS-sJ_823zxPZEeEOmZY5pnf1C22NqwdQFJYKvDsAcWm13JUan1WqY0eZCD-UokjAgqVPBbG/s1280/maxresdefault%20%2827%29.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/RTi9H_gLv3U?si=du_3fSZrDFgijKtf" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXa87mwYWPMC18z4YSBC09iMOiijMI_bGBXJU25ZvH5wswuYYuOofgZluzzg3yCQXhebxrxcC5orZaRlvpdMzUVNfAAQ2jckWsMZPHFnkXSGvTQm4AL5Cy9DVnpsXliEdh-Lr5WGk6xT4gCcpyOEva9qKdgoAQ3zp49BFEdip63V-nw21HvAnaD7L4V-FS/s1280/maxresdefault%20%2828%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/aVXq4yhjdI8?si=B95ObMcLT6guPnd3" class=" btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMqToFVflh-pXnrDhpF54KqDnuErH2LBn9dxBUqA5LPZaziqFv7HG7ltiwzbDwVB-Ok-m9XSqLwftmpuSfKJfiEFqzma6Dnho9G38B524W97U_NrywwUQzM-f5972HFj7C-GM7z-WXeK2cNhiDfNAK-cSAw_tlcJIWACnoLWvQeM_Sos6iKJq2q-YAaB3B/s686/hq720%20%2813%29.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/Zw8xq6ft95c?si=vPrHJdgozEpmlfJQ" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popper/js/@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>')
webseries.html('<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title>WEB-SERIES</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
body {
background-color:#CFECEC;
}
.overlay-container {
position: relative;
overflow: hidden;
}
overlay-image {
display: block;
width: 100%;
}
.overlay-title {
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
width: 100%;
text-align: center;
position: absolute;
bottom:0;
left:0;
opacity:0;
transition: opacity 0.5s ease-in-out;
}
.overlay-container:hover .overlay-title {
opacity: 1;
}
.shadow-transition {
transition: box-shadow 0.3s ease-in-out;
}
.shadow-transition:hover {
box-shadow: 0 16px 32px rgba(0,0,0,0.6);
}
</style>
<body>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyaGrW5I0fGodiWu4byKjBBhixHxyg4Xzb1sqxMySoO5h_LLSOT0ShK7k1W0rxfNjQkzSoiikbLhvbSXTCdjFyG3m-D12XCVQI2gWDVy1XuE_Qhb1jH1uZFg5OwFlU33H0yueNAJCaFTzb6VzuubYOWhXdSXr1mRejlgXXbqswy0mJZbtZWyRp1kpdmiSq/s686/hq720%20%284%29.jpg" alt="Image 1" class="img-fluid">
<a href="https://youtu.be/HzcisPoLUb4?si=cFyAv_xPnKhYkZli" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_JzYH_RNTq68PHJ5YOJlxGTfXcTH_V2a704h7wIftCFYNOjANbhlgtuiYVC1UH43LqaoroIjIpPFyxi_-Ac_pKzhgnPYyjxUA6ArAkoxWl1EKvpMsSzJxlXdsCc7Rh0UEOGJbIOtJYUdEj6eYo-8lXT85KpEJy15Ps5EXtjtbZp-GObY-eOYwtYU8XH9V/s686/hq720%20%285%29.jpg" alt="Image 2" class="img-fluid">
<a href="https://youtu.be/ooo_D6VuZJs?si=f4ZmEaKf9tcZcBOK" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTyRtFuKM109Op_noOhHbXz3h9rJCbFCS5Pc7BgwY98-YW8WbbKGqm-H0wHaqjKONZdq8WsJqPNJhdfZTXbQ82aunNSIEaME5CFayYb2lGrNIfbAEU2UIwCEdQWqhRpJAmjr4h3dew1g83_o6HNshGXwutBClPfXBWHEgRXmtyTvF2GhNqmHNpd17UGqH3/s686/hq720%20%286%29.jpg" alt="Image 3" class="img-fluid">
<a href="https://youtu.be/PsVxLQv8_e4?si=Kfz2eST2v5JPCdGO" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMnaoAVkhlBbEFCZhixHfaYK7_gEabsCSi4edRddPOJ15lD8eCo2iP-FiuWSdoWbMSmJQD3h68R8Il9826RxjWC2_jAQmjYNbd0K93k8zaiy0nD0yB9p45cbb2lkERjnWeJqPzMEyMnvYsqeSwl6iaLWUPtCcy9r__kWPcMYQyP4PXPPXoVWyXMAg8MCg/s686/hq720%20%287%29.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/wPoH8VA7H8A?si=tuW4YhNmaP0-Qafh" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkU4emlOALqXh3tstM2ZOPBaKmgHCDia3rgFo6r6DFPcA8YeAq66NdoWxE3K9HJ1UoxGiJB22l_KnK35yZtuVPaIqutYP2DuLWAlF14MlI1VCMoGFoXDczSKfrt_7vxpUruOUh_AUv3gz4O048WO7ESVR70v97k8-LimPaMy3S1C0vMEAp4OoPD60p1UQM/s686/hq720%20%288%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/RlzcnZoO3lk?si=zHKo4R2ui1D6ThAY" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNNJB1ABSYm19zW8aZi2KVAk5wZKVkk55uHrtO3B-NYxWtwfWl2sqceQa-zDc6ohoGw3OrL7YkJuxjve87GbkPcwsXm86n_4W51RqBVfuRtxpuQ9VhzLREOXa8QXIrjtSxqSa8254RsM2QMKcnb_NLybL_47kI7FOHuJf86WDavy9suBvgn_FwAcb_xcrz/s686/hq720%20%289%29.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/6p0KJL347Ms?si=gnG10108RdwmQ5t3" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY7ONMNuYG1hjdlNjT6LWa1qEwtKUkPYrXWYFaF3mUJj5CRD8_5AIk5fvHx4JIJjhfPNEYOXTqj8iPzWCf7kbe9IjCXHim6bQiAYAM64da1mEJGlMGVTrNTv9RWmVT6y6xaKFihr5DYVR7DjkfMPGhazgsTIzIk5n4fAJ-2u3qbRve9-Lxoh2VOsTyUgQy/s1280/maxresdefault%20%2823%29.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/uqngr_mp3r0?si=SO_X5Xmv2s8L_4LF" class="btn btn-dark overlay-title">Software Developer</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXIbyd7X1h883PjI7NfUoeASH6mEmeRZaFL7LIiA4xOh1iNZpaT5VWDv3EOZ2rrPQM5CzxgD_4ssiJSEz8ngODDykHKSCyIDVcDN_gdVrIAcJOIMdr2tImtwMa39N4swY1vxUgwAPU486kL6OfbzaUUQseZyG3WoN4ScWndhmtit7gMfHi3ASrTr44joKq/s1280/maxresdefault%20%2824%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/Qw1c6hM2mz0?si=yaA_Q1Y0-nJyx-Du" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD7vaQ73XM9X_9b5xUJiF8CthHAe5u8STaDoijhqRiy56mt-CysMHrXuXC6nm-0Xc_T3tiK93ovE0uS1NSEb_u49JOsVhhMsfMC2JDhR-GeeOFLAOekLp_4day0iTEmJC2a4SMYyFdOV4dw4B6pIMkJ6CHDjHoK73qw6MqCmfedUgraFbeVOwDeEe5pXJU/s1280/maxresdefault%20%2825%29.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/Vrcjv--S2YA?si=wHlNjFQ0uB0QqNXe" class=" btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<div class="container my-4">
<div class="row g-3">
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0hTpAiiJwftW0Y5X4uAfiVIdDfIE930DgXu2NG4-75oj2VYlzcE4vfJaJyuG_laf9IeiGOTBo0HIA-BkLlBYck1wWLlleCTzNh1lLh6svyTt0odVCCCOBaPoE1GiuNXgWnHJ2QgTEsQqG8szYpI_hzFVdrdzh_VXBK6hyphenhyphendTgbzaJkqtcurOwKQrrt1lu4/s1280/maxresdefault%20%2822%29.jpg" alt="Image 1" class="img-fluid overlay-image">
<a href="https://youtu.be/f4zLSstHJzE?si=iP8MoUQoe8lpscoi" class="btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4fWYhRFaeOlPfDPKriQW869lpV9uLOGJ33ke58BWVOdTnjvnMEeYgZeTCRDYVv9RYeXJqRn5ldRDuUzanulWW0ZIJZACmkpC5wEa09aNB-xCceIVONVOxj1t6oK7emyE-NI45pBllmFSuQuhGGULwx2-5caUTz2rMwCMK6bxJ4ZdhN9FcypwI2xVoMj9_/s480/hqdefault%20%281%29.jpg" alt="Image 2" class="img-fluid overlay-image">
<a href="https://youtu.be/N_oc6AKvtGY?si=Tb0MrTdf32sr_Wfw" class=" btn btn-dark overlay-title">Watch Now</a>
</div>
</div>
<div class="col-md-4">
<div class="overlay-container shadow-transition">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh08fvpyVUCEKr7Mt7_2KbyIYF1xObH31wn3cW6ow8OV3Vd5Q1R3QFkLWYT_g3AYIXDIFL0Y2QmwcFO_rlkStkLZ4czAkNZMaBKRBoIzjidrC2m1OPI62WvULM7qmKJeVM1LWV4GV9rt-d7vzt_nSlmuaDCXSWDTYj91O-LKaS0rDIBfAsniU9my-ntS5wI/s480/hqdefault.jpg" alt="Image 3" class="img-fluid overlay-image">
<a href="https://youtu.be/BwzeY6RYMFM?si=7KicTzb29GjTWTh4" class="overlay-title">Watch Now</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popper/js/@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