Skip to content

Instantly share code, notes, and snippets.

@machariamarigi

machariamarigi/gist:3afd62b98f89ee7ca5a21c61e3457953

Created January 30, 2017 15:17
Show Gist options
  • Save machariamarigi/3afd62b98f89ee7ca5a21c61e3457953 to your computer and use it in GitHub Desktop.
Save machariamarigi/3afd62b98f89ee7ca5a21c61e3457953 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../favicon.ico">
<title>flower shop</title>
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/justified-nav.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="masthead">
<h3 class="text-muted">Flowers and Gifts Shop</h3>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="../index.html"><img src="../favicon.ico" alt=""> Home</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link " href="../about.html">About <span class="sr-only"></span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Products</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="love.html">Love and Romance</a>
<a class="dropdown-item" href="corporate.html">Corporate Events</a>
<a class="dropdown-item" href="weddings.html">Weddings</a>
<a class="dropdown-item" href="newborns.html">Newborns</a>
<a class="dropdown-item" href="birthdays.html">Birthdays</a>
<a class="dropdown-item" href="getwell.html">Get Well soon</a>
<a class="dropdown-item" href="funeral.html">Funerals and sympathy</a>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="../events.html">Events and Services <span class="sr-only"></span></a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Jumbotron -->
<div class="jumbotron bg-faded">
<h1 class="text-primary">Our Birthday Products</h1>
<p class="lead">Browse through our products and get to us for more info.</p>
</div>
<hr class="colorgraph">
<div class="row mb-5">
<div class="col-md-12">
<img src="../assets/banners/birthday-banner.jpg" alt="simonas flowers kenya birthday banner" class="img-fluid">
</div>
</div>
<h3 class="text-muted mb-3">Birthday Gift Hampers</h3>
<hr class="colorgraph">
<!--Vue instance here mate-->
<div class="row mb-3" id="birthday">
<div>
<button @click="showCart = !showCart" v-show="!verified">
{{ items.length + (items.length > 1 || items.length === 0 ? " items" : " item") }}
</button>
</div>
<div class="cart" v-show="showCart">
<div v-show="items.length > 0">
<ul>
<li v-for="item in items" transition="fade">
<p><strong>{{ item.quantity }}</strong> - {{ item.title }} <i @click="removeFromCart(item)">x</i></p>
</li>
</ul>
<div><button @click="verified = true, showCart = false">Check out</button></div>
</div>
<div v-show="items.length === 0">
<p>Your cart is empty!</p>
</div>
</div>
<div class="col-md-4" v-for="item in products" v-show="!verified">
<!--v-for here mate-->
<div class="card text-center mb-3">
<img v-bind:src="item.image" alt="" class="card-img-top img-fluid img-fix">
<div class="card-block ">
<hr class="colorgraph">
<h4 class="card-title"> {{item.title}} </h4>
<p> {{item.description}}</p>
<div class="row">
<div class="col-md-6 col-xs-6">
<a class="btn btn-primary1 btn-sm" @click="addToCart(item)">Add to cart</a>
</div>
<div class="col-md-6 col-xs-6">
Price: Ksh.{{item.price}}
</div>
</div>
</div>
</div>
<!--another card e3f2fd-->
</div>
<div class="checkout" v-show="verified">
<h3>Your Cart</h3>
<h5 v-for="item in items"><strong>{{ item.quantity }}</strong> - {{ item.title }}<span>${{ item.price * item.quantity }}</span></h5>
<hr />
<div class="row">
<div class="u-pull-right">
<h5>Total: Ksh. <span>{{ total }}</span></h5>
<button>Looks Good</button>
</div>
</div>
</div>
</div>
<!-- End of Vue instance here mate-->
<!--eo-row-->
<!-- Site footer -->
<footer class="footer">
<div class="text-center iso-l">
<h4>&copy; Flowers and Gift Shop 2017</h4>
<p>Contact Us on: 0708 44 33 96</p>
<img src="../favicon.ico" alt="">
<p>Or visit us at Nairobi City: Specific Location</p>
</div>
</footer>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/datajs/birthdays.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment