<!DOCTYPE html>
<html>
<head>
<h2 align="center">college student contact page 10</h2>
<p align="center"><b>Add student contact</b></p>
<body>
<style>
body{
border: 2px solid #33ccff;
height:500px;
width:89%;
border-radius: 6px;
}
.navigation{
float: right;
border: 2px solid #33ccff;
border-radius: 8px ;
margin-top: 0%;
}
.searchbar{
border-radius: 12px;
text-align: left;
margin: 20px;
height:100%;
margin-left:33px
}
img{
wigth:100px;
height:112px;
border: 2px solid #33ccff;
float: left;
margin-top:20px;
}
.style{
wigth:100px;
height:100px;
border: 2px solid #33ccff;
float: left;
margin-top:30px;
}
.sub{
text-align: center;
}
input[type=submit]{
background-color: #33ccff;
border:1px ;
color:white;
padding: 7px 22px;
margin: 4px 2px;
border-radius: 20px
}
.add{
}
</style>
<div class="container">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<form class="searchbar">
<input type="search" placeholder="Student Name"><button ><i class="fa fa-search "></i></button>
<select class="navigation">
<option value="volvo">Filter</option>
<option value="saab">YOA</option>
<option value="opel">COURCE</option>
</select><br><br>
<form class="style">
<img src="https://d3nn873nee648n.cloudfront.net/900x600/13584/15-ER483974.jpg">
<div style="margin-left:179px">
<p>NAME:__</p>
<p>YOA:__</p>
<p>COURSE:__</p>
<p>MOBILE:__</p></div>
</form>
<br><br>
<div class="add" style="margin-left:34px">
Add Mobile: <input type="text" ><br><br>
</div>
<div class="sub">
<input type="submit" value="Updata" ><br>
</div>
</form>
</div>
</body>
</head>
</html>
RUN CODE
Use css float to make it better.
ReplyDelete