WEB TECHNOLOGIES

D1+TD1
SANJAY M 22BIT0518
FRONT WEBPAGE PROJECT
FACULTY: RATHI.R
BITE304P
VL2023240504000
L57+L58
Delightboxd: A Journey of Cinematic Discovery

Embark on a journey of cinematic exploration with Delightboxd, your ultimate destination for all
things film-related. Imagine a platform where movie enthusiasts from around the globe gather to
share their passion for cinema, discover new favorites, and engage in lively discussions. Welcome to
Delightboxd, where the magic of movies comes alive!

Creating Your Delightboxd Experience

Creating your Delightboxd account is like stepping into a world of endless possibilities. The journey
begins with a simple sign-up process, where you're greeted with a warm welcome and the promise
of unforgettable movie experiences ahead.

Once logged in, you're invited to personalize your profile, adding a touch of your unique personality
to your cinematic haven. Upload a profile picture, write a captivating bio, and showcase your favorite
films to the world. Delightboxd becomes your digital home for all things cinema, a place where your
movie journey truly begins.

Elements of Delightboxd

1. Film Database: Dive into an extensive database of films, ranging from timeless classics to the latest
blockbusters. With Delightboxd's comprehensive search feature, finding your next movie obsession
has never been easier.

2. Watchlist: Keep track of films you're eager to watch with Delightboxd's intuitive Watchlist feature.
Simply add movies to your Watchlist, and let Delightboxd remind you of your cinematic must-sees.
3. Diary: Document your movie-watching journey with Delightboxd's Diary feature. Log the films you
watch, add dates and ratings, and reminisce about your favorite cinematic moments.

4.Community Interaction: Engage with fellow movie lovers through likes, comments, and reviews.
Discover hidden gems recommended by other users, or share your thoughts on the latest releases.

5. Custom Lists: Curate your own collections of films with Delightboxd's Custom Lists feature. Whether
it's a list of your all-time favorites or a themed selection for movie nights, the possibilities are endless.

6. Pro Features: Unlock advanced features with Delightboxd Pro, including detailed statistics,
personalized recommendations, and exclusive perks for the true movie connoisseur.

7. Importing: Seamlessly import your movie-related activity from IMDb or other services, ensuring a
smooth transition to your new cinematic home on Delightboxd.

From a developer perspective, creating Delightboxd

involved several critical aspects to ensure its success:

1. Frontend Development: Crafting a visually appealing and intuitive user interface (UI) was essential.
This involved utilizing modern frontend technologies such as HTML, CSS, and JavaScript frameworks
like React.js to design responsive layouts, smooth transitions, and interactive components.

2. Backend Infrastructure: Building a robust backend infrastructure was crucial for handling the
website's data and user interactions efficiently. We leveraged backend technologies such as Node.js,
Express.js, and MongoDB to develop RESTful APIs, manage data storage, and handle user
authentication and authorization.
3. Database Management: Managing a vast database of films required careful planning and
optimization. We designed the database schema to efficiently store film metadata, user profiles, and
interaction data, utilizing indexing and querying techniques to ensure fast and accurate data retrieval.

4. Search Functionality: Implementing powerful search functionality was essential for helping users
discover films based on their preferences. We integrated search algorithms and indexing solutions,
such as Elasticsearch, to enable robust search capabilities with features like autocomplete suggestions
and advanced filtering options.

5. User Profiles and Interactions: Developing user profiles and enabling interactions like likes,
comments, and reviews required implementing user authentication and authorization mechanisms.
We utilized frameworks like Passport.js for authentication and integrated real-time communication
tools like WebSockets for live interactions.

6. Watchlist and Diary Features: Creating features like the Watchlist and Diary involved implementing
data management systems to track user preferences and activity. We utilized relational databases and
caching mechanisms to store and retrieve user-specific data efficiently, enabling users to organize and
track their movie-watching experiences seamlessly.

7. Performance Optimization: Optimizing website performance was a continuous effort throughout

development. We employed techniques such as code splitting, lazy loading, and image optimization to
reduce page load times and improve overall responsiveness. Monitoring tools and performance testing
frameworks were used to identify and address bottlenecks proactively.

8. Scalability and Reliability: Designing a scalable and reliable architecture was essential for
accommodating future growth and maintaining uptime. We deployed the application on cloud
platforms like AWS or Google Cloud, utilizing auto-scaling and load balancing features to handle
increased traffic and ensure high availability.
By focusing on these development aspects from a developer perspective, we were able to create
Delightboxd—a platform that not only meets users' expectations but also provides a seamless and
enjoyable experience for exploring the world of cinema.

The creation of Delightboxd was driven by the desire to

provide movie enthusiasts with a serene and immersive
experience that celebrates their love for cinema. Here's why
such a website was needed:

1. Community Engagement: Movie lovers often seek a sense of belonging and community where they
can connect with like-minded individuals. Delightboxd offers a platform for users to engage in
discussions, share recommendations, and discover new films in a peaceful and welcoming
environment.

2. Organized Movie Exploration: With the vast array of films available, it can be overwhelming for
individuals to navigate and discover new content. Delightboxd provides users with tools such as
personalized watchlists, diaries, and curated lists to help them explore movies at their own pace and
in a tranquil setting.

3. Personal Reflection: Watching movies is not just about entertainment; it's also about personal
reflection and introspection. Delightboxd's diary feature allows users to reflect on their movie-
watching experiences in a serene and contemplative space, fostering a deeper connection with the
films they love.

4. Escape from Noise: In a world filled with distractions and noise, Delightboxd offers a sanctuary for
movie lovers to escape and immerse themselves in the magic of cinema. The website's clean and
minimalist design allows users to focus on what truly matters—the films themselves.
5. Curation of Quality Content: In an era of information overload, Delightboxd curates quality content
and recommendations for its users, ensuring that they are exposed to the best that cinema has to
offer. By curating content in a serene and tranquil manner, Delightboxd helps users discover hidden
gems and overlooked classics.

Overall, Delightboxd was created to provide movie lovers with a serene and peaceful oasis where they
can explore, engage, and reflect on their shared passion for cinema. In a world that often feels chaotic
and overwhelming, Delightboxd offers a much-needed respite—a tranquil haven for movie enthusiasts
to indulge in their love of film.

HOMEPAGE

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Your Website Title</title>

<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap">

<style>

/* Whole Page Styles */

*{

margin: 0;

padding: 0;

font-family: "Montserrat", sans-serif;

body {

height: 100vh;
 background-color: #24252a;

/* Navigation Bar */

li {

list-style: none;

a{

text-decoration: none;

font-family: "Montserrat", sans-serif;

font-weight: 500;

font-size: 16px;

color: #edf0f1;

text-decoration: none;

/* display: flex is used*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);

body{

margin: 0px;

justify-content: center;

font-family: 'Raleway', Helvetica, sans-serif,Arial;

position: relative;

#main{

width: 80%;

display: flex;

flex-direction: column;
 align-items: center;

body-position: center;

background-color: white;

justify-content: center;

header{

text-align: center;

main{

display: flex;

display-direction: row;

justify-content: center;

padding-bottom: 20px;

align-content: center;

form{

justify-content: space-between;

min-height: 500px;}

.bottom-top-padding{

padding-top: 10px;

padding-bottom: 10px;

display: flex;

position: center;

}
.label-div{

width: 50%;

text-align: right;

padding-right: 8px;

.input-div{

width: 50%;

text-align: left;

padding-left: 8px;

#submit-div{

display: flex;

justify-content: center;

.input-text, select, textarea{

width: 60%;

height: 100%;

#submit{

background-color: #ffb24f;

color: white;

height: 35px;

width: 200px;

border-radius: 8px;

font-size: 20px;

border: 0px;

font-family: 'Raleway', Helvetica, sans-serif,Arial;

a:hover {
 color: rgba(0, 136, 169, 0.8);

* {box-sizing:border-box}

/* Slideshow container */

.slideshow-container {

max-width: 1000px;

position: relative;

margin: auto;

/* Hide the images by default */

.mySlides {

display: none;

/* Next & previous buttons */

.prev, .next {

cursor: pointer;

position: absolute;

top: 50%;

width: auto;

margin-top: -22px;

padding: 16px;

color: white;

font-weight: bold;

font-size: 18px;

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

user-select: none;

}
/* Position the "next button" to the right */

.next {

right: 0;

border-radius: 3px 0 0 3px;

/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

background-color: rgba(0,0,0,0.8);

/* Caption text */

.text {

color: #f2f2f2;

font-size: 15px;

padding: 8px 12px;

position: absolute;

bottom: 8px;

width: 100%;

text-align: center;

/* Number text (1/3 etc) */

.numbertext {

color: #f2f2f2;

font-size: 12px;

padding: 8px 12px;

position: absolute;

top: 0;

}
/* The dots/bullets/indicators */

.dot {

cursor: pointer;

height: 15px;

width: 15px;

margin: 0 2px;

background-color: #bbb;

border-radius: 50%;

display: inline-block;

transition: background-color 0.6s ease;

.active, .dot:hover {

background-color: #717171;

/* Fading animation */

.fade {

animation-name: fade;

animation-duration: 1.5s;

@keyframes fade {

from {opacity: .4}

to {opacity: 1}

header {

margin-top: 30px;

position: relative;

padding: 0 2rem;
}

.navbar {

max-width: 1000px;

margin: 0 auto;

display: flex;

align-items: center;

justify-content: flex-end;

gap: 3rem;

.navbar .logo {

cursor: pointer;

height: 40px;

width: auto;

margin-right: auto;

margin-left: -10px;

.navbar .links {

display: flex;

gap: 3rem;

.navbar .toggle_btn {

color: #edf0f1;

font-size: 16px;

cursor: pointer;

display: none;

}
.action_btn {

background-color: rgba(0, 136, 169, 1);

color: #edf0f1;

padding: 9px 25px;

border: none;

outline: none;

border-radius: 50px;

font-size: 16px;

font-weight: 500;

cursor: pointer;

transition: all 0.3s ease 0s;

.action_btn:hover {

scale: 1.05;

color: #fff;

.action_btn:active {

scale: 0.95;

/* Dropdown Menu for Navigation Bar*/

.dropdown_menu {

display: none;

position: absolute;

right: 2rem;

top: 60px;

height: 0;

width: 300px;
 background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(15px);

border-radius: 10px;

overflow: hidden;

transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

z-index: 9999;

.dropdown_menu.open {

height: 240px;

.dropdown_menu li {

padding: 0.7rem;

display: flex;

align-items: center;

justify-content: center;

.dropdown_menu .action_btn {

width: 100%;

display: flex;

justify-content: center;

/* Navigation Bar Responsive Design */

@media (max-width: 992px) {

.navbar .links,

.navbar .action_btn {

display: none;
 }

.navbar .toggle_btn {

display: block;

.dropdown_menu {

display: block;

@media (max-width: 576px) {

.dropdown_menu {

left: 2rem;

width: unset;

/* title of "about my web site" */

.first_head {

font-size: 40px;

padding: 40px 20px 40px;

text-align: center;

color: #00d0ff;

/* Apply hover effect to the main title */

.first_head:hover {

/* Add shadow */
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

/* Apply zoom effect */

transform: scale(1.1);

/* Transition for smooth effect */

transition: box-shadow 0.3s ease, transform 0.3s ease;

/* picture of "about my web site" */

.main_image {

height: 70%;

width: 80%;

border-radius: 1rem;

display: flex;

aspect-ratio: 16 / 7;

flex: 1 0 100%;

object-fit: cover;

display: block;

margin-left: auto;

margin-right: auto;

/* paragraph of "about my web site" */

.about_p1 {

letter-spacing: 1px;

line-height: 28px;

font-size: 18px;

padding: 40px 20px 60px;

text-align: justify;
 color: #edf0f1;

margin: 10px -20px -25px;

/* Responsive design for about my page */

@media only screen and (min-width: 1000px) {

.marginmaker {

margin: 0 115px;

/* beginning of three cards to navigate main pages */

.cards-list {

z-index: 0;

width: 100%;

display: flex;

justify-content: space-around;

flex-wrap: wrap;

.card {

margin: 30px auto 70px;

width: 200px;

height: 200px;

border-radius: 1rem;

box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

cursor: pointer;

transition: 0.4s;

}
.card .card_image {

width: 200px;

height: 200px;

border-radius: 1rem;

.card .card_image img {

width: 200px;

height: 200px;

border-radius: 1rem;

object-fit: cover;

/* a links for card navigation */

.card a {

text-decoration: none;

color: inherit;

/* cards titles design */

.card .card_title {

text-align: center;

border-radius: 0px 0px 40px 40px;

font-weight: bold;

font-size: 20px;

margin-top: -80px;

height: 40px;

.title-white {
 color: rgb(255, 255, 255);

.card:hover {

transform: scale(0.9, 0.9);

/* cards responsive design */

@media all and (max-width: 500px) {

.card-list {

flex-direction: column;

/* beginning of footer area */

.footer-distributed {

background-color: #292c2f;

box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);

box-sizing: border-box;

width: 100%;

text-align: left;

font: normal 16px sans-serif;

padding: 45px 50px;

.footer-distributed .footer-left p {

color: #8f9296;

font-size: 14px;

margin: 0;

}
/* Footer links */

.footer-distributed p.footer-links {

font-size: 18px;

font-weight: bold;

color: #ffffff;

margin: 0 0 10px;

padding: 0;

transition: ease 0.25s;

.footer-distributed p.footer-links a {

display: inline-block;

line-height: 1.8;

text-decoration: none;

color: inherit;

transition: ease 0.25s;

.footer-distributed .footer-links a:before {

content: "·";

font-size: 20px;

left: 0;

color: #fff;

display: inline-block;

padding-right: 5px;

.footer-distributed .footer-links .link-1:before {

content: none;
}

.footer-distributed .footer-right {

float: right;

margin-top: 6px;

max-width: 180px;

.footer-distributed .footer-right a {

display: inline-block;

width: 35px;

height: 35px;

background-color: #33383b;

border-radius: 2px;

font-size: 20px;

color: #ffffff;

text-align: center;

line-height: 35px;

margin-left: 3px;

transition: all 0.25s;

.footer_img {

width: 100%;

height: 100%;

background-color: #292c2f;

display: block;

margin: 0;

padding: 0;

}
 .footer-distributed .footer-right a:hover {

transform: scale(1.1);

-webkit-transform: scale(1.1);

.footer-distributed p.footer-links a:hover {

text-decoration: underline;

/* responsive design for footer area */

@media (max-width: 600px) {

.footer-distributed .footer-left,

.footer-distributed .footer-right {

text-align: center;

.footer-distributed .footer-right {

float: none;

margin: 0 auto 20px;

.footer-distributed .footer-left p.footer-links {

line-height: 1.8;

</style>

</head>

<body>

<header>

<nav class="navbar">

<div class="logo">DLXD</div>

<ul class="links">
 <li><a href="#">Movies</a></li>

<li><a href="#">TV Series</a></li>

<li><a href="#">Games</a></li>

</ul>

<div class="toggle_btn">Feedback</div>

<div class="dropdown_menu">

<ul>

<li><a href="#">Dropdown Link 1</a></li>

<li><a href="#">Dropdown Link 2</a></li>

<li><a href="#">Dropdown Link 3</a></li>

</ul>

<button class="action_btn">Action Button</button>

</div>

</nav>

</header>

<div class="first_head">Delightboxd</div>

<marquee width="100%" direction="left" height="100px">

Click "Allow" on the popup so you can be updated with new content every day

</marquee>

<marquee width="=100%" direction="left" height="100px">

Log on to the website for the immense experience of the Latest Updates and interviews...etc

</marquee>

<div class="slideshow-container">

<!-- Full-width images with number and caption text -->

<div class="mySlides fade">

<div class="numbertext">1 / 3</div>

<img src="file:///D:/bladerunner060.jpg" style="width:100%">

<div class="text">One</div>

</div>
 <div class="mySlides fade">

<div class="numbertext">2 / 3</div>

<img src="file:///D:/2541926.jpg" style="width:100%">

<div class="text">Two</div>

</div>

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>

<img src="file:///D:/bladerunner005.jpg" style="width:100%">

<div class="text">Three</div>

</div>

<!-- Next and previous buttons -->

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

<br>

<!-- The dots/circles -->

<div style="text-align:center">

<span class="dot" onclick="currentSlide(1)"></span>

<span class="dot" onclick="currentSlide(2)"></span>

<span class="dot" onclick="currentSlide(3)"></span>

</div>

<script>

let slideIndex = 0;

showSlides();

function showSlides() {

let i;
 let slides = document.getElementsByClassName("mySlides");

let dots = document.getElementsByClassName("dot");

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

slideIndex++;

if (slideIndex > slides.length) {slideIndex = 1}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

setTimeout(showSlides, 2000); // Change image every 2 seconds

</script>

<div id="main">

<header>

<h1 id="title">Survey Form</h1>

<p id="description">User built Survey</p>

</header>

<main>

<form id="survey-form" method="GET" action="#">

<div class="bottom-top-padding">

<div class="label-div">

<label id="name-label" for="name">Name: </label>

</div>

<div class="input-div">

<input id="name" class="input-text" type="text" placeholder="Enter Name" required>

</div>

</div>

<div class="bottom-top-padding">
 <div class="label-div">

<label id="email-label" for="email">E-mail: </label>

</div>

<div class="input-div">

<input id="email" class="input-text" type="email" placeholder="Enter E-Mail" required></div>

</div>

<div class="bottom-top-padding">

<div class="label-div">

<label id="number-label" for="number">Age</label>

</div>

<div class="input-div">

<input id="number" class="input-text" min="0" max="80" type="number" placeholder="Enter

Number">

</div>

</div>

<div class="bottom-top-padding">

<div class="label-div">

<label for="dropdown">what is your favorite genre?</label>

</div>

<div class="input-div">

<select id="dropdown" type="dropdown">

<option>Sitcom</option>

<option>Thriller</option>

<option>Horror</option>

<option>Superhero</option>

<option>Neonoir</option>

<option>Thought provoking</option>

<option>Romance</option>

<option>Action</option>
 </select>

</div>

</div>

<div class="bottom-top-padding">

<div class="label-div">

<label> List your fav films/series/games</label>

</div>

<div class="input-div">

<textarea type="text"></textarea>

</div>

</div>

<div class="bottom-top-padding">

<div class="label-div">

<label>What is your comfort platform?</label>

</div>

<div id="" class="input-div">

<label for="real-estate"><input id="real-estate" type="checkbox" name="real-estate"

value="real-estate">Movies</label>

</br>

<label for="mutual-funds"><input id="mutual-funds" type="checkbox" name="mutual-funds"

value="mutual-funds">TV Series</label>

</br>

<label for="crypto"><input id="crypto" type="checkbox" name="crypto"

value="crypto">Games</label>

</br>

</div>

</div>

<script>
function myFunction() {

alert("Response taken!");

</script>

<div id="submit-div">

<button onclick="myFunction()">Submit</button>

</div>

</form>

</main>

</div>

<p class="about_p1">Welcome to Delightboxd! Let's get started on curating your movie-watching

journey. Begin by exploring our Popular section and marking a few films you've seen. Click the 'eye'
on any film poster to indicate that you've watched it. Feel free to add a 'like' if you enjoyed it, and
don't forget to

rate it too. We'll keep track of all the films you've watched in your Films

tab, and from there, you can dive into reviews, discussions, and other

exciting features.

<br>

<br>

If you have any previous film-related activity saved on IMDb or another platform,

we can assist you in importing it to make your Delightboxd experience seamless.

One of our standout features is the Watchlist, where you can keep track of

films you're eager to see. Head over to Most Anticipated and mark a few

films you're looking forward to watching by clicking the 'clock' icon.

If you later watch or log a film, we'll automatically move it from

your Watchlist to your Films tab and even add it to your Diary if you

provide a viewing date.

<br><br>

As you continue to engage with Delightboxd, your profile will evolve to

reflect your unique taste in movies, creating a personalized space for

film enthusiasts like you. You can also explore the film choices of other

members or the wider community, with the option to hide films you've

already watched to discover new cinematic gems.

Enjoy your journey on Delightboxd, and happy watching!

<br>

<br>

DELIGHTBOXD<3

<br>

<br>

</p>

<div class="cards-list">

<div class="card">

<a href="#">

<div class="card_image"><img
src="file:///D:/webtech/71cd56dc44edea05ce8b92b02b206f8f.jpg" alt="Movie"></div>

<div class="card_title title-white">Movie</div>

</a>

</div>

<div class="card">

<a href="#">

<div class="card_image"><img src="file:///D:/webtech/brba.jpg" alt="Card 2 Image"></div>

<div class="card_title title-white">Tv Series</div>

</a>

</div>

<div class="card">

<a href="#">

<div class="card_image"><img src="file:///D:/webtech/eld.jpg" alt="Card 3 Image"></div>

<div class="card_title title-white">Games</div>

 </a>

</div>

</div>

<footer class="footer-distributed">

<div class="footer-left">

<p class="footer-links">

<a href="#">Movie Delightboxd</a>

<a href="#">TV series Delightboxd</a>

<a href="#">Games Delightboxd</a>

</p>

<p>Delightboxd; 2024</p>

</div>

</footer>

</body>

</html>

Css code for movies

/* body design */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Montserrat", sans-serif;

body {
 height: 100vh;

background-color: #24252a;

/* navigation bar design */

li {

list-style: none;

a{

text-decoration: none;

font-family: "Montserrat", sans-serif;

font-weight: 500;

font-size: 16px;

color: #edf0f1;

text-decoration: none;

a:hover {

color: rgba(0, 136, 169, 0.8);

/* Header */

header {

margin-top: 30px;

position: relative;

padding: 0 2rem;

}
.navbar {

max-width: 1000px;

margin: 0 auto;

display: flex;

align-items: center;

justify-content: flex-end;

gap: 3rem;

.navbar .logo {

cursor: pointer;

height: 40px;

width: auto;

margin-right: auto;

margin-left: -10px;

.navbar .links {

display: flex;

gap: 3rem;

.navbar .toggle_btn {

color: #edf0f1;

font-size: 16px;

cursor: pointer;

display: none;

.action_btn {

background-color: rgba(0, 136, 169, 1);

 color: #edf0f1;

padding: 9px 25px;

border: none;

outline: none;

border-radius: 50px;

font-size: 16px;

font-weight: 500;

cursor: pointer;

transition: all 0.3s ease 0s;

.action_btn:hover {

scale: 1.05;

color: #fff;

.action_btn:active {

scale: 0.95;

/* Dropdown Menu */

.dropdown_menu {

display: none;

position: absolute;

right: 2rem;

top: 60px;

height: 0;

width: 300px;

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(15px);
 border-radius: 10px;

overflow: hidden;

transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

z-index: 9999;

.dropdown_menu.open {

height: 240px;

.dropdown_menu li {

padding: 0.7rem;

display: flex;

align-items: center;

justify-content: center;

.dropdown_menu .action_btn {

width: 100%;

display: flex;

justify-content: center;

/* Responsive Design */

@media (max-width: 992px) {

.navbar .links,

.navbar .action_btn {

display: none;

}
 .navbar .toggle_btn {

display: block;

.dropdown_menu {

display: block;

@media (max-width: 576px) {

.dropdown_menu {

left: 2rem;

width: unset;

/* Image Slider */

.container {

margin-top: 30px;

.slider-wrapper {

position: relative;

max-width: 70rem;

margin: 0 auto;

.slider {

display: flex;

aspect-ratio: 16 / 7;
 overflow-x: auto;

scroll-snap-type: x mandatory;

scroll-behavior: smooth;

box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);

border-radius: 0.5rem;

overflow-x: hidden;

.slider img {

flex: 1 0 100%;

object-fit: cover;

/* Post Card */

.postcard {

margin-top: 100px;

color: #fff;

font-size: 14px;

.projcard-container {

margin: 50px 0;

/* post card inside Code */

.projcard-container * {

box-sizing: border-box;

.projcard-container {

margin-left: auto;

margin-right: auto;

width: 1000px;
}

.projcard {

position: relative;

width: 100%;

height: 300px;

margin-bottom: 40px;

border-radius: 10px;

background-color: #fff;

font-size: 18px;

overflow: hidden;

cursor: pointer;

.projcard-img {

position: absolute;

height: 300px;

width: 400px;

top: 0;

left: 0;

/* making the transform smooth */

transition: transform 0.3s ease-out;

/* align the image to the right side */

.projcard:nth-child(2n) .projcard-img {

left: initial;

right: 0;

/* make image rotate */

.projcard:hover .projcard-img {

transform: scale(1.05) rotate(1deg);

/* short color bar width */

.projcard:hover .projcard-bar {

width: 70px;

/* textbox alignment */

.projcard-textbox {

position: absolute;

top: 7%;

bottom: 7%;

left: 430px;

width: calc(100% - 470px);

font-size: 17px;

/* align the textbox to the left side side */

.projcard:nth-child(2n) .projcard-textbox {

left: initial;

right: 430px;

.projcard-textbox::before,

.projcard-textbox::after {

content: "";

position: absolute;

display: block;

background: #fff;
 top: -20%;

left: -55px;

height: 140%;

width: 60px;

transform: rotate(8deg);

/* angle the picture corners */

.projcard-textbox::after {

display: none;

left: initial;

right: -55px;

.projcard:nth-child(2n) .projcard-textbox::after {

display: block;

.projcard-textbox * {

position: relative;

.projcard-title {

font-family: "Voces", "Open Sans", arial, sans-serif;

font-size: 24px;

color: #24252a;

.projcard-subtitle {

font-family: "Voces", "Open Sans", arial, sans-serif;

color: #888;

font-size: 13px;

padding-bottom: 5px;
}

/* color bar */

.projcard-bar {

left: -2px;

width: 90px;

height: 5px;

margin: 10px 0;

border-radius: 5px;

background-color: #fff;

transition: width 0.2s ease;

.projcard-blue .projcard-bar {

background-color: #40bd00;

.projcard-red .projcard-bar {

background-color: #d62f1f;

.projcard-green .projcard-bar {

background-color: #2093ff;

.projcard-orange .projcard-bar {

background-color: #ff5722;

.projcard-customcolor .projcard-bar {

background-color: #ff5722;

}
/* projcard description designning */

.projcard-description {

color: #424242;

font-size: 15px;

height: 125px;

overflow: hidden;

position: relative;

text-overflow: ellipsis;

z-index: 10;

padding-top: 5px;

/* tagbox */

.projcard-tagbox {

bottom: 3%;

cursor: default;

font-size: 14px;

left: 0;

position: absolute;

pointer-events: none;

user-select: none;

/* making tagbox body */

.projcard-tag {

background: #0088a9;

border-radius: 3px 0 0 3px;

color: #edf0f1;

cursor: default;

display: inline-block;
 line-height: 26px;

margin-right: 20px;

padding: 0 10px 0 23px;

position: relative;

transition: color 0.2s;

user-select: none;

/* making tagbox white dot */

.projcard-tag::before {

background: #fff;

border-radius: 10px;

content: "";

height: 6px;

left: 10px;

position: absolute;

top: 10px;

width: 6px;

/* making tagbox corners */

.projcard-tag::after {

border-bottom: 13px solid transparent;

border-left: 10px solid #0088a9;

border-top: 13px solid transparent;

content: "";

position: absolute;

right: -10px;

top: 0;

}
/* footer area */

.footer-distributed {

background-color: #292c2f;

box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);

box-sizing: border-box;

width: 100%;

text-align: left;

font: normal 16px sans-serif;

padding: 45px 50px;

.footer-distributed .footer-left p {

color: #8f9296;

font-size: 14px;

margin: 0;

/* Footer links */

.footer-distributed p.footer-links {

font-size: 18px;

font-weight: bold;

color: #ffffff;

margin: 0 0 10px;

padding: 0;

transition: ease 0.25s;

.footer-distributed p.footer-links a {

display: inline-block;

line-height: 1.8;
 text-decoration: none;

color: inherit;

transition: ease 0.25s;

.footer-distributed .footer-links a:before {

content: "·";

font-size: 20px;

left: 0;

color: #fff;

display: inline-block;

padding-right: 5px;

.footer-distributed .footer-links .link-1:before {

content: none;

.footer-distributed .footer-right {

float: right;

margin-top: 6px;

max-width: 180px;

.footer-distributed .footer-right a {

display: inline-block;

width: 35px;

height: 35px;

background-color: #33383b;

border-radius: 2px;

font-size: 20px;
 color: #ffffff;

text-align: center;

line-height: 35px;

margin-left: 3px;

transition: all 0.25s;

.footer_img {

width: 100%;

height: 100%;

background-color: #292c2f;

display: block;

margin: 0;

padding: 0;

.footer-distributed .footer-right a:hover {

transform: scale(1.1);

-webkit-transform: scale(1.1);

.footer-distributed p.footer-links a:hover {

text-decoration: underline;

/* footer responsive */

@media (max-width: 600px) {

.footer-distributed .footer-left,

.footer-distributed .footer-right {

text-align: center;
 }

.footer-distributed .footer-right {

float: none;

margin: 0 auto 20px;

.footer-distributed .footer-left p.footer-links {

line-height: 1.8;

Css code for TV series

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Montserrat", sans-serif;

body {

height: 100vh;

background-color: #24252a;

li {

list-style: none;

a{

text-decoration: none;
 font-family: "Montserrat", sans-serif;

font-weight: 500;

font-size: 16px;

color: #edf0f1;

text-decoration: none;

a:hover {

color: rgba(0, 136, 169, 0.8);

/* Header */

header {

margin-top: 30px;

position: relative;

padding: 0 2rem;

.navbar {

max-width: 1000px;

margin: 0 auto;

display: flex;

align-items: center;

justify-content: flex-end;

gap: 3rem;

.navbar .logo {

cursor: pointer;

height: 40px;
 width: auto;

margin-right: auto;

margin-left: -10px;

.navbar .links {

display: flex;

gap: 3rem;

.navbar .toggle_btn {

color: #edf0f1;

font-size: 16px;

cursor: pointer;

display: none;

.action_btn {

background-color: rgba(0, 136, 169, 1);

color: #edf0f1;

padding: 9px 25px;

border: none;

outline: none;

border-radius: 50px;

font-size: 16px;

font-weight: 500;

cursor: pointer;

transition: all 0.3s ease 0s;

.action_btn:hover {
 scale: 1.05;

color: #fff;

.action_btn:active {

scale: 0.95;

/* Dropdown Menu */

.dropdown_menu {

display: none;

position: absolute;

right: 2rem;

top: 60px;

height: 0;

width: 300px;

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(15px);

border-radius: 10px;

overflow: hidden;

transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

z-index: 9999;

.dropdown_menu.open {

height: 240px;

.dropdown_menu li {

padding: 0.7rem;
 display: flex;

align-items: center;

justify-content: center;

.dropdown_menu .action_btn {

width: 100%;

display: flex;

justify-content: center;

/* Responsive Design */

@media (max-width: 992px) {

.navbar .links,

.navbar .action_btn {

display: none;

.navbar .toggle_btn {

display: block;

.dropdown_menu {

display: block;

@media (max-width: 576px) {

.dropdown_menu {

left: 2rem;
 width: unset;

/* Image Slider */

.container {

margin-top: 30px;

.slider-wrapper {

position: relative;

max-width: 70rem;

margin: 0 auto;

.slider {

display: flex;

aspect-ratio: 16 / 7;

overflow-x: auto;

scroll-snap-type: x mandatory;

scroll-behavior: smooth;

box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);

border-radius: 0.5rem;

overflow-x: hidden;

.slider img {

flex: 1 0 100%;

object-fit: cover;

}
/* Post Card */

/* Post Card */

.postcard {

margin-top: 100px;

color: #fff;

font-size: 14px;

.projcard-container {

margin: 50px 0;

/* post card inside Code */

.projcard-container * {

box-sizing: border-box;

.projcard-container {

margin-left: auto;

margin-right: auto;

width: 1000px;

.projcard {

position: relative;

width: 100%;

height: 300px;

margin-bottom: 40px;

border-radius: 10px;

background-color: #fff;

font-size: 18px;

overflow: hidden;
 cursor: pointer;

.projcard-img {

position: absolute;

height: 300px;

width: 400px;

top: 0;

left: 0;

/* making the transform smooth */

transition: transform 0.3s ease-out;

/* align the image to the right side */

.projcard:nth-child(2n) .projcard-img {

left: initial;

right: 0;

/* make image rotate */

.projcard:hover .projcard-img {

transform: scale(1.05) rotate(1deg);

/* short color bar width */

.projcard:hover .projcard-bar {

width: 70px;

/* textbox alignment */
.projcard-textbox {

position: absolute;

top: 7%;

bottom: 7%;

left: 430px;

width: calc(100% - 470px);

font-size: 17px;

/* align the textbox to the left side side */

.projcard:nth-child(2n) .projcard-textbox {

left: initial;

right: 430px;

.projcard-textbox::before,

.projcard-textbox::after {

content: "";

position: absolute;

display: block;

background: #fff;

top: -20%;

left: -55px;

height: 140%;

width: 60px;

transform: rotate(8deg);

/* angle the picture corners */

.projcard-textbox::after {

display: none;
 left: initial;

right: -55px;

.projcard:nth-child(2n) .projcard-textbox::after {

display: block;

.projcard-textbox * {

position: relative;

.projcard-title {

font-family: "Voces", "Open Sans", arial, sans-serif;

font-size: 24px;

color: #24252a;

.projcard-subtitle {

font-family: "Voces", "Open Sans", arial, sans-serif;

color: #888;

font-size: 13px;

padding-bottom: 5px;

/* color bar */

.projcard-bar {

left: -2px;

width: 90px;

height: 5px;

margin: 10px 0;

border-radius: 5px;

background-color: #fff;
 transition: width 0.2s ease;

.projcard-blue .projcard-bar {

background-color: #40bd00;

.projcard-red .projcard-bar {

background-color: #d62f1f;

.projcard-green .projcard-bar {

background-color: #2093ff;

.projcard-orange .projcard-bar {

background-color: #ff5722;

.projcard-customcolor .projcard-bar {

background-color: #ff5722;

/* projcard description designning */

.projcard-description {

color: #424242;

font-size: 15px;

height: 125px;

overflow: hidden;

position: relative;

text-overflow: ellipsis;

z-index: 10;
 padding-top: 5px;

/* tagbox */

.projcard-tagbox {

bottom: 3%;

cursor: default;

font-size: 14px;

left: 0;

position: absolute;

pointer-events: none;

user-select: none;

/* making tagbox body */

.projcard-tag {

background: #0088a9;

border-radius: 3px 0 0 3px;

color: #edf0f1;

cursor: default;

display: inline-block;

line-height: 26px;

margin-right: 20px;

padding: 0 10px 0 23px;

position: relative;

transition: color 0.2s;

user-select: none;

/* making tagbox white dot */

.projcard-tag::before {
 background: #fff;

border-radius: 10px;

content: "";

height: 6px;

left: 10px;

position: absolute;

top: 10px;

width: 6px;

/* making tagbox corners */

.projcard-tag::after {

border-bottom: 13px solid transparent;

border-left: 10px solid #0088a9;

border-top: 13px solid transparent;

content: "";

position: absolute;

right: -10px;

top: 0;

/* footer area */

.footer-distributed {

background-color: #292c2f;

box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);

box-sizing: border-box;

width: 100%;

text-align: left;

font: normal 16px sans-serif;

padding: 45px 50px;

}

.footer-distributed .footer-left p {

color: #8f9296;

font-size: 14px;

margin: 0;

/* Footer links */

.footer-distributed p.footer-links {

font-size: 18px;

font-weight: bold;

color: #ffffff;

margin: 0 0 10px;

padding: 0;

transition: ease 0.25s;

.footer-distributed p.footer-links a {

display: inline-block;

line-height: 1.8;

text-decoration: none;

color: inherit;

transition: ease 0.25s;

.footer-distributed .footer-links a:before {

content: "·";

font-size: 20px;

left: 0;

color: #fff;
 display: inline-block;

padding-right: 5px;

.footer-distributed .footer-links .link-1:before {

content: none;

.footer-distributed .footer-right {

float: right;

margin-top: 6px;

max-width: 180px;

.footer-distributed .footer-right a {

display: inline-block;

width: 35px;

height: 35px;

background-color: #33383b;

border-radius: 2px;

font-size: 20px;

color: #ffffff;

text-align: center;

line-height: 35px;

margin-left: 3px;

transition: all 0.25s;

.footer_img {

width: 100%;

height: 100%;
 background-color: #292c2f;

display: block;

margin: 0;

padding: 0;

.footer-distributed .footer-right a:hover {

transform: scale(1.1);

-webkit-transform: scale(1.1);

.footer-distributed p.footer-links a:hover {

text-decoration: underline;

/* Media Queries */

@media (max-width: 600px) {

.footer-distributed .footer-left,

.footer-distributed .footer-right {

text-align: center;

.footer-distributed .footer-right {

float: none;

margin: 0 auto 20px;

.footer-distributed .footer-left p.footer-links {

line-height: 1.8;

}
CSS code for feedback
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Your Website Title</title>

<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap">

<style>

/* Whole body */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Montserrat", sans-serif;

body {

height: 100vh;

background-color: #24252a;

/* navigation bar */

li {

list-style: none;
}

a{

text-decoration: none;

font-family: "Montserrat", sans-serif;

font-weight: 500;

font-size: 16px;

color: #edf0f1;

text-decoration: none;

a:hover {

color: rgba(0, 136, 169, 0.8);

/* navigation bar Header */

header {

margin-top: 30px;

position: relative;

padding: 0 2rem;

.navbar {

max-width: 1000px;

margin: 0 auto;

display: flex;

align-items: center;

justify-content: flex-end;

gap: 3rem;

}
.navbar .logo {

cursor: pointer;

height: 40px;

width: auto;

margin-right: auto;

margin-left: -10px;

.navbar .links {

display: flex;

gap: 3rem;

.navbar .toggle_btn {

color: #edf0f1;

font-size: 16px;

cursor: pointer;

display: none;

.action_btn {

background-color: rgba(0, 136, 169, 1);

color: #edf0f1;

padding: 9px 25px;

border: none;

outline: none;

border-radius: 50px;

font-size: 16px;

font-weight: 500;

cursor: pointer;
 transition: all 0.3s ease 0s;

.action_btn:hover {

scale: 1.05;

color: #fff;

.action_btn:active {

scale: 0.95;

/* navigation bar Dropdown Menu */

.dropdown_menu {

display: none;

position: absolute;

right: 2rem;

top: 60px;

height: 0;

width: 300px;

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(15px);

border-radius: 10px;

overflow: hidden;

transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

z-index: 9999;

.dropdown_menu.open {

height: 240px;
}

.dropdown_menu li {

padding: 0.7rem;

display: flex;

align-items: center;

justify-content: center;

.dropdown_menu .action_btn {

width: 100%;

display: flex;

justify-content: center;

/* navigation bar Responsive Design */

@media (max-width: 992px) {

.navbar .links,

.navbar .action_btn {

display: none;

.navbar .toggle_btn {

display: block;

.dropdown_menu {

display: block;

}
@media (max-width: 576px) {

.dropdown_menu {

left: 2rem;

width: unset;

/* contact form */

.contact_form * {

margin: 10px 0px;

padding: 0px;

box-sizing: border-box;

/*---------------------------------------------*/

.contact_form a {

font-size: 14px;

line-height: 1.7;

color: #666666;

margin: 0px;

transition: all 0.4s;

-webkit-transition: all 0.4s;

-o-transition: all 0.4s;

-moz-transition: all 0.4s;

/*---------------------------------------------*/

.contact_form h1,

h2,
h3,

h4,

h5,

h6 {

margin: 0px;

.contact_form p {

font-size: 14px;

line-height: 1.7;

color: #666666;

margin: 0px;

.contact_form ul,

li {

margin: 0px;

list-style-type: none;

/*---------------------------------------------*/

.contact_form input {

outline: none;

border: none;

.contact_form textarea {

outline: none;

border: none;

}
.contact_form textarea:focus,

input:focus {

border-color: transparent !important;

/* */

.contact_form .contact1 {

width: 100%;

min-height: 100%;

padding: 15px;

display: flex;

flex-wrap: wrap;

justify-content: center;

align-items: center;

.container-contact1 {

width: 1163px;

background: #fff;

border-radius: 10px;

overflow: hidden;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

align-items: center;

padding: 90px 130px 88px 148px;

}
.contact1-pic {

width: 296px;

.contact1-pic img {

max-width: 100%;

.contact1-form {

width: 390px;

.contact1-form-title {

display: block;

font-size: 24px;

color: #333333;

line-height: 1.2;

text-align: center;

padding-bottom: 44px;

/* other inputs */

input.input1 {

height: 50px;

border-radius: 25px;

padding: 0 30px;

/* message box */

textarea.input1 {
 min-height: 150px;

border-radius: 25px;

padding: 12px 30px;

textarea.input1 + .shadow-input1 {

border-radius: 25px;

.wrap-input1 {

position: relative;

width: 100%;

z-index: 1;

margin-bottom: 20px;

.input1 {

display: block;

width: 100%;

background: #e6e6e6;

font-size: 15px;

line-height: 1.5;

color: #666666;

resize: none;

resize: vertical;

/* contact form button */

.container-contact1-form-btn {

display: flex;

flex-wrap: wrap;
 justify-content: center;

.contact1-form-btn {

min-width: 193px;

height: 50px;

border-radius: 25px;

background: rgba(0, 136, 169, 1);

font-size: 15px;

line-height: 1.5;

color: #fff;

border: 0;

display: flex;

justify-content: center;

align-items: center;

padding: 0 25px;

cursor: pointer;

transition: all 0.3s ease 0s;

/* contact form hover status */

.contact1-form-btn:hover {

scale: 1.05;

color: #fff;

.container-contact1 {

width: 100%;

max-width: 600px; /* Adjust the maximum width as needed */

margin: 0 auto; /* This centers the container horizontally */

}
.contact1-form-btn:active {

scale: 0.95;

/* contact form responsive */

@media (max-width: 1200px) {

.contact1-pic {

width: 33.5%;

.contact1-form {

width: 44%;

@media (max-width: 992px) {

.container-contact1 {

padding: 90px 80px 88px 90px;

.contact1-pic {

width: 35%;

.contact1-form {

width: 55%;

@media (max-width: 768px) {

.container-contact1 {
 padding: 90px 80px 88px 80px;

.contact1-pic {

display: none;

.contact1-form {

width: 100%;

@media (max-width: 576px) {

.container-contact1 {

padding: 90px 15px 88px 15px;

/* Comments Section */

.box {

padding: 10px;

max-width: 1185px;

margin: 0 auto;

text-align: center;

.comment-section-wrapper {

padding: 50px;

margin-top: 10px;

background-color: #fff;
 border-radius: 10px;

.comment-section-wrapper h2 {

margin-bottom: 30px;

display: block;

font-size: 24px;

color: #333;

text-align: center;

padding-bottom: 20px;

font-weight: 100;

.comment-section-wrapper input {

width: 85%;

margin: 0px 0px 30px;

height: 50px;

border-radius: 25px;

padding: 0 30px;

background: #e6e6e6;

position: relative;

font-size: 15px;

line-height: 1.5;

border: none;

outline: none;

.comment-section-wrapper .submit-button {

min-width: 193px;

height: 50px;

border-radius: 25px;
 background: #0088a9;

font-size: 15px;

color: #fff;

border: none;

padding: 0 25px;

display: block;

margin: 0px auto;

.comment-section-wrapper .submit-button:hover {

cursor: pointer;

transition: all 0.5s ease 0s;

.submit-button:hover {

scale: 1.05;

.submit-button:active {

scale: 0.95;

/* comments design */

.comment-input {

display: flex;

.comment-input input {

margin-right: 8px;

}
li {

color: white;

ul {

background-color: #24252a;

border-radius: 25px;

padding: 20px !important;

.comment {

border-bottom: 1px solid #0088a9;

margin-top: 15px;

padding: 15px;

/* About Me Start */

.about {

max-width: 70rem;

margin: 60px auto;

padding: 0px 20px 20px;

font-family: "Montserrat", sans-serif;

box-sizing: border-box;

.about img {

width: 100%;

border-radius: 0.5rem;

}
.about-text {

width: 100%;

text-align: center;

.about-text h1 {

color: #fff;

font-size: 50px;

text-transform: capitalize;

padding-top: 20px;

text-align: center;

.about-text h5 {

color: #00d0ff;

font-size: 25px;

text-transform: capitalize;

padding-bottom: 20px;

.about-text p {

letter-spacing: 1px;

line-height: 28px;

font-size: 18px;

text-align: justify;

color: #edf0f1;

/* About Me collapsible button */

.collapsible {

background-color: #333;
 color: #fff;

cursor: pointer;

padding: 18px;

width: 100%;

border: none;

text-align: center;

outline: none;

font-size: 20px;

border-radius: 10px;

margin-bottom: 30px;

.active,

.collapsible:hover {

background-color: #555;

.main {

display: none;

/* about me responsive design */

@media only screen and (min-width: 1000px) {

.about .my_pic {

width: 50%;

/* float: left; */

.about-text {

padding-top: 50px;

width: 40%;
 float: right;

/* footer area */

.footer-distributed {

background-color: #292c2f;

box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);

box-sizing: border-box;

width: 100%;

text-align: left;

font: normal 16px sans-serif;

padding: 45px 50px;

.footer-distributed .footer-left p {

color: #8f9296;

font-size: 14px;

margin: 0;

/* Footer area links */

.footer-distributed p.footer-links {

font-size: 18px;

font-weight: bold;

color: #ffffff;

margin: 0 0 10px;

padding: 0;

transition: ease 0.25s;

}
.footer-distributed p.footer-links a {

display: inline-block;

line-height: 1.8;

text-decoration: none;

color: inherit;

transition: ease 0.25s;

.footer-distributed .footer-links a:before {

content: "·";

font-size: 20px;

left: 0;

color: #fff;

display: inline-block;

padding-right: 5px;

.footer-distributed .footer-links .link-1:before {

content: none;

.footer-distributed .footer-right {

float: right;

margin-top: 6px;

max-width: 180px;

.footer-distributed .footer-right a {

display: inline-block;

width: 35px;
 height: 35px;

background-color: #33383b;

border-radius: 2px;

font-size: 20px;

color: #ffffff;

text-align: center;

line-height: 35px;

margin-left: 3px;

transition: all 0.25s;

.footer_img {

width: 100%;

height: 100%;

background-color: #292c2f;

display: block;

margin: 0;

padding: 0;

.footer-distributed .footer-right a:hover {

transform: scale(1.1);

-webkit-transform: scale(1.1);

.footer-distributed p.footer-links a:hover {

text-decoration: underline;

/* mkae footer area responsive */

@media (max-width: 600px) {

.footer-distributed .footer-left,

.footer-distributed .footer-right {

text-align: center;

.footer-distributed .footer-right {

float: none;

margin: 0 auto 20px;

.footer-distributed .footer-left p.footer-links {

line-height: 1.8;

</style>

</head>

<body>

<!-- Your HTML content goes here -->

<header>

<div class="navbar">

<div class="logo">DLXD</div>

<ul class="links">

<li><a href="#">DLXD</a></li>

<li><a href="#">Movies</a></li>

<li><a href="#">TV Series</a></li>

<li><a href="#">Games</a></li>

</ul>
 <div class="toggle_btn">&#9776;</div>

<div class="dropdown_menu">

<ul>

<li><a href="#">DLXD</a></li>

<li><a href="#">Movies</a></li>

<li><a href="#">TV Series</a></li>

<li><a href="#">Games</a></li>

</ul>

<button class="action_btn">Action Button</button>

</div>

</div>

</header>

<div class="container-contact1">

<div class="contact1-pic">

<img src="file:///D:/webtech/Untitled.jpeg" alt="Contact Picture">

</div>

<div class="contact1-form">

<span class="contact1-form-title">Contact Us</span>

<!-- Your contact form HTML goes here -->

<div class="wrap-input1">

<textarea class="input1" name="message" placeholder="Message"></textarea>

<span class="shadow-input1"></span>

</div>

<div class="container-contact1-form-btn">

<button class="contact1-form-btn">Send</button>

</div>

</div>

</div>
 <div class="box">

<div class="comment-section-wrapper">

<h2>Comments Section</h2>

<div class="comment-input">

<input type="text" placeholder="Your comment...">

<button class="submit-button">Submit</button>

</div>

</div>

</div>

<div class="about">

<button class="collapsible">About Me</button>

<div class="main">

<div class="about-text">

<h1>About Me</h1>

<h5>Some subtitle</h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar libero in libero
feugiat,

nec scelerisque nunc pharetra.</p>

</div>

</div>

</div>

<footer class="footer-distributed">

<div class="footer-left">

<p class="footer-links">

<a href="#">DLXD</a>

<a href="#">Movies</a>
 ·

<a href="#">TV Series</a>

<a href="#">Games</a>

</p>

<p>DELIGHTBOXD; 2024</p>

</div>

</footer>

</body>

</html>
GLIMPSES of MY WEBSITE
Conclusion

With Delightboxd, every movie becomes an unforgettable experience. Whether you're a casual
moviegoer or a dedicated cinephile, there's something for everyone on Delightboxd. Join the
community today and let your cinematic journey begin!