St.

Xavier’S College से ट जेिभयेस कलेज

MAITIGHAR, KATHMANDU, NEPAL माईतीघर, काठमा ड , नेपाल
पो.ब.नं. : ७४३७
Post Box: 7437
फोन :४२२१३६५, ४२४४६३६
Contact: 4221365, 424436 ईमेल :[email protected]
Email: [email protected]

DEPARTMENT OF COMPUTER SCIENCE

WEB APPLICATION

TITLE OF THE ASSIGNMENT

WEB PROJECT REPORT

Submitted By Submitted To Signature

Rishabh Pokharel Jamuna Maharjan

023NEB843 Computer Department
Class 11 – Section H St. Xavier’s College
 ACKNOWLEDGEMENT

The final outcome of this project required a lot of guidance and assistance from a number
Of people and I am extremely fortunate to receive such proper supervision for the
Completion of the project. Whatever I have done in this project is only due to such
Instructions and assistance, and I would not forget to thank them. I am indebted to the
Department of Computer, St. Xavier's College, Maitighar, for providing me with such an
Expressive platform for project. I am heartily grateful to the project supervisor Mrs.
JamunaMaharjan.
I am thankful and fortunate enough to get constant encouragement, support and guidance from
them, who have helped me in finalizing my project work. I also thank all the
Organizations that provided the necessary information for this report.
Lastly, I thank all my friends as well as my parents for their tremendous contributions and
Support both morally and financially towards the completion of this project.

Rishabh Pokharel
Level: +2
Roll: 843

24th March, 2024

 ABSTRACT
This abstract presents "Apex Games," a website crafted using HTML and CSS, designed to
provide an immersive gaming experience. "Apex Games" is an online platform developed to
cater to the needs of gaming enthusiasts, offering a dynamic interface coupled with engaging
content. The website features a sleek and intuitive design, meticulously crafted through HTML
and CSS, ensuring seamless navigation and an aesthetically pleasing user experience. Users can
explore a diverse range of gaming-related content, including news updates, game reviews,
tutorials, and community forums. Leveraging the power of HTML and CSS, "Apex Games"
delivers a visually stunning interface optimized for various devices, guaranteeing accessibility
across desktops, tablets, and mobile phones. With its user-centric approach and captivating
design, "Apex Games" stands as a testament to the creative potential of HTML and CSS in the
realm of web development, promising an exhilarating journey for gaming enthusiasts worldwide.
Moreover, the report ventures into the realm of gaming, exploring the fascinating intersection of
HTML, CSS, and interactive entertainment. With the proliferation of web-based games and
gamified experiences, understanding how HTML and CSS contribute to the gaming landscape
becomes increasingly paramount. Through insightful analysis and case studies, we unravel the
intricacies of integrating HTML and CSS into game development, showcasing how these
technologies can be utilized to create immersive and engaging gaming interfaces. From crafting
responsive user interfaces to implementing captivating animations and effects, HTML and CSS
emerge as indispensable tools in the arsenal of game developers.
Drawing upon real-world examples and industry best practices, the report provides actionable
insights for developers and designers seeking to harness the power of HTML and CSS in their
projects. By highlighting the symbiotic relationship between web design principles and gaming
innovation, the report underscores the transformative potential of these technologies in shaping
the future of digital experiences.
In conclusion, this project report serves as a comprehensive compendium for understanding the
myriad applications of HTML and CSS within Janak Pvt. Ltd. and beyond. Whether navigating
the intricacies of web design or pioneering new frontiers in gaming, HTML and CSS emerge as
indispensable allies, empowering creators to realize their visions and captivate audiences in the
ever-evolving digital landscape.
Contents
ACKNOWLEDGEMENT .............................................................................................................. 2
LIST OF FIGURES ........................................................................................................................ 5
MODULE 1 ................................................................................................................................ 5
MODULE 2 ................................................................................................................................ 5
MODULE 3 ................................................................................................................................ 6
1.1 Background ......................................................................................................................... 10
1.2 Objectives ........................................................................................................................... 11
Chapter 2: Methodology ............................................................................................................... 12
2.1 Hardware Requirements...................................................................................................... 13
2.2 Software Requirements ....................................................................................................... 13
2.3 Languages Used in Project.................................................................................................. 13
Chapter 3: Implementation ........................................................................................................... 14
3.1 Description .......................................................................................................................... 15
Chapter 4: Conclusion................................................................................................................... 28
4.1 Limitations .......................................................................................................................... 29
REFERENCES ............................................................................................................................. 30
LIST OF FIGURES
MODULE 1
OUTPUT

