Contact Us Card Design with Map using HTML & CSS

Contact Us Card Design with Map using HTML & CSS

Hello developers, today in this blog, you'll learn to create a Contact Us Card Design with Map using HTML & CSS.

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.

<!DOCTYPE html> <html> <head> <title>Contact us with map || Learning Robo</title> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> </head> <body> <div class="container"> <div class="contact-box"> <div class="left"> <div class="mapouter"> <div class="gmap_canvas"> <iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=600&height=400&hl=en&q=pacific creation kulithalai&t=&z=14&ie=UTF8&iwloc=B&output=embed"></iframe> </div></div> </div> <div class="right"> <h2>Contact Us</h2> <input type="text" class="field" placeholder="Your Name"> <input type="text" class="field" placeholder="Your Email"> <input type="text" class="field" placeholder="Phone"> <textarea placeholder="Message" class="field"></textarea> <button class="btn">Send</button> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </div> </div> </body> </html>
CSS provides style to an HTML page.To make the page attractive create a CSS file with the name style.css and remember that you have to create a file with a .css 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}
We hope you would like this Contact Us Card Design with Map using HTML & CSS.

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

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome