Skip to content

Amazon clone #482

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yuvrajverma25 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Amazon clone #482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5298d1e
Amazon clone
yuvrajverma25 Oct 21, 2023
1856176
Merge branch 'main' into yuvrajverma25-patch-1
yuvrajverma25 Oct 24, 2023
2fe0a4b
Merge branch 'main' into yuvrajverma25-patch-1
yuvrajverma25 Oct 26, 2023
f9cf3e7
Merge branch 'main' into yuvrajverma25-patch-1
DhanushNehru Oct 29, 2023
a1bee5e
Merge branch 'main' into yuvrajverma25-patch-1
yuvrajverma25 Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Amazon clone/Images/cart.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Amazon clone/Images/logo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Amazon clone/Images/logo2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
279 changes: 279 additions & 0 deletions Amazon clone/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,279 @@
<!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">
<title>Amazon</title>
<link rel="shortcut icon" href="https://thumbs.dreamstime.com/b/amazon-logo-white-background-montreal-canada-july-printed-paper-98221126.jpg" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header class="header">
<!-- NAVIGATION BAR -->
<nav class="header-nav">
<div class="header-container">
<img class="logo" src="https://mlsvc01-prod.s3.amazonaws.com/fd4e81f3101/a77159a6-cbf4-46a1-a731-522b77da3e42.png?ver=1649349594000" alt="">
<div class="header-search">
<input class="search-input" type="text" name="" id="">
<button class="search-button">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>

<div class="header-cart">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
</svg>
</div>
<p>Cart</p>
</div>
</div>
</nav>
</header>
<!-- SECTION 1 -->
<section class="section-1">
<div class="section-1-container">
<div class="section-1-column">
<h3>Top Picks for your home</h3>
<img src="https://images-eu.ssl-images-amazon.com/images/G/31/IMG15/Irfan/GATEWAY/MSO/Appliances-QC-PC-372x232----B08RDL6H79._SY232_CB667322346_.jpg" alt="">
<p>See more</p>
</div>

<div class="section-1-column">
<h3>Top rated, premium quality | Amazon brand & more</h3>
<img src="https://images-eu.ssl-images-amazon.com/images/G/31/AmazonSmallBusinessDay/PrivateBrands/GW20/GW_Desktop_Softlines_QC_2X_V2_5._SY232_CB636581721_.jpg" alt="">
<p>See more</p>
</div>

<div class="section-1-column">
<h3>Shop & Pay | Earn rewards daily</h3>
<img src="https://images-eu.ssl-images-amazon.com/images/G/31/img22/Electronics/Clearance/Clearance_store_Desktop_CC_2x._SY608_CB628315133_.jpg" alt="">
<p>See more</p>
</div>

<div class="section-1-column">
<h3>Sign in for your best experience</h3>
<button>Sign in securely</button>
</div>
</div>
</section>

<!-- SECTION 2 -->
<section class="section-2">
<div class="section-2-container">
<h3>Related items you've viewed</h3>
<div class="product-cards">
<div class="product-card">
<img src="https://m.media-amazon.com/images/I/71C24zZvAjL._AC_UL480_FMwebp_QL65_.jpg" alt="">
</div>

<div class="product-card">
<img src="https://m.media-amazon.com/images/I/61Dw5Z8LzJL._AC_UL480_FMwebp_QL65_.jpg" alt="">
</div>

<div class="product-card">
<img src="https://m.media-amazon.com/images/I/71808d3Q+BL._AC_UL480_FMwebp_QL65_.jpg" alt="">
</div>

<div class="product-card">
<img src="https://m.media-amazon.com/images/I/71rceuYk9JL._AC_UL480_FMwebp_QL65_.jpg" alt="">
</div>

<div class="product-card">
<img src="https://m.media-amazon.com/images/I/51gkDWHPvQL._AC_UL480_FMwebp_QL65_.jpg" alt="">
</div>