MODULE 2
OUTPUT
MODULE 3
OUTPUT
Chapter 1: Introduction
Welcome to Apex Games Pvt. Ltd.'s comprehensive report on the utilization of HTML and CSS.
As leaders in web development and design, we're excited to showcase how these foundational
technologies are not only integral to our projects but also to our educational initiatives on
computer science and gaming.
Dive into the thrilling world of gaming with Apex Games Pvt. Ltd, your premier destination for
all things gaming. As avid gamers ourselves, we understand the insatiable desire for immersive
experiences, captivating narratives, and adrenaline-pumping challenges. That's why we've
curated a collection of the finest games, spanning across genres and platforms, to satisfy every
gamer's craving.
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) form the backbone of
modern web development, enabling us to create visually appealing and functionally robust
websites and applications. Within Apex games Pvt. Ltd., we leverage these technologies to drive
innovation and excellence across various domains.

This report not only explores the core concepts of HTML and CSS but also delves into how they
are utilized to disseminate educational content on computers and games. Through our website,
we provide informative resources and engaging content to educate our audience on programming
languages, gaming mechanics, and more.

Join us as we delve into the transformative potential of HTML and CSS in shaping digital
education and gaming experiences within Janak Pvt. Ltd.
1.1 Background

Apex Games Pvt. Ltd. is a leading force in web development and design, driven by a
commitment to innovation and excellence. With expertise in HTML and CSS, we craft visually
stunning and functionally robust digital experiences that captivate audiences.

In addition to our core services, we're dedicated to fostering digital education. Through our
online platform, we provide informative resources on computer science and gaming,
empowering learners of all backgrounds to explore and grow in the digital world.

At Apex Games Pvt. Ltd., we're not just shaping the future of web development – we're also
inspiring the next generation of creators and innovators through our dedication to technology and
education.
1.2 Objectives

1. Learning HTML and CSS: To deepen our understanding and proficiency in HTML and CSS,
enabling us to utilize these foundational technologies to their fullest potential in web
development and design projects.
2. Innovative Web Experiences: To create visually captivating and intuitively functional websites
and applications that push the boundaries of creativity and user experience, setting new standards
in the industry.
3. Effective Educational Content: To develop and curate informative and engaging educational
resources on computer science and gaming, providing learners with valuable insights and
empowering them to navigate the digital landscape with confidence.
4. Audience Engagement: To foster a vibrant online community and cultivate meaningful
interactions with our audience, driving engagement and facilitating knowledge sharing and
collaboration.
5. Continuous Learning and Improvement: To embrace a culture of continuous learning and
improvement, staying abreast of emerging trends and technologies in web development, design,
and digital education, and integrating them into our practices to deliver unparalleled value to our
clients and learners alike.
Chapter 2: Methodology

The development of the website for Apex Games Pvt. Ltd. followed a structured and iterative
approach, aimed at ensuring efficiency, quality, and alignment with project objectives.
Leveraging Visual Studio Code as the primary coding environment and Microsoft Edge as the
browser for viewing, the methodology encompassed several key stages.
The development process commenced with a comprehensive analysis of project requirements,
including objectives, target audience, and desired functionalities. This initial phase laid the
foundation for subsequent activities by providing a clear understanding of project scope and
objectives.
Using Visual Studio Code as the preferred Integrated Development Environment (IDE), the
development team began by creating a structured project directory and setting up necessary
configurations for version control, code writting, and other development tools. This ensured
consistency and streamlined collaboration throughout the development lifecycle.
Furthermore, Microsoft Edge served as the primary browser for viewing and testing the website
during development. By leveraging Edge's developer tools, the team was able to identify and
address compatibility issues, optimize performance, and ensure a seamless user experience
across different devices and platforms.
Overall, the methodology adopted for the development of the website combined meticulous
planning, efficient utilization of development tools, and rigorous testing to deliver a high-quality
product that meets the needs and expectations of Apex Games Pvt. Ltd. and its target audience.
2.1 Hardware Requirements

Under the methodology employed for developing the website for Apex Games Pvt. Ltd.,
hardware requirements were carefully considered to facilitate efficient development and testing
processes. The primary hardware component was a reliable computer, serving as the main
workstation for development tasks. This computer was equipped with specifications suitable for
web development, including sufficient RAM, processor speed, and storage capacity, ensuring
smooth operation of development tools like Visual Studio Code. Additionally, access to
secondary devices, such as computers available at the developer's school and home, was essential
for testing purposes. These secondary devices provided a diverse testing environment, allowing
for cross-compatibility checks and ensuring the website's responsiveness across different
hardware configurations.

2.2 Software Requirements

The development process for the Apex Games Pvt. Ltd. website relied on a suite of essential
software tools and applications. These included Visual Studio Code (VS Code), a versatile and
powerful Integrated Development Environment (IDE) utilized for coding and editing website
files. Additionally, Microsoft Edge served as the primary browser for viewing and testing the
website during development, offering robust developer tools for debugging and optimization.
Alongside these, various Google applications and tools, such as Google Drive and Google Docs,
were instrumental in facilitating collaboration, document management, and other essential tasks
throughout the development lifecycle.

2.3 Languages Used in Project

The development of the Janak Pvt. Ltd. website primarily relied on two core languages: HTML
(Hypertext Markup Language) and CSS (Cascading Style Sheets). HTML served as the
foundation for structuring the content and layout of web pages, providing the markup necessary
for defining elements such as headings, paragraphs, images, and links. CSS complemented
HTML by providing styling instructions, enabling the customization of visual aspects such as
colors, fonts, layout, and responsiveness. Together, HTML and CSS formed the backbone of the
website, empowering developers to create visually appealing, functionally robust, and user-
friendly web experiences for Apex Games Pvt. Ltd. and its audience.
Chapter 3: Implementation

Programming languages play a pivotal role in the creation of websites, serving as the foundation
upon which digital experiences are built. Among the myriad programming languages available,
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) stand out as
fundamental languages essential for web development.
HTML, often referred to as the "markup" language, provides the structural framework for web
pages. It allows developers to define the elements and content of a webpage, including headings,
paragraphs, images, links, and other components. Through HTML, developers can organize and
arrange information in a logical and hierarchical manner, laying the groundwork for a cohesive
and navigable user experience.
CSS, on the other hand, is responsible for styling and presentation. By employing CSS,
developers can control the visual appearance of HTML elements, specifying attributes such as
colors, fonts, spacing, layout, and responsiveness. CSS enables developers to enhance the
aesthetic appeal of web pages, ensuring consistency and coherence across different devices and
screen sizes.
In the implementation of programming languages for website development, HTML and CSS
work hand in hand to create cohesive and visually engaging digital experiences. HTML provides
the structural backbone, defining the content and layout of web pages, while CSS adds the
stylistic flair, enhancing the presentation and user interface design. Together, these languages
empower developers to craft websites that are not only functional and accessible but also
aesthetically pleasing and user-friendly, catering to the diverse needs and preferences of modern
internet users.
3.1 Description

For those who want to learn more about computer science and web programming, the Apex
Games website is a great resource. The website, which was created with the needs of users in
mind, provides a wide range of instructional materials and content suitable for experts, novices,
and enthusiasts alike.

Visitors are met with a plethora of material spanning many facets of computer science and web
development as they navigate the website. The website offers training for learners of all skill
levels, starting with basic lessons on HTML and CSS subjects like database management, server-
side programming, and responsive design.

The website offers practical insights and interactive challenges to supplement academic
knowledge and strengthen learning. Visitors can use their newly acquired abilities in practical
circumstances through interactive coding challenges, projects, and case studies, which promote a
deeper comprehension and mastery of web development topics.

The website explores areas of computer science that go beyond web creation, including
algorithms, data structures, programming languages, and software engineering. By means of
educational articles, films, and carefully selected materials, users can acquire significant
understanding of the concepts and procedures that support contemporary computing.

The user-friendly interface and intuitive navigation of the website enhance its educational
offerings by making material easily accessible and comprehensible. Using a desktop, laptop, or
mobile device, users can take advantage of a seamless education experience that is customized to
meet their requirements and preferences.
In conclusion, the Apex Games website is a dynamic center for learning and inquiry in the fields
of computer science and web development, rather than merely being a digital platform. With its
extensive library of instructional materials, useful tools, and intuitive design, the website enables
people to realize their full potential and set out on a voyage of exploration in the ever changing
realm of technology.
 SOURCE CODE
Login_page.html
<!DOCTYPE html>
<html>
<head>
<title>Apex Games | Login</title>
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="Login_page.css">
</head>

<body>
<div class="wrapper">
<form action="">
<h1>Login</h1>
<div class="inp">
<label for=""><input type="text" placeholder="Username" required></label>
</div>
<div class="inp">
<label for=""><input type="password" placeholder="Password"></label>

