Responsive map snipp with contact details box

Responsive map snipp with contact details box made with bootstrap, you can use this on middle of your web page, simple div structure easy to implement.



<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<title>Bootstrap contact details ui</title>
</head>

<body>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
    font-family: 'Roboto', sans-serif;
}
.btn {
    padding: 14px 26px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.btn-danger {
    background-color: #e34c43;
    border-color: #e34c43;
}
#gmap_canvas
{
    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="g"><feColorMatrix type="matrix" values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/></filter></svg>#g');
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%);    
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}
.map-box2{
z-index:9999; right:60px; width:360px;    
}
</style>

<div class="container-fluid p-0 m-0">
<div class="row no-gutters" >
<div class="col-12">
<div class="position-absolute p-5 bg-white m-5 text-center shadow-lg map-box2">
<h3 class="text-muted">+1800-555-2770</h3>
<div class=" mt-4">
  <address>
    <strong class="text-muted">Twitter, Inc.</strong><br>
    1355 Market St, Suite 900<br>
    San Francisco, CA 94103<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>

  <address class="mb-5">
    <strong class="text-muted">Email</strong><br>
    <a href="mailto:#" class="text-secondary">first.last@example.com</a>
  </address>
  <a href="" class="btn btn-outline-danger btn-lg w-100 d-block">Send Message</a>
</div>
</div>
<div class="embed-responsive embed-responsive-16by9 " style="height:520px !important;">

<iframe id="gmap_canvas" src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>


</div>
</div>
</div>
</div>



</body>
</html>
Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top