Scribd
Upload
12 views4 pages

Anurag 5

WEB DESIGNING ASSIGNMENT BTECH

Uploaded by

Anurag Gond
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
12 views4 pages

Anurag 5

WEB DESIGNING ASSIGNMENT BTECH

Uploaded by

Anurag Gond
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
You are on page 1/ 4

1|Page

Experiment No.:- 5
Object:- To Design the Registration page of static web page required for an
online book store website.
HTML Part:-
<!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>ITM College Online Book Store</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="registration.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/6.4.2/css/
all.min.css" integrity="sha512-
z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKx
Lhei6S9CQ XFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-
referrer" /> </head>
<body>
<div class="header">
<img src="images/logo.jpg" alt="Logo">
<div class="clg_name">
<h1>INSTITUTE OF TECHNOLOGY AND MANAGEMENT</h1>
<p>Approved by AICTE, PCI, New Delhi affiliated by A.K.T.U
Lucknow</p> </div>
<div class="btn">
<button><a href="read.html">Read Some Free Books</a></button>
</div>
</div>
<div class="nav_bar">
<ul>
<li><a href="index.html"><i class="fa-solid fa-house-user"></i> Home</a> </li>
<li><a href="login.html"><i class="fa-solid fa-right-to-bracket"></i> Login</a></li>
<li><a class="active" href="registration.html"><i class="fa-solid fa-address-card"></i>
Registration</a></li>
<li><a href="catalogue.html"><i class="fa-solid fa-book-open-reader"></i>
Catalogue</a></li>
<li><a href="cart.html"><i class="fa-solid fa-cart-arrow-down"></i> Cart</a></li>
</ul>
</div>
<!-- Hero Section -->
<div class="content">
<div class="dept">
<h1>See Books according to your Departments</h1>
<ul>

<li ="ASH.html">Applied Science</a></li>


<li><a href="CSE. ><a href html">Computer Science Engineering</a></li>

ANURAG GOND 2301201540013CSE(DS)2nd yr


2|Page

<li><a href="ECE.html">Electronics Engineering</a></li>


<li><a href="ME.html">Mechanical Engineering</a></li>
<li><a href="CE.html">Civil Engineering</a></li>
</ul>
</div>
<div class="desc">
<h1>Register Yourself</h1>
<p>Welcome to the college online bookstore! Register to explore a world of books
tailored to your needs. Unlock exclusive offers and convenient shopping. Join us today!
</p>
<form action="#" class="registration">
<div class="reg">
<b>Name: </b> <input type="text" placeholder="Enter your Name">
<span id="username" class="alert"></span>
</div>
<div class="reg">
<b>Password: </b> <input type="password placeholder="Create Password">
</div>
<div class="reg">
<b>E-mail </b> <input type="text" placeholder="Enter your E-mail ID">
</div>
<div class="reg">
<b>Phone Number </b> <input type="text" placeholder="Enter your Phone
Number">
</div>
<div class="reg">
<b>Sex </b>
<input type="radio" value="1" name="gen"><h4>Male</h4>
<input type="radio" value="2" name="gen"><h4>Female</h4>
</div>
<div class="reg">
<b>Date of Birth </b>
<input type="date" name="dob" id="DOB">
</div>
<div class="reg">
<b>Languages Known </b>
<div class="languages">
<div><input type="checkbox" name="lang">English</div>
<div><input type="checkbox" name="lang">Hindi</div>
<div><input type="checkbox" name="lang">Telugu</div>
<div><input type="checkbox" name="lang">Tamil</div>
</div>
</div>
<div class="reg">
<b>Address: </b> <input type="text" placeholder="Enter your Address">
</div>
<div class="btn_reg">
<input class="btnn" type="submit" name="submit" value="Submit" id="submit">
<input class="btnn" type="reset" name="reset" value="Reset" id="submit">
</div>

ANURAG GOND 2301201540013CSE(DS)2nd yr


3|Page

</form>
</div>
</div>
</body>
</html>
CSS
Part:-
body{
background-image: linear-gradient(rgba(9, 5, 54,0.3),rgba(5, 4, 46,
0.7)), url("images/reg_bg.webp"); background-size: cover;
background-repeat: repeat-y; height: 150vh;
}
.nav_bar ul li{
background-color: rgb(13, 13,
197); padding: 8px 15px;
border: none; border-radius:
5px; margin-top: 110px;
}
.registration{ displ
ay: flex; flex-
direction: column;
background-color: rgba(0, 255, 255,
0.377); border-radius: 10px; padding:
15px;
margin-top: 0.5rem;
}
.reg{ display: flex;
align-items: center;
justify-content:
center; height:
20vh; margin:
35px; width:
40vw; border: 1px
solid #fff;
border-radius: 6px;
}
.registration b{ font-
size: 1.4rem;
color: rgb(49, 5, 5);
}
.registration
input{ paddin
g: 5px; margin
left: 10px;
border radius:
4px; color:
#000; } .alert{
color: red;
font size:
1.3rem; font
weight: 700;

ANURAG GOND 2301201540013CSE(DS)2nd yr


4|Page

}
.btn_reg{
display:
flex;
align
items:
center
;
justify
content:
center;
}
.btnn{ margin: 48px;
height: 8vh; width: 15vw;
font size: 1.2rem; font
weight: 900; border radius:
6px; border: 3px solid
rgb(4, 5,
43); } .btnn:hover{ cursor:
pointer; transform:
scale(1.1); } languages{
display: flex;
flex direction:
column;
}

ANURAG GOND 2301201540013CSE(DS)2nd yr

You might also like