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 card contains four input fields where user need to fill in their name, email, phone number, and message. Organizations and businesses might want to grandstand their physical areas originally. This is one of the best ways to execute.
In this blog (Contact Us Card Design with Map), on the webpage, there is a map on the left side and the contact us form is on the right side with four input fields where user need to fill in their name, email, phone number, message box and, a send button.
If you need to have a clear view of the location on the map, there is a '+'icon to zoom in and there is a '-' icon to zoom out. The map can also be viewed largely by clicking on the 'View larger map' at the top left.
The source code of this 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 Contact Us Card Design with Map with your creativity and can take this project to the next level.
Contact Us Card Design with Map [Source Code]
To make this website (Contact Us Card Design with Map), 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.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Quicksand', sans-serif;
}
body{
height: 100vh;
width: 100%;
}
.container{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 100px;
background-color: #FBDA61;
background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
}
.contact-box{
max-width: 850px;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
align-items: center;
text-align: center;
background-color: #fff;
box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19);
border-radius: 12px;
}
.left{
margin: 10px 10px;
height:500px;
}
.right{
padding: 25px 40px;
}
h2{
position: relative;
padding: 0 0 10px;
margin-bottom: 10px;
}
h2:after{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
height: 4px;
width: 50px;
border-radius: 2px;
background-color: violet;
}
.field{
width: 100%;
border: 2px solid rgba(0, 0, 0, 0);
outline: none;
background-color: rgba(230, 230, 230, 0.6);
padding: 0.5rem 1rem;
font-size: 1.1rem;
margin-bottom: 22px;
transition: .3s;
}
.field:hover{
background-color: rgba(0, 0, 0, 0.1);
}
textarea{
min-height: 150px;
}
.btn{
width: 100%;
padding: 0.5rem 1rem;
background-color: violet;
font-size: 1.1rem;
border: none;
outline: none;
cursor: pointer;
transition: .3s;
border-radius: 12px;
}
.btn:hover{
background-color: green;
}
.field:focus{
border: 2px solid violet;
background-color: #fff;
}
@media screen and (max-width: 800px){
.contact-box{
grid-template-columns: 1fr;
}
body{
height: 200vh;
width: 100%;
}
}
.credit a{
text-decoration: none;
color: violet;
}
.mapouter{position:relative;text-align:center;width:100%;height:500px;}
.gmap_canvas {overflow:hidden;background:none!important;width:100%;height:600px;}
.gmap_iframe {height:500px}
Thank you for reading our blog. If you face any problem in creating this Contact Us Card Design with Map using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
إرسال تعليق
Thank you
Learning robo team