Scribd
Upload
9 views

Code

The document describes how to build a gaming website using HTML and CSS. It explains that HTML provides the structure while CSS controls the design and layout. It stresses the importance of considering the target audience and type of content when designing the layout. It also notes that images, videos, visual design elements and responsive design are important to include.

Uploaded by

jagavike65
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

Code

The document describes how to build a gaming website using HTML and CSS. It explains that HTML provides the structure while CSS controls the design and layout. It stresses the importance of considering the target audience and type of content when designing the layout. It also notes that images, videos, visual design elements and responsive design are important to include.

Uploaded by

jagavike65
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 32

GAME WEBSITE

Description:
In today's world, the gaming industry has become
increasingly popular, and as a result, gaming websites have
become a significant source of entertainment and
information for gamers. Building a gaming website requires
a good understanding of HTML and CSS, as these are the
primary languages used in web development. This essay will
describe the process of building a gaming website using
HTML and CSS.

Firstly, a website's layout is crucial in creating an engaging


and user-friendly experience. HTML provides the
foundation for creating the website's structure, while CSS
controls the design and layout of the website. A common
practice is to create a basic HTML template with
placeholders for text, images, and other media elements.
The template can then be customized with CSS to match the
website's design aesthetic.

When designing a gaming website, it is important to


consider the target audience and the type of content that
will be included on the website. For example, if the website
focuses on video game reviews, it would be best to use a
layout that highlights the latest game reviews, user ratings,
and game news. Alternatively, if the website is focused on
e-sports, a layout that showcases upcoming tournaments
and team rankings would be more appropriate.

Another important aspect of a gaming website is the use of


images and videos. HTML and CSS provide various ways to
embed media elements into a website, including using
image tags, video tags, and external media hosting services
such as YouTube or Vimeo. Images and videos can be used
to showcase game trailers, gameplay footage, and
promotional content, providing an engaging visual
experience for users.

To make a gaming website stand out, it is important to use


visual design elements such as color schemes, fonts, and
graphics. CSS provides a wide range of styling options that
can be used to customize the website's appearance, such as
background colors, text colors, font styles, and sizes.
Graphics can also be used to enhance the website's visual
appeal, such as using custom icons or logos.

Finally, it is important to consider the website's usability


and accessibility. HTML provides a range of accessibility
features, such as the use of alt tags for images, which are
essential for users who rely on screen readers. Additionally,
CSS can be used to create responsive designs that adjust to
different screen sizes, ensuring the website is accessible on
both desktop and mobile devices.
In conclusion, building a gaming website requires a good
understanding of HTML and CSS, along with a consideration
for the target audience, the type of content that will be
included, and the website's visual design. By following these
guidelines, developers can create engaging and user-
friendly gaming websites that provide a seamless
experience for gamers.
Home Page:
<!DOCTYPE html>

<html>
<head>
<title>My Webpage</title>
<style>
::-webkit-scrollbar{
display: none;
}

@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@800&display=swap');

body {
background-image:url("https://e0.pxfuel.com/wallpapers/356/718/desktop-
wallpaper-abstract-black-and-red-polygon-gaming.jpg");
background-size: cover;
background-repeat: no-repeat;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-attachment:fixed;
}

h1 {
font-size: 56px;
margin: 0;
text-shadow: 0 0 10px #00d9ff, 0 0 20px #00ffb3, 0 0 30px #fff, 0 0 40px
rgb(5, 255, 197), 0 0 40px rgb(0, 255, 47), 0 0 40px rgb(0, 238, 255), 0 0
40px rgb(0, 255, 251), 0 0 40px rgb(0, 255, 229);
}
nav {
/*top: 20px;*/
background:transparent;
padding: 10px;

}
nav ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
top: 50px;
}
nav li {
display: inline-block;
margin-right: 20px;
margin-left: 30px;
}
nav a {
color: #f3e3e3;
text-decoration: none;

}
nav a:hover {
color: #fa0000;
background-color: #333;
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px
rgb(255, 5, 5), 0 0 40px rgb(255, 0, 0), 0 0 40px rgb(255, 0, 0), 0 0 40px
rgb(255, 0, 0), 0 0 40px rgb(255, 0, 0);
padding: 10px;
border-radius: 0px 20px ;
transition:0.5s;
box-shadow:10px #f0f0f0,10px #fff,20px #fff;
}