<div class="product-card">
<img src="https://m.media-amazon.com/images/I/61IYtAceS1L._AC_UL480_FMwebp_QL65_.jpg" alt="">
</div>
</div>

</div>
</section>

<!-- SECTION 2 -->
<section class="section-2">
<div class="section-2-container">
<h3>Best seller in fitness and outdoors</h3>
<div class="product-cards">
<div class="product-card">
<img src="https://m.media-amazon.com/images/I/61vxZ9hqRjL._AC_SY200_.jpg" alt="">
</div>

<div class="product-card">
<img src="https://m.media-amazon.com/images/I/51zC8UjgTwL._AC_SY200_.jpg" alt="">
</div>

<div class="product-card">
<img src="https://m.media-amazon.com/images/I/61+QXJBgIgL._AC_SY200_.jpg" alt="">
</div>

<div class="product-card">
<img src="https://m.media-amazon.com/images/I/81iZzKTg3RL._AC_SY200_.jpg" alt="">
</div>

<div class="product-card">
<img src="https://m.media-amazon.com/images/I/61XPTRJZcCL._SX522_.jpg" alt="">
</div>

<div class="product-card">
<img src="https://m.media-amazon.com/images/I/41qAgAkiXjL._AC_SR160,160_.jpg" alt="">
</div>
</div>

</div>
</section>

<!-- SECTION 3 -->
<section class="section-3">
<div class="section-3-container">
<h3>From browsing history</h3>
<div class="product-detail-cards">

<div class="product-detail-card">
<div class="product-detail-img">
<img src="https://m.media-amazon.com/images/W/WEBP_402378-T2/images/I/81cP2qZckeL._AC_SX679_.jpg" alt="">
</div>
<a href="./product.html">MSI GV15 15.6" 144Hz Gaming Laptop: Intel Core i5-11400H GTX 1650 8GB 256GB NVMe SSD, Wi-Fi 6, USB Type-C, Nahimic 3 Audio Immersion, Win 11: Black 11SC-633</a>

<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<p>
<strong>$675.92</strong>
<br>
<h6>FREE DELIVERY</h6>
</p>
</div>

<div class="product-detail-card">
<div class="product-detail-img">
<img src="https://m.media-amazon.com/images/W/WEBP_402378-T2/images/I/711iRifG4PL._AC_SX466_.jpg" alt="">
</div>
<a href="./product.html">TOZO T10 Bluetooth 5.3 Wireless Earbuds with Wireless Charging Case IPX8 Waterproof Stereo Headphones in Ear Built in Mic Headset Premium Sound with Deep Bass for Sport Black</a>

<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<p>
<strong>$675.92</strong>
<br>
<h6>FREE DELIVERY</h6>
</p>
</div>

<div class="product-detail-card">
<div class="product-detail-img">
<img src="https://m.media-amazon.com/images/W/WEBP_402378-T2/images/I/7156DLyUsYL._AC_SX679_.jpg" alt="">
</div>
<a href="./product.html">ZOTAC Gaming GeForce RTX 3060 Twin Edge OC 12GB GDDR6 192-bit 15 Gbps PCIE 4.0 Gaming Graphics Card, IceStorm 2.0 Cooling, Active Fan Control, Freeze Fan Stop ZT-A30600H-10M</a>

<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<p>
<strong>$675.92</strong>
<br>
<h6>FREE DELIVERY</h6>
</p>
</div>

<div class="product-detail-card">
<div class="product-detail-img">
<img src="https://m.media-amazon.com/images/W/WEBP_402378-T2/images/I/815oHMVEjDL._AC_SX679_.jpg" alt="">
</div>
<a href="./product.html">StarTech.com USB 2.0 Fax Modem - 56K External Hardware Dial Up V.92 Modem/ Dongle/Adapter - Computer/Laptop Fax Modem - USB to Telephone Jack - USB Data Modem - Network Fax/CMR/POS (USB56KEMH2)</a>

