Skip to content

Instantly share code, notes, and snippets.

@jfjensen

jfjensen/product.html

Created May 27, 2022 17:23
Show Gist options
  • Save jfjensen/982c69afd0dede183dfeea127d86712d to your computer and use it in GitHub Desktop.
Save jfjensen/982c69afd0dede183dfeea127d86712d to your computer and use it in GitHub Desktop.
Download ZIP
The template for showing products
Raw
product.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js" defer></script>
</head>
<body>
<div class="container">
<h3 class="title"> ${title} </h3>
<div class="products-container">
$for x in xs {{
<div class="product" data-name="p-${x.num}">
<img src="${x.img}" alt="">
<h3>${x.name}</h3>
<div class="price">${x.price}</div>
</div>
}}
</div>
</div>
<div class="products-preview">
$for x in xs {{
<div class="preview" data-target="p-${x.num}">
<i class="fas fa-times"></i>
<img src="${x.img}" alt="">
<h3>organic ${x.name}</h3>
<div class="stars">
$if x.one {{<i class="fas fa-star"></i>}} $else {{<i class="far fa-star"></i>}}
$if x.two {{<i class="fas fa-star"></i>}} $else {{<i class="far fa-star"></i>}}
$if x.three {{<i class="fas fa-star"></i>}} $else {{<i class="far fa-star"></i>}}
$if x.four {{<i class="fas fa-star"></i>}} $else {{<i class="far fa-star"></i>}}
$if x.five {{<i class="fas fa-star"></i>}} $else {{<i class="far fa-star"></i>}}
<span>( ${x.reviews} )</span>
</div>
<p>${x.description}</p>
<div class="price">${x.price}</div>
<div class="buttons">
<a href="#" class="buy">buy now</a>
<a href="#" class="cart">add to cart</a>
</div>
</div>
}}
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment