Scribd
Upload
32 views8 pages

CSS3 Tags.: Name: Vijeta Roll-No.:55 Assignment 2: Design A Web Page To Demonstrate The Use of

The document contains code for a student homework tracking website. It includes HTML code for the homepage with sections for the header, navigation menu, homepage content and about page. It also includes CSS code for styling elements like the navigation menu, columns, and pages. The homepage allows students to view assigned homework and teachers to track student assignments. Key features highlighted are saving time, improving accountability and engaging teachers.

Uploaded by

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

CSS3 Tags.: Name: Vijeta Roll-No.:55 Assignment 2: Design A Web Page To Demonstrate The Use of

The document contains code for a student homework tracking website. It includes HTML code for the homepage with sections for the header, navigation menu, homepage content and about page. It also includes CSS code for styling elements like the navigation menu, columns, and pages. The homepage allows students to view assigned homework and teachers to track student assignments. Key features highlighted are saving time, improving accountability and engaging teachers.

Uploaded by

Vijeta Shukla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Name: Vijeta

Roll-No.:55
Assignment 2: Design a web page to demonstrate the use of
CSS3 tags.

HomePage.html

<html>
<head>
<title>HomeWorkTrak</title>
<link rel="stylesheet" href="home.css">
</head>
<body>
<!-- Header 1 -->
<header class="main" id="home" style="background-color:cadetblue;
padding:20px;">
<p style="color:white;margin-right:10px;display: inline-block;">&#128222;
+2089342098</p>
<p style="color:white;margin-right:10px;display: inline-block;"> &#128233;
[email protected]</p>
<div style="float: right;display: inline-block;color: #f2f2f2;text-align:
center;padding: 14px 16px;margin-right:10px;">
<div class="container"; onclick="openNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="login.html" style="color: white;margin-right:10px;display: inline-


block;text-decoration:none">LOGIN&nbsp; | </a>
<a href="" style="color: white;margin-right:50px;display: inline-block;text-
decoration:none">REGISTER</a>
<div id="mySidepanel" class="sidepanel">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#home">Home</a>
<a href="#sec1">About</a>
<a href="#">HomeWork</a>
<a href="#">Class</a>
<a href="teacher.html">Teacher</a>
<a href="student.html">Student</a>
</div>
</header>
<!-- header 2-->
<header style="background-color:#ffff99; padding:10px;">
<img src="h6.png" style="width:20%;">

</header>
<!-- Container -->
<section>
<article style="background-color: black; height:350px;">
<!-- home -->
<div class="container">
<img src="b.png" style="width:100%;">
<div class="content">
<h1><big><big>The Best Way to Manage Homework</big></big></h1>
<p>Simple HomeWork Mangement for every Teacher.</p>
<p>Helping Your Studens, Helping Yourself.</p>
<br><br><br>&nbsp;
<h1><big><big>Enjoy Learning</big></big></h1>
</div>
</div>
<!-- about us -->
<div class="main" id="sec1">
<br><img src="c.png" style="display: block;margin-left: auto;margin-right:
auto; width: 2%;">
<h1><big><big><center>HomeWorkTrak</center></big></big></h1>
<p align="center" style="font-size:19px;"><b>At HomeWorkTrak, we're
passionate about helping kids do better at school and believe that educational
tools
should be simple and easy to use.</b></p>
<div class="row">
<div class="column">
<h2>Save Time</h2>
<p>Posting homework only takes a few minutes a day and reduces your
administrative burden.</p>
</div>
<div class="column">
<h2>Improve Accountiblity</h2>
<p>Even your most disorganized students know "What Needs to Get Done"
and "When It's Due".</p>
</div>
<div class="column">
<h2>Engage Teachers</h2>
<p>Teachers can easily keep track of all their students homework in one
place so they can support learning at home.</p>
</div>
</div>
</div>
</article>
</section>
<script>
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}

</script>
</body>
</html>
HomePage.css

<style>
.container {
display: inline-block;
cursor: pointer;
}

.bar1, .bar2, .bar3 {


width: 35px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 0.4s;
}
.sidepanel {
width: 0;
position: fixed;
height: 400px;
top: 0;
right: 0;
background-color: #737373;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
*{
box-sizing: border-box;
}

body {
font-family: Arial;
font-size: 17px;
}

.container {
position: relative;
max-width: 800px;
margin: 0 auto;
}

.container img {vertical-align: middle;}

.container .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity
*/
color: #f1f1f1;
width: 100%;
padding: 23px;
}

.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s;
}

.sidepanel a:hover {
color: #00ffff;
}

.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
html {
scroll-behavior: smooth;
}
.openbtn:hover {
background-color:#444;
}
*{
box-sizing: border-box;
}
#sec1 {
}
#teacher {
}

#home {
}
#register{
}

.column {
background-color:#80ffff;
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
background-color:#80ffff;
content: "";
display: table;
clear: both;
}
</style>

Output:

1. Home page

2. About page

3. Menu
4. Register Form

5. Login Form

You might also like