Scribd
Upload
30 views19 pages

Weblab

Uploaded by

rakesh.kumar.mtcs.2022
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
30 views19 pages

Weblab

Uploaded by

rakesh.kumar.mtcs.2022
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/ 19

➢ Home Page:

1
Assignment-1
Home Page:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<title>Home Page</title>
</head>
<header>
<div class="AB">
<div class="A"><img src="logo.jpg"></div>
<div class="B"><h3>GP Groups of Companies</br>
MIRZAPUR
</h3></div>
</div>
</header>
<body>
<div>
<div class="line">
<div class="abcde">
<div class="a"><a href="home.html" >Home</a></div>
<div class="b"><a href="login.html">Login</a></div>
<div class="c"><a href="registration.html">Registration</a></div>
<div class="d"><a href="catalogue.html">Catalogue</a></div>
<div class="e"><a href="cart.html">Cart</a></div>
</div>

2
</div>
<div class="xy">
<div class="X">
<p>
CSE </BR>
ME</BR>
EE</BR>
ECE</BR>
IT</BR>
</p>
</div>
<div class="Y">
<h4>GP Groups of Companies</h4>
<h5>Established:20__</h5><p>our company has built a strong reputation for their
quality, innovation and quality service.</p>

</div>
</div>
</div>
</body>
</html>

3
➢ Login Page:

4
Assignment-2
Login Page:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<title>Home Page</title>
</head>
<header>
<div class="AB">
<div class="A"><img src="logo.jpg"></div>
<div class="B"><h3>GP Groups of Companies</br>
MIRZAPUR
</h3></div>
</div>
</header>
<body>
<div>
<div class="line">
<div class="abcde">
<div class="a"><a href="home.html" >Home</a></div>
<div class="b"><a href="login.html">Login</a></div>
<div class="c"><a href="registration.html">Registration</a></div>
<div class="d"><a href="catalogue.html">Catalogue</a></div>
<div class="e"><a href="cart.html">Cart</a></div>
</div>

5
</div>
<div class="xy">
<div class="X">
<p>
CSE <br/>
ME<br/>
EE<br/>
ECE<br/>
IT<br/>
</p>
</div>
<div class="Y">
<h4>Login Page</h4>
<input type="text" name="text" placeholder="User Name"/><br/>
<input type="password" name="password" placeholder="Passwords" required
/><br/>
<input type="submit" value="submit" />
<input type="reset" value="reset"/>
</div>
</div>
</div>
</body>
</html>

6
➢ Registration Page:

7
Assignment-3
Registration Page:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<title>Home Page</title>
</head>
<header>
<div class="AB">
<div class="A"><img src="logo.jpg"></div>
<div class="B"><h3>GP Groups of Companies<br/>
MIRZAPUR
</h3></div>
</div>
</header>
<body>
<div class="line">
<div class="abcde">
<div class="a"><a href="home.html" >Home</a></div>
<div class="b"><a href="login.html">Login</a></div>
<div class="c"><a href="registration.html">Registration</a></div>
<div class="d"><a href="catalogue.html">Catalogue</a></div>
<div class="e"><a href="cart.html">Cart</a></div>
</div>
</div>

8
<h2>Registration Page:</h2>
<form>
<label for="name">Name:
<input type="text" name="Name" placeholder="Enter Your Name"/>
</label>
<br/>
<label for="password">Password:
<input type="password" name="password" placeholder="Passwords" />
</label><br/>
<label for="email">Email:
<input type="email" name="email" placeholder="Enter Your Email" />
</label><br/>
<label for="Phone Number">Phone Number:
<input type="text" name="number" placeholder="Enter Your Number"/>
</label><br/>
<label for="sex">Sex:
<input type="radio" name="sex" value="male" />Male
<input type="radio" name="sex" value="female"/>Female
</label><br/>
<p>Date Of Birth:</p>
<label for="day">Day:</label>
<input type="number" name="day" min="1" max="31" required />
<label for="month">Month:
</label>
<select>
<option>-Select-</option>
<option>January(01)</option>
<option>February(02)</option>
<option>March(03)</option>
<option>April(04)</option>

9
<option>May(05)</option>
<option>June(06)</option>
<option>July(07)</option>
<option>August(08)</option>
<option>September(09)
</option>
<option>October(10)</option>
<option>November(11)</option>
<option>December(12)</option>
</select>
<label for="year">Year:</label>
<input type="number" name="year" min="1900" max="2050" required
/><br/><br/>
<label for="Language Known">Language Known:</label>
<input type="checkbox" value="English" name="English"/>
<label for="English">English</label>
<input type="checkbox" value="Telugu" name="Telugu"/>
<label for="Telugu">Telugu</label>
<input type="checkbox" value="Hindi" name="Hindi"/>
<label for="Hindi">Hindi</label>
<input type="checkbox" value="Tamil" name="Tamil"/>
<label for="Tamil">Tamil</label>
</p><br/>
<textarea name="address" rows="4" cols="50">
Enter Your Address...
</textarea>
</form>
</body>
</html>

10
➢ Catalogue Page:

11
Assignment-4
Catalogue Page:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<title>Home Page</title>
</head>
<header>
<div class="AB">
<div class="A"><img src="logo.jpg"></div>
<div class="B"><h3>GP Groups of Companies<br/>
MIRZAPUR
</h3></div>
</div>
</header>
<body>
<div class="container">
<div class="row1">
<div class="colss"><a href="home.html" >Home</a><hr class="custom-hr"/>
<div class="row2">
<div class="cols">Law</div><hr class="custom-hr"/>
<div class="cols">Politices</div><hr class="custom-hr"/>
<div class="cols">Engenieering</div><hr class="custom-hr"/>
<div class="cols">History</div><hr class="custom-hr"/>
<div class="cols">Geography</div>

12
</div>
</div>
<div class="colss"><a href="login.html">Login</a><hr class="custom-hr"/>
<div class="row2">
<div class="cols"><img src="LAW.jpg"/></div><hr class="custom-hr"/>
<div class="cols"><img src="politices.jpg"/></div><hr class="custom-hr"/>
<div class="cols"><img src="ENG.jpg" /></div><hr class="custom-hr"/>
<div class="cols"><img src="history.jpg" /></div><hr class="custom-hr"/>
<div class="cols"><img src="GEOGRAPHY.jpg" /></div>
</div></div>
<div class="colss"><a href="registration.html">Registration</a><hr class="custom-
hr"/>
<div class="row2">
<div class="cols">THE LAW BOOK</div><hr class="custom-hr"/>
<div class="cols">THE PRICE OF POLITICES</div><hr class="custom-hr"/>
<div class="cols">ENGINEERING MATHEMATICES</div><hr class="custom-
hr"/>
<div class="cols">INDIAN HISTORY</div><hr class="custom-hr"/>
<div class="cols">GEOGRAPHY</div>
</div></div>
<div class="colss"><a href="catalogue.html">Catalogue</a><hr class="custom-hr"/>
<div class="row2">
<div class="cols">INR 569</div><hr class="custom-hr"/>
<div class="cols">INR 239</div><hr class="custom-hr"/>
<div class="cols">INR 459</div><hr class="custom-hr"/>
<div class="cols">INR 699</div><hr class="custom-hr"/>
<div class="cols">INR 719</div>
</div></div>
<div class="colss"><a href="cart.html">Cart</a><hr class="custom-hr"/>
<div class="row2">

13
<div class="btn"><button>Add To Cart</button></div><hr class="custom-hr"/>
<div class="btn"><button>Add To Cart</button></div><hr class="custom-hr"/>
<div class="btn"><button>Add To Cart</button></div><hr class="custom-hr"/>
<div class="btn"><button>Add To Cart</button></div><hr class="custom-hr"/>
<div class="btn"><button>Add To Cart</button></div>
</div></div>
</div>
<br/>
</div>
</body>
</html>

14
➢ Cart Page:

15
Assignment-5
Cart Page:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
<title>Home Page</title>
</head>
<header>
<div class="AB">
<div class="A"><img src="logo.jpg"></div>
<div class="B"><h3>GP Groups of Companies</br>
MIRZAPUR
</h3></div>
</div>
</header>
<body>
<div class="line">
<div class="abcde">
<div class="a"><a href="home.html" >Home</a></div>
<div class="b"><a href="login.html">Login</a></div>
<div class="c"><a href="registration.html">Registration</a></div>
<div class="d"><a href="catalogue.html">Catalogue</a></div>
<div class="e"><a href="cart.html">Cart</a></div>
</div>
</div>

16
<table>
<thead>
<tr>
<th>CSE</th>
<th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th>ME</th>
<td>Engg. Mathematices</td>
<td>INR 569</td>
<td>2</td>
<td>INR 1,138</td>
</tr>
<tr>
<th>EE</th>
<td>Indian History</td>
<td>INR 239</td>
<td>3</td>
<td>INR 717</td>
</tr><tr><th>ECE</th><td>Total Amount</td><td>INR 1,855</td>
<td></td><td></td></tr>
</tbody>
</table>
</body>
</html>

17
❖ CSS CODE:

body{
border: 1px solid rgb(0, 0, 0);
text-decoration: none;
text-align: center;
background-color: rgb(255, 255, 255);
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.AB{
border: 1px solid black;
display: flex;
}

img{
height: 100px;
}
.A{
width: 33%;
text-align: center;

}
.B{
width: 66%;
}
.abcde{
border: 1px solid black;
padding: 10px;
display: flex;
}
.a,.b,.c,.d,.e{
width: 19%;
text-decoration: none;
text-align: center;
}

.xy{

display: flex;
}
.X{
width: 33%;
}

18
.Y{
width: 66%;
}

.row1{
display: flex;
border: 1px solid black;

}
.colss{
width: 300px;
text-align: center;
border: 1px solid black;
text-decoration: none;

.cols{
display: flex;
justify-content: flex-start;
height: 150px;
}
.btn{
align-items: center;
padding-top: 127px;
}
.custom-hr{
border: 1px solid black;
}
.reg{

justify-content:left;
}
form{
text-align: center;
display:inline-table;
padding-inline-start: 2px;
}
table,td,th {
border: 1px solid black;
justify-content: flex-start;
width: 610px;
}

19

You might also like