HTML & CSS Codes for PARALLAX & CARD EFFECTS
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap linking starts here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap linking ends here -->
</head>
<body style="width: 100%; max-width: 100%; min-width: 100%">
<div class="row">
<div class="container-fluid">
<!-- Parallax codes here -->
<div class="col-lg-12 col-sm-12 col-xs-12 center-block" style=" height: 600px; background-image:url(2.jpg); background-repeat:no-repeat; background-size: cover; background-attachment: fixed; background-position:center">
<div class="jumbotron text-center" style="background-color:transparent">
<h1 style="color:#FFF">PARALLAX & CARD EFFECTS</h1>
<hr style="margin-left: 15%; margin-right: 15%">
<h2 style="color:#CFC">Simple html css codes</h2>
</div>
<!-- Parallax codes end -->
</div>
</div>
</div>
<section id="main">
<div class="row">
<div class="container-fluid">
<div class="col-lg-12 col-sm-12">
<!-- Card starts here -->
<div class="col-md-4 col-sm-4 center-block" style="padding-top: 40px; padding-bottom: 20px">
<div class="panel panel-default" onMouseOver="$(this).css('box-shadow','3px 5px 7px rgba(0, 0, 0, .5)');" onMouseOut="$(this).css('box-shadow','0px 0px 0px rgba(0, 0, 0, 0)');">
<div class="panel-body">
<a href="#" class="thumbnail">
<img src="adminlogin.jpg">
</a>
<h3><b>Administrator Login</b></h3>
<p>Login to check result, view details of all.</p>
<button class="btn btn-primary" id="btn1" onClick="$('#mymdl1').modal('show')">Click</button>
</div>
</div>
</div>
<!-- Card ends here -->
<!-- Card starts here -->
<div class="col-md-4 col-sm-4 center-block" style="padding-top: 40px; padding-bottom: 20px">
<div class="panel panel-default" onMouseOver="$(this).css('box-shadow','2px 4px 5px rgba(0, 0, 0, .5)');" onMouseOut="$(this).css('box-shadow','0px 0px 0px rgba(0, 0, 0, 0)');">
<div class="panel-body">
<a href="#" class="thumbnail">
<img src="genlogin.jpg">
</a>
<h3><b>Generel User Login</b></h3>
<p>Login to Store, Update, Delete details.</p>
<button class="btn btn-primary" onClick="$('#mymdl2').modal('show')">Click</button>
</div>
</div>
</div>
<!-- Card ends here -->
<!-- Card starts here -->
<div class="col-md-4 col-sm-4 center-block" style="padding-top: 40px; padding-bottom: 20px">
<div class="panel panel-default" onMouseOver="$(this).css('box-shadow','2px 4px 5px rgba(0, 0, 0, .5)');" onMouseOut="$(this).css('box-shadow','0px 0px 0px rgba(0, 0, 0, 0)');">
<div class="panel-body">
<a href="#" class="thumbnail">
<img src="studlogin.jpg">
</a>
<h3><b>Student Login</b></h3>
<p>Login to give Feedback.</p>
<button class="btn btn-primary" onClick="$('#mymdl3').modal('show')">Click</button>
</div>
</div>
</div>
<!-- Card ends here -->
</div>
</div>
</div>
</section>
<div class="row" style="background-color:#0d5174 ; color:#FFFFFF">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-sm-5" style=" padding-top: 40px; padding-bottom: 30px; padding-left: 70px">
<img src="image/gnitlogo.png" alt="" class="img-responsive">
<address style="margin-top: -20px">
<h5><span class="glyphicon glyphicon-map-marker"></span> Address line 1,
<br> Address line 2,
<br> Address line 3 </h5>
</address>
<address style="margin-top: -10px">
<h5><span class="glyphicon glyphicon-earphone"></span> <abbr title="Phone">Phone:</abbr> +91 01 22 3456789</h5>
</address>
<address style="margin-top: -10px">
<h5><span class="glyphicon glyphicon-envelope"></span> <abbr title="Email">Email:</abbr> youremailid@domain.com</h5>
</address>
</div>
<div class="col-sm-7" style=" padding-top: 10px; padding-bottom: 10px" align="justify">
<h2><b><u>Description</u></b></h2>
<p>The main objective was to bring the parallax effect, carding designs and shading on hover effect to the viewers and gave access to the code so that viewers can design these cool features in their website pages accordingly. Simple html, CSS, bootstrap codes with little bit of JavaScript & jQuery needed to develop this kind of template for any purose.</p>
</div>
<center><strong>Connect with us via</strong><br />
<table class="table table-condensed" style=" width: 600px; text-align: right">
<tr>
<td style="border-right: 1px solid white" align="center"><a href="#" style="color:#CFF; text-decoration:none">Twitter</a> <img src="twitter-512.png" height="50px" width="50px" /></td>
<td style="border-right: 1px solid white" align="center"><a href="https://www.facebook.com" style="color:#CFF; text-decoration:none">Facebook</a> <img src="fb.png" height="50px" width="50px" /></td>
<td align="center"><a href="#" style="color:#CFF; text-decoration:none">LinkedIN</a> <img src="linkedin-xxl.png" height="50px" width="50px" /></td>
</tr>
</table>
</center>
</div>
</div>
</div>
</body>
</html>
Modal Window Code:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div class="modal fade" id="mymdl1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog" style="width: 500px;">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h3 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-user"></span> Administrator Login</h3></center>
</div>
<div class="modal-body">
<form class="form-group" name="adminlogin" id="adminlogin" role="form" method="post" action="" autocomplete="off">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" name="adminname" id="adminname" class="form-control" placeholder="Admin Name" required/>
</div><br>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="password" name="adminpswd" id="adminpswd" class="form-control" placeholder="Password" required/>
</div><br>
<div class="input-group">
<span class="input-group-addon">
<label style="font-weight:bold; font-family:'Jokerman'">Hn7Da</label>
</span>
<input type="text" name="admincaptcha" id="admincaptcha" class="form-control" placeholder="Enter the Captcha Code" required/>
</div><br>
<center><button type="submit" class="btn btn-primary" onClick="fun1();"><span class="glyphicon glyphicon-send"></span> Login</button> <button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button></center>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="mymdl2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog" style="width: 500px;">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h3 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-user"></span> User Login</h3></center>
</div>
<div class="modal-body">
<form class="form-group" name="userlogin" role="form" method="post" action="userlogin.jsp">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-info-sign"></span>
</span>
<input type="text" name="txtempid" class="form-control" placeholder="Employee ID" required/>
</div><br>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" name="txtusername" class="form-control" placeholder="User Name" required/>
</div><br>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="text" name="txtuserpswd" class="form-control" placeholder="Password" required/>
</div><br>
<center><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send"></span> Login</button> <button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button></center>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="mymdl3" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog" style="width: 440px;">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h3 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-user"></span> Student Login</h3></center>
</div>
<div class="modal-body">
<form class="form-group" name="studentlogin" role="form" method="post" action="studentlogin.jsp">
<div class="input-group">
<span class="input-group-btn">
<select name="sub_dept" id="sub_dept" class="form-control">
<option value="Department">Department</option>
<option value="CA">CA</option>
<option value="CSE">CSE</option>
<option value="FT">FT</option>
<option value="EC">EC</option>
<option value="EE">EE</option>
<option value="ASHU">ASHU</option>
<option value="AEIE">AEIE</option>
<option value="IT">IT</option>
</select>
</span>
<span class="input-group-btn">
<select id="strm" name="strm" class="form-control" required>
<option value="Stream">Stream</option>
<option value="B.TECH">B.TECH</option>
<option value="BCA">BCA</option>
<option value="M.TECH">M.TECH</option>
<option value="MCA">MCA</option>
<option value="Diploma">Diploma</option>
</select>
</span>
<span class="input-group-btn">
<select name="sem" id="sem" class="form-control">
<option value="Semester">Semester</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</span>
</div><br>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" name="txtroll" class="form-control" placeholder="University Roll No" />
</div><br>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input type="password" name="txtpswd" class="form-control" placeholder="Password" />
</div><br>
<center><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send"></span> Login</button> <button type="button" class="btn btn-danger" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Close</button></center>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
0 Comments