A Contact Form is a section on the webpage, where the user can send messages to the owner or admin of that website. Mainly this page contains three input fields where users need to fill in their name, email, and message. Organizations and businesses might want to grandstand their physical areas originally.
In this blog (Responsive Contact Us Card Design), on the webpage, there is a card that is divided into two. On the left side, the address, phone number, and the email id of the company are provided and on the right side the contact us form four input fields where users need to fill in their name, email, phone number, message box and, a send button which is used to send the message.
On the larger screen, the details of the organizations are there on the left and you can fill in your details on the right side. Whereas on the smaller screen, you can fill in your details on the top and the organization details are below your input fields.
The source code of this Responsive Contact Us Card Design with Map is given below, if you want the source code of this program, you can copy it. You can use this Responsive Contact Us Card Design with Map with your creativity and can take this project to the next level.
Responsive Contact Us Card Design [Source Code]
To make this website (Responsive Contact Us Card Design), you need to create two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #12192c;
color:#fff;
border-radius: 20px;
padding: 20px 60px 30px 40px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.content{
display: flex;
align-items: center;
justify-content: space-between;
}
.left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.details{
margin: 14px;
text-align: center;
}
.details i{
font-size: 30px;
color: #fff;
margin-bottom: 10px;
}
.topic{
font-size: 18px;
font-weight: 500;
}
.text-one{
font-size: 14px;
color: #afafb6;
}
.text-two{
font-size: 14px;
color: #afafb6;
}
.right-side{
width: 75%;
margin-left: 75px;
}
.topic-text{
font-size: 23px;
font-weight: 600;
color: #C850C0
}
.input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.input-box input{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 20px;
padding: 0 15px;
}
.input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 20px;
padding: 0 15px;
resize: none;
}
.message-box{
min-height: 110px;
}
.input-box textarea{
padding-top: 6px;
}
.button{
display: inline-block;
margin-top: 12px;
}
.button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #C850C0;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background-color: #12192c;
color:#C850C0;
border:1px solid #3e2093;
}
@media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.right-side{
width: 75%;
margin-left: 55px;
}
}
@media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.content{
flex-direction: column-reverse;
}
.left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.left-side::before{
display: none;
}
.right-side{
width: 100%;
margin-left: 0;
}
}
.credit a{
text-decoration: none;
color: #C850C0;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Contact Us Card Design using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Author - Preetha (Pacific Creation Student Ambassador )
Post a Comment
Thank you
Learning robo team