Scribd
Upload
4 views41 pages

frontend (2) presentation

Thankyou

Uploaded by

senprince.2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views41 pages

frontend (2) presentation

Thankyou

Uploaded by

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

GEETA UNIVERSITY, PANIPAT

GEETA UNIVERSITY
PANIPAT

B.Tech 1st Semester


School of Computer Application
(2024-2025)

Front end Development Lab


(CS3142)
Lab Practical file

SUBMITTED TO:-
SUBMITTED BY:-
MR. SHUBHAM
SAGAR PRINCE SEN
ROLL NO :- 2401301063
GEETA UNIVERSITY, PANIPAT

LAB PRACTICAL FILE

DEPARTMENT SEMESTER:
LABORATORY: front end Development Lab(CS3142)
OF School CSE 1st

PAGE
S.No. LIST OF EXPERIMENT DATE SIGN.
NO.
Portfolio Website: HTML/CSS basics, images, layout
1.
techniques, flexbox grid for showcasing photography portfolio.
E-commerce Landing Page: HTML CSS, forms, buttons, grids
2. for product display, navigation, and user interaction.

Online Resume/CV: HTML structure, CSS styling, flexbox


3. grid for organizing content, and enhancing readability,

Travel Blog with Image Gallery: HTML/CSS for content


4. structure, image grid, and navigation using flexbox/grid.

Restaurant Website: HTML/CSS layout, colors, navigation


5. bar, and flexbox/grid for menu organization.

Online Learning Platform: HTML/CSS for course structure,


6.
progress bars, flexbox/grid for interactive learning modules.
Weather Forecast Website: HTML/CSS for layout, API
7.
integration, flexbox/grid for weather cards display.
Online Clothing Store: HTML for product listings, CSS for
8.
design, JavaScript for Dynamic Interaction.
Job Portal: HTML/CSS for job listings. JavaScript for Search
9.
Functionality.
Healthcare Appointment Booking: Use HTML/CSS for
10.
interface, JavaScript for Form Validation.
11. Expending Cards Effects: Use JS for Expending Cards Effect.
12.
Rotating Navigation Page Effect: Create a Rotating Navigation
page effect.
13. Split Landing Page: Create a split Landing Page

14. FAQ Collapse: Design FAQ collapse effect

Movie App: Create a Movie App


15.
GEETA UNIVERSITY, PANIPAT
Experiment Tittle: : Portfolio Website: HTML/CSS basics, images, layout EXPER. No.1
techniques, flexbox grid for showcasing photography portfolio.
PAGE No.1
DEPARTMENT OF ---
SEMESTER:
SCHOOL OF COMPUTER LABORATORY: Frontend devlopmenet ( cs3142) 1st
SCIENCE

Experiment No-1
Objective: Portfolio Website: HTML/CSS basics, images, layout techniques, flexbox grid for showcasing
photography portfolio.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<header>
<h1><b>Welcome to my Photography Portfolio</b></h1>
<nav>
<ul>
<li><a href="">About</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Contact</a></li>

</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>Hi, I'm <b>Kundan Patel</b>, a passionate photographer who loves caputering moments and turning in
to memories </p>
</section>

<section id="Gallery">
<h2>Gallery</h2>
<div class="grid-container">
<img id="grid-item1" src="imges/img1.png.jpg" height="200px" alt="Beatiful eveaning">
<img id="grid-item2" src="imges/sun.jpg" height="250px" alt=" Beauty of sun rays">
<img id="grid-item3" src="imges/lake.jpg" height="250px" alt="lake">
<img id="grid-item4" src="imges/god1.jpg" height="200px" alt="Gods Kathmandu">
<video id="grid-item6" src="videos/view.mp4" controls alt="view"></video>
<video id="grid-item5" src="videos/koshitappu.mp4" controls height="250px" alt="KoshiTappu">

</div>

</section>
</main>

<section id="contact">
<h2>Contact</h2>
<p>Email:<a href="mailto:kuntel3930@gmail.com">kuntel3930@gmail.com</a> </p>
<p>Follow me on <a
href="https://www.instagram.com/kundan_2120/profilecard/?igsh=MXI2ZDUzbjdpdWkwbQ== ">Instagram</a> or <a
href="https://www.facebook.com/share/etCLt6zin9Gph3Gr/">facebook</a>.</p>
</section>
<footer>
<p>&copy; 2024 [Kundam Patel]. All right reserved. </p>
</footer>

</body>
</html>

CSS CODE:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;

color: #333;
background: #f4f4f4;
padding: 0 20px;
}
header {
background: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
header h1 {
margin-bottom: 10px;
}
header nav ul {
list-style: none;
}
header nav ul li {
display: inline;
margin: 0 15px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
}
section {
margin: 20px 0;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
section h2 {
margin-bottom: 10px;
color: #333;
}
.grid-container{

display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
border-radius: 8px;
}
div img{
height: 300px;
border: 2px solid red;
border-radius: 10px;
box-shadow: 4px 7px 7px 0px #00000042;
cursor: pointer;
margin: 10px;
transition: 400ms;
}
div video{
height: 300px;
border: 2px solid red;
border-radius: 10px;
box-shadow: 4px 7px 7px 0px #00000042;
cursor: pointer;
margin: 10px;
transition: 400ms;
}
div img:hover{
transform: scale(1.03);
}
div video:hover{
transform: scale(1.1);
}
#grid-item4{
width: 350;
}
footer {
text-align: center;
padding: 10px 0;
background: #333;
color: #fff;
margin-top: 20px;
}

OUTPUT:
GEETA UNIVERSITY, PANIPAT
Experiment Tittle: E-commerce Landing Page: HTML CSS, forms, buttons, EXPER. No.2
grids for product display, navigation, and user interaction.
PAGE No.
DEPARTMENT OF ---
SEMESTER:
SCHOOL OF COMPUTER LABORATORY:frontend devlopment (cs3142) 1st
SCIENCE

Objective: E-commerce Landing Page: HTML CSS, forms, buttons, grids for product display, navigation,
and user interaction
HTML /CSS CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav1{
background-color: rgb(73, 69, 69);
display: flex;
}
.nav2{
display: flex;
}
.nav3{
color: white;
margin-left: 20px;
}
.nav4{
margin-left: 40px;
width: 600px;
height: 30px;
padding-top: 10px;
}
.nav5{
margin-left: 50px;
padding-top: 20px;
}
.box{
height: 700px;
width: 1400px;
border: 1px solid black;
display: flex;
}
.box1{
height: 700px;
width: 700px;
border: 1px solid black;
background-color:
OUTPUT: rgb(72, 72, 119);
display: grid;
grid-template-columns: 200px 250px 250px;
grid-template-rows: 100px 100px 100px ;
}
.box3{
height: 700px;
width: 700px;
border: 1px solid black;
background-color: rgb(111, 49, 111);
}
#box2{
height: 100px;
width: 200px;
border: 1px solid black;
object-fit: cover;
}
.box4{
color: rgb(199, 50, 75);
}

.box5{
padding-left: 20px;
}
.box6{
height: 40px;
width: 400px;
}
.box7{
margin-top: 50px;
margin-bottom: 50px;
padding-left: 20px;

}
.box8{
background-color: green;
height: 40px;
width: 200px;
border-radius: 20%;
}
.box9{
padding-left: 20px;
color: white;
}
.box10{
color: blue;
background-color: white;
}
.box11{
padding: 20px;
margin-top: 50px;

}
.box12{
color: green;
background-color: white;
}
</style>
</head>
<body>
<nav class="nav1">
<ul class="nav2">
<span><a class="nav3" href="#Home">Home</a></span>
<span><a class="nav3" href="#About">About</a></span>
</ul>
<input class="nav4" type="text" placeholder="Search for Brands, Electronics and More ">
<span class="nav5">
<select name="flip" id="flip">
<option value="#Log in">Log in</option>
<option value="#Sign Up">Sign Up</option>
</select>
</span>
</nav>
<div class="box">
<div class="box1">
<div style="border: 1px solid black;">
<img id="box2" src="Screenshot 2024-12-04 151821.png" alt="">
</div>
<div style="border: 1px solid black;">
<img id="box2" src="Screenshot 2024-12-04 151826.png" alt="">
</div>
<div style="border: 1px solid black;">
<img id="box2" src="Screenshot 2024-12-04 151831.png" alt="">
</div>
<div style="border: 1px solid black;">
<img id="box2" src="Screenshot 2024-12-04 151841.png" alt="">
</div>
<div style="border: 1px solid black;">
<img id="box2" src="Screenshot 2024-12-04 151850.png" alt="">
</div>
<div style="border: 1px solid black;">
<img id="box2" src="Screenshot 2024-12-04 151856.png" alt="">
</div>
<div style="border: 1px solid black;">
<img id="box2" src="Screenshot 2024-12-04 151926.png" alt="">
</div>
<div style="border: 1px solid black;">
<img id="box2" src="Screenshot 2024-12-04 151932.png" alt="">
</div>
<div style="border: 1px solid black;">
<img id="box2" src="Screenshot 2024-12-04 151938.png" alt="">
</div>
<div style="border: 1px solid black;">
<img id="box2" src="Screenshot 2024-12-04 151932.png" alt="">
</div>
<div style="border: 1px solid black;">
<img id="box2" src="Screenshot 2024-12-04 151938.png" alt="">
</div>
<div style="border: 1px solid black;">
<img id="box2" src="Screenshot 2024-12-04 161610.png" alt="">
</div>

</div>
<div class="box3">
<h1 class="box4"><em>Fashion Mela</em></h1>
<div class="box5">
<input class="box6" type="text" placeholder="Email id or Mobile No.">
</div>
<div class="box7">
<button class="box8">Submit</button>
</div>
<div class="box9">Don't have an account <span class="box10">Sign
Up</span></div>
<div class="box11"> <span class="box12">Forgot id??</span></div>
</div>
</div>

</body>
</html>
OUTPUT:

OUTPUT:

OUTPUT:

GEETA UNIVERSITY, PANIPAT


Experiment Tittle: Online Resume/CV: HTML structure, CSS styling, flexbox EXPER. No.3
grid for organizing content, and enhancing readability,
PAGE No.
DEPARTMENT OF ---
SEMESTER:
SCHOOL OF COMPUTER LABORATORY: Front end devlopment(cs3142)
1st
SCIENCE
Objective: Online Resume/CV: HTML structure, CSS styling, flexbox grid for organizing content, and enhancing readability

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="q3.css">
</head>
<body>
<div id="parent">
<div id="box1">
<div id="box2">
<span id="xob1">Name</span><br>
<span id="xob2"><a href="#code">Leet code</a></span><br>
<span id="xob3"><a href="#code">Code Forces</a></span><br>
</div>
<div id="box3">
<span id="xob1">Mobile no.</span><br>
<span id="xob2">Email-id</span><br>
<span id="xob3"><a href="">Linkedin</a></span><br>
</div>
</div>
<h1>EDUCATION</h1>
<hr/>
<div id="box4">
<div id="box5">
<ul>
<li><h2>Bachelor Of Technology</h2></li>
</ul>
<div id="xob4"><i>Geeta University Naultha Panipat</i></div>
</div>
<div id="box6">
<div id="xob5"><i>1st year</i></div>
<div id="xob5"><i>2024-25</i></div>
<div id="xob5"><i>CGPA : 9.5</i></div>
</div>
</div>
<div id="box7">
<h1>Acheivements</h1><hr/>
</div>
<div id="box8">
<h1>Projects</h1><hr/>
</div>
<div id="box9">
<h1>Technical Skills</h1><hr/>
<div id="box10">C, C++, HTML, CSS, Javascript, Python, DSA</div>
</div>
<div id="box11">
<h1 id="box12">Experience</h1><hr/>
<div>No Experience</div>
</div>
</div>
</body>
</html>

