Contact Us Page IN HTML & CSS
Code Output:
Contact Us Page Tutorial | HTML & CSS
We have given here hover effects to the social-media icons and the Send Button...
If you don't know how to add hover effects and shadows then refer to our previous Posts.
____________________________________________________________________________
index.html
______________________________________________________________________
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Us</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Bree+Serif&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rowdies&display=swap" rel="stylesheet">
<style>
body {
background: linear-gradient(270deg, #ed006d, #d620c8);
text-align: center;
font-family: fantasy;
}
form {
width: 600px;
height: 600px;
text-align: center;
border: solid;
border-spacing: 58px;
background-color: aliceblue;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.shu {
margin-top: 100px;
}
.email {
width: 200px;
padding: 10px;
}
.ui {
width: 200px;
padding: 10px;
}
.jd {
width: 200px;
padding: 10px;
}
button {
border: solid 2px #d04d4d;
width: 120px;
top: 80%;
left: 45%;
position: absolute;
height: 50px;
border-radius: 10px;
background-color: #d04d4d;
font-family: sans-serif;
font-weight: bold;
color: beige;
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2), 3px 6px 20px 0 rgba(0, 0, 0, 0.19);
}
input {
border: solid 2px #ea4d72;
border-radius: 4px;
}
textarea {
border: solid 2px #ea4d72;
}
.social-menu ul {
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%);
padding: 0;
margin: 0;
display: flex;
}
.social-menu ul li {
list-style: none;
margin: 0 10px;
}
.social-menu ul li .fa {
color: #000000;
font-size: 25px;
line-height: 50px;
transition: .5s;
}
.social-menu ul li .fa:hover {
color: #ffffff;
}
.social-menu ul li a {
position: relative;
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
text-align: center;
transition: 0.5s;
transform: translate(0, 0px);
box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
}
.social-menu ul li a:hover {
transform: rotate(0deg) skew(0deg) translate(0, -10px);
}
.social-menu ul li:nth-child(1) a:hover {
background-color: #3b5999;
}
.social-menu ul li:nth-child(2) a:hover {
background-color: #55acee;
}
.social-menu ul li:nth-child(3) a:hover {
background-color: #e4405f;
}
.social-menu ul li:nth-child(4) a:hover {
background-color: #cd201f;
}
.social-menu ul li:nth-child(5) a:hover {
background-color: #0077B5;
}
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
li {
border: solid 2px black;
border-radius: 25px;
}
button:hover {
cursor: pointer;
}
</style>
</head>
<body>
<center>
<form>
<div class="shu">
<input class="email" type="email" placeholder="Enter E-mail">
<input class="jd" type="text" placeholder="Full Name"><br>
<br>
<br>
<input class="ui" type="number" placeholder="Enter Phone Number"><br><br>
<div class="textarea"><a class="mess">Message</a><br>
<textarea style="width: 324px; height: 200px;"></textarea>
</div><br>
<br>
<br>
<button>Send</button>
</div>
<div class="social-menu">
<ul>
<li><a href=""><i class="fa fa-facebook"></i></a></li>
<li><a href=""><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.instagram.com/shubham.__.sagar"><i class="fa fa-instagram"></i></a></li>
<li><a href=""><i class="fa fa-youtube"></i></a></li>
<li><a href=""><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</form>
</center>
</body>
</html>
We have added our CSS in the HTML file itself in the style tags.
THANK YOU.....
Article By:
Shubham Sagar
www.youtube.com/c/coveringtheworld
https://www.instagram.com/shubham.__.sagar
Code Star, India
This was very helpful for my Website. I wanted to create a good Contact us form which I found here. High Quality Content. Pls tell how to create flip over card in HTML & CSS.
ReplyDelete