Scribd
Upload
7 views10 pages

6th (1) Web

The document outlines several HTML templates for login and registration pages using Bootstrap components, ensuring responsiveness and visual appeal. It includes templates for student, admin, and general user logins, as well as a registration form, all featuring validation scripts and styled backgrounds. The use of Bootstrap enhances the layout and design, making the pages mobile-friendly.

Uploaded by

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

6th (1) Web

The document outlines several HTML templates for login and registration pages using Bootstrap components, ensuring responsiveness and visual appeal. It includes templates for student, admin, and general user logins, as well as a registration form, all featuring validation scripts and styled backgrounds. The use of Bootstrap enhances the layout and design, making the pages mobile-friendly.

Uploaded by

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

Experiment 6:-

Make the static pages Responsive and attractive using Bootstrap components
(***Mobile View)
Bootstrap Login
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
<style >
h1{
font-size: 35px;
}
body{
background-image: url("https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcRYm3W_9smTcgJQ9kCQpJ_Pjp38nItNW5VmLA&usqp=CA
U");
background-repeat:no-repeat;
background-size:100%,100%;
text-align: center;
color: lavender;
font-size: 23px;
padding-top: 50px;
}
form{
text-align: center;
color:maroon;
padding-top:50px;
}
button{
font-size:18px;
color:red;
}
}
</style>
<div class="container"><!DOCTYPE html><body>
<h1>RESULTS </h1>
<form>

JNTU No : <input type="text" name="jntu no."><br><br>


PASSWORD:<input type="text" name="password"><br><br>

</form>
<BUTTON >Search</BUTTON>

</body>
</div>
</nav>
...

</head>
</html>
Output

Bootstrap Admin Login


<!DOCTYPE html>
<html lang="en">
<title>Bootstrap Admin</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
<style>
body
{
background-image:url("https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcSPV-hinrPj9YmgulS-kFrupN3v7AZK0foy9w&usqp=CAU");
background-size:cover;

}
</style>
</head>
<body>

<div class="container">
<h2><center>Admin Login</center></h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email";>Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter
email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd"
placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember
me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>

</body>
</html>
Bootstrap Student Login
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student login</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
<style >
body{
background-image:url("https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQ6s8ysJM_UrEpz8QLlPDQOUgzpUXa4T5OGrw&usqp=CAU
");
background-repeat:no-repeat;
background-size:100%,100%;
}
form{
color:black;
text-align: center;
font-size: 30px;
padding-top: 80px;
padding-right: 100px;
font-style: oblique;
}
h1{
font-size: 20px;
}
button{
font-size: 30px;
}

</style>

<div class="container-fluid">
<script>
function validateform(){
var name=document.demo.name.value;
var password=document.demo.password.value;

if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<8){
alert("Password must be at least 8 characters long.");
return false;
}
}
</script>
<body>

<form name="demo" onsubmit="return validateform()" >


Name: <input type="text" name="name"><br/> <br/>
Password: <input type="password" name="password"><br/><br/>
<h1>CREATE NEW ACCOUNT <a href="sign up1.html"
style="color:red;">SIGN UP</a></h1>
<h1>ADMIN LOGIN<a href="sign up2.html"
style="color:BLUE;">LOGIN</a></h1>
<button>submit</button>
</form>
</body>
</div>
</nav>
...

</head>
</html>

Bootstrap Registration
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Registration</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></
script>
<style>
body{
background-image:url("https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcS8vNjv61QImVIoBw3H0-
kpM42wYdqHEoKN7Q&usqp=CAU");
background-repeat: no-repeat;
background-size: 100%,100%;
}
form{
text-align:center;
font-size:30px;
color:black;
font-style: italic;
}
h1{
color: MediumSeaGreen;
text-align: center;

}
</style>
</head>
<script >
function validateform(){
var firstname=document.demo.firstname.value;
var lastname=document.demo.lastname.value;
var firstpassword=document.demo.password1.value;
var secondpassword=document.demo.password2.value;
var college=document.demo.collegename.value;

if ( firstname=="" ) {
alert("firstname can't be blank");
return false;
}else if (lastname=="") {
alert("LASTNAME can't be blank");
return false;
}else if (firstpassword=="") {
alert("PASSWORD can't be blank");
return false;
}else if(firstpassword!=secondpassword){
alert("password must be same!");
return false;
} else if (college=="") {
alert("COLLEGENAME can't be blank");
return false;
}
}

</script>
<div class="container-fluid">
<body>
<h1>
REGISTRATION FOR ONLINE EXAMINATION</h1>
</body><BR><BR>
<form name="demo" onsubmit="return validateform()" ><i>
1.FIRST NAME:<input type="text" name="firstname"><br><br>
2.LAST NAME:<input type="text" name="lastname"><br><br>
3.PASSWORD:<input type="PASSWORD" name="password1"><br><br>
4.RE-ENTER:<input type="PASSWORD" name="password2"><br><br>
4.COLLEGE:<input type="text" name="collegename"><br><br>
5.EMAIL-ID:<input type="email" name="emailid"><br><br>
6.GENDER:<br>
<input type="radio" name="gender">Male
<br>
<input type="radio" name="gender">Female
<br>
<input type="radio" name="gender">Others
<br><br>
<input type="submit" value="submit">
<input type="reset" value="reset">
</i>
</form>
</div>
</head>
</html>
BootStrap Result
<html>
<marquee style="font-family:Lucida Calligraphy"><head><h2>!!!Result
Page!!!</head></marquee>

<style>
body
{
background-color:PaleVioletRed;
background-image:url(https://images.pexels.com/photos/1631677/pexels-
photo-1631677.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500) ;
background-repeat:no-repeat;
background-size:2000px 1000px
}
</style>
<body >
<form action="/action_page.php">
<center><strong><h2>Student ID</h2></strong></center></h2>
<label for="student id"></center>
<center><input type="text" placeholder="Enter Student Id" name="email"
id="email" required></center>
<label for=""psw"><center><h2>Password</h2></center>
<center><input type="password" placeholder="Enter Password" name="psw"
id="psw" required></center>
<p><center>By creating an account you agree to our <a href="#">Terms &
Privacy</a></center>
</p>
<center><button type="submit" class="Loginbtn">Login</center></button>
</body>
</html>

You might also like