</div>
<div class="forgot">
<label for=""><input type="checkbox" placeholder="">Remember me</label>
<a href="">Forgot password ?</a>
</div>

<button type="submit" class="btn"><a href="2.html">Login</a></button>

 <div class="register">
<p>Dont have an account ? <a href="">Register</a> </p>
</div>
</form>
</div>
</body>
</html>

Login_page.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins",sans-serif;
}

body{
display :flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:url('wallpaperflare.com_wallpaper.jpg') no-repeat;
background-position: center;
}

.wrapper{
width: 450px;
 background: transparent;
color: #FFFF;
border-radius: 15px;
backdrop-filter: blur(10px);
padding: 15px;
}

.wrapper h1{
font-size: 36px;
text-align: center;
}

.wrapper .inp{
width: 90%;
height: 50px;
margin: 30px;
}

.inp input{
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
border: 2px solid rgba(255,255,255,.2);
border-radius: 40px;
}
.inp input::placeholder{
color: #FFF;
padding: 5px;
}

.inp i{
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
}

.wrapper .forgot{
display: flex;
justify-content: space-between;
font-size: 14.5px;
margin: -15px 0 15px;
}

.forgot label input{

accent-color: darkgray;
margin-right: 3px;
}

.forgot a{
color: #FFF;
text-decoration: none;
}

.forgot a:hover{
text-decoration: underline;
}

.wrapper .btn{
width: 100%;
height: 45px;
background: #fff;
border: none;
outline: none;
border-radius: 40px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
cursor: pointer;
font-size: 16px;
color: #333;
font-weight: 600;

}
.wrapper .register{
font-size: 14.5px;
text-align: center;
margin: 20px 0 15px;
}

.register p a{
color: #fff;
 text-decoration: none;
font-weight: 600;
}

.register p a:hover{
text-decoration: underline;
}

