Simple Location Content Section

Simple Location Content Section Bootstrap 4 Snippet & Component

Download Files

Download Files contains - HTML,CSS,JS,Images Files

With cover and overlapped profile picture

                                        
                                      html,
body {
  width: 100%;
  height: 100%; }

body {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
  background-color: #FAFAFA; }
a {
    color: #343a40;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
a:hover {
    color: #000000;
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    line-height: 1.2;
}
h1, .h1 {
    font-size: 2.5rem;
}
h2, .h2 {
    font-size: 2rem;
}
h3, .h3 {
    font-size: 1.5rem;
}
h4, .h4 {
    font-size: 1.375rem;
}
h5, .h5 {
    font-size: 1.25rem;
}
h6, .h6 {
    font-size: 1rem;
}
 

/*Google fonts*/

b, strong {
  font-weight: 500; }

.brand-logo {
  width: 180px; }

.navbar {
  min-height: 80px; }

.navbar-nav .nav-item .nav-link {
  font-weight: 500; }

.navbar-brand {
  font-weight: 700; }

.navbar-inverse .navbar-nav .nav-link, .navbar .navbar-brand, .navbar-toggler span {
  color: rgba(255, 255, 255, 0.8); }

.navbar .nav-item .active, .navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .navbar-brand:hover {
  color: #fff !important; }

.sticky-navigation {
  top: 0px;
  background-color: transparent; }

.hero {
  height: 100vh;
  min-height: 500px;
  padding: 100px 0; }

.hero .brand {
  margin-top: 100px; }

@media (max-width: 768px) {
  .hero .brand {
    margin-top: 0px; } }

.store-img {
  width: 170px; }

.hero h1 {
  font-weight: 100; }

.hero h1 b {
  font-weight: 700; }

a {
  color: #d81b60;
  transition: all .35s; }

a:hover,
a:focus {
  color: #d81b60 !important;
  outline: 0;
  text-decoration: none !important; }

section {
  padding: 80px 0px; }

.img-team {
  width: 150px;
  box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.15);
  transition: 350ms ease all; }

.img-team:hover {
  box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15); }

.team h5 {
  padding: 35px 0 15px 0;
  font-weight: 500; }

.team p {
  color: #999; }

.card-outline-primary {
  border: solid 1px #d81b60; }

.small-xl {
  font-size: 90%; }

.small-xs {
  font-size: 70%; }

.badge {
  color: #fff; }

/*===============================================
* Background Colors
================================================*/
.bg-texture {
  background: transparent radial-gradient(circle farthest-side at right bottom, #ec407a 5%, #e91e63 25%, #d81b60 80%, #c2185b 98%) repeat scroll 0% 0%; }

.bg-texture-collage {
  background: linear-gradient(-45deg, #ec407a 33%, transparent 0%), linear-gradient(-45deg, #e91e63 67%, transparent 33%), linear-gradient(-45deg, #ec407a 100%, transparent 67%); }

.bg-alt {
  background-color: #fff; }

.bg-faded {
  background-color: #FAFAFA; }

.bg-primary {
  background-color: #d81b60 !important; }

.bg-footer {
  background-color: #171717; }

/*===============================================
* Text Colors
================================================*/
.text-faded {
  color: #FAFAFA; }

.text-dark {
  color: #37474F; }

.text-muted {
  color: #999 !important; }

.text-white {
  color: #fff; }

.text-primary {
  color: #d81b60 !important; }

.text-primary-light {
  color: #ff80ab; }

/*===============================================
* Icon Sizes
================================================*/
.icon-lg {
  font-size: 60px;
  line-height: 18px; }

.icon-md {
  font-size: 50px;
  line-height: 14px; }

.icon-sm {
  font-size: 30px;
  line-height: 14px; }

/*===============================================
* Colored Buttons
================================================*/
.btn {
  box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.15);
  transition: 350ms ease all;
  text-transform: uppercase;
  font-weight: 500;
  padding: .6rem 1.5rem; }

.btn:hover, .btn:focus {
  box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15); }

.btn-white {
  color: #ff4081 !important;
  background-color: #fff;
  border-color: #fff; }

.btn-white:hover {
  color: #ff4081; }

.btn-primary {
  background-color: #ff4081 !important;
  border-color: #ff4081 !important; }

.btn-primary:hover, .btn-primary:focus {
  color: #fff !important; }

.btn-radius {
  border-radius: 50px; }

/*===============================================
* Borders Utilities
================================================*/
.border-none {
  border: none !important;
  border-color: transparent !important; }

.border-all {
  border: 1px solid #DEE5E5 !important; }

.border-left {
  border-left: 1px solid #DEE5E5 !important; }

.border-right {
  border-right: 1px solid #DEE5E5 !important; }

.border-top {
  border-top: 1px solid #DEE5E5 !important; }

.border-bottom {
  border-bottom: 1px solid #DEE5E5 !important; }

/*===============================================
* Social Icons
================================================*/
.text-twitter-alt, .text-facebook-alt, .text-linkedin-alt, .text-google-alt, .text-github-alt {
  color: #d81b60; }

.text-twitter, .text-twitter-alt:hover {
  color: #00aced; }

.text-facebook, .text-facebook-alt:hover {
  color: #3b5998; }

.text-google, .text-google-alt:hover {
  color: #dd4b39; }

.text-linkedin, .text-linkedin-alt:hover {
  color: #007bb6; }

.text-github, .text-github-alt:hover {
  color: #000000; }
      
                                        
                                    

                                        
                                      Js      
                                        
                                    

Credits

Designbombs.com

More Bootstrap UI Components

Clean & Simple Testimonials Block

139 0 testimonials,BS4

Elegant Header Design

135 0 header,BS4

Stunning Testimonials Block

134 0 testimonials,BS4

Call to Action Example

163 0 CTA,BS4

Awesome Animating Banner

161 0 banner,BS4

Stunning Services block with Title

146 0 services,BS4

Want to Hire Me Form

167 0 forms,BS4

Dark Background Footer

161 0 footer,BS4

How we work Section

156 0 how it works,BS4

Tired of Opening One Strap After Another?

Go to Pricing and start using AJAX Filter Options, no need to open multiple pages.

Get Started