CSS CODE:
#parent{ }
height: 760px; #box8{
width: 1400px; height: 100px;
margin: 0%; width: 1400px;
} }
#box1{ #box9{
height: 80px; height: 100px;
width: 1400px; width: 1400px;
display: flex; }
justify-content: space-around; #box12{
} margin-bottom: 0px;
#box2{ }
height: 80px;
width: 300px;
}
#box3{
height: 80px;
width: 300px;
} OUTPUT:
#xob1{
font-size: larger;
margin-bottom: 10px;
}
#xob2{
margin-bottom: 10px;
}
#box4{
height: 100px;
width: 1400px;
display: flex;
justify-content: space-between;
}
#box5{
height: 100px;
width: 400px;
}
#box6{
height: 100px;
width: 400px;
}
#xob4{
padding-left: 30px;
}
#xob5{
margin-bottom: 10px;
}
#box7{
height: 150px;
width: 1400px;
}
GEETA UNIVERSITY, PANIPAT
Experiment Tittle: Travel Blog with Image Gallery: HTML/CSS for content structure, image EXPER. No.4
grid, and navigation using flexbox/grid.
PAGE No.
DEPARTMENT OF --- SEMESTER:
LABORATORY: Frontend devlopment (cs3142)
COMPUTER SCIENCE 1ST
OBJECTIVE: Travel Blog with Image Gallery: HTML/CSS for content structure, image grid, and navigation using flexbox/grid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="q4.css">
</head>
<body>
<div id="parent">
<nav id="box1">
<ul>
<span><a id="xob1" href="#code">Collections</a></span>
<span><a id="xob1" href="#jpg">Himalaya</a></span>
<span><a id="xob1" href="#png">Masoorie</a></span>
<span><a id="xob1" href="#pdf">Rishikesh</a></span>
<span><a id="xob1" href="#">Haridwar</a></span>
<span><a id="xob1" href="#pdf">Tajmahal</a></span>
<span><a id="xob1" href="#pdf">Qtbminar</a></span>
<span><a id="xob1" href="#pdf">Ayodhya</a></span>
<span><a id="xob1" href="#pdf">Vrindavan</a></span>
</ul>
</nav>
<div id="box2">
<div><img id="xob2" src="Screenshot 2024-12-04 180855.png" alt=""></div>
<div></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 190710.png" alt=""></div>
<div></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 180909.png" alt=""></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 184748.png" alt=""></div>
<div></div>
<div></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 184753.png" alt=""></div>
<div></div>
<div></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 184800.png" alt=""></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 184806.png" alt=""></div>
<div></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 190716.png" alt=""></div>
<div></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 184813.png" alt=""></div>
<div></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 190724.png" alt=""></div>
<div></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 184832.png" alt=""></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 184843.png" alt=""></div>
<div></div>
<div></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 184852.png" alt=""></div>
<div></div>
<div></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 184859.png" alt=""></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 184906.png" alt=""></div>
<div></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 190730.png" alt=""></div>
<div></div>
<div></div>
<div><img id="xob2" src="Screenshot 2024-12-04 190512.png" alt=""></div>
</div>
</div>
</body>
</html>

#parent{
height: 760px;
width: 1400px;
border: 1px solid black;
background-color: rgb(102, 161, 110);
}
#box1{
background-color: darkslateblue;
height: 50px;
width: 1400px;
}
#xob1{
color: white;
padding-left: 50px;
font-size: larger;
padding-top: 20px;
}
#box2{
height: 700px;
width: 1400px;
background-color: bisque;
display: grid;
grid-template-columns: 200px 200px 200px 200px 200px 200px 200px;
grid-template-rows: 100px 100px 100px 100px 100px 100px 100px;

}
#xob2{
height: 100px;
width: 200px;
}
OUTPUT:
GEETA UNIVERSITY, PANIPAT
Experiment Tittle: Restaurant Website: HTML/CSS layout, colors, EXPER. No.5
navigation bar, and flexbox/grid for menu organization.
PAGE No.
DEPARTMENT OF --- SEMESTER:
LABORATORY: Frontend devlopment ( cs3142)
COMPUTER SCIENCE 1ST
OBJECTIVE: Restaurant Website: HTML/CSS layout, colors, navigation bar, and flexbox/grid for menu
organization.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="q5.css">
</head>
<body>
<div id="parent">
<div id="box1">
<nav id="xob1">
<span id="xo1">Home</span>
<span id="xo1">Orders</span>
<span id="xo1">Our Story</span>
<span id="xo1">Gifts</span>
<span id="xo1">Book a Table</span>
<span id="xo1">Menu</span>
</nav>
</div>
<div id="box2">
<div id="xob2">
<h1>Veg Dishes</h1>
<ul>
<li><a href="Shahi Paneer"><i id="xo2">Shahi Paneer</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Malai Kofta</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Misal</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Litti Chokha</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Dal Tadka</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Pav Bhaji</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Palak Paneer</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Gobi Manchurian</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Rajma</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Dahi Vada</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">chana Masala</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Aaloo Gobhi</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Matar Paneer</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Bhel Puri</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Samosa</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Sponge</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Icecream</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Kulfi</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Colddrink</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Soda</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Tikki</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Kheer</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Futpur</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Aaloo bhujiya</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Pickles</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Salad</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Salt</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Mineral Water</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Milk</i></a></li>
</ul>
</div>
<div id="xob3">
<div><img id="xo3" src="Screenshot 2024-12-04 191808.png" alt=""></div>
<div><img id="xo3" src="Screenshot 2024-12-04 195425.png" alt=""></div>
</div>
<div id="xob4">
<h1>NonVeg Dishes</h1>
<ul>
<li><a href="Shahi Paneer"><i id="xo2">fish pakora</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Goat curry</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Meat</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">chicken</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">chicken briyani</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Pav briyani</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">egg biryani</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Gobi Goat</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Rajma chicken</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Dahi fish</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">masala fish</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">sahi goat</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Matar goat</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">chicken Puri</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">egg roll</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">chicken roll</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Icecream</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Kulfi</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Colddrink</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Soda</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">omlette</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">egg boil</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">boil chicken</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">fish bhujiya</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Pickles</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Salad</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Salt</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">Mineral Water</i></a></li>
<li><a href="Shahi Paneer"><i id="xo2">chikky</i></a></li>
</ul>
</div>
</div>
<div id="box3">
<nav id="xob1">
<span id="xo1">privacy</span>
<span id="xo1">contact us</span>
<span id="xo1">services</span>
<span id="xo1">Download App</span>
<span id="xo1">other branches</span>
<span id="xo1">social Media</span>
</nav>
</div>
</div>
</body>
</html>

CSS CODE:
#parent{
height: 760px;
width: 1400px;
border: 1px solid black;
}
#box1{
height: 50px;
background-color: darkgoldenrod;
width: 1400px;
border: 1px solid black;
}
#xob1{
display: flex;
}
#xo1{
padding-top: 20px;
margin-right: 160px;
color: white;
font-size: larger;
}
#box2{
height: 660px;
width: 1400px;
border: 1px solid black;
display: flex;
}
#xob2{
height: 660px;
width: 300px;
border: 1px solid black;
background-color: lawngreen;
}
#xob3{
height: 660px;
width: 800px;
}
#xo3{
height: 330px;
width: 800px;
}
#xob4{
height: 660px;
width: 300px;
background-color: tomato;
border: 1px solid black;
}
#box3{
background-color: rgb(142, 147, 132);
}

li{
list-style-type: none;
}

li a{
color: white;
text-decoration: none;
}

#xob2 a{
color: #444;
}

OUTPUT:
GEETA UNIVERSITY, PANIPAT
Experiment Tittle: Online Learning Platform: HTML/CSS for course EXPER. No.6
structure, progress bars, flexbox/grid for interactive learning modules
PAGE No.
DEPARTMENT OF --- SEMESTER:
LABORATORY: Frontend devlopment ( cs3142)
COMPUTER SCIENCE 1ST
OBJECTIVE: Online Learning Platform: HTML/CSS for course structure, progress bars, flexbox/grid for
interactive learning L modules

HTMCODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="q6.css">
</head>
<body>
<div id="parent">
<div id="box1">
<nav id="xob1">
<span id="xo1">All Courses</span>
<span id="xo1">Upskilling job-Assistant</span>
<span id="xo1">Test</span>
<span id="xo1">Store</span>
<span id="xo1">Log in/ Register</span>
<span id="xo1">Menu</span>
</nav>
</div>
<div id="box2">
<img id="xob2" src="Screenshot 2024-12-04 211910.png" alt="">
</div>
<div id="box3">
<img id="xob3" src="Screenshot 2024-12-04 211519.png" alt="">
</div>
</div>
</body>
</html>

CSS CODE:
#parent{
height: 760px;
width: 1400px;
border: 1px solid black;
}
#box1{
height: 70px;
background-color: black;
width: 1400px;
border: 1px solid black;
}
#xob1{
display: flex;
}
#xo1{
padding-top: 20px;
margin-right: 160px;
color: white;
font-size: larger;
}
#box2{
height: 300px;
width: 1400px;
background-color: bisque;
}
#xob2{
height: 300px;
width: 1400px;
}
#box3{
height: 390px;
width: 1400px;

}
#xob3{
height: 390px;
width: 1400px;
}

OUTPUT:

GEETA UNIVERSITY, PANIPAT


Experiment Tittle: Weather Forecast Website: HTML/CSS for layout, API EXPER. No.7
integration, flexbox/grid for weather cards display.
PAGE No.
DEPARTMENT OF --- SEMESTER:
LABORATORY: Frontend devlopment (cs3142)
COMPUTER SCIENCE 1ST
OBJECTIVE: Weather Forecast Website: HTML/CSS for layout, API integration, flexbox/grid for weather cards display.

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Forecast</title>
<link rel="stylesheet" href="q7.css">
</head>
<body>
<div class="container">
<h1>Weather Forecast</h1>
<div class="weather-info">
<div class="city">City, Country</div>
<div class="temp">17°C</div>
<div class="date">Wednesday, April 22</div>
<div class="time">09:00</div>
<h3>5 Day Forecast</h3>
<div class="days">
<div class="day">Thursday</div>
<div class="forecast"><img src="assets/sun.png" alt="Sunny"> Sunny</div>
</div>
<div class="days">
<div class="day">Friday</div>
<div class="forecast"><img src="assets/cloud.png" alt="Cloudy"> Cloudy</div>
</div>
<div class="days">
<div class="day">Saturday</div>
<div class="forecast"><img src="assets/rain.png" alt="Rainy"> Rainy</div>
</div>
<div class="days">
<div class="day">Sunday</div>
<div class="forecast"><img src="assets/snow.png" alt="Snowy"> Snowy</div>
</div>
<div class="days">
<div class="day">Monday</div>
<div class="forecast"><img src="assets/sun.png" alt="Sunny"> Sunny</div>
</div>
</div>
</div>
</body>
</html>

CSS CODE:

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

.container {
max-width: 400px;
margin: 0 auto;
text-align: center;
padding: 20px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
margin-top: 50px;
}

