<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</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>
<!-- Intro Seven -->
<section class="intro carousel slide bg-overlay-light h-auto" id="carouselExampleCaptions">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" alt="First slide" src="https://grafreez.com/wp-content/temp_demos/suffi/img/intro-bg-01.jpg">
<div class="carousel-caption ">
<h2 class="display-4 text-white mb-2 mt-4 mgs"><span>MGS</span>ONLINE</h2>
<p class="text-white mb-3 px-5 lead">Only the best get though </p>
<a href="#" class="btn btn-primary btn-capsul px-4 py-2">Our Products</a>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" alt="First slide" src="https://grafreez.com/wp-content/temp_demos/suffi/img/intro-bg-02.jpg">
<div class="carousel-caption ">
<h2 class="display-4 text-white mb-2 mt-4">10% Off All Products for the month of Feburary</h2>
<p class="text-white mb-3 px-5 lead">Use code "Face10" at checkout to recieve 10% off </p>
<a href="#" class="btn btn-primary btn-capsul px-4 py-2">Our Products</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</section>
<!-- Our Values -->
<section class="info-section">
<div class="container">
<div class="head-box text-center mb-5">
<h2>Our Values</h2>
<h6 class="text-underline-primary">This is information panel</h6>
</div>
<div class="three-panel-block mt-5">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="service-block-overlay text-center mb-5 p-lg-3">
<i class="fa fa-laptop box-circle-solid mt-3 mb-3" aria-hidden="true"></i>
<h3>Modern</h3>
<p class="px-4">Never in all their history have men been able truly to conceive of the world as one a single sphere</p>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="service-block-overlay text-center mb-5 p-lg-3">
<i class="fa fa-calendar box-circle-solid mt-3 mb-3" aria-hidden="true"></i>
<h3>Integrated Calendar</h3>
<p class="px-4">Never in all their history have men been able truly to conceive of the world as one a single sphere</p>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="service-block-overlay text-center mb-5 p-lg-3">
<i class="fa fa-bug box-circle-solid mt-3 mb-3" aria-hidden="true"></i>
<h3>Value</h3>
<p class="px-4">Never in all their history have men been able truly to conceive of the world as one a single sphere</p>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="service-block-overlay text-center p-lg-3">
<i class="fa fa-cloud-upload box-circle-solid mt-3 mb-3" aria-hidden="true"></i>
<h3>Simplicity</h3>
<p class="px-4">Never in all their history have men been able truly to conceive of the world as one a single sphere</p>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="service-block-overlay text-center p-lg-3">
<i class="fa fa-diamond box-circle-solid mt-3 mb-3" aria-hidden="true"></i>
<h3>Premium</h3>
<p class="px-4">Never in all their history have men been able truly to conceive of the world as one a single sphere</p>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="service-block-overlay text-center p-lg-3">
<i class="fa fa-comments box-circle-solid mt-3 mb-3" aria-hidden="true"></i>
<h3>Support</h3>
<p class="px-4">Never in all their history have men been able truly to conceive of the world as one a single sphere</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Section: Our Products-->
<section class="products">
<div class="container">
<div class="head-box text-center mb-5">
<h2>Our Products</h2>
<h6 class="text-underline-primary">This is out products</h6>
</div>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-r">
<!--Card-->
<div class="card card-cascade wider">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://i.imgur.com/0QRYBlF.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Audio</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">Wireless ComfortPlus</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Complete with the latest technology, Fully wireless. Fully waterproof.</p>
<!--Card footer-->
<div class="card-footer">
<span class="left font-bold">
<strong>£59.99</strong>
</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye grey-text"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-r">
<!--Card-->
<div class="card card-cascade wider">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(49).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Temperature</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">JetPro Multi</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Hot and Cold Jet streamed smooth air. Relaible, Safe, Economical.</p>
<!--Card footer-->
<div class="card-footer">
<span class="left font-bold">
<strong>£189.99</strong>
</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye grey-text"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-r">
<!--Card-->
<div class="card card-cascade wider">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (56).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<div class="card-body text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Smartphone</h5>
</a>
<h4 class="card-title">
<strong>
<a href="">iPhone 6S</a>
</strong>
</h4>
<!--Description-->
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</p>
<!--Card footer-->
<div class="card-footer">
<span class="left font-bold">
<strong>2160$</strong>
</span>
<span class="right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fa fa-eye grey-text"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fa fa-heart grey-text"></i>
</a>
</span>
</div>
</div>
<!--Card content-->
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</section>
<!-- Why-Buy
================================================== -->
<section class="why-buy">
<div class="container">
<div class="row">
<div class="col-md-3 border-left-right">
<i class="fa fa-truck" aria-hidden="true"></i>
<h1>Free Shipping</h1>
<p>to uk mainland</p>
</div>
<div class="col-md-3">
<i class="fa fa-certificate" aria-hidden="true"></i>
<h1>1 Year Warranty</h1>
<p>On all Products</p>
</div>
<div class="col-md-3 border-left">
<i class="fa fa-archive" aria-hidden="true"></i>
<h1>Free Returns</h1>
<p>Have a probe</p>
</div>
<div class="col-md-3 border-left-right">
<i class="fa fa-gbp" aria-hidden="true"></i>
<h1>Best Prices</h1>
<p>Highly Competitive prices</p>
</div>
</div>
</div>
</section>
<!-- Contact
================================================== -->
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<!-- Contact Info-->
<section class="widget widget-light-skin">
<h3 class="widget-title">Get In Touch With Us</h3>
<p class="text-white">Phone: 00 33 169 7720</p>
<ul class="list-unstyled text-sm text-white">
<li><span class="opacity-50">Monday-Friday:</span>9.00 am - 8.00 pm</li>
<li><span class="opacity-50">Saturday:</span>10.00 am - 6.00 pm</li>
</ul>
<p><a class="navi-link-light" href="#">support@unishop.com</a></p><a class="social-button shape-circle sb-facebook sb-light-skin" href="#"><i class="socicon-facebook"></i></a><a class="social-button shape-circle sb-twitter sb-light-skin" href="#"><i class="socicon-twitter"></i></a><a class="social-button shape-circle sb-instagram sb-light-skin" href="#"><i class="socicon-instagram"></i></a><a class="social-button shape-circle sb-google-plus sb-light-skin" href="#"><i class="socicon-googleplus"></i></a>
</section>
</div>
<div class="col-lg-3 col-md-6">
<!-- Mobile App Buttons-->
<section class="widget widget-light-skin">
<h3 class="widget-title">Our Mobile App</h3><a class="market-button apple-button mb-light-skin" href="#"><span class="mb-subtitle">Download on the</span><span class="mb-title">App Store</span></a><a class="market-button google-button mb-light-skin" href="#"><span class="mb-subtitle">Download on the</span><span class="mb-title">Google Play</span></a><a class="market-button windows-button mb-light-skin" href="#"><span class="mb-subtitle">Download on the</span><span class="mb-title">Windows Store</span></a>
</section>
</div>
<div class="col-lg-3 col-md-6">
<!-- About Us-->
<section class="widget widget-links widget-light-skin">
<h3 class="widget-title">About Us</h3>
<ul>
<li><a href="#">Careers</a></li>
<li><a href="#">About Unishop</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Our Blog</a></li>
</ul>
</section>
</div>
<div class="col-lg-3 col-md-6">
<!-- Account / Shipping Info-->
<section class="widget widget-links widget-light-skin">
<h3 class="widget-title">Account & Shipping Info</h3>
<ul>
<li><a href="#">Your Account</a></li>
<li><a href="#">Shipping Rates & Policies</a></li>
<li><a href="#">Refunds & Replacements</a></li>
<li><a href="#">Taxes</a></li>
<li><a href="#">Delivery Info</a></li>
<li><a href="#">Affiliate Program</a></li>
</ul>
</section>
</div>
</div>
<hr class="hr-light mt-2 margin-bottom-2x">
<div class="row">
<div class="col-md-7 padding-bottom-1x">
<!-- Payment Methods-->
<div class="margin-bottom-1x" style="max-width: 615px;"><img alt="Payment Methods" src="img/payment_methods.png">
</div>
</div>
<div class="col-md-5 padding-bottom-1x">
<div class="margin-top-1x hidden-md-up"></div>
<!--Subscription-->
<form class="subscribe-form" action="//rokaux.us12.list-manage.com/subscribe/post?u=c7103e2c981361a6639545bd5&id=1194bb7544" method="post" target="_blank" novalidate="">
<div class="clearfix">
<div class="input-group input-light">
<input name="EMAIL" class="form-control" type="email" placeholder="Your e-mail"><span class="input-group-addon"><i class="icon-mail"></i></span>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_c7103e2c981361a6639545bd5_1194bb7544" tabindex="-1" type="text">
</div>
<button class="btn btn-primary" type="submit"><i class="icon-check"></i></button>
</div><span class="form-text text-sm text-white opacity-50">Subscribe to our Newsletter to receive early discount offers, latest news, sales and promo information.</span>
</form>
</div>
</div>
<!-- Copyright-->
<p class="footer-copyright">© All rights reserved. Made with <i class="icon-heart text-danger"></i><a href="http://rokaux.com/" target="_blank"> by rokaux</a></p>
</div>
</footer>
<!--http://wrapbootstrap.com/preview/WB0148688 -->
@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");
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
color: #5a5a5a;
font-family: 'Lato', sans-serif;
background-color:white;
}
h1, h2, h3, h4, h5 {
font-family: 'Montserrat', sans-serif;
}
.parallax-section {
background-attachment: fixed!important;
}
.btn-transparent-white:hover, .btn-transparent-white:focus {
background: #fff;
color: #0297FF
}
.relative-box {
position: relative
}
section {
float: left;
width: 100%;
padding: 80px 0;
}
/* 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;
}
/*----Slider----*/
.mgs span{
color:#0297ff;
}
/* Why buy
-------------------------------------------------- */
.why-buy{
border-bottom:1px solid #F8F8F8;
}
.why-buy i{
padding:15px;
font-size:15px;
}
.why-buy, h1{
text-align:center;
font-size: 15px;
text-transform: uppercase;
}
.why-buy p {
font-size:10px;
}
.border-left-right{
border:solid #F8F8F8;
border-width:0px 1px;
}
.why-buy .col-md-3:hover{
background-color:#F8F8F8;
}
/* ========== Who We Are ========== */
.info-section{
background-color:white;
float: left;
width:100%;
padding:5rem 0;
position: relative;
z-index: 1;
}
.info-section .head-sec{
float: left;
width:100%;
}
.info-section h3{
font-size: 1.4rem;
}
.info-section p {
font-size: 1rem;
line-height: 1.3rem;
}
.info-section .box h2{
font-size:24px;
margin-bottom:20px;
margin-top:0;
font-weight: 700;
font-size: 2.5rem;
}
.info-section .box i{
font-size:20px;
}
.info-section .box{
display:flex;
}
.info-section .text-box{
flex:1 1 0;
text-align:left;
}
.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
}
.content-half{
color:#fff;
}
.content-half ul{
padding:0;
list-style:none;
}
.content-half ul li{
margin:15px 0;
float:left;
width:100%;
}
.content-half ul li i{
float:left;
font-size:30px;
padding-top:10px;
padding-bottom:10px;
}
.content-half ul li .list-content{
float:left;
margin-left:20px;
}
.content-half ul li strong{
font-size:19px;
font-weight:700;
}
.content-half .btn{
margin-top:20px;
}
.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;
}
/*------Our Products---------*/
.products{
background-color:white;
}
.left{float:left;}
.right{float:right;}
/* Footer
-------------------------------------------------- */
.site-footer{
background-color:#374250;
padding-top:72px;
}
.widget{
margin-bottom:32px;
}
.widget-links ul>li>a{
display:inline-block;
transition:color .3s;
color:#606975;
font-size:14px;
font-weight:500;
text-decoration:none;
color:white;
}
.widget-title{
margin-bottom:20px;
padding-bottom:12px;
border-bottom:1px solid #e1e7ec;
color:#9da9b9;
font-size:14px;
font-weight:500;
text-transform:uppercase
}
.text-white{
color:white;
}
.navi-link-light{
color:white;
}