main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
h2 {
font-size: 24px;
margin: 0 0 10px 0;
}
p {
color: azure;
font-size: 20px;
line-height: 1.5;
margin: 0 0 10px 0;
font-family: 'Courier New', Courier, monospace;
}

.container {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}
.next-page a:hover {
background-color: #00a711;
color: #f508ae;
}*/
header .title{
background:linear-gradient(right,rgba(#00dbe6),rgba(#ed2a2a));
/*webkit-background-clip: text;
/*-webkit-text-fill-color: transparent;*/
}
.title{
background:linear-gradient(right,rgba(#00dbe6),rgtba(#ed2a2a));
/*webkit-background-clip: text;
/*-webkit-text-fill-color: transparent;*/
}
title h1{
text-align: center;

}
element.style {
transition-property: opacity, transform;
font-weight: 200;
font-style: normal;
font-stretch: normal;
font-optical-sizing: auto;
text-align: start;
opacity: 1;
font-family: "Foldit variant0";
line-height: initial;
transition-duration: 350ms;
}
header h1{
color: #f0f0f0;
}
/*for login form*/
.login-box {
width: 380px;
height: 320px;
background:transparent;
margin: 80px auto;
padding: 20px;
border-radius: 4px solid white;
/*box-shadow: 0px 0px 10px #f0f0f0,0px 0px 20px #fff,0px 0px 40px #fff,10px
10px 40px #f50f0f,0px 0px 40px #f50f0f,0px 0px 40px #f50f0f,0px 0px 40px
#f50f0f,0px 0px 40px #f50f0f,/*0px 0px 30px rgba(#dc5c00),0px 0px 20px
rgba(#dcb700),0px 0px 10px rgba(#dcdc00);*/
border-radius: 30px;
/*border: solid white 2px;*/
}

.login-box:hover{
/*box-shadow: 0px 0px 10px #f0f0f0,0px 0px 20px #fff,0px 0px 40px #fff,10px
10px 40px #f50f0f,0px 0px 40px #f50f0f,0px 0px 40px #f50f0f,0px 0px 40px
#f50f0f,0px 0px 40px #f50f0f,0px 0px 30px rgba(#dc5c00),0px 0px 20px
rgba(#dcb700),0px 0px 10px rgba(#dcdc00);*/
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px rgb(5,
222, 255), 0 0 40px rgb(0, 242, 255);/*, 0 0 40px rgb(249, 249, 249), 0 0 40px
rgb(255, 255, 255), 0 0 40px rgb(255, 255, 255);*/
border-radius: 40px 40px;
border:solid white 2px;

.login-box h2 {
text-align: center;
font-size: 28px;
margin-bottom: 30px;
color: #ccc;
}

.login-box label {
display: block;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}

.login-box input[type="text"],
.login-box input[type="password"] {
width: 80%;
padding: 10px;
color: #fc0000;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
background:none;
}
.login-box input[type="text"]:hover,
.login-box input[type="password"]:hover{
padding:20px 0px;
background-color: #1df7ff;
width:80%;
transition: 0.5s;
border-bottom: 3px solid white;
position: relative;
border: solid white 3px;

font-size: 20px;
box-shadow: 20px 20px 20px 20px rgba(255, 253, 253, 0.2),rgba(255, 255, 255,
0.4),rgba(255, 255, 255, 0.6),rgba(255, 255, 255, 0.8);

.submit input[type="submit"] {
background-color: #ff0505;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
animation: fill 2s timing-function 0.5s infinite ease none;

.submit input[type="submit"]:hover {
background-color:green;
color: #f3e3e3;
}

/*#bg-video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
}*/
/*.login-box .user-box label{
position: absolute;
top: 0%;
left: 0%;
font-size: 16px;
color: #f0f0f0;
pointer-events: none;

}*/

form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: none;
border-radius: 5px;
background:transparent;
}

h2 {
text-align: center;
margin-bottom: 20px;
color: #ccc;
}

label {
display: block;
color: #ccc;
margin-bottom: 8px;
}

input[type="text"], input[type="password"] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 20px;
}

button[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 16px;
}

button[type="submit"]:hover {
background-color: #45a049;
}
.flow{
animation: slide 3s 1s 1 ease none;
}

@keyframes slide {
from{
/*transform: scaleX(0);*/
transform: rotateZ(40deg);
color: #fff ;

}
to{
color: #a70000 ;
transform: scaleX(-200px);
transform: rotateX(50deg);
transition: 2s;

</style>
<script src="login.js" defer></script>
</head>
<body>

<header>

<h1 class="flow">
Games.com

</h1>

</header>
<nav>
<ul>
<li><a href="prjct.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="game2.html">Games</a></li>
<li><a href="under-development.html">Merch</a></li>
</ul>
</nav>
<div class="login-box">
<h2>Login</h2>
<form id="login-form">
<label>Username</label>
<input type="text" name="username" id="username" ><!--
placeholder="Enter Username-->
<div class="user-box0">
<label>Password</label>
<input type="password" name="password" id="password"><!--
placeholder="Enter Password"-->
<div class="submit">

<input type="submit" name="submit" value="Login" ></a>


</div>

</form>

</body>
</html>

About Page:
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
background-color: black;
}
p{
color: white;
text-align: center;
text-shadow: 0px 0px 10px rgb(255, 0, 0),
0px 0px 20px rgb(0, 247, 255)
0px 0px 30px rgb(38, 0, 255),
0px 0px 40px rgb(255, 0, 247);
}

</style>
<header>
<h1>
ABOUT US
</h1>
</header>
<body>
<p>
The HyperText Markup Language or HTML is the standard markup language
for documents designed to be displayed in a web browser. It is often assisted
by technologies such as Cascading Style Sheets (CSS) and scripting languages
such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the
structure of a web page semantically and originally included cues for its
appearance.

HTML elements are the building blocks of HTML pages. With HTML constructs,
images and other objects such as interactive forms may be embedded into the
rendered page. HTML provides a means to create structured documents by
denoting structural semantics for text such as headings, paragraphs, lists,
links, quotes, and other items. HTML elements are delineated by tags, written
using angle brackets. Tags such as and directly introduce content into the
page. Other tags such as <p> and </p> surround and provide information about
document text and may include sub-element tags. Browsers do not display the
HTML tags but use them to interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript,


which affects the behavior and content of web pages. The inclusion of CSS
defines the look and layout of content. The World Wide Web Consortium (W3C),
former maintainer of the HTML and current maintainer of the CSS standards, has
encouraged the use of CSS over explicit presentational HTML since 1997.[2] A
form of HTML, known as HTML5, is used to display video and audio, primarily
using the <canvas> element, together with JavaScript.

</p>

</body>
</html>
Game Page:
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Error Page</title>
<link href="https://fonts.googleapis.com/css?
family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background-color: #f2f2f2;
background-
image:url("https://e0.pxfuel.com/wallpapers/298/437/desktop-wallpaper-
abstract-blue-and-white-polygon-background-template-blue-polygon.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.error-container {
width: 80%;
margin: 0 auto;
padding: 50px 0;
text-align: center;
}
h1 {
font-size: 72px;
font-weight: 700;
margin-bottom: 20px;
}
p {
font-size: 24px;
font-weight: 400;
margin-bottom: 40px;
}
a {
display: inline-block;
padding: 10px 20px;
background-color: #000;
color: #fff;
font-size: 18px;
font-weight: 500;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}
a:hover {
background-color: #333;
}
h1 p{
color:aliceblue
}
</style>
</head>
<body>
<div class="error-container">
<h1>Oops!!!</h1>
<p>you need to login to visit the game page

</p>
<a href="prjct.html">Go back to homepage</a>
</div>
</body>
</html>

Merch Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Error Page</title>
<link href="https://fonts.googleapis.com/css?
family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background-image:
url("https://storage-asset.msi.com/global/picture/image/feature/mb/Z490/MPG/
mpg-story-bg.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.error-container {
width: 80%;
margin: 0 auto;
padding: 50px 0;
text-align: center;
}
h1 {
font-size: 72px;
font-weight: 700;
margin-bottom: 20px;
}
p {
font-size: 24px;
font-weight: 400;
margin-bottom: 40px;
}
a {
display: inline-block;
padding: 10px 20px;
background-color: #000000;
color: #fff;
font-size: 18px;
font-weight: 500;
text-decoration: none;
border-radius: 50%;
transition: background-color 0.3s ease;
}
a:hover {
background-color: #ffffff;
color: #000000;
}
</style>
</head>
<body>
<div class="error-container">
<h1>Oops!!!</h1>
<p>We're sorry, but the page you're looking for could not be found.
the page you're looking for is under development

</p>
<a href="prjct.html">Go back to homepage</a>
</div>
</body>
</html>

Interface:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
html{

scroll-behavior: smooth;
}
::-webkit-scrollbar{
display: none;
}
*{
margin: 0%;
padding: 0%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body{
/*background:linear-gradient(rgb(203, 196, 205)rgb(113, 2,
146),rgb(116, 4, 236),rgb(50, 5, 255))*/
background-color: aqua;
}
.container{
width: 100%;
height: 100%;
}
p{
padding: 90px 0px;
overflow: hidden;
}
.one{
/* background-image: url("http://brockstargaming.com/forza-horizon-5-
review/");*/
width: auto;
height: auto;
/*background-color: aqua;*/
background:linear-gradient(45deg,rgb(41, 239, 242),rgb(4, 236, 143),rgb(5,
255, 59),rgb(238, 255, 5),rgb(255, 184, 5),rgb(255, 43, 5));

}
.one img{
display: flex;
float: left;
top: 0%;
left: 0%;
width: 10%;
position:relative;
border-color: aliceblue;
border-radius: 50%;
overflow: hidden;

}
.one{
padding: 30px;
border: solid black 3px;
border-radius: 40px;
/* border-color: black 3px;
border-width: 100%;*/
}
.two{
/* background-image: url("http://brockstargaming.com/forza-horizon-5-
review/");*/
width: auto;
height: auto;
/*background-color: rgb(248, 13, 244);*/
border: solid black 3px;
border-radius: 40px;
background:linear-gradient(45deg,rgb(113, 2, 146),rgb(116, 4, 236),rgb(50,
5, 255));

}
.two img{
display: flex;
float: left;
float:top;
top: 0%;
left: 0%;
width: 10%;
position:relative;
border-color: aliceblue;
border-radius: 50%;
overflow: hidden;

}
.two{
padding: 30px;
border-bottom: 5px;
border-color: black 3px;
border-width: 100%;
}
.three{
/* background-image: url("http://brockstargaming.com/forza-horizon-5-
review/");*/
width: auto;
height: auto;
background-color: rgb(1, 47, 47);
}
pre{
float: right;
position: relative;
bottom: 150px;
right: 900px;
font-family: 40px;
font-weight: 700;
}
button{
padding: 10px;
background-color: azure;
border-style: groove;
border: solid black;
border-radius: 10px;
animation: click 5s 1s infinite ease-in-out none;
}
button a{
text-decoration: none;
color: black;
}
button:hover{
color: aliceblue;
}
@keyframes click{
0%{
background-color: greenyellow;
}
25%{
background-color: aqua;
}
50%{
background-color: blue;
}
75%{
background-color: blueviolet;
}
100%{
background-color: rgb(234, 13, 13);
}
}

</style>

<div class="container">
<div class="one">
<h1>
FORZA HORIZON 5
</h1>
<h3>
X Box Games
</h3>
<p>Forza Horizon 5 is a racing video game set in an open world environment
based in a fictional representation of Mexico. The game has the largest map in
the entire Forza Horizon series, being 50% larger than its predecessor, Forza
Horizon 4, while also having the highest point in the Horizon series.
The game received critical acclaim and became a commercial success
upon release; it launched to over ten million players in the first week, the
biggest-ever launch for an Xbox Game Studios game. The game won three jury-
voted awards at The Game Awards 2021, tying with Hazelight's It Takes Two for
most wins.[4]

<a href="file:///C:/Users/jagav/vike/project.game/forza.html"><img
src="https://i.redd.it/9qjkgtbndos81.png" width="150px"></a></p>
<pre>
Cracked Version:
<button><i class="fa-solid fa-down"></i><a href="https://fitgirl-
repacks.site/forza-horizon-5/">Cilck Me</button></a>
</pre>
</div>
<div class="two">
<h1>
FORTNITE
</h1>
<h3>
Epic Games
</h3>
<p style="color: azure;">
Fortnite is a survival game where 100 players fight against each
other in player versus player combat to be the last one standing. It is a
fast-paced, action-packed game, not unlike The Hunger Games, where strategic
thinking is a must in order to survive. There are an estimated 125 million
players on Fortnite.
Players skydive onto a small island, are equipped with an axe and
must scavenge for more weapons, while simultaneously avoiding a killer
electrical storm. As players are eliminated, the field of play also gets
smaller, meaning players are put closer together. Updates regularly flash on
screen detailing how another player was killed “X killed Y with a grenade”,
adding to the sense of urgency. While the game is free to play, you do need to
create an account with Epic Games.
Fortnite
<a href="fortnite.html"><img src="https://images-wixmp-
ed30a86b8c4ca887773594c2.wixmp.com/f/5ac38678-ed86-4930-9121-ef0181676c41/
ddoukex-c243a1ec-178c-446a-adde-600e015ead72.jpg?
token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODI
yNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmM
GQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzVhYzM4Njc4LWVkODYtNDkzMC05MTI
xLWVmMDE4MTY3NmM0MVwvZGRvdWtleC1jMjQzYTFlYy0xNzhjLTQ0NmEtYWRkZS02MDBlMDE1ZWFkN
zIuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.X3geTBUiFZ28KJE
2JMbaRyixARJ4foDhq2hU0lcTdsI"></a>

</p>

</div>

</body>
</html>

Fortnite Login:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-image: url("https://wallpapers.com/images/featured-full/fortnite-
background-34h5tua0czqu7u9t.jpg");
font-family: Arial, sans-serif;
background-repeat: no-repeat;
background-size: cover;
}

.login-box {
width: 320px;
height: 300px;
border:solid rgb(229, 4, 245) 3px;
border-radius: 40px;
margin: 80px auto;
padding: 20px;
border-radius: 10px;
border-radius: 40px;
box-shadow: 20px 20px 20px 20px
rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.2);
}
.login-box:hover{
box-shadow: 20px 20px 20px 20px
rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.2);
}

.login-box h1 {
text-align: center;
font-size: 28px;
margin-bottom: 30px;
}

.login-box label {
display: block;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}

.login-box input[type="text"],
.login-box input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}

.login-box input[type="submit"] {
background-color: #d400fe;
color: #fff;
border: none;
padding: 10px ;
border-radius: 5px;
cursor: pointer;
}

.login-box input[type="submit"]:hover {
background-color: #3e8e41;
}

</style>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="login3.js" defer></script>
</head>
<body>
<div class="login-box">
<h1>Login</h1>
<form id="login-form">
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="Enter
Username">
<label for="password">Password</label>
<input type="password" name="password" id="password"
placeholder="Enter Password">
<input type="submit" name="submit" value="Login">
</form>
</div>
</body>
</html>

Fortnite home Page:


<!DOCTYPE html>
<head>
<link rel="stylesheet" href="stylesheetproject.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/
E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-
referrer" />
</head>
<body>
<section class="box">
<div class="main-width">
<header>
<div class="logo">
<h2><a href="#">FORTNITE</a></h2>
</div>
<nav>
<ul>
<li><a href="new.html">open</a></li>
<li><a href="fortnite login.html">login</a></li>
<li><a href="https://www.fortnite.com/">official
site</a></li>
<li class="button"><a href="">Download</a></li>
</ul>
</nav>

<div class="content">

<p id="2">FORTNITE</p>
<h4>Epic Games</h4>
<div class="btn">
<button
onclick="document.location='https://www.youtube.com/watch?v=h84WCKzTk40'"><i
class="fa-solid fa-play"></i> Watch</button>
</div>
<footer>
<p id="1">Available Platforms:</p>
<i class="fa-brands fa-google-play fa-beat-
fade fa-lg" style="color: rgb(246, 255, 0);"></i>
<i class="fa-brands fa-playstation fa-beat-
fade fa-lg"style="color: rgb(246, 255, 0);"></i>
<i class="fa-brands fa-xbox fa-beat-fade fa-
lg"style="color: rgb(246, 255, 0);"></i>
<i class="fa-brands fa-windows fa-beat-fade
fa-lg"style="color: rgb(246, 255, 0);"></i>

</footer>
</div>

</div>
<div class="image">
<img
src="https://www.pngall.com/wp-content/uploads/4/Fortnite-Characters-PNG-
Clipart.png">

</div>

</body>
</html>
::-webkit-scrollbar{

display: none;
}
*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
overflow-x: hidden;
}
.main-width{
width: 1400px;
max-width: 95%;
margin: 0 auto;
width: 100%;
}
.box{
width: 100%;
height: 100%;
min-height: 100vh;
background: radial-gradient(#1a75ff,#cc33ff);
position: relative;

}
.box header .logo h2 a{
display: block;
font-size: 32px;
font-weight: 600;
text-decoration: none;
color: azure;

}
.box header{
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul li{
display: inline-block;

}
nav ul li a{
text-decoration: none;
margin: 60px;
color: blanchedalmond;
font-weight: 600;
border-bottom: 2px solid transparent;
}
nav ul li a:hover{
border-radius: 20px;
background: linear-gradient(70deg,#ffff00,#ffff1a,#fff);
border: #000 2px;
color: #1a75ff;
padding: 5px 10px;

}
nav ul li.button a{
background: transparent;
border:1px solid #f5dca8;
padding: 5px 10px;
color:white;
border-radius: 20px;
}
nav ul li.button:hover a{
border: 1px solid wheat;
background:radial-gradient(#66ff33 20%, #33cc33 10px,#00cc00 10px);
transition: 0.2s;
}
.content{
position: relative;
top: 300px;
right:840px

.btn button{
margin-top: 20px;
padding: 10px 25px;
border-color: 1px solid black;
border-radius: 20px;
border-style: groove;

}
.btn button:hover{
margin-top: 20px;
padding: 10px 25px;
border-radius: 20px;
background:linear-gradient(120deg, #ff0000,#fff);

}
footer{
padding-top:60px;
gap: 30px;

}
footer i{
padding-top: 10px;
padding-right: 15px;

}
.image img{
position: relative;
left: 700px;
right: 20px;
height: 90%;
width: 50%;
overflow: hidden;
bottom: 20px;
scroll-behavior:none;
}
image{
position: relative;
margin-right:100px;
}
#2{
font-size: 30%;
}

Forza Horizon Login Page:


<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-image: url("https://wallpapercave.com/dwp2x/wp8506298.jpg");
font-family: Arial, sans-serif;
}

.login-box {
width: 320px;
height: 300px;
border: solid white 2px;
border-radius: 40px;
margin: 80px auto;
padding: 20px;
border-radius: 10px;
/* box-shadow: 20px 20px 20px 20px
rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.2);*/
}
.login-box:hover{
box-shadow: 20px 20px 20px 20px
rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.2);
}

.login-box h1 {
text-align: center;
font-size: 28px;
margin-bottom: 30px;
}

.login-box label {
display: block;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}

.login-box input[type="text"],
.login-box input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
.login-box input[type="submit"] {
background-color:blue;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

.login-box input[type="submit"]:hover {
background-color: #e10101;
}

</style>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="login2.js" defer></script>
</head>
<body>
<div class="login-box">
<h1>Login</h1>
<form id = 'login-form'>

<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="Enter
Username">
<label for="password">Password</label>
<input type="password" name="password" id="password"
placeholder="Enter Password">
<input type="submit" name="submit" value="Login"a
href="forza.html"></a>
</form>
</div>
</body>
</html>

Forza Horizon Home Page:


<!DOCTYPE html>
<head>
<link rel="stylesheet" href="forza.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/
E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-
referrer" />
</head>
<body>
<section class="box">
<div class="main-width">
<header>
<div class="logo">
<h2><a href="#"></a></h2>
</div>
<nav>
<ul>
<li><a href="new.html">open</a></li>
<li><a href="forza login.html">login</a></li>
<li><a href="https://www.xbox.com/en-IN/games/forza-
horizon-5">official site</a></li>
<li class="button"><a href="">Download</a></li>
</ul>
</nav>

<div class="content">

<p id="2">FORZA HORIZON 5</p>


<h4>Xbox Games</h4>
<div class="btn">
<button
onclick="document.location='https://www.youtube.com/watch?v=Rv7xLt5yNsM'"><i
class="fa-solid fa-play"></i> Watch</button>
</div>
<footer>
<p id="1">Available Platforms:</p>
<i class="fa-brands fa-playstation fa-beat-
fade fa-lg"style="color:black;"></i>
<i class="fa-brands fa-xbox fa-beat-fade fa-
lg"style="color:green;"></i>
<i class="fa-brands fa-windows fa-beat-fade
fa-lg"style="color:blue;"></i>

</footer>
</div>

</div>
<div class="image">
<img src="">

</div>

</body>
</html>

::-webkit-scrollbar{
display: none;
}
*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
overflow-x: hidden;
background:url("https://wallpapercave.com/dwp2x/wp8506298.jpg");
background-size: cover;
background-repeat: no-repeat;

}
.main-width{
width: 1400px;
max-width: 95%;
margin: 0 auto;
}
.box{
height: auto;

width: auto;

position: relative;
}
.box header .logo h2 a{
display: block;
font-size: 32px;
font-weight: 600;
text-decoration: none;
color: azure;

}
.box header{
display: flex;
align-items: center;
justify-content: space-between;
}
nav ul li{
display: inline-block;

}
nav ul li a{
text-decoration: none;
margin: 60px;
color: #054b16;
font-weight: 600;
border-bottom: 2px solid transparent;
background: transparent;
}
nav ul li a:hover{
font: 50px;

background: linear-gradient(70deg,#9bf00b,#9bf00b,#fff);
border: #000 2px;
color:#054b16;
padding: 5px 10px;
transition:0.2s;

}
nav ul li.button a{
background: transparent;
border:1px solid #f5dca8;
padding: 5px 10px;
color:white;
border-radius: 20px;
}
nav ul li.button:hover a{
border: 1px solid wheat;
background:radial-gradient(#66ff33 20%, #33cc33 10px,#00cc00 10px);
transition: 0.2s;
}
.content{
position: relative;
top: 300px;
right:840px
}

.btn button{
margin-top: 20px;
padding: 10px 25px;
border-color: 1px solid black;
border-radius: 20px;
border-style: groove;

}
.btn button:hover{
margin-top: 20px;
padding: 10px 25px;
border-radius: 20px;
background:linear-gradient(120deg, #ff0000,#fff);

}
footer{
padding-top:60px;
gap: 30px;

}
footer i{
padding-top: 10px;
padding-right: 15px;

}
.image img{

You might also like