Arunima Higher Secondary School

Baudha, Kumarigal, Kathmandu

Date:2nd May
2023
Letter of Declaration
I hereby declare that the work presented in this project report has been
done by myself under the supervision of Mr.Achyut Shah Thakuri and
has not been submitted elsewhere for any examination.
All sources of information have been specifically acknowledged by
references to authors or institutions.
Date: ……………….. Name & signature of the
student:
Aaditya Pudasaini

______________
Registration
number:
 Arunima Higher Secondary School
Baudha, Kumarigal, Kathmandu

LETTER OF APPROVAL
The project work submitted to Arunima Secondary School, by
Aaditya Pudasaini ., entitled
“………………………………………………………….….”
has been approved as the partial fulfillment of the requirements of
the internal evaluation.

Date:2nd May Name & signature of

Supervisor
 Acknowledgement

I have taken efforts in this report. However, it would not have been possible without
the kind support and help of many individuals and organizations. I would like to
extend my sincere thanks to all of them.

I am highly indebted to Arunima Educational Foundation for their guidance and

constant supervision as well as for providing necessary information regarding the
report & also for their support in completing the report.

I would like to express my gratitude towards my parents & member of Arunima

Educational Foundation for their kind co-operation and encouragement which help
me in completion of this report.

I would like to express my special gratitude and thanks to Mr Achyut Shah Thakuri
our computer teacher for giving me such attention and time.

My thanks and appreciations also go to my colleague in developing the report and

people who have willingly helped me out with their abilities.

Your Sincerely

Aaditya Pudasaini
Table of Contents

SNContents

1. Source Code

1.1. HTML Theory

1.2. CSS Theory

1.3. Homepage code

1.4. About code

1.5. Services code

1.6 Chefs Code

1.7. Menu code

1.8. CSS Code

2. Conclusion

3. Reference
Theory (HTML and CSS):-

HTML

HTML is Hypertext Markup Language. HTML is a markup language that is easy for users to understand.
HTML can facilitate novice users or developers in formatting, compiling, and organizing documents
online using the Microsoft Word program.

HTML functions to make it easier for users when managing or managing data in the form of documents
on a website. So as to produce documents that are interesting and easy to read by all internet users
around the world. HTML has the advantage of the language used. The markup language for HTML has
many sources and is broad and consistent.

HTML can be run naturally on every website. HTML also has an easier learning curve and open source
that can be run for free. In addition, HTML also has official website standards by the World Wide Web
Consortium on maintaining. And easy to integrate with PHP, Node.js, and even the backend language.

HTML has features that cannot be used logically. So that web pages must be separated even though
they have the same elements. When executing, the browser can also sometimes be unpredictable. So,
the browser cannot render newer. However, you can still use HTML as needed.

HTML was created by a physicist with the Berners Lee team at the CERN research institute in
Switzerland. The team has an idea about a hypertext system that uses an internet base. Tim Berners Lee
released the first HTML version in 1991. In that version, there were 18 HTML tags. Hypertext refers to
text that has references or links for other text so that it can be accessed by users.

Since 1991, every HTML released the latest version, always equipped with the latest attributes and tags.
There are currently 140 HTML tags based on the HTML Element Reference owned by the Mozilla
Developer Network. Because of the popularity and advancement in technology, HTML continues to grow
and increase. HTML is considered a standard website that is already official.

HTML was developed by W3C with a major upgrade in 2014. The result is an introduction to HTML 5
with new semantics so that it can tell the meaning of its own HTML content. The existence of a web
browser aims to facilitate users when opening HTML-formatted documents.
CSS

CSS is one of three cornerstone technologies used on the web (the other two are HTML and JavaScript).
CSS stands for Cascading Style Sheets – the clues are really in the words ‘cascading’ and ‘style’ with
cascading describing the way that one style can cascade from one to another.

One of the many benefits of CSS is that more than one style can be used within one HTML document.

CSS is used as a way of defining how HTML code is going to look on a website. Whereas HTML
(Hypertext Markup Language) is used to create content, including written text, CSS alters the way a web
page will look.

So, depending on the data they want to display, a developer might choose to have a page with tabs
running across the top of the page, or along the side.

Or, another developer might choose to use headings and sub heading styles to ensure that the words
leap off the page or, change or revamp an existing webpage entirely.

