Wednesday 10 June 2020

How to make Responsive digital Form with HTML and CSS

Posted by elearnschool on Wednesday, June 10, 2020 | No comments
Create Digital Form for yours website in responsive way. HTML syntax and full CSS Code are given below .with help of this you can easily make responsive Digital Form for any purpouse

HTML Syntax

<html>
<head>
<title> Login Form Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="keywords" content="Responsive Form Template" />
<link href=''>
<link href=''>
<script type="text/javascript" src=" Copy paste source of .jquery file"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
    <div class="content">
<h1>Digital Login Form Widget</h1>
<div class="main vlcone">
<div class="sin-close"> </div>
<div class="rin-left">
<div class="responsive_form">
<h2>Login Here</h2>
<form>
<input class="logo" type="text" value="Username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Username';}" required="">
<input class="key" type="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" required="">
<input type="submit" value="Login">
</form>
</div>
<a href="#">Forgot Password</a>
<a href="#" class="login-right">Register</a>
<div class="clear"></div>
</div>
<div class="rin-right">
<h3>DIGITAL PRODUCTS <span>MARKET PLACE</span></h3>
<p>A perfect place for buy or sell goods online.</p>
</div>
<div class="clear"></div>
</body>
</html>

CSS Code



body{
padding:0;
margin:0;
background:#d24663;

font-family: 'Lato', sans-serif !important;
}

h1,h2,h3,h4,h5,h6{
font-family: 'Salsa', cursive;
margin:0;    
}
p{
margin:0;
}
ul{
margin:0;
padding:0;
}
label{
margin:0;
}
/*-- main --*/
.content{
padding:80px 0;
}
.content h1{
margin-bottom:50px;
text-align:center;
font-size:45px;
font-family: 'Salsa', cursive;
color:#fff;
}
.main {
    width: 60%;
    margin: 0 auto 0 auto;
background:url(copy paste url of images) no-repeat 0px 0px;
background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
-moz-background-size: cover;
min-height:416px;
    position: relative;
   box-shadow: 9px 10px 9px #5A1120;
  -o-box-shadow: 9px 10px 9px #5A1120;
  -moz-box-shadow: 9px 10px 9px #5A1120;
  -webkit-box-shadow: 9px 10px 9px #5A1120;
}
.rin-left {
float:left;
    width: 35%;
    background: rgba(1, 10, 19, 0.69);
    padding: 3em 3em 0;
    height: 368px;
}
.rin-right{
float:left;
text-align:center;
width: 53%;
}
.rin-right h3 {
    color: #fdb515;
    font-size: 28px;
    margin-top: 70px;
}
.rin-right h3 span{
display:block;
margin-top:8px;
}
.responsive_form form input[type="text"] ,.responsive_form form input[type="password"]{
    width: 85%;
    padding: 0.7em 2.7em 0.7em 0.7em;
    font-size: 14px;
    border: none;
    border-bottom: 2px solid #e6e6e6;
    outline: none;
    color: #ccc;
    margin-bottom: 40px;
}
.responsive_form form input.logo {
    background: url(../images/logo.png) no-repeat 97% center #fff;
    background-size: 4.5% !important;
}
.responsive_form form input.key {
    background: url(../images/key.png) no-repeat 97% center #fff;
    background-size: 4.5% !important;
}
.responsive_form form input[type="submit"] {
    background: #fdb515;
    color: #FFFFFF;
    text-align: center;
    padding: 14px 0;
    border: none;
    font-size: 16px;
    outline: none;
    width: 37%;
    cursor: pointer;
    border-radius: 50px;
    margin-bottom:30px;
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
.responsive_form form input[type="submit"]:hover{
background:#d24663;
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
.rin-left a {
    text-decoration: none;
    color: #fdb515;
    font-size: 14px;
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
.rin-left a:hover{
color:#fff;
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
.login-right{
float:right;
}
.responsive_form h2 {
    color: #fdb515;
    font-size: 30px;
    margin-bottom: 30px;
}

.rin-right p {
    font-size:22px;
    margin-top: 8em;
    color: #fdb515;
}
.sin-close,.sin-close1,.sin-close2,.sin-close4,.sin-close6{
background: url('copy paste url of images') no-repeat 0px 0px;
cursor: pointer;
    height: 22px;
    width: 22px;
    position: absolute;
    right: 7px;
    top: 11px;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
z-index: 1;
}
/*-- responsive media queries --*/
@media (max-width: 1440px){
}
@media (max-width: 1366px){
.rin-right p {
font-size: 19px;
}
}
@media (max-width: 1280px){
.rin-left {
width: 34%;
}
}
@media (max-width: 1080px){
.main {
width: 69%;
}
}
@media (max-width: 1024px){
.main {
width: 74%;
}
}
@media (max-width: 991px){
.main {
width: 76%;
}
}
@media (max-width: 800px){
.main {
width: 86%;
}
.rin-left {
width: 37%;
padding: 2em 2em 0;
height: 368px;
}
.main {
min-height: 400px;
}
.content h1 {
font-size: 38px;
}
.responsive_form form input[type="text"], .responsive_form form input[type="password"] {
      width: 80%;
}
.responsive_form form input[type="submit"] {
    padding: 10px 0;
    font-size: 16px;
    outline: none;
    width: 42%;
}
.rin-right p {
font-size: 17px;
}
}
@media (max-width: 768px){
.content {
padding: 150px 0;
}
.content h1 {
margin-bottom: 70px;
}
}
@media (max-width: 736px){
.content {
padding: 100px 0;
}
.rin-right {
width: 52%;
}
.rin-right p {
font-size: 16px;
margin-top: 11em;
}
}
@media (max-width: 667px){
.main {
width: 90%;
}
.responsive_form form input[type="submit"] {
padding: 10px 0;
}
.responsive_form form input.logo,.responsive_form form input.key {
background-size: 5.5% !important;
}
}
@media (max-width: 640px){
.content {
padding: 65px 0;
}
.content h1 {
font-size: 32px;
}
.rin-right h3 {
font-size: 22px;
}
.responsive_form h2 {
font-size: 24px;
margin-bottom: 15px;
}
.content h1 {
margin-bottom: 50px;
}
.rin-left {
width: 40%;
padding: 1em 1em 0;
height: 310px;
}
.rin-right p {
font-size: 17px;
margin-top: 7em;
}
.main {
min-height: 326px;
}
.responsive_form form input.logo, .responsive_form form input.key {
background-size: 6.5% !important;
}
}
@media (max-width: 600px){
.responsive_form form input[type="text"], .responsive_form form input[type="password"] {
    width: 73%;
}
}
@media (max-width: 568px){
}
@media (max-width: 480px){
.content h1 {
font-size: 29px;
}
.rin-right p {
font-size: 14px;
margin-top: 9em;
}
.rin-right h3 {
font-size: 19px;
}
.responsive_form form input[type="submit"] {
width: 46%;
}
p.footer {
margin-top: 50px;
font-size: 13px;
}
}
@media (max-width: 414px){
.rin-left {
width: 91%;
}
.responsive_form form input[type="submit"] {
width: 32%;
}
.rin-right {
width: 100%;
}
.rin-right h3 {
margin-top: 35px;
}
.rin-right p {
margin-top: 4em;
}
.main {
min-height: 526px;
}
.responsive_form form input[type="text"], .responsive_form form input[type="password"] {
margin-bottom: 30px;
}
p.footer {
line-height: 1.8em;
}
.rin-left {
height: 290px;
}
.content h1 {
font-size: 25px;
}
.main {
min-height: 510px;
}
.main {
background: url('copy paste url of images') no-repeat -473px 3px;
background-size: 289% !important;
}
.responsive_form form input[type="text"], .responsive_form form input[type="password"] {
width: 85%;
}
}
@media (max-width: 384px){
p.footer {
line-height: 1.8em;
width: 90%;
margin: 50px auto 0;
}
.main {
min-height: 505px;
}
.main {
background: url('copy paste url of images') no-repeat -473px 55px;
background-size: 289% !important;
}
.responsive_form form input[type="text"], .responsive_form form input[type="password"] {
width: 84%;
}
}
@media (max-width: 375px){
.responsive_form form input[type="text"], .responsive_form form input[type="password"] {
width: 83%;
}
}
@media (max-width: 320px){
.content h1 {
font-size: 22px;
}
.responsive_form h2 {
font-size: 22px;
margin-bottom: 22px;
}
.responsive_form form input[type="submit"] {
padding: 8px 0;
}
.rin-left {
width: 88.5%;
}
.content h1 {
margin-bottom: 30px;
}
.content {
padding: 50px 0;
}
p.footer {
margin: 40px auto 0;
}
.main {
background: url('copy paste url of images') no-repeat -359px 140px;
background-size: 289% !important;
}
.responsive_form form input[type="text"], .responsive_form form input[type="password"] {
width: 80%;
}
}

Create Your Own Responsive Form In Few Minutes

0 comments:

Post a Comment