Scribd
Upload
45 views23 pages

Class 10th Project Work

The document outlines a final project for a Class 10th HTML and CSS assignment, including the structure and content for an index.html file and a style.css file. The HTML file contains various sections such as a header, navigation, campus news, events, notices, school information, and a gallery, all styled with CSS. The CSS file provides styling rules for layout, typography, and visual elements to enhance the presentation of the HTML content.

Uploaded by

kratisahu630
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
45 views23 pages

Class 10th Project Work

The document outlines a final project for a Class 10th HTML and CSS assignment, including the structure and content for an index.html file and a style.css file. The HTML file contains various sections such as a header, navigation, campus news, events, notices, school information, and a gallery, all styled with CSS. The CSS file provides styling rules for layout, typography, and visual elements to enhance the presentation of the HTML content.

Uploaded by

kratisahu630
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Class 10th

Final Project
Folder structure for your reference:-

[ You have to write the below code in your


file as it is ]
[Link] File:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-
width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./[Link]" />
</head>
<body>
<div class="header">
<div class="container">
<b> NEWS : </b>
<marquee>
My School: Intelligence plus curiosity-that is the
root of true
education.
</marquee>
</div>
</div>

<div class="container">
<img
style="margin-top: 15px; margin-left: 11px"
src="images/[Link]"
class="logo"
/>

<nav>
<a href="#">Home</a>
<a href="#Campus-News">Campus News</a>
<a href="#events">Events</a>
<a href="#notice">Notice Board</a>
<a href="#gallery">Gallery</a>
<a href="#contact">Contact us</a>
</nav>
</div>
<div class="main-section">
<div class="container about-us">
<div>
<h2 class="heading">About My HTML CODING
SCHOOL</h2>
<h4>A Unique Heritage School .</h4>
<p>
Lorem Ipsum is simply dummy text of the
printing and typesetting
industry. Lorem Ipsum is simply dummy text of
the printing and
typesetting industry. Lorem Ipsum is simply
dummy text of the
printing and typesetting industry. Lorem Ipsum
is simply dummy text
of the printing and typesetting industry. Lorem
Ipsum is simply
dummy text of the printing and typesetting
industry.
</p>
</div>
<img src="images/[Link]" />
</div>
</div>
<div class="main-section" style="background:
#f0f3fa">
<div class="container">
<div class="event" id="Campus-News">
<h2 class="heading">Campus News</h2>
<div>
<marquee direction="up" scrollamount="7"
style="height: 340px">
<ul>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is
simply dummy text of the
printing and typesetting industry.
<img class="new-logo"
src="images/[Link]" />
</li>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is
simply dummy text of the
printing and typesetting industry.
<img class="new-logo"
src="images/[Link]" />
</li>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is
simply dummy text of the
printing and typesetting industry.
<img class="new-logo"
src="images/[Link]" />
</li>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is
simply dummy text of the
printing and typesetting industry.
<img class="new-logo"
src="images/[Link]" />
</li>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is
simply dummy text of the
printing and typesetting industry.
<img class="new-logo"
src="images/[Link]" />
</li>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is
simply dummy text of the
printing and typesetting industry.
<img src="images/[Link]" />
</li>
<li>
<i>01-April-2023 :</i> Lorem Ipsum is
simply dummy text of the
printing and typesetting industry.
<img class="new-logo"
src="images/[Link]" />
</li>
</ul>
</marquee>
</div>
</div>

<div class="event" id="events">


<h2 class="heading">Events</h2>
<div>
<ul>
<li>
<span class="event-date"
>29 <br />
April
</span>
Lorem Ipsum is simply dummy text of the
printing and typesetting
industry.
</li>
<li>
<span class="event-date"
>29 <br />
April
</span>
Lorem Ipsum is simply dummy text of the
printing and typesetting
industry.
</li>
<li>
<span class="event-date"
>29 <br />
April
</span>
Lorem Ipsum is simply dummy text of the
printing and typesetting
industry.
</li>
<li>
<span class="event-date"
>29 <br />
April
</span>
Lorem Ipsum is simply dummy text of the
printing and typesetting
industry.
</li>
<li>
<span class="event-date"
>29 <br />
April
</span>
Lorem Ipsum is simply dummy text of the
printing and typesetting
industry.
</li>
</ul>
</div>
</div>

<div class="event" id="notice">


<h2 class="heading">Notice Boards</h2>
<div>
<ul>
<li>
<img class="notice-board"
src="images/[Link]" /> Lorem Ipsum
is simply dummy text of the printing and
typesetting industry.
</li>
<li>
<img class="notice-board"
src="images/[Link]" /> Lorem Ipsum
is simply dummy text of the printing and
typesetting industry.
</li>
<li>
<img class="notice-board"
src="images/[Link]" /> Lorem Ipsum
is simply dummy text of the printing and
typesetting industry.
</li>
<li>
<img class="notice-board"
src="images/[Link]" /> Lorem Ipsum
is simply dummy text of the printing and
typesetting industry.
</li>
<li>
<img class="notice-board"
src="images/[Link]" /> Lorem Ipsum
is simply dummy text of the printing and
typesetting industry.
</li>
<li>
<img class="notice-board"
src="images/[Link]" /> Lorem Ipsum
is simply dummy text of the printing and
typesetting industry.
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="main-section award"


