<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-sm top-bar sps sps--abv"> <div class="container-fluid"> <button class="navbar-toggler pull-left " type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand justify-content-center" href="#"><span>MGS</span>Online</a> <div class="collapse navbar-collapse mx-auto" id="navbarNav"> <ul class="navbar-nav mx-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Support</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">My Account</a> </li> </ul> </div> <a href="#" style="color:white; margin-right:10px;letter-spacing:5px;text-transform:uppercase">NewsLetter</a> <a href="#"> <i class="fa fa-shopping-cart" aria-hidden="true" style="color:white;font-size:15px"></i> </a> </div> </nav> <section> <div class="main"> <div class="container"> <div class="row"> <div class="col-md-6"> <h1>Next Generation Earphones</h1> <h2>Wireless | Waterproof | Bluetooth 4.1</h2> <h2 class="pricing float-left">£59.99</h2> <btn class="btn btn-primary">Buy Now</btn> </div> <div class="col-md-6"> </div> </div> </div> </div> </section> <section> <div class="section-white"> <div class="container info-section"> <div class="head-box text-center mb-5"> <h2>Fully Waterproof</h2> <h6 class="text-underline-primary">Almost 50% of electroinic equipment is broken through humidity.With a brand new design MGS Comfort Plus comes fully waterproof, dustproof and sweatproof. Meaning you dont have to worry about dropping them.</h6> </div> </div> </div> </section>

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700'); @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700'); @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); /* BODY -------------------------------------------------- */ body { color: #5a5a5a; font-family: 'Lato', sans-serif; background-color:white; } h1, h2, h3, h4, h5 { font-family: 'Montserrat', sans-serif; } .section-white{ background-color:white; } /* TOP HEADER -------------------------------------------------- */ .navbar.top-bar { border-radius: 0; padding: 16px 0; z-index: 16; } .navbar-toggler { border: 1px solid #fff; color: #fff; position: absolute; right: 21px; } .navbar-margin{ margin:0 5%; } .sps { padding: 1em .5em; position: fixed; top: 0; left: 0; transition: all 0.25s ease; width: 100%; } .sps--abv { opacity:0.5; background-color: black; } .sps--blw { background-color: #fff; color: #fff; } .top-bar a.navbar-brand { color: #fff; font-size: 26px; font-weight: 800; padding: 5px 0 0 10px; text-transform: uppercase; } .sps--blw.top-bar a.navbar-brand { color: #000; } .top-bar a.navbar-brand span { color: #0297ff; } .top-bar .nav-link { color: #fff; font-size: 16px; font-weight: 500; padding: 12px 18px!important; } .sps--blw.top-bar .nav-link { color: #000 } .top-bar .navbar-nav .nav-item { margin: 0 } .top-bar .nav-link:hover, .top-bar .nav-item.active a { color: #0297ff; } .sps--blw.top-bar .nav-link:hover, .sps--blw.top-bar .nav-item.active a { color: #0297ff; border-bottom: none; border-radius: 0; } /* MAIN -------------------------------------------------- */ .main{ padding:200px 0; clear:both; } /* FEATURES -------------------------------------------------- */ .head-box{ position:relative; } .text-underline-primary:before{ content:""; position: absolute; width:50px; height: 4px; left:50%; margin-left:-25px; background:#35CBDF; bottom: -15px; border-radius: 10px; } .info-section{ background-color:white; width:100%; padding:5rem 0; position: relative; z-index: 1; } .info-section h3{ font-size: 1.4rem; } .info-section p { font-size: 1rem; line-height: 1.3rem; } .info-section .box i{ font-size:20px; } .info-section .icon-box{ line-height: 1.2; width:70px; } .info-section .service-block-overlay{ transition: .5s; -webkit-transition: .5s; -o-transition: .5s; -moz-transition: .5s; } .info-section .service-block-overlay:hover{ background: #fff none repeat scroll 0 0; border-radius: 5px; box-shadow: 0 0 90px rgba(0, 0, 0, 0.1); float: left; margin-top: -10px; position: relative; width: 100%; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s }