Hi folks ! In this post i am going to build the Amazon UI clone using HTML, CSS and simple Java-script. So folks are you ready to build this clone with me. let’s go.
1. File Structure
In this section we gonna creating some useful file that helps us to keep build much cleaner. So right click on the desktop and create a folder named as Amazon UI clone.
Now open this folder into the vs code or whatever code editor you used like sublime text or other. Source : If you don’t have vs code just go to this link https://code.visualstudio.com/
Now create the following files inside this folder. Named as index.html, style.css and script.js
2. Linking the files
In this section we gonna see how to link CSS and JS file with HTML file and also create the boiler template or starting template of this clone.
Now click on the index.html file and press Shift + ! and hit enter.
Now you have html starting template.
2.1. Link the CSS file
Let’s add the CSS file (style.css) using following code snippet.
Upper snippet used only inside of the head tag.
Ones you done this now you can style the html elements using the style property that we gonna see very very soon in the CSS part.
2.2. Link the Java-script file
Now let’s add the Java-script file, for that just go to the top of the close body tag and add following code snippet.
Ones you add the upper code snippet now you can give the functionality to the HTML elements.
2.3. Link the font awesome
Now for the beautiful icon we gonna used the Font Awesome fonts. Go to https://fontawesome.com/ and create a free account and grab the kit link and past it into the head tag.
kit links looks something like this ( don’t use my kit link )
3. HTML Part
Add the following code into the into the body tag
<!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 clone by manoarya using html, css and js.</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/9e0ab445c3.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- header -->
<div class="header">
<!-- left header components -->
<div class="left_header">
<!-- logo -->
<div class="logo_container">
<img src="https://bizmonthly.com/wp-content/uploads/2020/04/Amazon-logo-black-template.png"
alt="Amazon Logo">
</div>
<!-- address selector -->
<i class="fas fa-map-marker-alt" style="margin-right: 10px;"></i>
<span>Hello <br> <b>Select your address</b></span>
</div>
<!-- center header components -->
<div class="center_header">
<!-- All -->
<select name="All" class="center_header_all">
<option>All</option>
<option>Alex Skills</option>
<option>Amazon Alex</option>
<option>Amazon Fashion</option>
</select>
<!-- input -->
<input type="text">
<!-- search button -->
<button class="center_header_search_btn"><i class="fas fa-search"></i></button>
</div>
<!-- right header components -->
<div class="right_header">
<!-- sign in and login -->
<span>Hello, sign in <br> <b>Account & Lists</b></span>
<!-- orders -->
<span>Returns <br><b>& Orders</b></span>
<!-- cart -->
<span><i class="fas fa-shopping-cart" style="font-size: 30px;"></i><b
style="margin-left:10px;">Cart</b></span>
</div>
</div>
<!-- slider -->
<div class="slider_container">
<!-- slider btn -->
<button id="left"><i class="fas fa-chevron-left" style="font-size: 30px;"></i></button>
<!-- slider main box -->
<div class="slider_main_box">
<!-- slider boxes -->
<div class="slider_box">
<img src="https://m.media-amazon.com/images/I/41FBwjCnS2L._SX1500_.jpg" alt="img1">
</div>
<div class="slider_box">
<img src="https://m.media-amazon.com/images/I/61UrRx+3LLL._SX3000_.jpg" alt="img1">
</div>
<div class="slider_box">
<img src="https://m.media-amazon.com/images/I/61SQdbfLDgL._SX3000_.jpg" alt="img1">
</div>
<div class="slider_box">
<img src="https://m.media-amazon.com/images/I/71cQMXCLSvL._SX3000_.jpg" alt="img1">
</div>
<div class="slider_box">
<img src="https://m.media-amazon.com/images/I/8160RuRhSUL._SX3000_.jpg" alt="img1">
</div>
</div>
<button id="right"><i class="fas fa-chevron-right" style="font-size: 30px;"></i></button>
</div>
<!-- products -->
<div class="product_container">
<div class="product_box"></div>
<div class="product_box"></div>
<div class="product_box"></div>
<div class="product_box"></div>
<div class="product_box"></div>
<div class="product_box"></div>
<div class="product_box"></div>
<div class="product_box"></div>
</div>
<!-- footer -->
<footer>
<h2>Footer</h2>
</footer>
<script src="script.js"></script>
</body>
</html>
If your html basic concept is not clear then go to https://manoarya.com/Manoarya All Post/Html-basic-explanation-by-manoarya.html this a page and learn.
4. CSS Part
Now open the style.css file and add following code.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
scroll-behavior: smooth;
}
/* header style */
.header {
height: 50px;
min-width: 1200px;
background-color: #090505;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
position: sticky;
top: 0;
z-index: 12345;
}
.left_header {
height: 50px;
width: 25%;
display: flex;
place-items: center;
cursor: pointer;
}
.logo_container {
height: 50px;
width: auto;
}
.logo_container img {
height: 50px;
width: auto;
transform: scale(0.9);
}
.center_header {
height: 50px;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
transform: scale(0.95);
}
.center_header_all {
height: 40px;
width: 50px;
font-weight: bold;
border-radius: 10;
border: none;
outline: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 5px;
}
.center_header input {
height: 40px;
width: auto;
font-weight: bold;
border-radius: 10;
border: none;
outline: none;
font-size: large;
padding: 10px 20px;
width: 500px;
}
.center_header button {
height: 40px;
width: 50px;
font-weight: bold;
background: #eab553;
color: #1e1e1e;
border: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transition: 0.1s ease-in;
}
.center_header button:hover {
cursor: pointer;
background: #d39f40;
}
.right_header {
height: 50px;
width: 25%;
display: flex;
justify-content: space-between;
align-items: center;
transform: scale(0.95);
cursor: pointer;
}
/* slider style */
.slider_container {
height: 100%;
width: auto;
display: flex;
justify-content: center;
align-items: center;
}
.slider_container button {
color: #9a9a9a;
transition: 0.2s ease;
}
.slider_container button:hover {
color: #1a1919;
cursor: pointer;
}
#left {
width: 5%;
left: 0;
z-index: 123;
height: 10%;
padding: 10px 20px;
background: transparent;
border: none;
outline: none;
position: absolute;
top: 150px;
}
#right {
width: 5%;
right: 0;
z-index: 123;
padding: 10px 20px;
background: transparent;
border: none;
outline: none;
background-color: transparent;
position: absolute;
top: 150px;
}
.slider_main_box button:hover {
color: #1e1e1e;
cursor: pointer;
}
.slider_main_box::-webkit-scrollbar {
display: none;
}
.slider_main_box {
-ms-overflow-style: none;
scrollbar-width: none;
}
.slider_main_box {
height: 100%;
width: 100%;
display: flex;
overflow-x: scroll;
display: flex;
}
.slider_box {
height: 100%;
min-width: 100%;
}
.slider_box img {
height: 100%;
width: 100%;
}
/* products */
.product_container{
height: 100%;
width: 100%;
background: linear-gradient( transparent, rgb(182, 182, 182),rgb(197, 197, 197) );
transform: scale(1);
margin-top: -300px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.product_box{
height: 300px;
width: 25%;
background: white;
transform: scale(0.95);
}
/* footer */
footer {
height: 500px;
background: #222121;
display: grid;
place-items: center;
color: gray;
}
Java-script Part
Now last open the script.js and add the following code snippet.
// Access the element form the html DOM and store into the const variable.
const slider = document.querySelector(".slider_main_box");
const left_btn = document.getElementById('left');
const right_btn = document.getElementById('right')
// Get the slider component width so that we can slide the element into the full page.
const slider_width = slider.clientWidth;
// Scroll the slider or img when left button clicked
left_btn.addEventListener("click" , () => {
slider.scrollBy(-slider_width,0);
})
// Scroll the slider or img when right button clicked
right_btn.addEventListener("click" , () => {
slider.scrollBy(slider_width,0);
})
Happy coding !
Thanks for visiting
Top comments (0)