Perhaps the best way of describing what CSS does is to explain what a page would like if it didn’t use
CSS.

Without CSS web pages are plain and far from inspirational. Words scroll across the whole page and are
difficult to read. But, before CSS that’s exactly what web pages looked like.

The introduction of CSS is partly responsible for how the web looks and feels today. And, far from being
created and therefore finished, it is a continually evolving language.

Firstly, using CSS ensures that your web pages are consistent. Imagine a website with 100s of pages,
now imagine having to input the code to define heading sizes, layout and other display data and mix
that all in with the content each time you wanted to produce a new page. Also, imagine having a site
with 100s of pages and being able to change just one of them while keeping all the rest the same – CSS
also makes that a possibility. Using CSS delivers consistency where it is needed but is flexible enough to
enable you to make changes to individual pages or sections.

According to Wikipedia, the birth of CSS is largely credited to Norwegian Håkon Wium Lie, who back in
1994 sought to create a universal standardized style sheet for the World Wide Web.

The first site that Lie trialed CSS on was the Arena web browser. From its first creation, Lie went on to
co-create CSS1, CSS2 and RFC 2318 versions with Tim Berners-Lee and Robert Caillou. In its first decade
of existence (1994 – 2004) CSS, in all its specifications, became an established web standard greatly
influencing the look and accessibility of the world wide web as we know it today.
Software and hardware requirements:-

Operating system :-Windows 007/2010

Editor :notepad++,notepad

Hardware :-i3 processor, RAM 2/4GB,Hard disk of 32 GB.

Browser :-chrome/internet explorer

 Source Code

<!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">

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/

all.min.css"

integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/
9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="

crossorigin="anonymous" referrerpolicy="no-referrer" />

<title>Pizza</title>

</head>

<body>

<header>

<div class="nav-container">

<div class="logo">

<img src="img/logo-2.jpg">

</div>

<div class="hamburger">
 <div class="line"></div>

<div class="line"></div>

<div class="line"></div>

</div>

<nav class="nav-bar">

<ul>

<li><a href="#about" class="active">About</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#chefs">Chefs</a></li>

<li><a href="#menu">Menu</a></li>

</ul>

</nav>

</div>

<div class="content">

<div class="content-box">

<h2> Pizza Hut</h2>

<label> You can get delicious pizza from us.</label>

</div>

</div>

</header>

<div class="about" id="about">

<div class="about-box">
 <div class="about-image">

<img src="img/about-image.jpeg">

</div>

<div class="about-body">

<h3>About Us</h3>

<p>Pizza Hut is onlline pizza delivery company.

We are very good compnay. This is company is estsblished on

2010 A.D.

You can get delicious pizza from our company. </p>

<a href="#">Go Here</a>

</div>

</div>

</div>

<div class="services" id="services">

<div class="services-box">

<div class="services-title">

<h2><span>Our</span> Services</h2>

<label>We provide many services to our customer.</label>

<label>The services are listed below.</label>

</div>

<div class="services-item">

<div class="services-items">
 <img src="img/services-1.png">

<h3>Healthy foods</h3>

<label>The pizza we delivery were made from fresh vegetable which are
healthy.</label>

</div>

<div class="services-items">

<img src="img/services-2.png">

<h3>Master Chefs</h3>

<label>There are also many good master chefs in our company..</label>

</div>

<div class="services-items">

<img src="img/services-3.png">

<h3>Fast Delivery</h3>

<label>We also do fast delivery which is very good things for customer/</label>

</div>

</div>

</div>

</div>

<div class="div-header" id="chefs">

<h3><span>Pizza Hut</span> Chefs</h3>

</div>

<div class="chefs">

<div class="chefs-box">
<div class="chef-card">

<div class="chef-image">

<img src="img/chef-1.jpg">

</div>

<div class="chef-body">

<h3>Milan Tamang </h3>

</div>

</div>

<div class="chef-card">

<div class="chef-image">

<img src="img/chef-2.jpg">

</div>

<div class="chef-body">

<h3>Sudip Tyangle Magar.</h3>

</div>

</div>

<div class="chef-card">

<div class="chef-image">

<img src="img/chef-3.jpg">

</div>

<div class="chef-body">

<h3>Anmol Tamang</h3>

</div>
 </div>

</div>

</div>

<div class="div-header" id="menu">

<h3><span>Pizza Hut</span> Menu</h3>

</div>

<div class="menu" id="menu">

<div class="menu-box">

<div class="card">

<div class="card-image">

<img src="img/capricciosa.jpg">

</div>

<div class="card-body">

<h4>Capricciosa</h4>

<div class="cash-div">

<label class="cash del">Rs.2499 </label>

<label class="cash">Rs.1599</label>

</div>

<a href="#">Buy</a>

<label class="discount">Discount</label>
 </div>

</div>

<div class="card">

<div class="card-image">

<img src="img/marinara.jpg">

</div>

<div class="card-body">

<h4>Marinara</h4>

<label class="cash">Rs.1199 </label>

<a href="#">Buy</a>

</div>

</div>

<div class="card">

<div class="card-image">

<img src="img/frutti-dim-mare.jpg">

</div>

<div class="card-body">

<h4>Frutti Dim Mare</h4>

<label class="cash">Rs.1499 </label>

<a href="#">Buy</a>

</div>

</div>

<div class="card">
 <div class="card-image">

<img src="img/hawaiian.jpg">

</div>

<div class="card-body">

<h4>Hawaiian</h4>

<label class="cash">Rs.1999 </label>

<a href="#">Buy</a>

</div>

</div>

<div class="card">

<div class="card-image">

<img src="img/neapolitan.jpg">

<div class="cash-div">

<label class="cash del">Rs.2499 </label>

<label class="cash">Rs.1799 </label>

</div>

<a href="#">Buy</a>

<label class="discount">Discount</label>

</div>

</div>

<div class="card">

<div class="card-image">

<img src="img/marinara.jpg">
 </div>

<div class="card-body">

<h4>Marinara</h4>

<label class="cash">Rs.1699 </label>

<a href="#">Buy</a>

</div>

</div>

<div class="card">

<div class="card-image">

<img src="img/quattro-formaggi.jpg">

</div>

<div class="card-body">

<h4>Quattro Formaggi</h4>

<label class="cash">Rs.1299 </label>

<a href="#">Buy</a>

</div>

</div>

<div class="card">

<div class="card-image">

<img src="img/Pepperoni.jpg">

</div>

<div class="card-body">

<h4>Pepperoni</h4>
 <div class="cash-div">

<label class="cash del">Rs.2799 </label>

<label class="cash">Rs.1999 </label>

</div>

<a href="#">Buy</a>

<label class="discount">Discount</label>

</div>

</div>

</div>

</div>

<div class="contact" id="contact">

<div class="contact-box">

<div class="contact-image">

<img src="img/contact-image.jpg">

</div>

</div>

<div class="contact-box">

<div class="contact-body">

<form>

<h2>Contact Us</h2>

<div class="form-content">

<input type="text" required>

<span></span>
 <label>Username</label>

</div>

<div class="form-content">

<input type="email" required>

<span></span>

<label>Email</label>

</div>

<button type="submit">Send</button>

</form>

</div>

</div>

</div>

<div class="footer">

<div class="footer-box">

<div class="icon">

<h3>Pizza <span>Hut</span></h3>

<a href="#"><i class="fa-brands fa-facebook"></i></a>

<a href="#"><i class="fa-brands fa-instagram"></i></a>

<a href="#"><i class="fa-brands fa-twitter"></i></a>

<a href="#"><i class="fa-brands fa-youtube"></i></a>

</div>

<div class="div-1 f-div">

<h4>Payment Mode</h4>

<a href="#">eSewa</a><br>
 <a href="#">Khalti</a><br>

<a href="#">Fonepay</a><br>

<a href="#">Moble Banking</a><br>

</div>

<div class="div-2 f-div">

<h4>Useful Links</h4>

<li><a href="#about" class="active">About</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#chefs">Chefs</a></li>

<li><a href="#menu">Menu</a></li>

</div>

<div class="div-3 f-div">

<h4>Get in Touch</h4>

<a href="#">Email:[email protected]</a><br>

<a href="#">Phone no:+9779827880345</a><br>

<a href="#">Location:Kathmandu</a><br>

<a href="#">Chabhil-Nepal</a><br>

</div>

</div>

</div>

<script src="script.js"></script>
</body>

</html>

CSS Code
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

