DEV Community

Cover image for Amazon UI clone created by Manoarya using html css and js.
Manohar Anand
Manohar Anand

Posted on

Amazon UI clone created by Manoarya using html css and js.

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>


Enter fullscreen mode Exit fullscreen mode

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;
            }


Enter fullscreen mode Exit fullscreen mode

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);
            })


Enter fullscreen mode Exit fullscreen mode

Happy coding !

Thanks for visiting

Top comments (0)