Contact page design

- June 17, 2024

How to create contact page using html and CSS

contact page

create a Responsive website using HTML AND CSS

👇ஃ Create a Contact us page ஃ

HTML CODE :-

<html>
<head>
<title>contact us form</title>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/
libs/font-awesome/
4.7.0/css/font-awesome.min.css">

</head>
<body>
<div class="container">
<h1><center><i>Contact Us</i></center>
</h1></br>
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fa fa-home"></i>
<div class="topic">
Address</div>
<div class="text-one">
satara</div>
</div>
<div class="phone details">
<i class ="fa fa-phone"></i>
<div class ="topic">phone</div>
<div class="text-one">+0198 9156 2356</div>
<div class="text-two">+0125 9825 2725</div>
</div>
<div class="email details">
<i class="fa fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">shreesareeshop@gmail.
com</div>
<div class="text-two">shree@gmail.com</div>
</div>

</div>
<div class="right-side">
<div class="topic-text"><center>Shree
Saree Shop</center></div><br>
<p><small>if you have any work from me or any
types of quries
related to my Shree Saree Shop, you can
send me message from here.
It's my pleasure to help you.</small></p>
<form action ="#">

<div class="input-box">
<input type="text" placeholder=
"Enter your name">
</div>
<div class="input-box">
<input type="email"
placeholder="Enter your email">
</div>

<div class="input-box">
<textarea rows="4" cols="50"
name="comment" form="usrform">
Enter text here...
</textarea>
<div class="button">
<input type="button" value
="send Now">
</div>
</form>
</div>
</div>
</div>
</body>
</html>

How to create contact page using html and CSS

CSS CODE :-

<style>

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"poppins",sans-serif;
}
body{
min-height :100vh;
width:100%;
background:#c8e8e9;
display:flex;
align-items:center;
justify-content:center;
}
.container{
width: 85%;
background:#fff;
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:100%;
display:flex;
flex-direction: column;
align-items :center;
justify-content: center;
margin-top :15px;
position :relative;
}
.content .left-side::before {
content :'';
position :absolute;
height :70%;
width :2px;
right:-15px;
top:50%;
transform:translateY(-50%);
background:#afafb6;
}
.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;
color:#afafb6;
}
.container .content .right-side{
width:75%;
margin-left:75px;
}
.content .right-side .topic-text{
font-size:23px;
font-weight:600;
color:#3e2093;
}
.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-radius:6px;
padding:0 15px;
resize:none;
}
.right-side .message-box{
min-height:110px;
}
.right-side .input-box textarea{
padding-top:6px;
}
.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;
border-radius:6px;
background:#3e2093;
cursor:pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background:#5029bc;
}
@media(max-width:950px){
.container{
width:90%;
padding:30px 40px 40px 35px;
}
.container .content .right-side{
width:75%;
margin-left:55px;
}
}
@media(max-width:820px){
.container{
margin:40px 0;
height:100%;
}
.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;
}

}
</style>

How to create contact page using html and CSS

OUTPUT :-

Related Post :-

php if else statements

css box padding property

css element selector

Comments