*{

margin: 0;

padding: 0;

box-sizing: border-box;

list-style: none;

text-decoration: none;

html {
 font-family: 'Open Sans', sans-serif;

scroll-behavior: smooth;

body {

background: #f8f8f8;

img {

width: 100%;

.div-header {

display: flex;

align-items: center;

justify-content: center;

padding: 10px;

font-size: 20px;

padding: 30px 0;

background-color: #f8f8f8;

.div-header h3 span {

color: black;

}
.div-header h3 {

color: orange;

/* Header */

/* navbar */

.nav-container {

width: 100%;

height: 110px;

background: linear-gradient(to bottom right, rgba(0, 0, 0, .30), rgba(0, 0, 0, .30));

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 100px;

position: absolute;

.nav-container .logo {

width: 80px;

.nav-container .logo img {

 border-radius: 50%;

.hamburger {

display: none;

.nav-bar ul {

display: flex;

.nav-bar ul li a {

display: block;

color: white;

font-size: 15px;

padding: 10px 25px;

border-radius: 25px;

transition: .5s;

margin: 0 10px;

.nav-bar ul li a:hover {

color: black;

background: white;

}
header .content {

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

background: linear-gradient(to bottom right, rgba(0, 0, 0, .50), rgba(0, 0, 0, .50)), url(img/bg-

image2.jpg);

background-position: center;

background-repeat: no-repeat;

background-size: cover;

background-attachment: fixed;

color: white;

text-align: center;

header .content h2 {

color: orange;

font-size: 30px;

padding: 10px 0;

header .content label {

 font-size: 20px;

/* about */

.about-box {

display: flex;

align-items: center;

justify-content: center;

padding: 30px;

background-color: #f8f8f8;

.about-box .about-image {

margin-right: 50px;

width: 400px;

.about-box .about-body {

width: 600px;

.about-box .about-body {
 font-size: 17px;

.about-box .about-body h3 {

color: orange;

position: relative;

bottom: 30px;

font-size: 23px;

.about-body p {

line-height: 30px;

.about-body a {

display: inline-block;

margin-top: 20px;

padding: 10px 10px;

border: 1px solid gray;

font-size: 15px;

color: black;

transition: all .4s ease-in-out;

border-radius: 5px;

}
.about-body a:hover {

background-color: lightgray;

/* services */

.services-box {

background-color: #F8F8F8;

.services-title {

display: flex;

align-items: center;

justify-content: center;

text-align: center;

flex-direction: column;

padding: 30px;

.services-box .services-title h2 {

margin: 10px;

color: orange;

}
.services-box .services-title h2 span {

color: black;

.services-box .services-title label {

display: inline-block;

margin: 5px 0;

font-size: 19px;

.services-item {

display: flex;

align-items: center;

justify-content: space-between;

text-align: center;

padding: 20px 30px;

.services-items {

padding: 50px;

.services-items img {

width: 80px;

margin-bottom: 10px;
}

.services-items h3 {

font-size: 22px;

.services-items label {

display: inline-block;

margin-top: 10px;

font-size: 17px;

/* Chefs */

.chefs {

padding: 40px;

background-color: #f8f8f8;

.chefs-box {

display: flex;

align-items: center;

justify-content: space-evenly;
 text-align: center;

flex-wrap: wrap;

.chef-card {

width: 280px;

margin-top: 30px;

.chef-card .chef-image {

width: 280px;

height: 280px;

.chef-card .chef-image img {

border-top-left-radius: 25px;

border-top-right-radius: 25px;

width: 100%;

height: 100%;

.chef-card .chef-body {

padding: 20px;

margin-top: -5px;

border: 5px solid #f2f2f2;

}

.chef-card .chef-body h3 {

display: inline-block;

margin-bottom: 10px;

font-size: 17px;

.chef-card .chef-body p {

font-size: 15px;

/* menu */

.menu-box {

display: flex;

align-items: center;

justify-content: center;

background-color: #f8f8f8;

padding: 20px;

flex-wrap: wrap;

.menu-box .card {

display: flex;
 padding: 30px 30px 15px 30px;

background-color: #f2f2f2;

position: relative;

margin: 20px;

.menu-box .card-image img {

width: 230px;

transition: all .4s ease-in-out;

.menu-box .card-image img:hover {

transform: scale(1.1);

.menu-box .card-body {

padding: 20px;

.menu-box .card-body i {

color: orange;

font-size: 12px;

.menu-box .card-body label {

 margin-top: 5px;

.menu-box .card-body label.cash {

display: block;

font-weight: bold;

.menu-box .card-body label.del {

display: block;

font-weight: bold;

text-decoration: line-through;

margin-right: 10px;

.menu-box .card-body .cash-div {

display: flex;

.menu-box .card-body a {

display: inline-block;

margin-top: 20px;

padding: 7px 20px;

background-color: #dcdcdc;

color: black;
 font-size: 15px;

font-weight: bold;

.menu-box .card-body label.discount {

display: inline-block;

position: absolute;

top: 0;

right: -10px;

transform: rotate(30deg);

font-weight: bold;

font-size: 18px;

color: red;

/* Contact */

.contact {

display: flex;

flex-wrap: wrap;

width: 100%;

margin-top: 50px;

}
.contact .contact-box {

flex: 1;

.contact .contact-box .contact-image,

.contact .contact-box .contact-body {

height: 100%;

.contact img {

width: 100%;

height: 100%;

.contact-image img {

opacity: .8;

.contact-body {

background-color: #F2F2F2;

height: 100%;

.contact-body form {

padding: 50px 40px;

 box-sizing: border-box;

.contact-body h2 {

color: orange;

form .form-content {

position: relative;

margin: 30px 0;

border-bottom: 2px solid lightgray;

form .form-content input {

width: 100%;

height: 40px;

padding: 0 5px;

font-size: 16px;

border: none;

background: none;

outline: none;

color: black;

form .form-content label {

 position: absolute;

top: 50%;

left: 5px;

color: gray;

transform: translateY(-50%);

font-size: 17px;

transition: .5s;

pointer-events: none;

form .form-content span::before {

content: '';

position: absolute;

top: 40px;

left: 0;

width: 0%;

height: 2px;

background: orange;

transform: .4s;

form .form-content input:focus~label,

form .form-content input:valid~label {

top: -5px;

color: orange;
}

form .form-content input:focus~span::before,

form .form-content input:valid~span::before {

width: 100%;

.contact-body form button {

padding: 10px 20px;

font-size: 17px;

border: none;

background-color: #ff6600;

color: white;

border: 5px;

cursor: pointer;

transition: all .4s ease-in;

.contact-body form button:hover {

background-color: #f96e88;

/* footer */

.footer {
 background: #F2F2F2;

.footer-box {

padding: 30px;

display: flex;

align-items: center;

justify-content: space-around;

flex-wrap: wrap;

text-align: center;

.footer-box .icon a i {

margin-top: 10px;

margin-right: 10px;

padding: 10px;

color: black;

background-color: #dcdcdc;

border-radius: 50%;

text-align: center;

.footer-box .icon a i:hover {

opacity: .8;

}
.footer-box h3 {

position: relative;

bottom: 23px;

.footer-box h3 span {

color: orange;

.footer-box .f-div {

padding: 20px;

margin: 20px 30px;

.footer-box .f-div h4 {

margin-bottom: 5px;

font-size: 16px;

color: orange;

.footer-box .f-div a {

font-size: 16px;

color: black;

}
/* responsive */

@media (max-width: 1100px) {

.about-box {

flex-direction: column;

text-align: center;

.about-box .about-image {

margin-right: 0;

.about-box .about-body {

margin-top: 60px;

.about-box .about-body h3 {

text-align: center;

@media (max-width: 900px) {

.hamburger {

display: block;

cursor: pointer;

.hamburger .line {

width: 30px;

height: 3px;

background: white;

margin: 6px 0;

.nav-bar {

height: 0;

position: absolute;

top: 110px;

left: 0;

right: 0;

width: 100%;

background: linear-gradient(to bottom right, rgba(0, 0, 0, .30), rgba(0, 0, 0, .30));

transition: .5s;

overflow: hidden;

.nav-bar.active {
 height: 250px;

.nav-bar ul {

display: block;

width: 20%;

margin: 10px auto 0 auto;

text-align: center;

transition: .5s;

opacity: 0;

.nav-bar.active ul {

opacity: 1;

.nav-bar ul li a {

margin-bottom: 12px;

.content .content-box h2 {

font-size: 23px;

.content .content-box label {

 font-size: 15px;

.about-box .about-body h3 {

font-size: 21px;

.about-box .about-body p {

font-size: 15px;

line-height: 30px;

.services-box .services-title h2 {

font-size: 21px;

.services-box .services-title label {

font-size: 16px;

.services-items h3 {

font-size: 20px;

.services-items label {
 display: inline-block;

margin-top: 10px;

font-size: 16px;

.contact .contact-box {

flex: 100%;

@media (max-width: 922px) {

.services-item {

flex-direction: column;

@media (max-width: 820px) {

.footer-box .icon {

width: 100%;

display: block;

text-align: center;

}
@media (max-width: 730px) {

.nav-bar ul {

display: block;

width: 30%;

margin: 10px auto 0 auto;

text-align: center;

transition: .5s;

opacity: 0;

.about-box .about-image {

width: 350px;

.about-box .about-body {

width: 500px;

.footer-box .icon {

width: 100%;

margin-top: 10px;

text-align: center;

}
 .footer-box .icon h3 {

top: 1px;

.footer-box .f-div h4 {

font-size: 17px;

.footer-box .f-div a {

font-size: 17px;

.about-box .about-body {

max-width: 400px;

.content .content-box h2 {

font-size: 20px;

.content .content-box label {

font-size: 14px;

}
@media (max-width: 570px) {

.menu-box {

padding: 10px;

.menu-box .card .card-body h4 {

font-size: 14px;

.menu-box .card .card-body label {

font-size: 13px;

.menu-box .card {

padding: 20px 20px 5px 20px;

.menu-box .card-image img {

width: 180px;

transition: all .4s ease-in-out;

.menu-box .card-image img:hover {

 transform: scale(1.1);

.menu-box .card-body {

padding: 20px;

.menu-box .card-body i {

font-size: 10px;

.menu-box .card-body label.cash {

font-size: 14px;

.menu-box .card-body .cash-div {

display: flex;

.menu-box .card-body a {

padding: 6px 12px;

font-size: 12px;

}
 .menu-box .card-body label.discount {

font-size: 15px;

.div-header {

font-size: 17px;

@media (max-width: 500px) {

.about-box .about-image {

width: 300px;

.about-box .about-body {

width: 350px;

.nav-container {

padding: 0 50px;

.services-items img {
 width: 60px;

margin-bottom: 10px;

@media (max-width: 450px) {

.menu-box {

padding: 5px;

.menu-box .card .card-body h4 {

font-size: 12px;

.menu-box .card .card-body label {

font-size: 11px;

.menu-box .card {

padding: 10px 10px 0px 10px;

.menu-box .card-image img {

 width: 150px;

transition: all .4s ease-in-out;

.menu-box .card-image img:hover {

transform: scale(1.1);

.menu-box .card-body {

padding: 10px;

.menu-box .card-body i {

font-size: 8px;

.menu-box .card-body label.cash {

font-size: 12px;

.menu-box .card-body .cash-div {

display: flex;

}
 .menu-box .card-body a {

padding: 5px 10px;

font-size: 11px;

.menu-box .card-body label.discount {

font-size: 12px;

.contact-box .contact-body form {

font-size: 14px;

.contact-box .contact-body form button {

padding: 10px 10px;

font-size: 14px;

.nav-bar ul {

width: 40%;

@media (max-width: 430px) {

.about-box .about-image {
 width: 270px;

.about-box .about-body {

width: 200px;

.content .content-box h2 {

font-size: 18px;

.content .content-box label {

font-size: 14px;

@media (max-width: 400px) {

.content .content-box h2 {

font-size: 17px;

.content .content-box label {

font-size: 13px;

}
}

2.Conclusion

HTML and CSS are two of the many major core interfaces that help build webpages
which can be used by anyone with a simple method to use. Many of the webpages we see
today have been developed with the help of HTML and CSS. They have provided
common people with the opportunity to build their own webpages. Job opportunities have
also been created with their help for people with excellent web designing skills. Thus,
they play a huge role in todays technological society and the internet. Thus learning such
skill makes one highly employable.

3.Review
I would like to thank google and my text book for providing me with information about
various topics in this project and my teacher for teaching me about HTML and CSS, I
would also like to thank MDN webdocs, Devdocs.io as well as Stack overflow for giving
me indepth knowledge of various tags and attributes.