index.html

---
layout: main
---

<div id="myCarousel" class="carousel slide my-4" data-ride="carousel">
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner" role="listbox">
		<div class="carousel-item active">
		  <img class="d-block img-fluid" src="img/01-pizza.jpg" alt="Pizza!">
		</div>
		<div class="carousel-item">
		  <img class="d-block img-fluid" src="img/02-pizza.jpg" alt="Super pizza">
		</div>
		<div class="carousel-item">
		  <img class="d-block img-fluid" src="img/03-pizza.jpg" alt="Nice pizza">
		</div>
	</div>
	<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>
<div class="row">
	{% for product in products %}
		<div class="col-lg-4 col-md-6 mb-4">
			<div class="card h-100">
				<a href="products/{{ product.name | slug }}"><img class="card-img-top" src="img/{{ product.image }}" alt="">
				</a>
				<div class="card-body">
					<h4 class="card-title">
						<a href="products/{{ product.name | slug }}">{{ product.name }}</a>
					</h4>
					<h5>${{product.price}}</h5>
					<p class="card-text">{{product.description}}</p>
				</div>
			</div>
		</div>
	{% endfor %}
</div>