gramps
373ebc8c93
952 days continuous production uptime, 40k+ tp/s single node. Original corpo Bitbucket history not included — clean archive commit.
1174 lines
40 KiB
HTML
Executable File
1174 lines
40 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en" class="">
|
|
|
|
<head>
|
|
<!-- Required meta tags always come first -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Material Design Bootstrap Template</title>
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="../css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Material Design Bootstrap -->
|
|
<link href="../css/mdb.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
|
|
html,
|
|
body,
|
|
header,
|
|
.jarallax {
|
|
height: 700px;
|
|
}
|
|
|
|
@media (max-width: 740px) {
|
|
html,
|
|
body,
|
|
header,
|
|
.jarallax {
|
|
height: 100vh;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 800px) and (max-width: 850px) {
|
|
html,
|
|
body,
|
|
header,
|
|
.jarallax {
|
|
height: 100vh;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 560px) and (max-width: 650px) {
|
|
header .jarallax h1 {
|
|
margin-bottom: .5rem !important;
|
|
}
|
|
header .jarallax h5 {
|
|
margin-bottom: .5rem !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 660px) and (max-width: 700px) {
|
|
header .jarallax h1 {
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
header .jarallax h5 {
|
|
margin-bottom: 1.5rem !important;
|
|
}
|
|
}
|
|
|
|
.top-nav-collapse {
|
|
background-color: #7283A7 !important;
|
|
}
|
|
|
|
.navbar:not(.top-nav-collapse) {
|
|
background: transparent !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.navbar:not(.top-nav-collapse) {
|
|
background: #7283A7 !important;
|
|
}
|
|
}
|
|
@media (min-width: 800px) and (max-width: 850px) {
|
|
.navbar:not(.top-nav-collapse) {
|
|
background: #7283A7!important;
|
|
}
|
|
}
|
|
|
|
footer.page-footer {
|
|
background-color: #383838;
|
|
}
|
|
|
|
@media (max-width: 450px) {
|
|
.display-3 {
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!--Main Navigation-->
|
|
<header>
|
|
|
|
<!--Navbar-->
|
|
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">
|
|
<strong>MDB</strong>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7"
|
|
aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
|
|
<ul class="navbar-nav mr-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="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Profile</a>
|
|
</li>
|
|
</ul>
|
|
<form class="form-inline">
|
|
<div class="md-form my-0">
|
|
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Intro Section -->
|
|
<div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/model-3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center;">
|
|
<div class="mask rgba-white-light">
|
|
<div class="container h-100 d-flex justify-content-center align-items-center">
|
|
<div class="row pt-5 mt-3">
|
|
<div class="col-md-12 mb-3">
|
|
<div class="intro-info-content text-center">
|
|
<h1 class="display-3 mb-5 wow fadeInDown" data-wow-delay="0.3s">NEW
|
|
<a class="indigo-text font-weight-bold">COLLECTION</a>
|
|
</h1>
|
|
<h5 class="text-uppercase mb-5 mt-1 font-weight-bold wow fadeInDown" data-wow-delay="0.3s">Free delivery & special prices</h5>
|
|
<a class="btn btn-outline-indigo btn-lg wow fadeInDown" data-wow-delay="0.3s">Shop</a>
|
|
<a class="btn btn-indigo btn-lg wow fadeInDown" data-wow-delay="0.3s">Lookbook</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</header>
|
|
<!--Main Navigation-->
|
|
|
|
|
|
<!--Main Layout-->
|
|
<main>
|
|
|
|
<div class="container">
|
|
|
|
<!--Section: Products v.3-->
|
|
<section class="section pb-3 wow fadeIn" data-wow-delay="0.3s">
|
|
|
|
<!--Section heading-->
|
|
<h1 class="font-weight-bold text-center h1 my-5">Our bestsellers</h1>
|
|
<!--Section description-->
|
|
<p class="text-center grey-text mb-5 mx-auto w-responsive">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse
|
|
quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
|
|
|
<!--Grid row-->
|
|
<div class="row">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
|
|
<!--Card-->
|
|
<div class="card card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view overlay z-depth-1">
|
|
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(36).jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Blouse</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">White Blouse</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">59$
|
|
<span class="discount">199$</span>
|
|
</span>
|
|
<span class="float-right">
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
|
|
<!--Card-->
|
|
<div class="card card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view overlay z-depth-1">
|
|
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(37).jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Accessories</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">Black hat</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">39$
|
|
<span class="discount">99$</span>
|
|
</span>
|
|
<span class="float-right">
|
|
<a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
|
|
<!--Card-->
|
|
<div class="card card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view overlay z-depth-1">
|
|
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(38).jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Sweatshirt</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">Flower sweatshirt</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">79$
|
|
<span class="discount">299$</span>
|
|
</span>
|
|
<span class="float-right">
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Fourth column-->
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
|
|
<!--Card-->
|
|
<div class="card card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view overlay z-depth-1">
|
|
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(39).jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Outwear</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">Denim jacket</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">79$
|
|
<span class="discount">299$</span>
|
|
</span>
|
|
<span class="float-right">
|
|
<a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
<!--Fourth column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
</section>
|
|
<!--Section: Products v.3-->
|
|
|
|
<hr class="mb-5 mt-4">
|
|
|
|
<!--Section: Products v.5-->
|
|
<section class="section pb-3 wow fadeIn" data-wow-delay="0.3s">
|
|
|
|
<!--Section heading-->
|
|
<h1 class="font-weight-bold text-center h1 my-5">Last products</h1>
|
|
<!--Section description-->
|
|
<p class="text-center grey-text mb-5 mx-auto w-responsive">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse
|
|
quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
|
|
|
|
<!--Carousel Wrapper-->
|
|
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
|
|
|
|
<!--Controls-->
|
|
<div class="controls-top">
|
|
<a class="btn-floating primary-color" href="#multi-item-example" data-slide="prev">
|
|
<i class="fa fa-chevron-left"></i>
|
|
</a>
|
|
<a class="btn-floating primary-color" href="#multi-item-example" data-slide="next">
|
|
<i class="fa fa-chevron-right"></i>
|
|
</a>
|
|
</div>
|
|
<!--Controls-->
|
|
|
|
<!--Indicators-->
|
|
<ol class="carousel-indicators">
|
|
<li class="primary-color" data-target="#multi-item-example" data-slide-to="0" class="active"></li>
|
|
<li class="primary-color" data-target="#multi-item-example" data-slide-to="1"></li>
|
|
<li class="primary-color" data-target="#multi-item-example" data-slide-to="2"></li>
|
|
</ol>
|
|
<!--Indicators-->
|
|
|
|
<!--Slides-->
|
|
<div class="carousel-inner" role="listbox">
|
|
|
|
<!--First slide-->
|
|
<div class="carousel-item active">
|
|
|
|
<div class="col-md-4">
|
|
|
|
<!--Card-->
|
|
<div class="card card-cascade narrower card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view view-cascade overlay">
|
|
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(39).jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body card-body-cascade text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Shoes</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">Leather boots</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">69$</span>
|
|
<span class="float-right">
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 clearfix d-none d-sm-block">
|
|
|
|
<!--Card-->
|
|
<div class="card card-cascade narrower card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view view-cascade overlay">
|
|
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(22).jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body card-body-cascade text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Jeans</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">Slim jeans</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">99$</span>
|
|
<span class="float-right">
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 clearfix d-none d-sm-block">
|
|
|
|
<!--Card-->
|
|
<div class="card card-cascade narrower card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view view-cascade overlay">
|
|
<img src="https://mdbootstrap.com/img/Photos/Others/img%20(31).jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body card-body-cascade text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Shorts</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">Denim shorts</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
|
|
non.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">49$</span>
|
|
<span class="float-right">
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!--First slide-->
|
|
|
|
<!--Second slide-->
|
|
<div class="carousel-item">
|
|
|
|
<div class="col-md-4">
|
|
|
|
<!--Card-->
|
|
<div class="card card-cascade narrower card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view view-cascade overlay">
|
|
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(30).jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body card-body-cascade text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Accessories</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">Summer hat</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">39$</span>
|
|
<span class="float-right">
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 clearfix d-none d-sm-block">
|
|
|
|
<!--Card-->
|
|
<div class="card card-cascade narrower card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view view-cascade overlay">
|
|
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(37).jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body card-body-cascade text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Shoes</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">Black heels</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
|
|
non.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">79$</span>
|
|
<span class="float-right">
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 clearfix d-none d-sm-block">
|
|
|
|
<!--Card-->
|
|
<div class="card card-cascade narrower card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view view-cascade overlay">
|
|
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(31).jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body card-body-cascade text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Outerwear</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">Black jacket</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">149$</span>
|
|
<span class="float-right">
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!--Second slide-->
|
|
|
|
<!--Third slide-->
|
|
<div class="carousel-item">
|
|
|
|
<div class="col-md-4">
|
|
|
|
<!--Card-->
|
|
<div class="card card-cascade narrower card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view view-cascade overlay">
|
|
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(38).jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body card-body-cascade text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Accessories</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">Leather bag</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
|
|
non.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">29$</span>
|
|
<span class="float-right">
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 clearfix d-none d-sm-block">
|
|
|
|
<!--Card-->
|
|
<div class="card card-cascade narrower card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view view-cascade overlay">
|
|
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/belt.jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body card-body-cascade text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Accessories</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">Leather belt</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">89$</span>
|
|
<span class="float-right">
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
|
|
<div class="col-md-4 clearfix d-none d-sm-block">
|
|
|
|
<!--Card-->
|
|
<div class="card card-cascade narrower card-ecommerce">
|
|
|
|
<!--Card image-->
|
|
<div class="view view-cascade overlay">
|
|
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(57).jpg" class="card-img-top" alt="">
|
|
<a>
|
|
<div class="mask rgba-white-slight"></div>
|
|
</a>
|
|
</div>
|
|
<!--Card image-->
|
|
|
|
<!--Card content-->
|
|
<div class="card-body card-body-cascade text-center no-padding">
|
|
<!--Category & Title-->
|
|
<a href="" class="text-muted">
|
|
<h5>Shoes</h5>
|
|
</a>
|
|
<h4 class="card-title">
|
|
<strong>
|
|
<a href="">Sneakers</a>
|
|
</strong>
|
|
</h4>
|
|
|
|
<!--Description-->
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.
|
|
</p>
|
|
|
|
<!--Card footer-->
|
|
<div class="card-footer">
|
|
<span class="float-left">129$</span>
|
|
<span class="float-right">
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
|
|
<i class="fa fa-heart"></i>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<!--Card content-->
|
|
|
|
</div>
|
|
<!--Card-->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!--Third slide-->
|
|
|
|
</div>
|
|
<!--Slides-->
|
|
|
|
</div>
|
|
<!--Carousel Wrapper-->
|
|
|
|
</section>
|
|
<!--Section: Products v.5-->
|
|
|
|
</div>
|
|
|
|
<!-- Streak Section -->
|
|
<div class="streak streak-photo" style="background-image:url('http://mdbootstrap.com/img/Photos/Others/dress.jpg')">
|
|
|
|
<div class="flex-center white-text pattern-1" style="background-attachment: f">
|
|
<ul class="list-unstyled">
|
|
<li>
|
|
<h1 class=" white-text">
|
|
<strong>500+</strong> happy customers</h1>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /.Streak Section -->
|
|
|
|
<div class="container">
|
|
|
|
<!--Projects section v.4-->
|
|
<section class="text-center pb-5 wow fadeIn">
|
|
|
|
<!--Section heading-->
|
|
<h2 class="font-weight-bold text-center h1 my-5">Fashion news</h2>
|
|
<!--Section description-->
|
|
<p class="text-center grey-text mb-5 mx-auto w-responsive">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
|
|
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
|
|
<!--Grid row-->
|
|
<div class="row">
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-12 mb-4">
|
|
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/slide%20(31).jpg');">
|
|
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
|
|
<div>
|
|
<a href="" class="purple-text">
|
|
<h5>
|
|
<i class="fa fa-plane pr-2"></i>Fashion week</h5>
|
|
</a>
|
|
<h3 class="mb-4 mt-4">
|
|
<strong>Project title</strong>
|
|
</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quod minima assumenda qui mollitia
|
|
architecto soluta at ipsa itaque nam, aliquam minus odit expedita voluptatibus fugiat amet, nostrum error
|
|
dolorum!.</p>
|
|
<a class="btn btn-secondary btn-sm">
|
|
<i class="fa fa-clone left"></i> View project</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(60).jpg');">
|
|
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
|
|
<div>
|
|
<a href="" class="pink-text">
|
|
<h5>
|
|
<i class="fa fa-camera pr-2"></i>Street style</h5>
|
|
</a>
|
|
<h3 class="mb-4 mt-4">
|
|
<strong>Project title</strong>
|
|
</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio
|
|
vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.</p>
|
|
<a class="btn btn-pink btn-sm">
|
|
<i class="fa fa-clone left"></i> View project</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
<!--Grid column-->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(58).jpg');">
|
|
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
|
|
<div>
|
|
<a href="" class="green-text">
|
|
<h5>
|
|
<i class="fa fa-eye pr-2"></i>Summer trends</h5>
|
|
</a>
|
|
<h3 class="mb-4 mt-4">
|
|
<strong>Project title</strong>
|
|
</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio
|
|
vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos.</p>
|
|
<a class="btn btn-success btn-sm">
|
|
<i class="fa fa-clone left"></i> View project</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--Grid column-->
|
|
|
|
</div>
|
|
<!--Grid row-->
|
|
|
|
</section>
|
|
<!--Projects section v.4-->
|
|
|
|
</div>
|
|
|
|
</main>
|
|
<!--Main Layout-->
|
|
|
|
<!--Footer-->
|
|
<footer class="page-footer pt-4 mt-4 text-center text-md-left mdb-color lighten-2">
|
|
|
|
<!--Footer Links-->
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<!--First column-->
|
|
<div class="col-md-3 mr-auto">
|
|
<h5 class="text-uppercase mb-3">Footer Content</h5>
|
|
<p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur
|
|
adipisicing elit.</p>
|
|
</div>
|
|
<!--/.First column-->
|
|
|
|
<hr class="w-100 clearfix d-md-none">
|
|
|
|
<!--Second column-->
|
|
<div class="col-md-2 ml-auto">
|
|
<h5 class="text-uppercase mb-3">Links</h5>
|
|
<ul class="list-unstyled">
|
|
<li>
|
|
<a href="#!">Link 1</a>
|
|
</li>
|
|
<li>
|
|
<a href="#!">Link 2</a>
|
|
</li>
|
|
<li>
|
|
<a href="#!">Link 3</a>
|
|
</li>
|
|
<li>
|
|
<a href="#!">Link 4</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!--/.Second column-->
|
|
|
|
<hr class="w-100 clearfix d-md-none">
|
|
|
|
<!--Third column-->
|
|
<div class="col-md-2 ml-auto">
|
|
<h5 class="text-uppercase mb-3">Links</h5>
|
|
<ul class="list-unstyled">
|
|
<li>
|
|
<a href="#!">Link 1</a>
|
|
</li>
|
|
<li>
|
|
<a href="#!">Link 2</a>
|
|
</li>
|
|
<li>
|
|
<a href="#!">Link 3</a>
|
|
</li>
|
|
<li>
|
|
<a href="#!">Link 4</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!--/.Third column-->
|
|
|
|
<hr class="w-100 clearfix d-md-none">
|
|
|
|
<!--Fourth column-->
|
|
<div class="col-md-3 ml-auto">
|
|
<h5 class="text-uppercase mb-3">Links</h5>
|
|
<ul class="list-unstyled">
|
|
<li>
|
|
<a href="#!">Link 1</a>
|
|
</li>
|
|
<li>
|
|
<a href="#!">Link 2</a>
|
|
</li>
|
|
<li>
|
|
<a href="#!">Link 3</a>
|
|
</li>
|
|
<li>
|
|
<a href="#!">Link 4</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!--/.Fourth column-->
|
|
|
|
</div>
|
|
</div>
|
|
<!--/.Footer Links-->
|
|
|
|
<hr>
|
|
|
|
<!--Social buttons-->
|
|
<div class="social-section text-center">
|
|
<ul class="list-unstyled list-inline">
|
|
|
|
<li class="list-inline-item">
|
|
<a class="btn-floating btn-fb">
|
|
<i class="fa fa-facebook"> </i>
|
|
</a>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<a class="btn-floating btn-tw">
|
|
<i class="fa fa-twitter"> </i>
|
|
</a>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<a class="btn-floating btn-gplus">
|
|
<i class="fa fa-google-plus"> </i>
|
|
</a>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<a class="btn-floating btn-li">
|
|
<i class="fa fa-linkedin"> </i>
|
|
</a>
|
|
</li>
|
|
<li class="list-inline-item">
|
|
<a class="btn-floating btn-dribbble">
|
|
<i class="fa fa-dribbble"> </i>
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<!--/.Social buttons-->
|
|
|
|
<!--Copyright-->
|
|
<div class="footer-copyright py-3 text-center">
|
|
<div class="container-fluid">
|
|
© 2018 Copyright:
|
|
<a href="https://mdbootstrap.com/material-design-for-bootstrap/"> MDBootstrap.com </a>
|
|
|
|
</div>
|
|
</div>
|
|
<!--/.Copyright-->
|
|
|
|
</footer>
|
|
<!--/.Footer-->
|
|
|
|
|
|
<!-- SCRIPTS -->
|
|
<!-- JQuery -->
|
|
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
|
|
<!-- Bootstrap tooltips -->
|
|
<script type="text/javascript" src="../js/popper.min.js"></script>
|
|
<!-- Bootstrap core JavaScript -->
|
|
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
|
|
<!-- MDB core JavaScript -->
|
|
<script type="text/javascript" src="../js/mdb.min.js"></script>
|
|
<script>
|
|
new WOW().init();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|