Login page
RESULT
USE DIV & CLASS
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.main{
width:100%;
height:auto;
margin:20px;
padding:10px;
background-image:url("");
}
.box{float:left;
width:200;
height:450;
margin:10px;
border:2px solid green;
margin:13px;
padding:10px;
justify:space-around;
}
.after-box{border:1px solid black;
}
</style>
</head>
<body>
<div class="main">
<div class="box"><img src="salmon.jpg"width="200" height="300">
<h3>Salmon For Your Skin</h3>
<p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum. </p>
</div>
<div class="box"><img src="croissant.jpg"width="200" height="300">
<h3>Le French</h3>
<p> Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="box"><img src="cherries.jpg"width="200" height="300">
<h3>Cherries, interrupted</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.
What else? </p>
</div>
<div class="box"><img src="popsicle.jpg" width="200" height="300">
<h3> All I Need Is a Popsicle</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="box"><img src="sandwich.jpg" width="200" height="300">
<h3> The Perfect Sandwich, A Real NYC Classic</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE
html>
<html><title>login
page</title>
<head>
<style type="text/css">
body{
background-image: url(lo.jpg);
background-size: cover;
}
#aa {width: 300px;
height: 250px;
background-color: rgba(0,0,0,0.2);
margin:0 auto;
margin-top: 60px;
padding-top: 10px;
padding-left: 30px;
border-radius: 15px;
-webkit-border-radius:15px;
color: white;
font-weight: bolder;
}
#aa input[type="text"]{
width: 200px;
height: 35px;
border: 0;
border-radius: 5px;
padding-left: 5px;
}
#aa input[type="password"]{
width: 200px;
height: 35px;
border: 0;
border-radius: 5px;
padding-left: 5px;
}
#aa input[type="submit"]{
width: 100px;
height: 40px;
border: 0;
border-radius: 6px;
curser: pointer;
background:;
padding: 5px;
margin-left: 50px;
transition: all 5s;
}
h2{padding-left: 50px;
font-weight: bold;
color: white;}
h2:hover{
color:blue;
transition: all 5s;
}
.sub:hover{
background: red;
color: yellow;
transition: all 60s;
}
</style>
</head>
<body>
<body>
<div id="aa">
<h2>Login Page</h2>
<form >
<tr>
<td>
<input type="text" placeholder="input
username...........">
<br><br><br>
</td>
<input type="password"
placeholder="input password............">
<br><br>
<input type="submit"
button="login" class="sub"><br>
</form>
</div>
</body>
</html>
RESULT
USE DIV & CLASS
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.main{
width:100%;
height:auto;
margin:20px;
padding:10px;
background-image:url("");
}
.box{float:left;
width:200;
height:450;
margin:10px;
border:2px solid green;
margin:13px;
padding:10px;
justify:space-around;
}
.after-box{border:1px solid black;
}
</style>
</head>
<body>
<div class="main">
<div class="box"><img src="salmon.jpg"width="200" height="300">
<h3>Salmon For Your Skin</h3>
<p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum. </p>
</div>
<div class="box"><img src="croissant.jpg"width="200" height="300">
<h3>Le French</h3>
<p> Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="box"><img src="cherries.jpg"width="200" height="300">
<h3>Cherries, interrupted</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.
What else? </p>
</div>
<div class="box"><img src="popsicle.jpg" width="200" height="300">
<h3> All I Need Is a Popsicle</h3>
<p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
<div class="box"><img src="sandwich.jpg" width="200" height="300">
<h3> The Perfect Sandwich, A Real NYC Classic</h3>
<p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
</div>
</div>
</body>
</html>
No comments:
Post a Comment