SELECT MENU USING HTML AND CSS
<!DOCKTYPE html>
<html>
<head>
<style>
select{
width: 60%;
padding: 19px 30px;
border:5px solid red;
background-color: : mediumblue;
}
textarea{
width: 60%;
height:150px;
padding:12px 20px;
box-sizing: border-box;
border: 3px solid steelblue;
background-color:red;
font-size: 16px;
resize:none;
}
</style>
</head>
<body>
<h3>styled select meny</h3>
<form>
<select id="country" name="country">
<option value="nigeria">nigeria</option>
<option value="nigeria">italy</option>
<option value="nigeria">america</option>
<option value="nigeria">niger</option>
</select>
</form>
<h3>styling text area</h3>
<form>
<textarea>
some text ..
some text ..
some text ..
some text ..
some text ..
some text ..
some text ..
some text ..
some text ..
some text ..
some text ..
</textarea>
</form>
</body>
</html>
ANIMATION MADE WITH HTML AND CSS
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: mediumblue;
}
div {
width: 200px;
height: 150px;
background-color: steelblue;
position:relative;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count:3;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
@-webkit-keyframes example{
0%{background-color: steelblue; left:0px; top:0px;}
25%{background-color: yellow; left:200px; top:0px;}
50%{background-color: blue; left:200px; top:200px;}
75%{background-color: green; left:0px; top:200px;}
100%{background-color: orange; left:0px; top:0px;}
}
h1{
color: yellow;
}
</style>
</head>
<body>
<h1>my animation</h1>
<div></div>
</body>
</html>
TRANSITION MADE WITH HTML AND CSS
<!DOCTYPE html>
<html>
<head>
<center>
<style>
#a{
width: 100px;
height: 100px;
background-color: steelblue;
-webkit-transition: width 2s; transition: width 2s;
}
#a:hover {
width: 400px;
}
#b{
width: 300px;
height: 100px;
background: turquoise;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; transition:width 2s, height 2s, transform 2s;
}
#b:hover{
width: 400px;
height: 300px;
-webkit-transform: rotate(180deg); transform: rotate(360deg);
}
</style>
</head>
<body>
<h1> transition </h1>
<div id="a">
</div>
<p> hover over the div element above to see the trasition effect.</p>
<div id="b">
</div>
</center>
</body>
</html>
REGISTRATION FORM MADE WITH HTML AND CSS
<DOCKTYPE html>
<html>
<head>
<title>REGISTRATION FORM</title>
<link rel="stylesheet" type="text/css">
</head>
<style>
body{
background-image: url(background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: 100px;
}
#m{
width: 400px;
height: 400px;
text-align: center;
float: center;
color: #FFFFFF;
background-color: rgba(0,0,0,0.6);
margin: auto;
padding: 10px 0px 10px 0px;
border-radius:0px 0px 15px 15px ;
}
#u{
width: 400px;
height: 50px;
margin: auto;
background-color: rgb(0,0,0,0.7);
border-radius: 15px 15px 0px 0px;
color: #FFFFFF;
text-align: center;s
}
input{
background-color:rgb(0,0,0,0.7);
border: 1px solid black;
width:200px;
border-radius:9px;
text-align: center;
margin:1px;
height: 20px;
}
</style>
<div id="u">
<h1>REGISTRATION FORM</h1>
</div>
<div id="m">
<label>User Name</label><br>
<input type="text" name="username"
placeholder="username"><br>
<label>Password</label><br>
<input type="password" name="pswd"
placeholder="password"><br>
<label>User Name</label><br>
<input type="button" type="submit"
value="login"><br>
<a href="u.html">forget password?</a>
<h2>Create New Account</h2>
<label>First Name</label><br>
<input type="text" name="firstname"
placeholder="firstname"><br>
<label>Last Name</label><br>
<input type="text" name="lastname"
placeholder="lastname"><br>
<label>New Password</label><br>
<input type="password" name="new password"
placeholder="new password"><br>
<label>Comfirm Password<s/label><br>
<input type="password" name="comfirm password"
placeholder="comfirm password"><br><br>
<input type="button" type="submit"
value="Sign Up">
</div>
HORIZANTAL NAV BAR MADE WITH HTML AND CSS
<!DOCKTYPE html>
<html>
<head>
<style>
body{
margin: 0;
}
ul {
list-style-type: none:
margin:0;
padding:0;
overflow: hidden;
background-color: #333;
position: fixed;
top:0;
width: 100%;
}
li{
float:left;
}
li a{
display: block;
color:white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover :not(.active){
background-color: turquoise;
}
.active{
background-color: steelblue;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a class="active" href="#news">News</a></li>
<li><a class="active" href="#about">Contact</a></li>
<li><a class="active" href="#about">About</a></li>
</ul>
<div style="padding: 20px; margin-top:30px;background-color: lightgrey;height:1500px;">
<h1>Fixeed top navigation bar</h1>
<h2> Scroll this page to see the effect</h2>
<h2>nav bar will stay at the top of the page while scrolling</h2>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
</div>
</body>
</html>
No comments:
Post a Comment