<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
div.ex8{
{
width:580px;
margin: 2px;
border: 2px meroon;
height:450px;
peding:50px;
border-radius: 10px;
}
}
div.ex1 {
width:570px;
margin: 2px;
border: 3px solid red;
height:420px;
peding:50px;
border-radius: 10px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
div.ex4 input[type=text] {
float: right;
padding: 2px;
align:center;
margin-top: 8px;
margin-right: 16px;
border: solid pink;
font-size: 17px;
width:150px;
border-radius:10px;
}
div.ex5
{
height:160px;
width:140px;
margin:7px;
border:6px solid pink;
border-radius:10px;
}
div.ex6{
color:red;
margin:50px;
}
div.absolute {
position: absolute;
float: right;
margin-left:230px;
border-radius: 10px ;
margin-top: -200px;
height:30px;
width:160px;
}
#navigation{
float: right;
margin:top;
border: 3px solid pink;
border-radius: 10px ;
margin-top: 6%;
height:30px;
width:160px;
margin-left:30%;
}
div.relative {
position: relative;
color:pink;
}
.button {
display: inline-block;
border-radius: 10px;
background-color: pink;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 20px;
padding: 15px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
<body>
<h1 align="center" >COLLEGE ADMIN PAGE.7</h1>
<h2 align="center" >Collge Placement Record</h2>
</body>
<body>
<div class="ex8">
<select id="navigation">
<option value="volvo">Filter</option>
<option value="saab">YOA</option>
<option value="opel">COURCE</option>
</select>
<div class="ex1">
<div class="ex4"><h5 align+="center">
<input type="text" placeholder="Search.."></h5>
</div>
<h4>Student Photo</h4>
<div class="ex5"><img src="https://st2.depositphotos.com/4520249/7633/v/950/depositphotos_76335235-stock-illustration-male-student-education-icon.jpg" alt="Flowers in Chania" width="135" height="150"></div>
<div class="absolute">
<h3>Name:________________<br>
Course:_______________<br>
JOB:__________________<br>
Date of join:__________________<br>
job role:__________________
</h3>
</div>
<div class="relative">
<button class="button" style="vertical-align:middle"><span>NAME</span></button>
<button class="button" style="vertical-align:middle"><span>YEAR</span></button><br>
<button class="button" style="vertical-align:middle"><span>YOA</span> </button>
<button class="button" style="vertical-align:middle"><span>SEM</span></button>
</div>
<select class="submit">
<form action="/action_page.css">
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>
RUN CODE
this looks good. instead of using br tag , use css float to makes the page better
ReplyDelete