.wrapper .btn:hover{

background-color: #dcdcdc;
transition-duration: 1s;

.btn a{
text-decoration:none;

Home.html
<!DOCTYPE html>
<html>
<head>
<title>Buy free games now | Apex Games</title>
<link rel="stylesheet" href="Home.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=Bebas+Neue&display=swap"
rel="stylesheet">

</head>

<body>
<div class="navbar">
<p>Apex Games</p>
<a href="">Home</a>
<a href="">Recent games</a>
<a href="3.html">Library</a>
<a href="">Downloads</a>
</div>

<div class="scroll_img">
<div class="a"><img src="peakpx (1).jpg" alt=""></div>
<div class="b"><img src="peakpx (2).jpg" alt=""></div>
<div class="c"><img src="peakpx (3).jpg" alt=""></div>
<div class="d"><img src="peakpx (4).jpg" alt=""></div>
<div class="e"><img src="peakpx (5).jpg" alt=""></div>
</div>
</body>
</html>

Home.css

*{
padding: 0;
margin: 0;
}

body{
background: #333;
}

.navbar a{
text-align: left;
color: #fff;
padding-left: 100px;
margin-left: 10%;
}

.navbar{

padding-top: 5px;
background-color: black;
padding-bottom: 20px;
}

.navbar a{
text-decoration: none;

.navbar a:hover{
color: #d51919;
transition-duration: 0.5s;
}

.navbar p{
color: #fff;
margin-top: 10px;
padding-bottom: 0;
margin-left: 10px;
font-family: "Bebas Neue", sans-serif;
font-size: 30px;
}

.navbar p:hover{
color: #d51919;
transition-duration: 0.5s;
}

.scroll_img img{
filter: brightness(90%);
float: left;
}
.a,.b,.c,.d,.e{
width: 33.33%;
overflow: hidden;
float: left;
}

.scroll_img img:hover{
 transform: scale(1.1);
transition-duration: 0.5s;
filter: brightness(140%);
}

Library.html

<!DOCTYPE html>
<html>
<head>
<title>Apex games | Library
</title>

<link rel="stylesheet" href="Library.css">

</head>

<div class="springsale">
<h2>Spring sale</h2>
<img src="GTA1.jpg" alt="1">
<img src="GTA2.jpg" alt="">
<img src="game-4890838_1280.jpg" alt="">
<img src="wp5170380-android-gaming-wallpapers.jpg" alt="">
<img src="wp5231544-4k-gaming-wallpapers.jpg" alt="">
</div>

<div class="freegames">
<h2>Free games</h2>
<img src="wp6053319-anthem-game-wallpapers.jpg" alt="2">
 <img src="wp6072777-gaming-poster-wallpapers.jpg" alt="">
<img src="wp6072817-gaming-poster-wallpapers.jpg" alt="">
<img src="wp6072830-gaming-poster-wallpapers.jpg" alt="">
<img src="wp6072951-gaming-poster-wallpapers.jpg" alt="">
</div>
</html>

Library.css

*{
margin: 0;
padding: 0;
}

img{
width: 280px;
height: 380px;
border: 2px solid rgb(70, 70, 70);
padding: 0;
}

.springsale,.freegames{
margin-left: 2.5%;
}

h2{
font-family:Georgia, 'Times New Roman', Times, serif;
color: aliceblue;
}

body{
background-color: rgb(28, 28, 28);
}

img:hover{
border: 2px solid rgb(165, 165, 165);
cursor: pointer;
}
Chapter 4: Conclusion

In conclusion, the project undertaken at Apex game Pvt. Ltd. has provided invaluable insights
into the extensive applications of HTML and CSS in web development and beyond. Through a
comprehensive examination of these foundational technologies, we have explored their role in
creating compelling digital experiences and fostering educational initiatives in computer science
and gaming.
HTML and CSS, as the backbone of modern web development, empower designers and
developers to craft visually stunning and functionally robust websites and applications. Our
project has shed light on the fundamental principles underlying these languages, elucidating their
symbiotic relationship in structuring, styling, and bringing digital content to life.
Furthermore, we have delved into the diverse applications of HTML and CSS tags, from basic
structural elements to advanced concepts like flexbox and grid layouts. By providing practical
examples and insights, we have equipped readers with the knowledge and tools needed to
harness the full potential of these technologies in their projects.
Beyond traditional web interfaces, our project has also explored the intersection of HTML, CSS,
and gaming, showcasing how these technologies contribute to the development of immersive and
engaging gaming experiences. Through insightful analysis and case studies, we have
demonstrated the transformative potential of HTML and CSS in shaping the future of interactive
entertainment.
In summary, the project report serves as a comprehensive compendium for understanding the
myriad applications of HTML and CSS within Apex Games Ltd. and beyond. Whether in web
development, digital education, or gaming innovation, HTML and CSS emerge as indispensable
tools, empowering creators to realize their visions and captivate audiences in the ever-evolving
digital landscape.
4.1 Limitations

While the project has provided a thorough exploration of the applications of HTML and CSS, it's
important to acknowledge that every endeavor may have certain limitations. However, in the
context of this project, it's challenging to identify significant limitations. The comprehensive
nature of the report, coupled with practical examples and insights, ensures that it offers a well-
rounded understanding of HTML and CSS in web development and gaming.
Nevertheless, it's worth noting that the scope of the project may not cover every possible
application or advanced technique of HTML and CSS. Additionally, the focus Apex games
pvt.ltd and its specific context may limit the generalizability of certain findings to other
organizations or industries.
Overall, while it's prudent to recognize the potential for limitations in any project, the
thoroughness and depth of the exploration in this report minimize any significant constraints,
resulting in a robust and informative analysis of HTML and CSS applications.
REFERENCES

https://www.nobledesktop.com/learn/html-css/what-is-html-css

https://www.britannica.com/technology/computer

https://www.igi-global.com/dictionary/computer-games-language-
learning/5038#:~:text=A%20computer%20game%20or%20%E2%80%9CPC,often%20require%
20a%20license%20agreement.

https://www.creativefabrica.com/wp-content/uploads/2020/09/10/Letter-J-Logo-Template-
Design-Vector-Graphics-5405859-1-1-580x387.jpg

https://media.geeksforgeeks.org/wp-content/uploads/20231205165904/web-development-
image.webp

https://html.com/wp-content/uploads/html-tutorial-beginners-header.webp

https://data-flair.training/blogs/wp-content/uploads/sites/2/2020/07/HTML-Tags-df.jpg

https://3.bp.blogspot.com/-
DXyjVnIYYJs/VylFTSd0flI/AAAAAAAAB14/JURyEvv8tBs1fIIAjm6fcu0LZORA7zWyQCLc
B/s1600/computer-04.jpg

https://media.npr.org/assets/img/2022/12/15/games-we-love-promo_wide-
7d16dd71b3658ebf7ab615f310b1c5c02aa2c709.jpg

https://drive.google.com/file/d/1Uk84OgUg6vlpRQD4zSzCjqK_dROtG-_2/view