MDTECH
CODE FOR UPPER WEBSITE
<html>
<head>
<title>md</title>
<head>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3css/4/w3
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<style>
body {background-color: powderblue;
hspace:40%;}
h1 {
color: white;
font-family: verdana;
font-size: 300%;
position:relative;
margin:9;
}
p {
color:black;
font-family:Arial;
font-size: 160%;
font-style:bold;
box-sizing: border-box;
}
USERNAME
{ font-family:verdana;
size:10;
width:40%;
position: relative;
}
/*full-width input field*/
input[type=alphabets]
{
height:6%;
width:58%;
border-radius:15%;
}
/*Full-width input field*/
input[type=text], input[type=password]
{ width:50%;
height:0.9%;
display:inline-block;
padding:15px 0 23px;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
container
{
align:center;
background:yellow;
height:100%;
width:100%;
}
form {
margin: 0 auto;
margin-top: 20px;
}
label {
color: red;
display: inline-block;
margin-left: 18px;
padding-top: 10px;
font-size: 14px;
}
img {
border-color:red;
border-radius: 50%;
}
#fieldset
{
height:40%;
width:30%;
background-color:blue;
}
.clearfix
{
float: right;
margin-top: 8px;
margin-right: 0.5px;
padding: 22px;
font-size: 7px;
}
.button {
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color:blue;
padding: 9px 10px;
border-radius:15%;} /*blue*/
.button2 {background-color: GREEN;
padding: 15px 22px;} /* GREEN */
.button3 {background-color: #f44336;
padding: 15px 22px;} /* Red */
.button4 {background-color: #e7e7e7; color: black;
padding:10px 22px;} /* Gray */
.button5 {background-color: #555555;} /* Black */
.clearfixe {
background-color: #4CAF50;
color: white;
}
.action
{
text-color:green;
}
body {margin:1;}
.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50 !important;
}
clear
{
float:right;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 56px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 6px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: blue;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
width:76%;
}
.dropdown:hover .dropdown-content {
display: block;
width:10%;
}
</style>
<body alink="brown" vlink="purple">
<h1 align="center" color="red" hspace="60%"><u>MDTECH</u>
<div class="clearfix" align="right">
<input type="alphabets" placeholder="search here">
<input type="submit" class="button button1"></button>
</div>
</h1>
<br>
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-home"></i></a>
<a href="WWW.GOOGLE.COM"><i class="fa fa-search"></i></a>
<a href="mailto:mdarsalan300@gmail.com"><i class="fa fa-envelope"></i></a>
<a href="mdarsalansolution.blogspot.in"><i class="fa fa-globe"></i></a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#"><b><U>Google</U><b></a>
<a href="#"><U>Find me</U></a>
<a href="#"><U>Features</U></a>
</div>
</div>
</div>
<br>
<br>
<div class="container">
<form>
<fieldset align="center">
<label><strong><strong><p size="10"><u>USERNAME</u></p></strong></strong></label>
<br>
<input type="text" placeholder="Input your Username here" name="username" required>
<br>
<label><strong><strong><p><u>PASSWORD</u></p></strong></strong></label>
<br>
<blink><input type="Password" placeholder="Input your password here" name="password" required></blink>
<br>
<br>
<br>
<div class="button">
<button type="submit" class="button button3">Log In</button>
<button type="submit" class="button button2">Sing up</button>
</div>
</fieldset>
</form>
<div class="cleare">
<img src="D:\MD ARSALAN\c.jpg" height="50%" width="40%" align="center" border="2px" color="green">
<img src="D:\MD ARSALAN\b.jpg" height="60%" width="40%" align="right" border="2px" color="green">
<img src="D:\MD ARSALAN\a.jpg" height="40%" width="30%" align="middle" border="2px" border-color="yellow" hspace="32%">
<img src="D:\MD ARSALAN\a.jpg" height="60%" width="40%" align="left" border="2px" color="pink">
<img src="D:\MD ARSALAN\b.jpg" height="60%" width="40%" align="right" border="2px" color="silver">
</div>
<
</body>
</html>
SCREEN SHOTS
very good. please share more html code of a complete website.
ReplyDelete