responsive contact us page design using HTML | CSS
responsive contact us page design using HTML | CSS
Source Code :-
HTML Source code:-
<html><body>
<div class="container"> <div class="content"> <div class="left-side"> <div class="address details"> <i class="fas fa-map-marker-alt"></i> <div class="topic">Address</div> <div class="text-one">karad</div> <div class="text-two">pune</div> </div> <div class="phone details"> <i class="fas fa-phone-alt"></i> <div class="topic">Phone</div> <div class="text-one">+0048 5673 8347</div> <div class="text-two">+0026 5656 9678</div> </div> <div class="email details"> <i class="fas fa-envelope"></i> <div class="topic">Email</div> <div class="text-one">learnprogramminglanguage@gmail.com</div> <div class="text-two">webdesigningtheory@gmail.com</div> </div> </div> <div class="right-side"> <div class="topic-text"> <center><i><u><h2>Contact Us </h2></i></u></center> <br>Send us a message</div> <p>If you have any work from me or any types of quries related to my product, you can send me message from here. It's my pleasure to help you.</p> <form action="#"> <div class="input-box"> <input type="text" placeholder="Enter your name"> </div> <div class="input-box"> <input type="text" placeholder="Enter your email"> </div> <div class="input-box message-box"> <textarea rows="9" cols="70"> Enter your Message </textarea> </div> <div class="button"> <input type="button" value="Send Now" > </div> </form> </div> </div><br><Br> <?php include 'footer.php';?> //connection to footer page use to the php language </div></body></html>
<html>
<body>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">karad</div>
<div class="text-two">pune</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">+0048 5673
8347</div>
<div class="text-two">+0026 5656
9678</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">
learnprogramminglanguage@gmail.com</div>
<div class="text-two">
webdesigningtheory@gmail.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">
<center><i><u><h2>Contact Us
</h2></i></u></center>
<br>Send us a message</div>
<p>If you have any work from me or
any types of quries related to my product,
you can send me message from here.
It's my pleasure to help you.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="
Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="
Enter your email">
</div>
<div class="input-box message-box">
<textarea rows="9" cols="70">
Enter your Message </textarea>
</div>
<div class="button">
<input type="button"
value="Send Now" >
</div>
</form>
</div>
</div><br><Br>
<?php include 'footer.php';?>
//connection to footer page use to the
php language
</div>
</body>
</html>
CSS Source Code:-
<head>
<title>Contact us Page</title>
<link rel ="stylesheet" href="style.css">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
width:100%;
display:flex;
min height::100vh ;
align-item:center;
}
.container{
width:85%;
border-radius:6px;
padding:20px 60px 30px 40px;
box-shadow:0 5px 10px rgba(0,0,0,0.2);
}
.container .content{
display:flex;
align-items:center;
justify-content:space-between;
}
.container .content .left-side{
width:25%;
height: 100px;
display:flex;
flex-direction:column;
align-items:center;
margin-top:-300px;
position:relative;
}
.content .left-side::before{
content:'';
position:absolute;
height:70%;
width:2px;
right:-15;
top:50%;
transform:translateY(-50%);
}
.content .left-side .details{
margin:14px;
text-align:center;
}
.content .left-side .details i{
font-size:30px;
color:#3e2093;
margin-bottom:10px;
}
.content .left-side .details .topic{
font-size:18px;
font-weight:500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size:14px;
}
.container .content .right-side{
width:75%;
margin-left:75px;
}
.content .right-side .topic-text{
font-size:23px;
font-weight:600;
}
.right-side .input-box{
height :50px;
width:100%;
margin:12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height:100%;
width:100%;
border:none;
outline:none;
font-size:16px;
background:#F0F1F8;
border-redius:6px;
padding:0 15px;
resize:none;
}
.right-side .input-box textarea{
resize:none;
}
.right-side .message-box{
min-height:110px;
}
.right-side .button{
display:inline-block;
margin-top:12px;
}
.right-side .button input
[type="button"]{
color:#fff;
font-size:18px;
outline:none;
border:none;
padding:8px 16px;
background:#3e2093;
cursor:pointer;
transition:all 0.3s ease;
}
.button input[type="button"]
:hover{
background:#5029bc;
}
@media (max-width: 820px) {
.container{
margin: 40px 0;
height:130%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}
h2{
color:blue;
}
</style>
</head>
responsive contact us page design using HTML | CSS
Output:-
