Responsive Website Design: Responsive Animated Contact Form

Create Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Us</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="main_style.css">
</head>
<body>
<div class="main_wrapper">
  <div class="main_heading">
    
    <h2><span class="cc animated bounceInDown">C</span> <span class="co animated bounceInDown red">O</span> <span class="cn animated bounceInDown">N</span> <span class="ct animated bounceInDown red">T</span> <span class="ca animated bounceInDown">A</span> <span class="cc animated bounceInDown red">C</span> <span class="ct animated bounceInDown">T</span> <span class="ct animated bounceInDown red">S</span> </h2>
  </div>
  
  <div class="contact_form_container animated bounceInUp">
    
    <form role="form">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="text" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="checkbox">
        <label>
        <input type="checkbox">
        Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    
  </div>
  
</div>

</body>
</html>

Create main_style.css

@charset "utf-8";
body{
background:#333!important;
}
.main_wrapper{
background:url('http://curdweb.com/navin/click.com/images/slider/slider4.png');
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center;
margin:auto;
padding:20px;
overflow:auto;
}
.main_heading{
margin:auto;
padding:20px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

overflow:auto;
}
.main_heading h2{
color:#0099FF;
font-weight:bold;
text-align:center;
}
.red{
color:#0033CC;
}
.contact_form_container{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

margin: 230px auto;
    overflow: auto;
    padding: 30px;
    width: 50%;
}
/* ANIMATIONS */

.cc 						{ animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; }
	.co 						{ animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; }
	.cn 						{ animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
	.ct 						{ animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; }
	.ca 						{ animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
	.ct 						{ animation-delay:1.2s; -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; }

.zz 						{ animation-delay:1.4s; -moz-animation-delay:1.4s; -webkit-animation-delay:1.4s; }
	.zo 						{ animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
	.zn 						{ animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
	.ze 						{ animation-delay:0.5s; -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }

@media screen and (min-device-width: 320px) and (max-device-width: 756px) {  
 .contact_form_container {
    margin: 23px auto;
    overflow: auto;
    padding: 30px;
    width: 100%;

}

Friday 18 September 2015

Responsive Animated Contact Form

Create Index.html

Create main_style.css

3 comments: