Skip to content

Added Amazon Frontend Clone Project #842

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

Merged
merged 6 commits into from
Oct 11, 2024
Merged

Added Amazon Frontend Clone Project #842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
13b213a
Add frontend files of amazon clone
kavya410004 Oct 9, 2024
209da13
Create README.md for Amazon Clone
kavya410004 Oct 9, 2024
82c2340
add screenshot
kavya410004 Oct 9, 2024
458c511
Merge with readme
kavya410004 Oct 9, 2024
28f290b
modified Vanilla JS README file
kavya410004 Oct 11, 2024
2e75e79
Merge branch 'main' into feat/amazon-clone-frontend-issue-714
kavya410004 Oct 11, 2024
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
72 changes: 72 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Amazon-Clone/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<h1 align='center'><b>💥 Amazon Clone 💥</b></h1>

<!-- -------------------------------------------------------------------------------------------------------------- -->

<h3 align='center'>Tech Stack Used 🎮</h3>

<div align='center'>

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
</div>


![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: Description 📃

<div>
<p>This project is an Amazon frontend clone developed using HTML, CSS, and Vanilla JavaScript. The clone replicates the layout and design of the current Amazon homepage, providing a familiar user experience. It showcases responsive design principles and implements interactive elements using JavaScript, making it a functional and visually appealing representation of the original site.</p>
</div>

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: How to run it? 🕹️

<div >
<p>To run this project locally, follow these steps:

1. Fork the repository.

2. Clone the repository to your local computer:
<code>git clone https://github.com/<your-github-username>/WebMasterLog.git</code>

3. Open the project folder in your preferred code editor, now you can view website in live.

</p>
</div>

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: Screenshots 📸
<!-- add the screenshot of the project (Mandatory) -->

![image](https://github.com/user-attachments/assets/ffbeaa82-ecfc-482e-8e57-6ba594392d33)


<!-- -------------------------------------------------------------------------------------------------------------- -->


## :zap: Working Video

https://github.com/user-attachments/assets/5ab99a94-121e-472b-bfac-080a414d3521


<!-- -------------------------------------------------------------------------------------------------------------- -->

<h4 align='center'>Developed By <b><i>D.V.Kavya Sai</i></b></h4>
<p align='center'>
<a href='https://www.linkedin.com/in/venkata-kavya-sai-d-bb7717250/'>
<img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
</a>
<a href='https://github.com/kavya410004'>
<img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
</a>
</p>

<h4 align='center'>Happy Coding 🧑‍💻</h4>

<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
Binary file added Vanilla-JS-Projects/Intermediate/Amazon-Clone/images/amazon.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 Vanilla-JS-Projects/Intermediate/Amazon-Clone/images/carousel1.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 Vanilla-JS-Projects/Intermediate/Amazon-Clone/images/carousel2.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 Vanilla-JS-Projects/Intermediate/Amazon-Clone/images/carousel3.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 Vanilla-JS-Projects/Intermediate/Amazon-Clone/images/carousel4.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 Vanilla-JS-Projects/Intermediate/Amazon-Clone/images/favicon.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 Vanilla-JS-Projects/Intermediate/Amazon-Clone/images/flag.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 Vanilla-JS-Projects/Intermediate/Amazon-Clone/images/item1.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 Vanilla-JS-Projects/Intermediate/Amazon-Clone/images/item2.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 Vanilla-JS-Projects/Intermediate/Amazon-Clone/images/item3.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 Vanilla-JS-Projects/Intermediate/Amazon-Clone/images/item4.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.
254 changes: 254 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Amazon-Clone/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,254 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Favicon -->
<link rel="shortcut icon" href="./images/favicon.png" type="image/x-icon">
<title>Amazon</title>
</head>

<body>
<header>
<nav>
<div class="nav-left">
<div class="nav-logo">
<img src="./images/amazon.png">
</div>
<div class="location">
<p class="top-text">Deliver to</p>
<div class="location-icon">
<i class="fa-solid fa-location-dot"></i>
<p class="bottom-text ml-1">India</p>
</div>
</div>
</div>

<div class="nav-center">
<select class="search-dropdown">
<option>All</option>
<option>All Departments</option>
<option>Arts & Crafts</option>
<option>Baby</option>
<option>Books</option>
<option>Computers</option>
<option>Deals</option>
</select>
<input type="text" placeholder="Search Amazon"
class="search-box">
<div class="search-icon">
<i class="fa-solid fa-magnifying-glass"
style="color: #28416c;">
</i>
</div>
</div>

<div class="nav-right">
<div class="language-option">
<div class="flag">
<img src="./images/flag.png" alt="">
</div>
<select class="select-language">
<option value="lan">EN</option>
<option value="lan">ES</option>
<option value="lan">AR</option>
</select>
</div>

<div class="account-option">
<p class="top-text">
Hello, sign in
</p>
<select class="select-account">
<option value="Account">
Account & Lists
</option>
<option value="Account">
Account & Lists
</option>
<option value="Account">
Account & Lists
</option>
</select>
</div>

<div class="order-option">
<p class="top-text">
Returns
</p>
<p class="bottom-text">
& Orders
</p>
</div>

<div class="cart-option">
<div class="cart-logo">
<i class="fa-solid fa-cart-shopping"></i>
</div>
</div>
</div>
</nav>

<div class="nav-options">
<div class="all-logo">
<i class="fa-solid fa-bars"></i>
<p class="list">All</p>
</div>

<div class="options">
<p>Today's Deals</p>
<p>Customer Service</p>
<p>Registry</p>
<p>Gift Cards</p>
<p> Sell</p>
</div>
</div>
</header>

<main>
<div class="header-slider">
<a href="#" class="control_previous"><i class="fa-solid fa-chevron-left"></i></a>
<a href="#" class="control_next"><i class="fa-solid fa-chevron-right"></i></a>
<ul>
<img src="./images/carousel1.png" class="header-img" alt="">
<img src="./images/carousel2.png" class="header-img" alt="">
<img src="./images/carousel3.png" class="header-img" alt="">
<img src="./images/carousel4.png" class="header-img" alt="">

</ul>
</div>

<div class="box-row header-box">
<div class="box-column">
<h3>Toys Under $25</h3>
<img src="./images/item1.png">
<a href="/">See more</a>
</div>
<div class="box-column">
<h3>Gaming accessories</h3>
<img src="./images/item3.png">
<a href="/">See more</a>
</div>
<div class="box-column">
<h3>Beauty steals under $25</h3>
<img src="./images/item2.png">
<a href="/">See more</a>
</div>
<div class="box-column">
<h3>Shop Best Selling Categories</h3>
<img src="./images/item4.png">
<a href="/">See more</a>
</div>
<div class="box-column">
<h3>Beauty steals under $25</h3>
<img src="./images/item2.png">
<a href="/">See more</a>
</div>
<div class="box-column">
<h3>Toys Under $25</h3>
<img src="./images/item1.png">
<a href="/">See more</a>
</div>
<div class="box-column">
<h3>Shop Best Selling Categories</h3>
<img src="./images/item4.png">
<a href="/">See more</a>
</div>
<div class="box-column">
<h3>Gaming accessories</h3>
<img src="./images/item3.png">
<a href="/">See more</a>
</div>
</div>


</main>

<footer>
<a href="#" class="back-option">
Back to top
</a>

<div class="footer-links">
<ul>
<p>Get to Know Us</p>
<a>Careers</a>
<a>Blog</a>
<a>About Amazon</a>
<a>Investor Relations</a>
<a>Amazon Devices</a>
<a>Amazon Science</a>
</ul>
<ul>
<p>Make Money with Us</p>
<a>Sell products on Amazon</a>
<a>Sell on Amazon Business</a>
<a>Sell apps on Amazon</a>
<a>Become an Affiliate</a>
<a>Self-Publish with Us</a>
<a>Host an Amazon Hub</a>
<a>›See More Make Money with Us</a>
</ul>
<ul>
<p>Amazon Payment Products</p>
<a>Amazon Business Card</a>
<a>Shop with Points</a>
<a>Reload Your Balance</a>
<a>Amazon Currency Converter</a>
</ul>
<ul>
<p>Let Us Help You</p>
<a>Amazon and COVID-19</a>
<a>Your Account</a>
<a>Your Orders</a>
<a>Shipping Rates & Policies</a>
<a>Returns & Replacements</a>
<a>Manage Your Content and Devices</a>
<a>Amazon Assistant</a>
<a>Help</a>
</ul>
</div>
<div class="country-info">
<div class="logo">
<img src="./images/amazon.png">
</div>
<div class="options">
<select>
<option value="En">
English
</option>
</select>
<select>
<option value="1">
$ USD - U.S. Dollar
</option>
</select>

<select>
<option value="4">
United states
</option>
</select>
</div>
</div>
<div class="policies">
<div class="pages">
<a href="#">Conditions of Use</a>
<a href="#">Privacy Notice</a>
<a href="#">Your Ads Privacy Choices</a>
</div>
© 1996-2023, Amazon.com, Inc. or its affiliates
</div>
</footer>


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

</html>

Binary file added Vanilla-JS-Projects/Intermediate/Amazon-Clone/screenshot.webp
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.
27 changes: 27 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Amazon-Clone/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
const images = document.querySelectorAll('.header-slider ul img');
const previous_btn = document.querySelector('.control_previous');
const next_btn = document.querySelector('.control_next');

let n = 0;

function changeSlide(){
for(let i = 0; i < images.length; i++){
images[i].style.display= 'none';
}
images[n].style.display= 'block';
}
changeSlide();

previous_btn.addEventListener('click',(e)=>{
if(n > 0){
n--;
}else{
n = images.length - 1
}
changeSlide();
});

next_btn.addEventListener('click',(e)=>{
n = (n+1)% images.length;
changeSlide();
});
Loading