style="background: #f0f3fa">
<div class="container">
<div class="event">
<h2 class="heading">School Info</h2>
<div>
<h3>My HTML CODING SCHOOL</h3>
<!-- you have to fill this detail by yourself -->
<p><b>Principal : </b></p>
<p><b>Address : </b></p>
<p><b>City : </b>.</p>
<p><b>Contact No. : </b></p>
<p><b>Email Id : </b></p>
</div>
</div>
<div class="event">
<h2 class="heading">Our School Awards</h2>
<div>
<img src="images/[Link]" />
</div>
</div>
</div>
</div>

<div class="main-section gallery" id="gallery"


style="background: #f0f3fa">
<div class="container">
<h2 class="heading">Our School Gallery</h2>
<img src="images/[Link]" />
<img src="images/[Link]" />
<img src="images/[Link]" />
<img src="images/[Link]" />
<img src="images/[Link]" />
<img src="images/[Link]" />
<img src="images/[Link]" />
</div>
</div>

<div class="footer">
<div class="container">
<div class="footer-sect">
<img class="footer-logo" src="images/[Link]"
/>
</div>
<div class="footer-sect">
<a href="#">Home</a>
<a href="#events">Events</a>
<a href="#Campus-News">Campus News</a>
<a href="#notice">Notice Board</a>
<a href="#gallery">Gallery</a>
<a href="#contact">Contact us</a>
</div>
<div class="footer-sect" id="contact">
<img class="icons" src="images/[Link]" />
<img class="icons" src="images/[Link]" />
<img class="icons" src="images/[Link]" />
<img class="icons" src="images/[Link]" />
</div>
</div>
</div>
</body>
</html>
[write the css in new file page]
[Link] File:-
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html,
body {
font-family: Roboto, sans-serif, arial;
font-size: 16px;
color: #242424;
}
.container {
width: 1300px;
margin: 0px auto;
}
.main-section {
width: 100%;
float: left;
padding: 70px 0px 70px 0px;
}
.heading {
font-size: 28px;
font-weight: 500;
border-bottom: 1px solid #a07d1d;
margin-bottom: 20px;
color: #a07d1d;
}

.header {
background: #a07d1d;
padding: 6px;
}
.header b {
background: #fff;
color: red;
padding: 10px;
font-size: 20px;
}
.header marquee {
font-size: 20px;
color: #ffffff;
width: 80%;
}

.logo {
height: 60px;
}
nav {
float: right;
padding: 25px 0px;
}
nav a {
color: black;
text-decoration: none;
font-size: 18px;
padding: 2px 10px;
font-weight: 500;
}

.slider img {
width: 100%;
}

.event {
width: 32%;
margin-right: 1%;
float: left;
background-color: #fff;
padding: 10px;
border-radius: 15px;
}
.event .heading {
border-bottom: 1px solid #a07d1d;
padding: 5px;
color: #fff;
background: #a07d1d;
text-align: center;
}
.event ul li {
margin-bottom: 20px;
width: 100%;
float: left;
list-style: none;
}
.event-date {
background: #a07d1d;
float: left;
text-align: center;
font-size: 14px;
color: #fff;
padding: 8px 12px;
margin-right: 10px;
}

.about-us div {
width: 55%;
float: left;
line-height: 30px;
font-size: 18px;
}
.about-us h4 {
font-size: 22px;
}
.about-us p {
line-height: 42px;
}
.about-us img {
width: 40%;
float: left;
}

.award p {
width: 100%;
float: left;
font-size: 16px;
}
.award img {
width: 100%;
}
.award b {
min-width: 115px;
float: left;
margin-bottom: 20px;
}
.award h3 {
font-size: 23px;
margin-bottom: 20px;
text-align: center;
}

.testimonial {
width: 30.5%;
float: left;
margin-right: 2.5%;
}
.testimonial-text {
background: #a07d1d;
padding: 20px;
line-height: 35px;
border-radius: 10px;
color: #fff;
font-size: 18px;
text-align: center;
}
.testimonial-detail {
float: left;
margin-top: 10px;
}
.testimonial-img {
float: left;
}
.testimonial-img img {
border-radius: 50%;
}
.testimonial-name {
margin-left: 10px;
float: left;
}
.testimonial-name h5 {
font-size: 18px;
margin-top: 8px;
}

.gallery img {
width: 24%;
}

.footer {
background-color: #a07d1d;
padding: 20px 0px;
width: 100%;
float: left;
}
.footer-logo {
width: 10%;
border-radius: 15px;
}
.footer-sect {
width: 100%;
float: left;
text-align: center;
margin-top: 20px;
}
.footer-sect a {
color: white;
margin-left: 10px;
text-decoration: none;
}

.new-logo {
padding-top: 10px;
width: 50px;
}
.notice-board {
width: 22px;
height: 20px;
}
.icons {
width: 50px;
}

{you don’t need to write this in your file this


is only for your reference.}

Images Folder:

You might also like