<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<p>
<strong>$46.28</strong>
<br>
<h6>FREE DELIVERY</h6>
</p>
</div>

<div class="product-detail-card">
<div class="product-detail-img">
<img src="https://m.media-amazon.com/images/W/WEBP_402378-T2/images/I/71SCvh0L3OL._AC_SX466_.jpg" alt="">
</div>
<a href="./product.html">Acer Aspire 5 A515-45-R74Z Slim Laptop | 15.6" Full HD IPS | AMD Ryzen 5 5500U Hexa-Core Mobile Processor | AMD Radeon Graphics | 8GB DDR4 | 256GB NVMe SSD | WiFi 6 | Backlit KB | Windows 11 Home</a>

<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<p>
<strong> $464.00</strong>
<br>
<h6>FREE DELIVERY</h6>
</p>
</div>


<div class="product-detail-card">
<div class="product-detail-img">
<img src="https://m.media-amazon.com/images/W/WEBP_402378-T2/images/I/71GGD6D+9-S._AC_SX679_.jpg" alt="">
</div>
<a href="./product.html">Acer Aspire 5 A515-45-R3SU Slim Laptop | 15.6" Full HD IPS | AMD Ryzen 7 5700U Octa-Core Mobile Processor | 8GB DDR4 | 512GB NVMe SSD | WiFi 6 | Backlit KB | Windows 10 Home</a>

<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<p>
<strong> $749.99</strong>
<br>
<h6>FREE DELIVERY</h6>
</p>
</div>
</div>
</div>
</section>

<!-- SECTION 4 SIGN IN -->
<section class="section-4">
<div class="section-4-container">
<p>See personalised recommendation</p>
<button class="sign-in-button">Sign in </button>
<p class="customer">New customer
<a href="#">Start here.</a>
</p>

</div>
</section>

<!-- FOOTER -->
<footer>
<code>Made by ❤️ Yuvraj</code>
</footer>

</body>
92 changes: 92 additions & 0 deletions Amazon clone/product.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
.product-heading{
width: 100%;
height: 100px;
display: flex;
align-items: center;
}

.product-heading .product-container{
margin: 20px;
}

.product-heading .product-container h1{
font-size: 30px;
font-weight: bold;
color: #000;
}

/* section 2 */
.product-detail{
width: 100%;
height: 700px;
}

.product-detail .product-container{
margin: 20px;
display: flex;
flex-direction: row;
align-items: flex-start;
}

.product-detail .product-container .product-picture{
width:45%;
}

.product-detail .product-container .product-picture img{
border-radius: 15px;
box-shadow: 0 0 10px rgba(50, 50, 50, 0.1);
width: 70%;
}

.product-detail .product-container .product-detail-body{
width: 50%;
}

.product-detail .product-container .product-detail-body .product-title{
font-size: 25px;
font-weight: 500;
color:#121212;
}

.product-detail .product-container .product-detail-body .product-price{
margin-top: 10px;
font-size: 28px;
font-weight: 500;
}

.product-detail .product-container .product-detail-body .product-about{
margin-top: 10px;
color:#121212;
}

.product-detail .product-container .product-detail-body .product_about h4{
font-size: 20px;
font-weight: 500;
color: #121212;
}

.product-detail .product-container .product-detail-body .product_about ul{
padding-left: 40px;
}
.product-detail .product-container .product-detail-body .buttons{
margin-top: 20px;
display: flex;
gap:2px;
}
.product-detail .product-container .product-detail-body .buttons .buy-now{
width: 50%;
border:none;
background-color: #ffa41c;
color: white;
padding: 8px;
border-radius: 10px;
}

.product-detail .product-container .product-detail-body .buttons .Add-to-cart{
width: 50%;
border:2px solid #ffa41c;
background-color:transparent;
color: #ffa41c;
padding: 8px;
border-radius: 10px;
}
Loading