Thursday, October 1, 2015

How to Make University Management System login Page (LPU) : Sachin Yadav

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lovely Professional University :: University Management System </title>
<link href="css/ums_css.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
 <div class="main_mid">
        <div class="main_left">
       
<div class="lpu_logo">
<img src="img/lpu_logo.png" class="lpu_logo"/>
</div>
 <div class="all">
<div class="title"><img src="img/logo.png"/></div>
<div class="login_part">
<form >
<table align="center" width="100%" border="0" cellspacing="30" cellpadding="0" class="login_tbl">
                            <tr>
                                <td>
                                    <input name="TextBox1" type="text" onchange="" onkeypress="" id="user" class="input_user" placeholder="User ID" />
                                   
                                    
                                </td>
                                <td>
                                    <input name="TextBox2" type="password" id="pass" class="input_password" placeholder="Password" />
                                   
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <select name="DropDownList1" id="DropDownList1" class="select_city">
  <option selected="selected" value="1">HeadOffice</option>
  <option value="2">Ambedkar Chowk</option>
  <option value="19">Bhutan</option>
  <option value="23">Nepal</option>
  <option value="34">BanglaDesh</option>
  <option value="37">Tanzania</option>
  <option value="38">Kenya</option>
  <option value="40">Sudan</option>
  <option value="41">TamilnaduCA1</option>
  <option value="45">Nigeria</option>
  <option value="46">Afghanistan</option>
  <option value="47">JAMMU_CO</option>
  <option value="48">PUNJAB_CA1</option>

 
 </select>
                                </td>
                                 <td>
                                    <select name="DropDownList1" id="DropDownList1" class="select_ums_store">
  <option selected="selected" value="1">Landing Page</option>
  <option value="2">Home Page</option>
  <option value="19">Assignment Upload</option>
 </select>
 </td>                   
                                
                            </tr>
                           
                        </table>
            
</div>
<div class="bottom">
<input type="submit" name="iBtnLogin" onclick="check()" id="iBtnLogin" alt="login" class="login_but" value="Login" />
<div class="mail">
<div class="staff_mail">
<a href="https://www.google.com/a/lpu.co.in/ServiceLogin?service=mail&amp;passive=true&amp;rm=false&amp;continue=https://mail.google.com/a/lpu.co.in/&amp;ss=1&amp;ltmpl=default&amp;ltmplcache=2" target="_blank">
       <span id="staff_mail">Staff Mail</span></a>
                   </div>
                  
<div class="student_mail">
                <a href="#" >
                 <span id="student_mail"> Student Mail</span>
                 </a>
                 
</div>
</div>

</div>
</div>
 <div class="download">
            Download LPU App</div>
        <div class="download_icon">
            <a href="https://itunes.apple.com/in/app/lputouch/id509819753?mt=8" target="_blank">
                <img src="img/apple_icon.png" width="49" height="50" alt="apple" /></a>
            <a href="https://play.google.com/store/apps/details?id=ums.lovely.university" target="_blank">
                <img src="img/android_icon.png" width="49" height="50" alt="android" /></a>
            <a href="http://www.windowsphone.com/en-in/store/app/lpu-touch/b0fbf9a9-1008-4025-98dd-81aa2fb5e6c7"
                target="_blank">
                <img src="img/windows_icon.png" width="49" height="50" alt="windows" /></a></div>
    </div>
