Showing posts with label contact us page. Show all posts

Showing posts with label contact us page. Show all posts

Monday, June 17, 2024

Contact page design

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 :-

1] About us page
2] Responsive contact us page
3]Home Page 4] Product Page

Subscribe to: Posts (Atom)