A contact page design that has added HTML and CSS with responsive size
 |
| A contact page design that has added HTML and CSS with responsive size |
[HTML and CSS full coding]
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Contact page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
body{
margin:0;
padding:0;
background:linear-gradient(45deg,rgba(255,0,102,3), rgba(0,51,204,05));
background-size:cover;
background-position:center;
height:100vh;
}
.box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
height:470Px;
width:320px;
border-left:1px solid white;
border-radius:10px;
border-style:;
box-shadow:5px 5px 5px 0px rgba(0,0,0,.3);
animation:ani 5s infinite;
background:url('mob.png');
background-size:cover;
background-position:center;
}
.box .inbox{
position:relative;
}
h2{
text-align:center;
font-family:verdana;
font-size:20px;
color:#ff9999;
background:;
border-radius:50px;
width:120px;
margin-left:100px;
border-left:2.5px solid #ff9999;
border-top:2px solid #ff9999;
}
h3{
animation:anim 1s infinite;
font-size:22px;
}
.inbox input{
border:2px solid white;
width:90%;
background:transparent;
margin-left:15px;
margin-bottom:30px;
padding-top:10px;
color:white;
border-radius:10px;
}
.nd textarea{
background:transparent;
margin-left:10px;
color:#fff;
margin-bottom:30px;
border:2px solid white;
border-radius:10px;
}
#fst{
color:white;
}
.st input{
width:60%;
background:transparent;
margin-left:15px;
margin-bottom:25px;
padding-top:5px;
color:skyblue;
font-size:15px;
margin-left:65px;
border:2px solid skyblue;
border-radius:5px;
transition:0.6s ease;
}
.box input[type="submit"]{
color:skyblue;
margin-bottom:5px;
font-size:18px;
}
.st input:hover{
background-color:#2699e9;
border:2px solid #2699e9;
color:white;
}
.nd textarea{
width:90%;
background-color:transparent;
margin-left:15px;
margin-bottom:25px;
height:110px;
}
h3{
font-size:15px;
color:white;
text-align:center;
font-family:sans-sarif;
}
h1 i{
color:rgb(255,255,0);
}
h1{
margin:0;
padding:0;
padding-top:10px;
text-transform:uppercase;
font-size:4.6vw;
color:rgba(255,255,255,.1);
background-image:url(ttf11.jpg);
background-repeat:repeat-x;
-webkit-background-clip:text;
animation: animate 15s linear infinite;
border-bottom:2px solid white;
}
@keyframes animate{
0%{
background-position:left 0px top 80px;
}
40%{
background-position:left 800px top -50px;
}
80%{
background-position:left 1600px top -50px;
}
100%{
background-position:left 2400px top 80px;
}
}
.th{
margin-top:10px;
margin-top:520px;
height:auto;
width:100%;
background: linear-gradient(45deg,dodgerblue,orange,lightgreen,red );
position:relative;
}
.gs{
height:17%;
width:100%;
}
li{
margin-top:10px;
display:inline-block;
margin-right:10px;
max-width:620px
list-style-type:none;
margin-left:10px;
float:right;
}
li a{
padding-bottom:30px
font-weight:;
text-decoration:none;
color:#fff;
padding:5px 20px;
border:1px solid transparent;
transition:0.6s ease;
border-right:2px solid white;
}
li.active a{
background:#fff;
color:black;
border-radius:5px;
}
li.active a:hover{
background:dodgerblue;
color:white;
border-radius:5px;
border-right:3px solid dodgerblue;
}
@keyframes ani{
0%{
border-left:2px solid red;
}
10%{
border-left:2px solid blue;
}
20%{
border-left:2px solid pink;
}
30%{
border-left:2px solid gold;
}
40%{
border-left:2px solid aqua;
}
50%{
border-left:2px solid dodgerblue;
}
60%{
border-left:2px solid white;
}
70%{
border-left:2px solid navy;
}
80%{
border-left:2px solid white;
}
90%{
border-left:2px solid cryn;
}
100%{
border-left:2px solid skyblue;
}
}
@keyframes anim{
0%{
color:red;
}
50%{
color: blue;
}
100%{
color:green;
}
}
</style>
</head>
<body>
<center><h1> INDIAN PUBLISHED.COM </h1></center>
<div class="box">
<h2>Contact</h2>
<h3>contact us today, get reply with in 24 hours!</h3>
<form action="">
<div class="inbox">
<input type="text" required="" placeholder="Your Name"/>
</div>
<div class="inbox">
<input type="text" required="" placeholder="Your Email Address"/>
</div>
<div class="inbox">
<input type="text" required="" placeholder="Your Phone Number"/>
</div>
<div class="nd">
<textarea name="" id="" cols="30" rows="10" placeholder=""></textarea></br>
</div>
<div class="st">
<input type="submit" value="SEND MASSAGE"/>
</div>
</form>
</div>
<div class="th">
<div class="gs">
<li class="active"><a href=""><i class="fa fa-sign-in" aria-hidden="true"></i> Login</a></li>
<li><a href=""><i class="fa fa-flag" aria-hidden="true"></i> Report</a></li>
<li><a href=""><i class="fa fa-info-circle" aria-hidden="true"></i> Help-Us</a></li>
</div>
<center><p style="font-size:30px;color:dodgerblue;font-family:Andalus;border-top:2px solid white;height:82%"><a style="text-decoration:none;color:yellow;" href=""><i style="color:red;" class="fa fa-youtube-play" aria-hidden="true"></i> Powered by Indian Published</a></p></center>
</div>
</body>
</html>
No comments