Admission Form Create By Html And Css
HTML CODE
<html>
<head> <link rel="stylesheet" href="Mid paper project.css">
</head>
<body>
<div style="display: flex;justify-content: center;">
<span class="logo" > <img src="logo.png" width="200px" height="200px" alt="University logo"></span>
<div class="add">
<p>Riphah International<br>
University, FSD
</p>
</div>
<div class="img">
<input type="image" src="img_submit.jpg" alt="photograph" width="200px" height="200px">
</div>
</div>
<div class="emp">EMPLOYEES APPLICATION</div>
<div class="set">
<div class="j">
Form submission date :<input type="date">
</div>
<!--EMPLOYEES profile-->
<div class="di">
<p>Employees Profile</p>
</div>
<div class="ep">
Name:<input type="text" size="30">
Gender:<input type="radio">Male
<input type="radio">Female<br>
Father/Guardian Name:<input type="text"size="30">
CNIC:<input type="number"size="30"><br>
Address:<input type="text" size="30">
Permanent Address:<input type="text" size="30"><br>
Phone no <input type="number" size="30">
Mobile No.<input type="number" size="30"><br>
D.O.B.<input type="text" size="30">
Nationality:<input type="text" size="30">
Blood Group<input type="text" size="30"><br>
Father/Guardian CNIC:<input type="number" size="30">
Religion:<input type="text" size="30">
</div>
<!--Academic Details-->
<div class="di">
<p>Academic Details(optional)</p>
</div>
<table border="1" cellspacing="0" class="t">
<tr>
<th style="background: #666363;">Exam passed</th>
<th style="background: #666363;">Institute</th>
<th style="background: #666363;">Passing year</th>
<th style="background: #666363;">Total Marks</th>
<th style="background: #666363;">Obtained Marks</th>
<th style="background: #666363;">Marks in %</th>
<th style="background: #666363;">Board</th>
</tr>
<tr>
<td style="background: rgb(176,226,243);">Matric</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="background: rgb(176,226,243);">F.Sc/F.A</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="background: rgb(176,226,243);">B.A/BSC</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="background: rgb(176,226,243);">Other</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div style="margin-top: 1%;">
<div style="float: left;"><span class="Name "><b>Witness 1</b>:</span><br/><br/>
<span class="Name ">Name:<input type="text"size="40">,<br></br>
<span class="Name ">CNIC:<input type="number"size="40"><br></br>
<span class="Name ">Sign:<input type="text"size="40">
</div>
<div style="float: right; margin-right: 10%;" >
<span class="Name "><b>Witness 2</b></span><br/><br/>
<span class="Name ">Name:<input type="text"size="40">,<br></br>
<span class="Name ">CNIC:<input type="number"size="40"><br></br>
<span class="Name ">Sign:<input type="text"size="40">
</div>
</div><br/><br/><br/><br/><br/><br/><br/><br/>
<div>
<h2>Required Documents:</h2>
<ol>
<div style="float: left;">
<li>Passport Size Picture <b>* 1</b></li>
<li>Copy of CNIC</li>
<li>Copy of Father/ Guardian CNIC </li>
<li>Academic Documents</li>
</div>
<div style="float: right;margin-right: 40%;">
<li>Medical Certificate</li>
<li>CV</li>
<li>Certificates</li>
</div>
</ol>
<br/><br/><br/><br/><br/><br/><br/>
<hr class="h">
<div class="fo">
<p>FOR OFFICE USE</p>
</div>
Date:<input type="date">
<div class="d">
<h4>Manager Signature:<hr style="width: 150px; margin-right: 1000px; margin-top:50px"></h4>
</div>
<div class="a">
<h4> Director Name:</h4>
<h4> sign:</h4>
</div>
<div class="rf">
<h1> Contact us: Riphah International University, Faisalabad Campus<br>
Satayana Road, near Fish Farm,<br>
Faisalabad, Pakistan</h1>
</div>
</body>
</html>
CSS CODE
.logo
{
display: inline;
}
.add
{
border: 1px solid black;
text-align: center;
width: 500px;
color: white;
background-color: #990012;
font-weight: 900;
font-family: Roboto,'Segoe UI', Tahoma, sans-serif;
font-size: 40px ;
}
.img
{
border: 1px solid black;
}
.emp
{
writing-mode: vertical-lr;
font-size: 40px;
display: flex;
background-color:#B6B6B4;
color: red;
padding:15px;
word-spacing: 2px;
letter-spacing: 1.2px;
transform: rotate(180deg);
font-weight: 900;
box-shadow: 0px 0px 1px 1px black;
height: 800px;
padding-top: 150px;
margin-bottom: 50px;
}
.set
{
margin-left: 100px;
margin-top: -1000px;
}
.j
{
font-size: 30px;
display: inline;
margin-top: 20px;
}
.di {
text-align: center;
color: white;
background-color: #990012;
width: 1100px;
height: 30px;
font-size: 20px;
margin-top: 10px;
}
.t
{
width: 1100px;
margin-top: 15px;
}
.ep
{
margin-top: 20px;
}
.h
{
border-top: 1px dashed black;
width: 1100px;
}
.fo
{
border: 2px solid black;
width: 180px;
text-align: center;
font-weight: 800;
margin-left: 550px;
box-shadow: 5px 10px rgb(59, 56, 56) ;
}
.a
{
margin-left: 900px ;
border: 1px solid black;
width :300px;
margin-top: -100px;
margin-bottom: 5px;
padding-left: 10px;
}
.rf
{
background-color: #990012;
color:white;
border:1px solid #990012;
text-align: center;
}
No comments:
Post a Comment