Responsive map snipp with contact details box example 2

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

<!doctype html>
<html lang="en">
<!-- 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="">

<title>Contact bootstrap ui</title>

<style type="text/css">
@import url(';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;
    filter: url('data:image/svg+xml;utf8,<svg xmlns=""><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);
z-index:9999; right:60px; width:360px;    

<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 shadow-lg map-box2">
<h3 class="text-muted">Contact</h3>
<div class=" mt-4">
    <strong class="text-muted">Address</strong><br>
    1355 Market St, Suite 900<br>
    San Francisco, CA 94103
    <strong class="text-muted">Phone</strong><br>
  <address class="mb-5">
    <strong class="text-muted">Email</strong><br>
    <a href="mailto:#" class="text-secondary"></a>
  <a href="" class="btn btn-outline-danger btn-lg w-100 d-block">Send Message</a>
<div class="embed-responsive embed-responsive-16by9 " style="height:560px !important;">

<iframe id="gmap_canvas" src="" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>


Spread the love

Related Posts

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

Back To Top