h1 {
font-size: 24px;
}

.weather-info {
margin-top: 20px;
}

.city, .temp, .date, .time {


font-size: 18px;
margin: 10px 0;
}

.days {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.day {
font-size: 16px;
font-weight: bold;
}
.forecast {
display: flex;
align-items: center;
}

.forecast img {
width: 20px;
height: 20px;
margin-right: 5px;
}

OUTPUT:

GEETA UNIVERSITY, PANIPAT


EXPERIMENT TITLE:Online Clothing Store: HTML for product listings, EXPER. No.8
CSS for design, JavaScript for Dynamic Interaction.
PAGE No.
DEPARTMENT OF --- SEMESTER:
LABORATORY: Frontend devlopment (cs3142)
COMPUTER SCIENCE 1ST
EXPERIMENT NO.:8
OBJECTIVE: Online Clothing Store: HTML for product listings, CSS for design, JavaScript for Dynamic Interaction.

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>shpee</title>
<style>
body{
height: 760PX;
width: 1400PX;
margin-top: 0%;
}
.box1{
height:260px ;
width: 1400px;
}
.box4{
height: 100px;
display: flex;

}
h1{
padding-left: 50px;
color: blue;
margin-right: 20px;
padding-top: 0px;
}
.box5{
height: 160px;
}
.box6{
height: 30px;
padding-top: 30px;
margin-right: 70px;

}
.box7{
padding-top: 25px;
margin-right: 70px;

}
.box8{
padding-top: 30px;
font-size: large;
margin-right: 70px;
}
.box9{
padding-top: 30px;
font-size: large;
margin-right: 100px;
}
.box10{
font-size: xx-large;
padding-top: 30px;
}
.box20{
display: flex;
}
.box21{
display: flex;
}
.box22{
padding-left: 30px;
margin-right: 42px;
}

.box2{
height: 250px;
background-color: rgb(0, 136, 255);
display: flex;
}
.box23{
height: 250px;
width: 600px;
padding-left: 300px;
margin-right: 30px;

}
.box30{
height: 250px;
width: 400px;
}
.box24{
font-size: larger;
color: white;
margin-bottom: 10px;
}
.box25{
font-size: larger;
color: white;
margin-bottom: 10px;
}
.box26{
font-size: xx-large;
color: white;
margin-bottom: 10px;
}
.box27{
font-size: larger;
color: white;
margin-bottom: 10px;
}
.box28{
font-size: larger;
color: white;
margin-bottom: 30px;
}
.box29{
font-size: larger;
color: white;

}
.box3{
height: 250px;
margin-top: 20px;
display: flex;

}
.box30{
padding-top: 20px;
height: 225px;
width: 200px;
margin-right: 30px;
border: 0.5px solid rgb(93, 92, 92);
}
.box34{
height: 100px;
width: 100px;
}
.box31{
margin-bottom: 10px;
width: 200px;
text-align: center;
}
.box32{
margin-bottom: 10px;
width: 200px;
text-align: center;
}
.box33{
width: 200px;
text-align: center;
}

</style>
</head>
<body>
<div class="box1">
<div class="box4">
<h1>shopee</h1>
<div class="box7"><input style="height: 29px;width: 500px;border-
radius: 10px;" type="text" placeholder="Search for Products, Brands and
More"></div>
<div class="box6"><select name="Log in" id="Log in">
<option value="Log in">Log in</option>
<option value="Sign Up">Sign Up</option>
<option value="Sign in">Sign In</option>
</select></div>
<div class="box8">Cart</div>
<div class="box9">Become a Seller</div>
<div class="box10"> : </div>
</div>
<div<div class="box20">
class="box5">
<div class="box11"><img src="Screenshot 2024-11-20 181200.png"
alt=""></div>
<div class="box11"><img src="Screenshot 2024-11-20 181207.png"
alt=""></div>
<div class="box11"><img src="Screenshot 2024-11-20 181213.png"
alt=""></div>
<div class="box11"><img src="Screenshot 2024-11-20 181218.png"
alt=""></div>
<div class="box11"><img src="Screenshot 2024-11-20 181222.png"
alt=""></div>
<div class="box11"><img src="Screenshot 2024-11-20 181227.png"
alt=""></div>
<div class="box11"><img src="Screenshot 2024-11-20 181230.png"
alt=""></div>
<div class="box11"><img src="Screenshot 2024-11-20 181234.png"
alt=""></div>
<div class="box11"><img src="Screenshot 2024-11-20 181238.png"
alt=""></div>
</div>
<div class="box21">
<div class="box22">For winters</div>
<div class="box22">Kids</div>
<div class="box22">Fashion</div>
<div class="box22">Jackets</div>
<div class="box22">jeans</div>
<div class="box22">Dress</div>
<div class="box22">Party Wear</div>
<div class="box22">Kurtas</div>
<div class="box22">t-shirts</div>
</div>

</div>

<div class="box2">
<div><img class="box23" src="Screenshot 2024-11-20 181311.png" alt=""></div>
<div class="box30">
<div class="box24">Lowest Fare</div>
<div class="box25">Flights to kuala Lumpur</div>
<div class="box26">UP To 20% OFF</div>
<div class="box27">save big with malaysia airlines</div>
<div class="box28">Use code:FLYMH</div>
<div class="box29"><em><i>malaysia</i></em></div>
</div>
</div>

<div class="box3">
<div class="box30">
<div class="box31"><img class="box34" src="Screenshot 2024-11-20
181320.png" alt=""></div>
<div class="box32">Lakshmipati</div>
<div class="box33">best saree</div>
</div>
<div class="box30">
<div class="box31"><img class="box34" src="Screenshot 2024-11-20
181328.png" alt=""></div>
<div class="box32">Blouse</div>
<div class="box33">Shirts</div>
</div>
<div class="box30">
<div class="box31"><img class="box34" src="Screenshot 2024-11-20
181337.png" alt=""></div>
<div class="box32">Clothing</div>
<div class="box33">From $10</div>
</div>
<div class="box30">
<div class="box31"><img class="box34" src="Screenshot 2024-11-20 181344.png"
alt=""></div>
<div class="box32">for summer</div>
<div class="box33">From $40</div>
</div>
<div class="box30">
<div class="box31"><img class="box34" src="Screenshot 2024-11-20
181350.png" alt=""></div>
<div class="box32">for winter</div>
<div class="box33">From $80</div>
</div>
<div class="box30">
<div class="box31"><img class="box34" src="Screenshot 2024-11-20
181401.png" alt=""></div>
<div class="box32">Plane shirts</div>
<div class="box33">From $20</div>
</div>
</div>

</body>
</html>

OUTPUT:
GEETA UNIVERSITY, PANIPAT
EXPERIMENT TITLE: Job Portal: HTML/CSS for job listings. EXPER. No.9
JavaScript for Search Functionality
PAGE No.
DEPARTMENT OF --- SEMESTER:
COMPUTER SCIENCE
LABORATORY: Frontend devlopment ( cs3142) 1ST
EXPERIMENT NO.:9

OBJECTIVE: Job Portal: HTML/CSS for job listings. JavaScript for Search Functionality
HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="q9.css">
</head>
<body>
<div class="parent">
<div id="box1">
<div id="xob1">
<span id="xo1">Naukri</span>
<span id="xo1">HOME</span>
<span id="xo1">Jobs</span>
<span id="xo1">Country</span>
<span id="xo1">Internship</span>
<span id="xo1">Freelancing</span>
</div>
<div id="xob2">
<span id="xo1">SEARCH</span>
<span id="xo1">
<select name="lang" id="lang">
<label for="lang">companies</label>
<option value="english">Amazon</option>
<option value="english">Flipkart</option>
</select>
</span>
<span id="xo1">Log in/ Sign up</span>
</div>
</div>
<div class="box2">
<h1 style="text-align: center;">FIND YOU DREAM JOB NOW</h1>
<h2 style="text-align: center;">5 lakh+ jobs for you </h2>
<div style="text-align: center;"><input id="batao" style="height:
50px;width: 500px;border-radius: 100px;" type="text" placeholder="Enter
skills/ designations/Companies | enter location "></div>
<div style="text-align: center;"><button onclick="clickme()"
style="background-color: green;height: 30px;width: 200px;border-radius:
100px;">Submit</button></div>
</div>
<div class="box3">
<img class="box3" src="Screenshot 2024-12-05 085429.png" alt="">
</div>
<div id="box4">
<nav id="xob4">
<span id="xo2">privacy</span>
<span id="xo2">contact us</span>
<span id="xo2">services</span>
<span id="xo2">Download App</span>
<span id="xo2">social Media</span>
</nav>
</div>
</div>
</body>
<script src="q9.js">
</script>
</html>

CSS CODE:

.parent{
height: 100vh;
width: 100vw;
background-color: white;
}
#box1{
height: 50px;
width: 1400px;
display: flex;
justify-content: space-between;
}
#xob1{
height: 50px;
width: 600px;
margin-right: 300px;
display: flex;

}
#xob2{
height: 50px;
width: 500px;
display: flex;
}
#xo1{
height: 30px;
padding-top: 20px;
margin-right: 50px;
color: blue;

}
.box3{
height: 300px;
width: 1400px;
}
#box4{
background-color: rgb(142, 147, 132);
margin-top: 100px;
}
#xob4{
display: flex;
}
#xo2{
padding-top: 20px;
margin-right: 160px;
color: white;
font-size: larger;
}

JS CODE:
let para=document.getElementsByTagName('option');
function clickme(){
for(let i=0;i<para.length;i++){
if(batao.value==para[i].textContent){
alert('Found');
}
}
}

OUTPUT:
GEETA UNIVERSITY, PANIPAT
EXPERIMENT TITLE: Healthcare Appointment Booking: Use EXPER. No.10
HTML/CSS for interface, JavaScript for Form Validation
PAGE No.
DEPARTMENT OF --- SEMESTER:
COMPUTER SCIENCE
LABORATORY: Frontend devlopment ( cs3142) 1ST
EXPERIMENT NO.:10

OBJECTIVE Healthcare Appointment Booking: Use HTML/CSS for interface, JavaScript for Form
Validation
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HealthCare</title>
<link rel="stylesheet" href="q10.css">
</head>
<body>
<div class="parent">
<div id="box1">
<div id="xob1">
<span id="xo1">Manav Hospital</span>
<span id="xo1">HOME</span>
<span id="xo1">Jobs</span>
<span id="xo1"><u style="color: blue;">Booking</u></span>
<span id="xo1">Medicines</span>
<span id="xo1">Trusts</span>
</div>
<div id="xob2">
<span id="xo1">SEARCH</span>
<span id="xo1">
<select name="lang" id="lang">
<label for="lang">language</label>
<option value="english">English</option>
<option value="english">Hindi</option>
</select>
</span>
<span id="xo1">Log in/ Sign up</span>
</div>
</div>
<div class="box2">
<form>
<label for="fname">First Name</label><br>
<input id="input" type="text" placeholder="Enter text"><br>
<label for="lname">last Name</label><br>
<input id="input" type="text" placeholder="Enter text"><br>
<label for="mob">Mobile No.</label><br>
<input id="input" type="number" placeholder="Enter no."><br>
<label for="add">Adress</label><br>
<input id="input" type="text" placeholder="Enter text"><br>
<button onclick="clickme()">Submit</button>
</form>
</div>
</div>
</body>
<script src="q10.js">
</script>
</html>

CSS CODE:
.parent{
height: 100vh;
width: 100vw;
background-color: rgb(121, 149, 121);
}
#box1{
height: 50px;
width: 1400px;
display: flex;
justify-content: space-between;
}
#xob1{
height: 50px;
width: 600px;
margin-right: 300px;
display: flex;

}
#xob2{
height: 50px;
width: 500px;
display: flex;
}
#xo1{
height: 30px;
padding-top: 20px;
margin-right: 50px;
color:white;
}
label{
font-size: larger;
padding-left: 100px;
margin-bottom: 50px;
}
input{
margin-left: 100px;
height: 40px;
width: 200px;
padding-left: 100px;
margin-bottom: 100px;
}
button{
margin-left: 100px;
background-color: greenyellow;
border-radius: 100px;
height: 50px;
width: 100px;
}
JS CODE:
let para = document.getElementsByTagName('input');
function clickme(){
for(let i=0;i<para.length;i++){
if(para[i]!=0){
alert('SUBMITTED');
}
else{
alert('error')
}
}

OUTPUT:

GEETA UNIVERSITY, PANIPAT


EXPERIMENT TITLE:Expending Cards Effects: Use JS for Expending EXPER. No.11
Cards Effect.. PAGE No.
DEPARTMENT OF --- SEMESTER:
COMPUTER SCIENCE
LABORATORY: Frontend devlopment ( cs3142) 1ST

EXPERIMENT NO.:11

OBJECTIVE : Expending Cards Effects: Use JS for Expending Cards Effect..

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="q11.css">
</head>
<body>
<div class="parent">

<img onclick="clickme()" src="Screenshot 2024-12-04 190730.png" alt="">


<img onclick="clickme()" src="Screenshot 2024-12-04 190724.png" alt="">
<img onclick="clickme()" src="Screenshot 2024-12-04 190716.png" alt="">
<img onclick="clickme()" src="Screenshot 2024-12-04 190710.png" alt="">
<script src="q11.js">

</script>
</div>
</body>

</html>

CSS CODE:
.parent{
height: 100vh;
width: 100vw;
background-color: aquamarine;
}
img{
height: 200px;
width: 200px;
}

JS CODE:
let para=document.getElementsByTagName('img');
console.log(para);
function clickme(){
for(let i=0;i<para.length;i++){
para[i].style.height='400px';
para[i].style.width='400px';
}

}
OUTPUT:
GEETA UNIVERSITY, PANIPAT
EXPERIMENT TITLE:Rotating Navigation Page Effect: Create a EXPER. No.12
Rotating Navigation page effect
PAGE No.
DEPARTMENT OF --- SEMESTER:
COMPUTER SCIENCE LABORATORY: Frontend devlopment ( cs3142) 1ST
EXPERIMENT NO.:12

OBJECTIVE :Rotating Navigation Page Effect: Create a Rotating Navigation page effect

HTML/CSS CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Navbar</title>
<style>
#box1{
height: 50px;
width: 1400px;
color: white;
display: flex;
justify-content: space-between;
background-color: black;
}
#xo1{
height: 30px;
padding-top: 20px;
margin-right: 50px;
}
@keyframes ltog {
0%{
background-color: red;
transform: rotate(0deg);
top: 0px;
left: 0px;
position: relative;
}
25%{
top: 0px;
left: 500px;
position: relative;
}
50%{
background-color: black;
top: 500px;
left: 500px;
position: relative;
}
75%{
background-color: green;
transform: rotate(360deg);
top: 500px;
left: 0px;
position: relative;
}
100%{
top: 0px;
left: 0px;
position: relative;
}

}
</style>
</head>
<body>
<div style="border: 2px solid black;animation-name: ltog;animation-duration: 2s;animation-
iteration-count: 2;">
<div id="box1">
<div id="xob1">
<span id="xo1">PRIME VIDEO</span>
<span id="xo1">HOME</span>
<span id="xo1">MOVIES</span>
<span id="xo1">TV SHOWS</span>
<span id="xo1">LIVE TV</span>
<span id="xo1">SUBSCRIPTIONS</span>
</div>
<div id="xob2">
<span id="xo1">SEARCH</span>
<span id="xo1">
<select name="lang" id="lang">
<label for="lang">EN</label>
<option value="english">english</option>
<option value="english">Hindi</option>
</select>
</span>
<span id="xo1">Join prime</span>
</div>
</div>
</div>

</body>
</html>

OUTPUT:
GEETA UNIVERSITY, PANIPAT
EXPERIMENT TITLE: Split Landing Page: Create a split Landing Page EXPER. No.13
PAGE No.
DEPARTMENT OF --- SEMESTER:
COMPUTER SCIENCE LABORATORY: Frontend devlopment ( cs3142) 1ST
EXPERIMENT NO.:13

OBJECTIVE : Split Landing Page: Create a split Landing Page

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prime Video</title>
<link rel="stylesheet" href="q13.css">
</head>
<body>
<div id="parent">

<div id="box2">
<div id="xob3">
<h1 id="xo3">Welcome To Prime Video</h1>
<p id="xo4">Join prime to Watch Movies,Tv shows and Award winning Amazon
Originals</p>
<div id="xo6">
<button id="xo5" >Sign In to join Prime</button>
</div>
<div id="box3">
<h1 id="xob5">Movie Rentals On Prime Video</h1>
</div>
</div>
<div id="xob4">
<img id="xo2" src="Screenshot 2024-12-04 215150.png" alt="">
</div>
</div>
</div>
</body>
</html>

CSS CODE:
#parent{
height: 760px;
width: 1400px;
background-color: black;
}

