Scribd
Upload
40 views

Computer Applications

Devansh Devliyal submitted a computer applications project on creating a simple Netflix website. The project contains several files including the main page coded in HTML and CSS, a shows page with embedded videos, and pages for movies, Netflix originals and downloads. The main page features a Netflix logo and search bar, while maintaining the Netflix color scheme and branding.

Uploaded by

Devansh Devliyal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
40 views

Computer Applications

Devansh Devliyal submitted a computer applications project on creating a simple Netflix website. The project contains several files including the main page coded in HTML and CSS, a shows page with embedded videos, and pages for movies, Netflix originals and downloads. The main page features a Netflix logo and search bar, while maintaining the Netflix color scheme and branding.

Uploaded by

Devansh Devliyal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

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;
justify-content: center;
align-items: center;
}
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-family: Bebas Neue;
font-size: 1.5cm;

8
text-transform:uppercase ;
text-shadow: 2px 2px 10px black ;
}

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;
justify-content: center;
align-items: center;

p{
display: flex;
justify-content: center;
align-items: center;
color: #fff;

9
}

10
Project File : Main page(Images)

11
Project File: Shows(HTML)
<html>
<head>
<title>Shows</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="shows.css">

<body>
<header>
<ul>
<li><a href="Project File.html">Home</a></li>
<li><a href="Shows.html" class="active">Shows</a></li>
<li><a href="movies.html">Movies</a></li>
<li><a href="netflixoriginals.html">Netflix
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>
<P align="center"><font face="arial" color="black" size="4">
<VIDEO controls src="Specularpotato talks about racism in the
community.mp4" Width="720" Height="540"></VIDEO>
</font></P>
<P align="center"><font face="arial" color="black" size="4">
<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>
<P align="center"><font face="arial" color="black" size="4">

12
<VIDEO controls src="yt1s.com - BHASAD A Short Film For
Students Shobhit Nirwan Nimit Nirwan.mp4" Width="720"
Height="540"></VIDEO>
</font></P>
<P align="center"><font face="arial" color="black" size="4">
<VIDEO controls src="yt1s.com - Destroying Friendships with
the Minecraft Gravity Mod.mp4" Width="720" Height="540"></VIDEO>
</font></P>
<P align="center"><font face="arial" color="black" size="4">
<VIDEO controls src="yt1s.com - I Built The Worlds Largest
Minecraft Statue.mp4" Width="720" Height="540"></VIDEO>
</font></P>
<P align="center"><font face="arial" color="black" size="4">
<VIDEO controls src="yt1s.com - Distant winds_v720P.mp4"
Width="720" Height="540"></VIDEO>
</font></P>
<P align="center"><font face="arial" color="black" size="4">
<VIDEO controls src="yt1s.com - Nathan Evans Wellerman Sea
Shanty.mp4" Width="720" Height="305"></VIDEO>
</font></P>
<P align="center"><font face="arial" color="black" size="4">
<VIDEO controls src="yt1s.com - This Week I Shot A
Bazooka.mp4" Width="720" Height="540"></VIDEO>
</font></P>
<P align="center"><font face="arial" color="black" size="4">
<VIDEO controls src="dramatic floof_animatic.mp4" Width="720"
Height="540"></VIDEO>
</font></P>

</body>
</html>

13
Project File: Shows(CSS)
body
{

justify-content: center;
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;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
color: white;
font-style: normal;
font-family: Bebas Neue;
font-size: 1.5cm;
text-transform:uppercase ;
text-shadow: 2px 2px 10px black ;

header
{
position: absolute right;
top: 0;
right: 10;
width: 100%;
padding: 30px 0px;
display: flex;
align-items: flex-end;
}

14
header ul
{
display: flex;
justify-content: center;
align-items: center;
}
header ul li
{
list-style: none;
margin-left: 2px;

}
header ul li a
{
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;
color: white;
font-style: normal;
font-family: Bebas Neue;
font-size: 1.5cm;
text-transform:uppercase ;
text-shadow: 2px 2px 10px black ;

15
}

16
Project File: Shows (Images)

17
Project File: Movies (HTML)
<html>
<head>
<title>Movies</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="movies.css">

<body>
<header>
<ul>
<li><a href="Project File.html">Home</a></li>
<li><a href="Shows.html">Shows</a></li>
<li><a href="movies.html" class="active">Movies</a></li>
<li><a href="netflixoriginals.html">Netflix
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="container">
<div class="movie">
<div class="movie-image movie-image-1">
<span><i class="fa fa-align-left"></i>
</span>
</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>

19
<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="container">
<div class="movie">
<div class="movie-image movie-image-1">
<span><i class="fa fa-align-left"></i>
</span>
</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.

20
</p>
</div>
<div class="actions">
<button><i class="fa fa-play"></i>Watch
Trailer</button>
</div>
</div>
</div>

<div class="container">
<div class="movie">
<div class="movie-image movie-image-1">
<span><i class="fa fa-align-left"></i>
</span>
</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>

21
</body>
</html>

22
Project File: Movies (CSS)
body
{

justify-content: center;
align-items: center; min-height: 100vh;
background:url("https://w.wallhaven.cc/full/q2/wallhaven-q2p8wr.jpg")
no-repeat ;
background-position: top;
background-size: cover;
}

header
{
position: absolute right;
top: 0;
right: 10;
width: 100%;
padding: 30px 0px;
display: flex;
align-items: flex-end;
justify-content: space-between;
}

header ul
{
display: flex;
justify-content: center;
align-items: center;
}
header ul li
{
list-style: none;
margin-left: 2px;

23
header ul li a
{
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;
}

h1{
position: relative;
display: flex;
width: 100px;
height: 80px;
border-radius: 20px;
color: white;
font-style: normal;
font-family: Bebas Neue;
font-size: 1.5cm;
text-transform:uppercase ;
text-shadow: 2px 2px 10px black ;

input{
width: 85%;
border: 2px solid white;
font-size: 16px;
padding: 10px;
background: transparent;
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-size: cover;
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
justify-content: center;
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>
<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"
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;
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;
justify-content: center;
align-items: center;
}
header ul li
{
list-style: none;
margin-left: 2px;

31
}
header ul li a
{
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

32
;
font-style: normal;
font-family: Bebas Neue;
font-size: 1.5cm;
text-transform:uppercase ;
text-shadow: 2px 2px 10px black ;
}

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;
justify-content: center;
align-items: center;

p{

33
display: flex;
justify-content: center;
align-items: center;
color: #fff;

}
header ul li a
{
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 ;

34
text-shadow: 2px 2px 10px black ;
}

span z
{
position: relative;
color:#E50914
;
font-style: normal;
font-family: Bebas Neue;
font-size: 1.5cm;
text-transform:uppercase ;
text-shadow: 2px 2px 10px black ;
}

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{

35
display: flex;
justify-content: center;
align-items: center;

p{
display: flex;
justify-content: center;
align-items: center;
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;
justify-content: center;
align-items: center;
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;
align-items: center;
}
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;
justify-content: center;
align-items: center;
}
header ul li
{
list-style: none;
margin-left: 20px;

}
header ul li a
{
text-decoration: none;
padding: 6px 15px;
color: azure;
border-radius: 20px;
}
header ul li a:hover ,
header ul li a.active
{
background: rgb(255, 255, 255);
color: #5718F3;
}
h3

42
Project File: Oxford (Images)

43

You might also like