Commit c3979f30 authored by MOHIT P PATIL's avatar MOHIT P PATIL

Add lab02

parent 154c0f8f
[wall.jpg]
backuphash=49069
filters=warm=1;Soften=1,100.000000,15.204679;
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
body {
background-image: url("bg10.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.wrapper{
width: 1000px;
margin: 0 auto;
background-color:opaque;
}
h1 {
color: Red;
text-align: center;
}
p {
font-family: verdana;
font-size: 30px;
}
p {
font-family: "Times New Roman", Times, serif;
}
nav {
border: 2px solid black;
background-color: Black;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px
padding-left:20px;
word-spacing: 30px;
}
h2{
color: Red;
text-align: center;
}
\ No newline at end of file
This diff is collapsed.
<head>
<title>About Me</title>
<!--<link href="about.css" rel="stylesheet" type="text/css">-->
<link href="home.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<h3>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Gallants</a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html">Home</a></li>
<li><a href="aboutMe.html">AboutMe</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">TimeTable</a></li>
<li><a href="contact.html">ContactMe</a></li>
<li><a href="form.html">ValidationForm</a></li>
</ul>
</div>
</nav>
</h3>
<div >
<h1>
<strong>
Hello!<br>
Welcome to my page
</strong>
</h1>
</div>
<div class="wrapper">
<p>
Hello guys! I am Fenil Vanvi. I am from CSE Department, IIT Bombay.<br>
I am in 2nd year. I am pursuing minor in Electrical Department.<br>
This is my favourite song (^_^) <br><br><br>
<iframe
width="640" height="360" src="https://www.youtube.com/embed/bM7SZ5SBzyY" frameborder="0" allowfullscreen>
</iframe>
</p>
</div>
</body>
</html>
\ No newline at end of file
.panel{
color: black;
padding: 10px;
width: 90%;
border-style: solid;
border-color: blue;
text-align: left;
font-size: 15px;
}
.accordion.active, .accordion:hover {
background-color: Black;
}
.panel {
padding: 0 18px;
background-color: white;
}
.panel.show {
display: block !important;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Pokemons</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
body{
background-image: url("pok.jpg");
opacity: 0.99;
background-repeat: no-repeat;
background-size: 100% 200%;
}
button.accordion{
color: black;
padding: 5px;
width: 100%;
border-style: solid;
border-color: blue;
text-align: center;
font-size: 25px;
}
button.accordion.active, button.accordion:hover {
background-color: blue;
}
div.panel {
background-image: url("wall.jpg");
max-height: 0;
overflow: hidden;
transition: 0.3s ease-in-out;
background-color: lightblue;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 500px;
}
</style>
</head>
-
<body>
<h1>
<strong><bold>Pokemons</bold></strong>
</h1>
<style>
h1{
font-size: 40px;
text-align: center;
color: red;
}
</style>
<div class="wrapper">
<button class="accordion"><strong>Pikachu</strong></button>
<div class="panel">
<h2>
<div class="container">
<img src="pikachu.gif" alt="pikachu" style="width:250px;height:150px;">
<br>
<button type="button" class="btn btn-success"> </button>
Type:Electric<br>
<button type="button" class="btn btn-failure"> </button>
Final Evolution State:Raichu<br>
<button type="button" class="btn btn-info"> </button>
Common Attacks:<br>Electric Ball<br>ThunderPunch<br>Thunderbolt<br>Nuzzle<br>
</div>
</h2>
</div>
<button class="accordion"><strong>Bulbasaur</strong></button>
<div class="panel">
<h2>
<div class="container">
<img src="bulbasaur.gif" alt="bulbasaur" style="width:250px;height:150px;">
<br>
<button type="button" class="btn btn-success"> </button>
Type:Grass<br>
<button type="button" class="btn btn-failure"> </button>
Final Evolution State:Venusaur<br>
<button type="button" class="btn btn-info"> </button>
Common Attacks:<br>Leech Seed<br>Seed Bomb<br>Razor Leaf<br>Vine Whip<br>
</div>
</h2>
</div>
<button class="accordion"><strong>Squirtle</strong></button>
<div class="panel">
<h2>
<div class="container">
<img src="squirtle.gif" alt="squirtle" style="width:250px;height:150px;">
<br>
<button type="button" class="btn btn-success"> </button>
Type:Water<br>
<button type="button" class="btn btn-failure"> </button>
Final Evolution State:Blastoise<br>
<button type="button" class="btn btn-info"> </button>
Common Attacks:<br>Water gun<br>Bubble<br>Water pulse<br>Aqua Tail<br>
</div>
</h2>
</div>
<button class="accordion"><strong>Charmander</strong></button>
<div class="panel">
<h2>
<div class="container">
<img src="charmander.gif" alt="charmander" style="width:250px;height:150px;">
<br>
<button type="button" class="btn btn-success"> </button>
Type:Fire<br>
<button type="button" class="btn btn-failure"> </button>
Final Evolution State:Charizard<br>
<button type="button" class="btn btn-info"> </button>
Common Attacks:<br>Ember<br>Fire Fang<br>Inferno<br>Fire Spin<br>
</div>
</h2>
</div>
<style>
h2{
text-align: center;
}
</style>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++)
{
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
</body>
</html>
\ No newline at end of file
<html>
<head>
<title>Gallants</title>
<link href="home.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<h3>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Gallants</a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html">Home</a></li>
<li><a href="aboutMe.html">AboutMe</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">TimeTable</a></li>
<li><a href="contact.html">ContactMe</a></li>
<li><a href="form.html">ValidationForm</a></li>
</ul>
</div>
</nav>
</h3>
<div class="wrapper">
<style>
p{
color:brown;
}
</style>
<p>
My contact number is 8875624105.<br>
You can also contact me through email. My email address is : <br>
fenilvanvi@gmail.com <img src="bg7.png" alt="logo" height="50" width="50"><br><br>
You can also contact me through facebook.
<img src="bg8.png" alt="logo" height="50" width="50"><br><br>
You can follow me on my twitter handle
<img src="bg9.png" alt="logo" height="50" width="50">
</p>
<p>
<img src="fenil.jpg" class="img-circle" alt="logo" height="300" width="300"><br>
&#x092B&#x0947&#x0928&#x093F&#x0932 &#x0935&#x093E&#x0923&#x0935&#x0940
</p>
</div>
<div>
</div>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.querySelector("#text").value;
if(x=="" || x==null){
alert("Enter the name");
return false;
}
var str = x;
var n = str.length;
if((n < 5)||(n > 50)){
alert("Length of the name must be between 6 and 50");
return false;
}
var y = document.querySelector("#pass").value;
if(y == "" || y == null){
alert("Enter the password");
return false;
}
var str = y;
var m = str.length;
if((m < 8)||(m > 20)){
alert("Length of the password must be between 8 and 20");
return false;
}
var iChars = "!$_@";
var z = document.querySelector("#pass").value;
var k=false;
for (var i = 0; i < z.length ; i++) {
if (iChars.indexOf(z.charAt(i)) != -1) {
k=true;
}
}
if(k == false){
alert ("The password should contain only '$!@_' as special characters");
return false;
}
var kChars = ",_";
var r=document.querySelector("#email").value;
var q=false;
for ( var t = 0; t < r.length ; t++) {
if (kChars.indexOf(r.charAt(t)) != -1) {
q=true;
}
}
if(q == false){
alert ("The local part should contain only ','and'_' as special characters");
return false;
}
if(r=="" || r==null){
alert("Enter the email");
return false;
}
var l=0;
var j;
for( j=0; j<r.length; j++){
if(r.charAt(j) == '@'){ break; }
l++;
}
if(l<=2){
alert("Length of the local part must be more than 2");
return false;
}
var jChars = "!@#$%^&*()+=-[]\\\';,/{}|\":<>?1234567890";
var o;
var k=false;
for (o =j+1; o < r.length ; o++) {
if (jChars.indexOf(r.charAt(o)) != -1) {
k=true;
}
}
if(k == true){
alert ("Only alphabetical characters and '.' to be used in the domain part");
return false;
}
var c;
var a=false;
for(c=j+1; c<r.length; c++){
if(r.charAt(c) == '.'){
a=true;
}
}
if(a == false){
alert("Email incorrect:No '.' used in the domain part");
return false;
}
var d;
var e=0;
for( d=j+1; d<r.length; d++){
if(r.charAt(d) == '.'){ break; }
e++;
}
if(e<3){
alert("Length of the domain part before the first '.' must be more than 2");
return false;
}
var g;
var h=0;
for( g=d+1; g<r.length; g++){
if(r.charAt(g) == '.'){ break; }
h++;
}
if(h<2){
alert("Length of the substring between two '.' must be more than 1");
return false;
}
if(x.charAt(0) == '<'){
var w = check(document.querySelector("#text").value);
document.querySelector("#text").value = w;
alert(document.querySelector("#text").value);
}
function check(x){
x=x.replace(/>/g,"&gt;");
x=x.replace(/</g,"&lt;");
return x;
}
}
</script>
<title>Validation Form</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
<style>
nav {
border: 2px solid black;
background-color: Black;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px
padding-left:20px;
word-spacing: 30px;
}
h1{
text-align: center;
font-family: verdana;
font-size: 45px;
}
body{
background-image: url("wall.jpg");
opacity: 0.99;
background-repeat: no-repeat;
background-size: 100% 200%;
}
img{
margin: auto;
position: absolute;
top:10;
left: 0px;
right: 60px;
}
h5{
position: absolute;
text-align: center;
size:35px;
top:210px;
right:190px;
left:150px;
}
</style>
</head>
<body>
<h3>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Gallants</a>
</div>
<ul class="nav navbar-nav">
<li><a href="home.html">Home</a></li>
<li><a href="aboutMe.html">AboutMe</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">TimeTable</a></li>
<li><a href="contact.html">ContactMe</a></li>
<li><a href="form.html">ValidationForm</a></li>
</ul>
</div>
</nav>
</h3>
<form name="ValidationForm" action="https://www.cse.iitb.ac.in/~sharat/php/example/form.php"
onsubmit="return validateForm()" method="post">
<img src="logo.png" class="img-circle" alt="logo" height="120" width="120" ><h5>Indian Institute of Technology, Bombay</h5>
<h4><br><br>
<div class="wrapper">
<div class="container"><br><br><br><br>
<h1><strong>Validation form</strong></h1><br><br><br>
<!--<form role="form">-->
<div class="form-group">
<button type="button" class="btn btn-success"> </button>
<label for="Username">Name:</label>
<input type="text" class="form-control" name="text" placeholder="6-50 characters">
</div>
<div class="form-group">
<button type="button" class="btn btn-failure"> </button>
<label for="pwd">Password:</label>
<input type="password" class="form-control" name="pass" placeholder="8-20 characters" >
</div>
<div class="form-group">
<button type="button" class="btn btn-info"> </button>
<label for="email">Email:</label>
<input type="email" class="form-control" name ="email" placeholder="Enter email">
</div>
<input type="submit" value="Submit">
</div>
</div>
</h4>
</form>
</body>
</html>
\ No newline at end of file
body {
background-image: url("wall1.jpg");
opacity: 20;
background-repeat: no-repeat;
background-size: 100% 120%;
}
.wrapper{
width: 1000px;
margin: 0 auto;
background-color:opaque ;
}
u{
font-size:0px;
color: Blue;
}
h1 {
color: red;
text-align: center;
}
p {
font-family: verdana;
font-size: 30px;
text-align: center;
color: red;
}
p {
font-family: "Times New Roman", Times, serif;
}
nav {
border: 2px solid black;
background-color: Black;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px
padding-left:20px;
word-spacing: 30px;
}
h2{
color: Red;
text-align: center;
}
.container{
position: relative;
font-style: verdana;
font-size: 30px;
}
r{
font-size: 40px;
color: red;
}
q{
font-size: 35px;
color: Brown;
}
h3{
text-align: center;
}
<head>
<title>Gallants</title>
<link href="home.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->