</div>
</div>
</div>
<script type="text/javascript">
function check()
{
var a,b;
 a=document.getElementById('user').value;
 b=document.getElementById('pass').value;
 
 if((a == '') && (b == ''))
 {
    alert("Please Enter User Id \n Please Enter Password ");
 }
 else if((a != '') && (b == ''))
 {
    alert("Please Enter Password ");
 }
  else
 {
    alert("Welcoome to ");
 }
</script>
</body>
</html>

CSS Code

body
{
    margin: 0;
 padding: 0;
 background:url(../bg.jpg) center center fixed no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 background-color: #000;
 overflow: auto;
  font-family: Cambria;
 filter: grayscale(100%) sepia(100%); }

 
a{text-decoration:none;}

.login_tbl td
{
 vertical-align: top;
 width: 50%;
}

.login_tbl td input, .login_tbl td select
{
 float: left;
}

.login_tbl td span
{
 float: left;
}
 
.title{ font-size:24px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold;float: left;  text-align:center; /*margin-top:40px;*/ padding:10px; background-color:#ffd200; width:600px; border-radius:5px 5px 0 0; opacity:0.9; color:#FFFFFF}

.bottom{ font-size:24px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold;float: left;  text-align:center;  padding:10px; background-color:#CD1B27; width:600px; border-radius:0px 0px 5px 5px; opacity:0.9; color:#FFFFFF}

.login_part{ height:200px;text-align:center;padding:10px;float: left; background-color:#f1f1f1; width:600px; height:170px;opacity:0.9; color:#FFFFFF}

.lpu_logo
{
 width: 140px;
 margin: 0 auto;
 margin-top: 10px;
 text-align: center;
}

.input_user
{
 width: 75%;
 padding-right: 30px;
 background: #fff;
 padding-left: 5px;
 height: 36px;
 font-size: 20px;
 color:#919191;
 font-family:Arial;
 border:1px solid #999;
 border-radius:3px;
 
}

.input_user:focus
{
-webkit-box-shadow: 2px 2px 1px 0px rgba(224, 74, 49, 0.75);
 -moz-box-shadow: 2px 2px 1px 0px rgba(224, 74, 49, 0.75);
 box-shadow: 2px 2px 1px 0px rgba(224, 74, 49, 0.75);
}

.input_password
{
 width: 75%;
 background: #fff;
 padding-right: 30px;
 padding-left: 5px;
 height: 36px;
 font-size: 20px;
 color: #919191;
 border-radius:3px;
 border:1px solid #999;
}

.input_password:focus
{
 -webkit-box-shadow: 2px 2px 1px 0px rgba(224, 74, 49, 0.75);
 -moz-box-shadow: 2px 2px 1px 0px rgba(224, 74, 49, 0.75);
 box-shadow: 2px 2px 1px 0px rgba(224, 74, 49, 0.75);
}

.select_city
{
 width: 89%;
 padding-left:5px;
 background: #fff;
 height: 36px;
 font-size: 18px;
 border:1px solid #999;
 color: #919191; 
 border-radius:3px;
}
.select_city:focus
{
 -webkit-box-shadow: 2px 2px 1px 0px rgba(224, 74, 49, 0.75);
 -moz-box-shadow: 2px 2px 1px 0px rgba(224, 74, 49, 0.75);
 box-shadow: 2px 2px 1px 0px rgba(224, 74, 49, 0.75);
}

.select_ums_store
{
 width: 89%;
 padding-left:5px;
 background: #fff;
 height: 36px;
 font-size: 18px;
 border:1px solid #999;
 color: #919191; 
 border-radius:3px;

}

.select_ums_store:focus
{
 -webkit-box-shadow: 2px 2px 1px 0px rgba(224, 74, 49, 0.75);
 -moz-box-shadow: 2px 2px 1px 0px rgba(224, 74, 49, 0.75);
 box-shadow: 2px 2px 1px 0px rgba(224, 74, 49, 0.75);
}

.login_but
{
   z-index: 2;
   padding:5px;
   font-size:26px;
   width:80px;
   border-radius:2px;
   background-color:#FF6633;
   color:#FFFFFF;
   border:none;
   float:right;
   cursor:pointer; 
}

.login_but:hover
{
 box-shadow:0 0 5px 0 #fff;
}

.login_but:active
{
  box-shadow:0px 0px 4px rgba(0,0,0,0.4),10px 10px 20px rgba(0,0,0,0.3) inset;
}

.mail
{
  float:left;
}

.staff_mail
{
    float:left;
    padding:10px;
    margin-right:20px;
    border-radius:3px;
    background-color:#6633CC;
    border:none;
    cursor:pointer; 
}

.staff_mail:hover
{
  box-shadow:0 0 5px 0 #fff;
}

.staff_mail:active
{
  box-shadow:0px 0px 4px rgba(0,0,0,0.4),10px 10px 20px rgba(0,0,0,0.3) inset;
}

.student_mail
{
  padding:10px;
  float:right;
  border-radius:3px;
  background-color:#669933;
  border:none;
  cursor:pointer; 
}

.student_mail:hover
{
  box-shadow:0 0 5px 0 #fff;
}

.student_mail:active
{
  box-shadow:0px 0px 4px rgba(0,0,0,0.4),10px 10px 20px rgba(0,0,0,0.3) inset;
}

#staff_mail
{
 font-size:17px;
 color:#FFFFFF;
 cursor:pointer; 
}

#student_mail
{
 font-size:17px;
 color:#FFFFFF;
 cursor:pointer; 
}

.main_mid
{
 width: 610px;
 margin: 0 auto;

}

.main_left
{
 width: 610px;
 float: left;
}

.download
{
 margin-top: 20px;
 color: #FFF;
 font-size: 20px;
 float: left;
 text-align: center;
 width: 100%;
}

.download_icon
{
 float: left;
 margin-top: 10px;
 text-align: center;
 width: 100%;
}

.all{
 margin-top:40px; 
 height:318px;
 width:620px;
 border-radius:10px;
 box-shadow:0 0 20px 0px #000;
}



0 comments:


Post a Comment