[go: up one dir, main page]
Scribd
Upload
4 views8 pages

HTML

The document is an HTML template for an organic products webpage featuring various products such as strawberries, onions, tomatoes, brinjal, broccoli, and potatoes, each priced at $2.00. It includes sections for product images, descriptions, ratings, and options to buy or add to cart. The page is styled with custom CSS and uses Font Awesome for icons.

Uploaded by

andres sanchez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views8 pages

HTML

The document is an HTML template for an organic products webpage featuring various products such as strawberries, onions, tomatoes, brinjal, broccoli, and potatoes, each priced at $2.00. It includes sections for product images, descriptions, ratings, and options to buy or add to cart. The page is styled with custom CSS and uses Font Awesome for icons.

Uploaded by

andres sanchez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

<!

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">

<!-- font awesome cdn link -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-


awesome/5.15.4/css/all.min.css">

<!-- custom css file link -->

<link rel="stylesheet" href="css/style.css">

<!-- custom js file link -->

<script src="js/script.js" defer></script>

</head>

<body>

<div class="container">

<h3 class="title"> organic products </h3>

<div class="products-container">

<div class="product" data-name="p-1">

<img src="images/1.png" alt="">


<h3>strawberries</h3>

<div class="price">$2.00</div>

</div>

<div class="product" data-name="p-2">

<img src="images/2.png" alt="">

<h3>onions</h3>

<div class="price">$2.00</div>

</div>

<div class="product" data-name="p-3">

<img src="images/3.png" alt="">

<h3>tomatoes</h3>

<div class="price">$2.00</div>

</div>

<div class="product" data-name="p-4">

<img src="images/4.png" alt="">

<h3>brinjal</h3>

<div class="price">$2.00</div>

</div>

<div class="product" data-name="p-5">

<img src="images/5.png" alt="">

<h3>broccoli</h3>

<div class="price">$2.00</div>

</div>
<div class="product" data-name="p-6">

<img src="images/6.png" alt="">

<h3>potatoes</h3>

<div class="price">$2.00</div>

</div>

</div>

</div>

<div class="products-preview">

<div class="preview" data-target="p-1">

<i class="fas fa-times"></i>

<img src="images/1.png" alt="">

<h3>organic strawberries</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star-half-alt"></i>

<span>( 250 )</span>

</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,


dolorem.</p>

<div class="price">$2.00</div>

<div class="buttons">
<a href="#" class="buy">buy now</a>

<a href="#" class="cart">add to cart</a>

</div>

</div>

<div class="preview" data-target="p-2">

<i class="fas fa-times"></i>

<img src="images/2.png" alt="">

<h3>organic onions</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star-half-alt"></i>

<span>( 250 )</span>

</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,


dolorem.</p>

<div class="price">$2.00</div>

<div class="buttons">

<a href="#" class="buy">buy now</a>

<a href="#" class="cart">add to cart</a>

</div>

</div>

<div class="preview" data-target="p-3">

<i class="fas fa-times"></i>


<img src="images/3.png" alt="">

<h3>organic tomatoes</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star-half-alt"></i>

<span>( 250 )</span>

</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,


dolorem.</p>

<div class="price">$2.00</div>

<div class="buttons">

<a href="#" class="buy">buy now</a>

<a href="#" class="cart">add to cart</a>

</div>

</div>

<div class="preview" data-target="p-4">

<i class="fas fa-times"></i>

<img src="images/4.png" alt="">

<h3>organic brinjal</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>


<i class="fas fa-star-half-alt"></i>

<span>( 250 )</span>

</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,


dolorem.</p>

<div class="price">$2.00</div>

<div class="buttons">

<a href="#" class="buy">buy now</a>

<a href="#" class="cart">add to cart</a>

</div>

</div>

<div class="preview" data-target="p-5">

<i class="fas fa-times"></i>

<img src="images/5.png" alt="">

<h3>organic broccoli</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star-half-alt"></i>

<span>( 250 )</span>

</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,


dolorem.</p>

<div class="price">$2.00</div>

<div class="buttons">

<a href="#" class="buy">buy now</a>


<a href="#" class="cart">add to cart</a>

</div>

</div>

<div class="preview" data-target="p-6">

<i class="fas fa-times"></i>

<img src="images/6.png" alt="">

<h3>organic potatoes</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star-half-alt"></i>

<span>( 250 )</span>

</div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,


dolorem.</p>

<div class="price">$2.00</div>

<div class="buttons">

<a href="#" class="buy">buy now</a>

<a href="#" class="cart">add to cart</a>

</div>

</div>

</div>

</body>
</html>

You might also like