#box2{
height: 760px;
width: 1400px;
display: flex;
}
#xob3{
height: 760px;
width: 700px;
border: 2px solid white;
}
#xob4{
height: 760px;
width: 700px;
}
#xo2{
height: 760px;
width: 700px;
}
#xo3{
height: 100px;
width: 700px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
#xo4{
height: 100px;
width: 700px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
#xo5{
background-color: white;
color: black;
width: 200px;
height: 50px;
}
#xo6{
height: 100px;
width: 700px;
display: flex;
justify-content: center;
align-items: center;
}
#box3{
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: 700px;
}
#xob5{
color: white;
}

OUTPUT:
GEETA UNIVERSITY, PANIPAT
EXPERIMENT TITLE: FAQ Collapse: Design FAQ collapse effect EXPER. No.14
PAGE No.
DEPARTMENT OF --- SEMESTER:
COMPUTER SCIENCE LABORATORY: Frontend devlopment ( cs3142) 1ST
EXPERIMENT NO.:14

OBJECTIVE : FAQ Collapse: Design FAQ collapse effect.

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ Collapse Effect</title>
<link rel="stylesheet" href="q14.css">
</head>
<body>
<div id="parent">
<h1 id="box1">Frequently Asked Question</h1>
<div id="box2">
<div id="xob1">
Should we trust Girls???
<select name="girl" id="girl">
<label for="girl">Ans: </label>
<option value="yes">Yes</option>
<option value="yes">No</option>
</select>
</div>
</div>
<div id="box2">
<div id="xob1">
Should we trust Boys???
<select name="girl" id="girl">
<label for="girl">Ans: </label>
<option value="yes">Yes</option>
<option value="yes">No</option>
</select>
</div>
</div>
<div id="box2">
<div id="xob1">
I think trust is everything???
<select name="girl" id="girl">
<label for="girl">Ans: </label>
<option value="yes">Yes</option>
<option value="yes">No</option>
</select>
</div>
</div>
<div id="box2">
<div id="xob1">
Can you compare happiness with money???
<select name="girl" id="girl">
<label for="girl">Ans: </label>
<option value="yes">Yes</option>
<option value="yes">No</option>
</select>
</div>
</div>
<div id="box2">
<div id="xob1">
Do you think Wealth is necessary for health???
<select name="girl" id="girl">
<label for="girl">Ans: </label>
<option value="yes">Yes</option>
<option value="yes">No</option>
</select>
</div>
</div>
<div id="box2">
<div id="xob1">
Teachers should always be respected???
<select name="girl" id="girl">
<label for="girl">Ans: </label>
<option value="yes">Yes</option>
<option value="yes">No</option>
</select>
</div>
</div>
<div id="box2">
<div id="xob1">
Shubham Sir is the best HTML tutor???
<select name="girl" id="girl">
<label for="girl">Ans: </label>
<option value="yes">Yes</option>
<option value="yes">No</option>
</select>
</div>
</div>
</div>
</body>
</html>

CSS CODE:
#parent{
height: vh;
width: vw;
background-color: rgb(217, 210, 210);
}
#box1{
text-align: center;
}
#box2{
height: 100px;
width: vh;
}
#xob1{
display: flex;
justify-content: center;
align-items: center;
font-size: larger;
}

OUTPUT:
GEETA UNIVERSITY, PANIPAT
EXPERIMENT TITLE: Movie App: Create a Movie App EXPER. No.15
PAGE No.
DEPARTMENT OF --- SEMESTER:
COMPUTER SCIENCE LABORATORY: Frontend devlopment ( cs3142) 1ST
EXPERIMENT NO.:15

OBJECTIVE : Movie App: Create a Movie App


.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prime Video</title>
<link rel="stylesheet" href="q15.css">
</head>
<body>
<div id="parent">
<div id="box1">
<div id="xob1">
<span id="xo1">PRIME VIDEO</span>
<span id="xo1">HOME</span>
<span id="xo1">MOVIES</span>
<span id="xo1">TV SHOWS</span>
<span id="xo1">LIVE TV</span>
<span id="xo1">SUBSCRIPTIONS</span>
</div>
<div id="xob2">
<span id="xo1">SEARCH</span>
<span id="xo1">
<select name="lang" id="lang">
<label for="lang">EN</label>
<option value="english">english</option>
<option value="english">Hindi</option>
</select>
</span>
<span id="xo1">Join prime</span>
</div>
</div>
<div id="box2">
<div id="xob3">
<h1 id="xo3">Welcome To Prime Video</h1>
<p id="xo4">Join prime to Watch Movies,Tv shows and Award winning Amazon
Originals</p>
<div id="xo6">
<button id="xo5" >Sign In to join Prime</button>
</div>
<div id="box3">
<h1 id="xob5">Movie Rentals On Prime Video</h1>
</div>
</div>
<div id="xob4">
<img id="xo2" src="Screenshot 2024-12-04 215150.png" alt="">
</div>
</div>
</div>
</body>
</html>
CSS CODE:
#parent{
height: 760px;
width: 1400px;
background-color: black;
}
#box1{
height: 50px;
width: 1400px;
color: white;
display: flex;
justify-content: space-between;
}
#xob1{
height: 50px;
width: 600px;
margin-right: 300px;
display: flex;

}
#xob2{
height: 50px;
width: 500px;
display: flex;
}
#xo1{
height: 30px;
padding-top: 20px;
margin-right: 50px;
}
#box2{
height: 710px;
width: 1400px;
display: flex;
}
#xob3{
height: 710px;
width: 700px;
}
#xob4{
height: 710px;
width: 700px;
}
#xo2{
height: 710px;
width: 700px;
}
#xo3{
height: 100px;
width: 700px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
#xo4{
height: 100px;
width: 700px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
#xo5{
background-color: white;
color: black;
width: 200px;
height: 50px;
}
#xo6{
height: 100px;
width: 700px;
display: flex;
justify-content: center;
align-items: center;
}
#box3{
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: 700px;
}
#xob5{
color: white;
}

OUTPUT:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy