Computer Applications

Computer Applications
PRACTICAL FILE
SUBMITTED BY: DEVANSH DEVLIYAL
SUBMITTED TO: MS. E
1
ACKNOWLEDGEMENT
It is my foremost duty to express my deep regards and
gratitude to my computer science teacher, Ms. E under
whose guidance and supervision I was able to
undertake the project.
Submitted by: Devansh Devliyal

Class: Grade X
Roll No. : 03
2
CERTIFICATE
This to certify that Devansh Devliyal of Class- X has
prepared the project on Creating a simple website on
the topic “Netflix”. The report is a result of his efforts
and endeavors. The report was found worthy of
acceptance as the final project for the subject for the
computer applications of class X. He has prepared the
report under my guidance.
Ms. E
Head of Computer Applications Department
3
Contents
Serial Number Project File Topics Included

1 Main page(Html) CSS Background
Attributes
2 Shows Audio and Video
Embeds
3 Movies Container Tags
4 Downloads Table Tag
5 Oxford Linear-Gradient
Attribute
4
Project File : Main Page (HTML)
<html>
<head>
<title>Netflix</title>
<link rel="shorcut icon" type="image/png"
href="https://i.pinimg.com/736x/f6/97/4e/f6974e017d3f6196c4cbe284ee3eaf4e.
jpg">
</head>
<link rel="stylesheet" type="text/css" href="project file.css">
<body>
<header>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="Shows.html">Shows</a></li>
<li><a href="movies.html">Movies</a></li>
<li><a href="netflixoriginals.html">Netflix
Originals</a></li>
<li><a href="playlists.html">Downloads</a></li>
</ul>
</header>
<div>
<span><i>
N
</i></span>
<span><i>
E
</i></span>
<span><i>
T
</i></span>
<span><z>
F
</z></span>
<span><z>
L
</z></span>
<span><z>
5
I
</z></span>
<span><z>
X
</z></span>
</div>
<div id="searchbox">
<form action="https://www.netflix.com/" target="_blank"
method="get">
<input placeholder="Search" type="text">

<button>Search</button>
</form>
</div>
</body>
</html>
6
Project file : Main Page (CSS)
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:url("https://w.wallhaven.cc/full/rd/wallhaven-rdwjj7.jpg")
no-repeat ;
background-size:cover;
background-position: center;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 0px;
display: flex;
align-items: flex-end;
}
header ul
{
display: flex;
}
header ul li
{
list-style: none;
margin-left: 2px;
}
header ul li a
{
7
text-decoration: none;
padding: 6px 15px;
color: azure;
border-radius: 2px;
}
header ul li a:hover ,
header ul li a.active
{
background: rgb(255, 255, 255);
color: #E50914;
}
span{
position: relative;
display: inline-block;
width: 80px;
height: 80px;
border-radius: 10px;
span i
{
position: relative;
color: white;
font-style: normal;
font-family: Bebas Neue;
font-size: 1.5cm;
text-transform:uppercase ;
text-shadow: 2px 2px 10px black ;
}
span z
{
position: relative;
color:#E50914
;
font-style: normal;
font-size: 1.5cm;
8
}
input{
width: 75%;
border: 2px solid white;
font-size: 18px;
padding: 12px;
background: transparent;
color: white;
}
button{
width: 25%;
background:transparent;
border: 2PX white;
border-left: 0px;
font-size: 18px;
padding: 12px;
float: right;
color:white;
}
button:hover
{
opacity: 0.6;
}
hr{
display: flex;
p{
display: flex;
color: #fff;
9
}
10
Project File : Main page(Images)
11
Project File: Shows(HTML)
<html>
<head>
<title>Shows</title>
jpg">
</head>
<link rel="stylesheet" type="text/css" href="shows.css">
<body>
<header>
<ul>
<li><a href="Project File.html">Home</a></li>
<li><a href="Shows.html" class="active">Shows</a></li>
Originals</a></li>
<li><a href="downloads.html">Downloads</a></li>
</ul>
</header>
<span>Shows Streaming Internationally </span>

<P align="center"><font face="arial" color="black" size="4">
<VIDEO controls src="yt1s.com - Amazing Visual Loops
Compilation 4K.mp4" Width="720" Height="540"></VIDEO>
</font></P>
<VIDEO controls src="Specularpotato talks about racism in the
community.mp4" Width="720" Height="540"></VIDEO>
</font></P>
<VIDEO controls src="yt1s.com - Alan Walker x Jamie Miller
Running Out Of Roses Official Lyric Video (1).mp4" Width="720"
Height="540"></VIDEO>
</font></P>
12
<VIDEO controls src="yt1s.com - BHASAD A Short Film For
Students Shobhit Nirwan Nimit Nirwan.mp4" Width="720"
</font></P>
<VIDEO controls src="yt1s.com - Destroying Friendships with
the Minecraft Gravity Mod.mp4" Width="720" Height="540"></VIDEO>
</font></P>
<VIDEO controls src="yt1s.com - I Built The Worlds Largest
Minecraft Statue.mp4" Width="720" Height="540"></VIDEO>
</font></P>
<VIDEO controls src="yt1s.com - Distant winds_v720P.mp4"
Width="720" Height="540"></VIDEO>
</font></P>
<VIDEO controls src="yt1s.com - Nathan Evans Wellerman Sea
Shanty.mp4" Width="720" Height="305"></VIDEO>
</font></P>
<VIDEO controls src="yt1s.com - This Week I Shot A
Bazooka.mp4" Width="720" Height="540"></VIDEO>
</font></P>
<VIDEO controls src="dramatic floof_animatic.mp4" Width="720"
</font></P>
</body>
</html>
13
Project File: Shows(CSS)
body
{
align-items: center; min-height: 100vh;
background:url("https://w.wallhaven.cc/full/z8/wallhaven-z8odwg.jpg")
no-repeat ;
background-position: top;
background-size: cover;
}
p{
display: flex;
color: #fff;
position: relative;
color: white;
font-style: normal;
font-size: 1.5cm;
header
{
position: absolute right;
top: 0;
right: 10;
width: 100%;
padding: 30px 0px;
display: flex;
}
14
header ul
{
display: flex;
}
header ul li
{
list-style: none;
margin-left: 2px;
}
header ul li a
{
padding: 6px 15px;
color: azure;
border-radius: 2px;
}
{
color: #E50914;
}
span{
position: relative;
width: 80px;
height: 80px;
color: white;
font-style: normal;
font-size: 1.5cm;
15
}
16
Project File: Shows (Images)
17
Project File: Movies (HTML)
<html>
<head>
<title>Movies</title>
jpg">
</head>
<link rel="stylesheet" type="text/css" href="movies.css">
<body>
<header>
<ul>
<li><a href="Project File.html">Home</a></li>
<li><a href="movies.html" class="active">Movies</a></li>
Originals</a></li>
<li><a href="downloads.html">Downloads</a></li>
</ul>
<div id="searchbox">
<form action="https://www.netflix.com/" target="_blank"
method="get">
<input placeholder="Search" type="text">
</form>
</div>
</header>
<h1>Oscar Winning Features</h1>
<div class="container">
<div class="movie">
<div class="movie-image movie-image-1">
<span><i class="fa fa-align-left"></i>
</span>
18
</div>
<p class="title">A Whisker Away</p>
<p class="genre">Anime/Neko/Teenage</p>
<div class="movie-text">
<p>SUMMARY</p>
<div class="likes">
<span><i class="fa fa-thumbs-up"></i>123
likes</span>
<span><i class="fa fa-comment"></i>54
comments</span>
</div>
</div>
<div class="summary">
<p class="text">
Secretly in love with her classmate Kento, Miyo
takes the help of a mysterious mask and transforms into a cat to get
closer to him. However, trouble ensues when she begins to lose herself.
</p>
</div>
<div class="actions">
<button><i class="fa fa-play"></i>Watch
Trailer</button>
</div>
</div>
</div>
<div class="movie">
</span>
</div>
<p>SUMMARY</p>
<div class="likes">
likes</span>
19
comments</span>
</div>
</div>
<p class="text">
</p>
</div>
Trailer</button>
</div>
</div>
</div>
<div class="movie">
</span>
</div>
<p>SUMMARY</p>
<div class="likes">
likes</span>
comments</span>
</div>
</div>
<p class="text">
20
</p>
</div>
Trailer</button>
</div>
</div>
</div>
<div class="movie">
</span>
</div>
<p>SUMMARY</p>
<div class="likes">
likes</span>
comments</span>
</div>
</div>
<p class="text">
</p>
</div>
Trailer</button>
</div>
</div>
</div>
21
</body>
</html>
22
Project File: Movies (CSS)
body
{
align-items: center; min-height: 100vh;
background:url("https://w.wallhaven.cc/full/q2/wallhaven-q2p8wr.jpg")
no-repeat ;
background-position: top;
}
header
{
position: absolute right;
top: 0;
right: 10;
width: 100%;
padding: 30px 0px;
display: flex;
justify-content: space-between;
}
header ul
{
display: flex;
}
header ul li
{
list-style: none;
margin-left: 2px;
23
header ul li a
{
padding: 6px 15px;
color: azure;
border-radius: 2px;
}
{
color: #E50914;
}
h1{
position: relative;
display: flex;
width: 100px;
height: 80px;
color: white;
font-style: normal;
font-size: 1.5cm;
input{
width: 85%;
font-size: 16px;
padding: 10px;
color: white;
}
.container{
display: flex;
24
justify-content: right;
align-items: right;
flex-wrap: wrap;
padding: 60px 0;
}
.movie{
width: 300px;
height: 700px;
background:url("https://gameshifu.com/wp-content/uploads/2020/07/A-Whisker
-Away-2020-Review.jpg") no-repeat;
display: flex;
flex-direction: column;
border-radius: 3px;
margin: 10px 900px 20px 20px;
box-shadow: 0 0 20px black;
color: white;}
.movie-image{
height: 75%;
width: 100;
position: relative;
background-blend-mode: screen;
}
.movie-image span{
position:absolute;
top: 0;
right: 0;
margin: 10px;
font-size: 1.5rem;
.movie-info{
color: #bbb;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
25
padding: 15px;
}
26
Project File: Movies (Images)
27
Project File: Downloads (HTML)
<html>
<head>
<title>
Your PlayLists
</title>
</head>
<header>
<ul>
<li><a href="project file.html">Home</a></li>
Originals</a></li>
<li><a href="playlists.html"
class="active">Downloads</a></li>
</ul>
</header>
<link rel="stylesheet" type="text/css" href="playlists.css">
<Body Background="wallhaven-l3zmwy.jpg">
<p align="center"><font face="Arial" color="white" size="8">Your
Downloads</font></p>
<p align="center"><table bgcolor="White" border="5"><font
color="white">
<tr>
<th>Category</th>
<th>Video Link</th>
<th>Channel Name</th>
</tr>
<tr>
<td>Music Videos</td>
<td><A
href="https://www.youtube.com/watch?v=_4kHxtiuML0">Relaxation
Music</A></td>
28
<td>Greenred Productions - Relaxing Music</td>
</tr>
<tr="5">
<td>Gaming Videos</td>
<td><a
href="https://www.youtube.com/watch?v=5qap5aO4i9A">Lofi Gaming
Videos</a></td>
<td>Lofi Girl</td>
</tr>
<tr="5">
<td>Food Videos</td>
<td><a
href="https://www.youtube.com/watch?v=5qap5aO4i9A">You Donkey
Compilation</a></td>
<td>Gordon Ramsay</td>
</tr>
<tr="5">
<td>Lifestyle Videos</td>
<td><a
href="https://www.youtube.com/watch?v=5b_lIKhvThM">Lofi Gaming
Videos</a></td>
<td>Liz Qi</td>
</tr>
<tr="5">
<td>Old Videos</td>
<td><a
href="https://www.youtube.com/watch?v=jNQXAC9IVRw">Me At the Zoo</a></td>
<td>Jawed</td>
</tr>
<tr="5">
<td>Sports Videos</td>
<td><a
href="https://www.youtube.com/watch?v=obXNwOhKLEI">Cristiano Ronaldo Best
Moments</a></td>
<td>AshStudio7</td>
29
</tr>
</table></p></font>
</Body>
</html>
30
Project File: Downloads (CSS)
body
{
display: flex;
min-height: 100vh;
background:url("https://w.wallhaven.cc/full/rd/wallhaven-rdwjj7.jpg")
no-repeat ;
background-size:cover;
background-position: center;
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 0px;
display: flex;
}
header ul
{
display: flex;
}
header ul li
{
list-style: none;
margin-left: 2px;
31
}
header ul li a
{
padding: 6px 15px;
color: azure;
border-radius: 2px;
}
{
color: #E50914;
}
span{
position: relative;
width: 80px;
height: 80px;
span i
{
position: relative;
color: white;
font-style: normal;
font-size: 1.5cm;
}
span z
{
position: relative;
color:#E50914
32
;
font-style: normal;
font-size: 1.5cm;
}
input{
width: 75%;
font-size: 18px;
padding: 12px;
color: white;
}
button{
width: 25%;
border: 2PX white;
border-left: 0px;
font-size: 18px;
padding: 12px;
float: right;
color:white;
}
button:hover
{
opacity: 0.6;
}
hr{
display: flex;
p{
33
display: flex;
color: #fff;
}
header ul li a
{
padding: 6px 15px;
color: azure;
border-radius: 2px;
}
{
color: #E50914;
}
span{
position: relative;
width: 80px;
height: 80px;
span i
{
position: relative;
color: white;
font-style: normal;
font-size: 1.5cm;
34
}
span z
{
position: relative;
color:#E50914
;
font-style: normal;
font-size: 1.5cm;
}
input{
width: 75%;
font-size: 18px;
padding: 12px;
color: white;
}
button{
width: 25%;
border: 2PX white;
border-left: 0px;
font-size: 18px;
padding: 12px;
float: right;
color:white;
}
button:hover
{
opacity: 0.6;
}
hr{
35
display: flex;
p{
display: flex;
color: #fff;
36
Project File: Downloads (Images)
37
Project File: Oxford (HTML)
<html>
<head>
<title>
Oxford Presentation
</title>
<link rel="stylesheet" type="text/css" href="Main page.css">
</head>
<body>
<header>
<a href="#" class="logo">Shiskhankur:The Global School</a>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Classes</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
Quisque fermentum blandit nulla sit amet posuere. Quisque
placerat orci ipsum, eu convallis quam mollis in. Nullam molestie enim
ultricies aliquet fringilla. Nunc bibendum sapien non euismod tristique.
Quisque dapibus tortor eget leo sagittis faucibus. Integer magna quam,
maximus rhoncus metus quis, consequat pellentesque lectus. Integer
tristique lorem vitae massa commodo, eu faucibus sapien pretium. Morbi
ornare lorem vitae turpis vulputate, id ultricies erat auctor. Vivamus
ultricies rutrum augue vitae commodo.
Cras scelerisque, nulla vestibulum dignissim efficitur, augue

mi pellentesque ante, in convallis enim lectus eu tortor. Cras consequat
auctor arcu, at tincidunt magna ultricies eu. Etiam blandit sodales
vulputate. Praesent posuere, urna sed eleifend imperdiet, sapien tellus
ornare mi, a tincidunt nisl erat sed metus. Donec fringilla semper risus,
ut cursus urna ullamcorper vel. Sed semper commodo turpis aliquet
pellentesque. Nulla facilisi. Phasellus eget justo porta, sagittis ipsum
sed, sagittis odio. Nunc ultrices vulputate dolor, non aliquam elit
38
faucibus ac. Donec consequat, nisi et condimentum pharetra, lorem metus
tincidunt neque, a eleifend dolor justo et lectus. Cras lacinia, risus at
congue imperdiet, est ante eleifend neque, at mollis nibh elit eu magna.
Quisque convallis nec lorem vitae fermentum. Praesent tellus turpis,
condimentum eget tortor in, interdum tincidunt velit. Praesent euismod
diam sollicitudin felis varius, vestibulum sollicitudin elit auctor. Sed
hendrerit nisi ac massa ultricies lobortis.
Etiam pharetra massa quis est tincidunt bibendum. Maecenas eu

sapien ex. Mauris tristique dui non vestibulum rutrum. In hac habitasse
platea dictumst. Donec rhoncus diam ex, non placerat velit malesuada nec.
Suspendisse fermentum elit eget hendrerit rutrum. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in
ipsum fermentum, tincidunt mauris vitae, molestie nisi. Nulla facilisi.
Fusce lobortis tellus enim, sit amet pretium lacus venenatis eu. Nullam
aliquam orci nec sollicitudin placerat.
Suspendisse sed erat sapien. Donec luctus luctus lectus, nec

vestibulum magna aliquet in. Sed scelerisque eleifend risus sed eleifend.
Quisque tempor diam a nisl accumsan sodales. Curabitur at convallis
libero. Vestibulum ac dui porttitor urna hendrerit efficitur. Suspendisse
fermentum eu nisi at scelerisque.
Nunc ut justo et metus fringilla hendrerit. Nulla porta

ultricies semper. Morbi in dignissim libero, sed consequat tellus.
Phasellus euismod erat ac tortor accumsan, eget hendrerit est venenatis.
Sed commodo gravida turpis, ac maximus felis fermentum quis. Donec euismod
nisl rutrum dolor dictum, eget convallis quam pellentesque. Nunc vitae
ullamcorper risus, eu hendrerit nulla. Aliquam aliquam, felis vel
efficitur elementum, ipsum elit lacinia arcu, eget posuere erat ligula
hendrerit elit. Duis lacinia congue lectus in suscipit. Suspendisse
posuere mi metus. Cras pellentesque ut metus et commodo.
</div>
39
</body>
</html>
40
Project File: Oxford (CSS)
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body
{
display: flex;
min-height: 100vh;
background: linear-gradient(#3017E6,#5718F3,#724DCD,#A58FDA);
}
header
{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
}
header .logo
{
color:rgba(255, 255, 255, 0.993);
font-weight: 350;
text-decoration: honeydew;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 1px;
}
41
header ul
{
display: flex;
}
header ul li
{
list-style: none;
margin-left: 20px;
}
header ul li a
{
padding: 6px 15px;
color: azure;
}
{
color: #5718F3;
}
h3
42
Project File: Oxford (Images)
43

Computer Applications

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Computer Applications

Uploaded by

Copyright:

Available Formats

Computer Applications

SUBMITTED BY: DEVANSH DEVLIYAL

SUBMITTED TO: MS. E

Submitted by: Devansh Devliyal

Serial Number Project File Topics Included

4 Downloads Table Tag

<input placeholder="Search" type="text">

<span>Shows Streaming Internationally </span>

<input placeholder="Search" type="text">

<h1>Oscar Winning Features</h1>

Cras scelerisque, nulla vestibulum dignissim efficitur, augue

Etiam pharetra massa quis est tincidunt bibendum. Maecenas eu

Suspendisse sed erat sapien. Donec luctus luctus lectus, nec

Nunc ut justo et metus fringilla hendrerit. Nulla porta

You might also like