HTMLify

amazonclone.html
Views: 62 | Author: cody
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amazon Clone</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="amazonclone.css">
</head>
<body>
    <header>
      <div class="navbar">
        <div class="nav-logo border">
            <div class="logo"></div>
        </div>
        <div class="nav-address border">
            <p class="add-first">Deliver to</p>
            <div class="add-icon">
                <i class="fa-solid fa-location-dot"></i>
                <p class="add-second">India</p>
            </div>
        </div>
        <div class="nav-search">
            <select class="search-select">
                <option>All</option>
                <option value="all">All Departments</option>
    <option value="arts-crafts">Arts &amp; Crafts</option>
    <option value="automotive">Automotive</option>
    <option value="baby">Baby</option>
    <option value="beauty-personal-care">Beauty &amp; Personal Care</option>
    <option value="books">Books</option>
    <option value="boys-fashion">Boys' Fashion</option>
    <option value="computers">Computers</option>
    <option value="deals">Deals</option>
    <option value="digital-music">Digital Music</option>
    <option value="electronics">Electronics</option>
    <option value="girls-fashion">Girls' Fashion</option>
    <option value="health-household">Health &amp; Household</option>
    <option value="home-kitchen">Home &amp; Kitchen</option>
    <option value="industrial-scientific">Industrial &amp; Scientific</option>
    <option value="kindle-store">Kindle Store</option>
    <option value="luggage">Luggage</option>
    <option value="mens-fashion">Men's Fashion</option>
    <option value="movies-tv">Movies &amp; TV</option>
    <option value="music-cds-vinyl">Music, CDs &amp; Vinyl</option>
    <option value="pet-supplies">Pet Supplies</option>
<option value="prime-video">Prime Video</option>
<option value="software">Software</option>
<option value="sports-outdoors">Sports &amp; Outdoors</option>
<option value="tools-home-improvement">Tools &amp; Home Improvement</option>
<option value="toys-games">Toys &amp; Games</option>
<option value="video-games">Video Games</option>
<option value="womens-fashion">Women's Fashion</option>

            </select>
            <input placeholder="Search Amazon" class="search-input">
            <div class="search-icon">
                <i class="fa-solid fa-magnifying-glass"></i>
            </div>
        </div>
        <div class="nav-signin border">
            <p><span>Hello, sign in</span></p>
            <p class="nav-second">Account & Lists</p>
        </div>
        <div class="nav-return border">
            <p><span>Returns</span></p>
            <p class="nav-second">& Orders</p>
        </div>
        <div class="nav-cart border">
            <i class="fa-solid fa-cart-shopping"></i>
            Cart
        </div>
      </div>




      <div class="panel">
        <div class="panel-all">
            <i class="fa-solid fa-bars"></i>
            All
        </div>
        <div class="panel-ops">
                <p>Today's Deals</p>
                <p>Customer Service</p>
                <p>Registry</p>
                <p>Gift Cards</p>
                <p>Sell</p>
        </div>
        <div class="panel-deals">
            Shop deals in Electronics
        </div>
      </div>
    </header>



    <div class="hero-section">
        <div class="hero-msg">
    
            <p>You are on amazon.com. You can also shop on Amazon India for millions of products with fast local delivery.<a href="#"> Click here to go to amazon.in</a></p>
        </div>
    </div>

    <div class="shopsection">
        <div class="box1 Box">
            <div class="box-content">
                <h2>Health & Personal Care</h2>
            <div class="box-img" style="background-image: url('box2_image.jpg');"></div>
            <p>See more</p>
            </div>
        </div>
        <div class="box2 Box"> <div class="box-content">
            <h2>Furniture</h2>
        <div class="box-img" style="background-image: url('box3_image.jpg');"></div>
        <p>See more</p>
        </div> </div>
        <div class="box3 Box"> <div class="box-content">
            <h2>Amazon Gadget Store</h2>
        <div class="box-img" style="background-image: url('box4_image.jpg');"></div>
        <p>See more</p>
        </div> </div>
        <div class="box4 Box"> <div class="box-content">
            <h2>Beauty & Makeup</h2>
        <div class="box-img" style="background-image: url('box5_image.jpg');"></div>
        <p>See more</p>
        </div> 
    </div>
    <div class="box5 Box">
        <div class="box-content">
            <h2>Pet Care</h2>
        <div class="box-img" style="background-image: url('box6_image.jpg');"></div>
        <p>See more</p>
        </div>
    </div>
    <div class="box6 Box"> <div class="box-content">
        <h2>Stationary</h2>
    <div class="box-img" style="background-image: url('box7_image.jpg');"></div>
    <p>See more</p>
    </div> </div>
    <div class="box7 Box"> <div class="box-content">
        <h2>Fashion</h2>
    <div class="box-img" style="background-image: url('box11_image.jpg');"></div>
    <p>See more</p>
    </div> </div>
    <div class="box8 Box"> <div class="box-content">
        <h2>Top Deals</h2>
    <div class="box-img" style="background-image: url('box9_image.jpg');"></div>
    <p>See more</p>
    </div> 
</div>
<div class="rectangle">
    <!-- <div class="rect-out"> -->
    <div class="box-content">
        <h2>New international customers purchased</h2>
        <div class="rect-main">
        <div class="rect-img-a" style="background-image: url('rectangle1_image.jpg');"></div>
        <div class="rect-img-b" style="background-image: url('rectangle2_image.jpg');"></div>
        <div class="rect-img-c" style="background-image: url('rectangle3_image.jpg');"></div>
        <div class="rect-img-d" style="background-image: url('rectangle4_image.jpg');"></div>
        <div class="rect-img-e" style="background-image: url('rectangle5_image.jpg');"></div>
        <div class="rect-img-f" style="background-image: url('rectangle6_image.jpg');"></div>
    </div>
    </div>

</div>
    </div>


    <footer>
        <div class="foot-panel1"> Back to Top
        </div>
        <div class="foot-panel2">
            <ul>

                <b><p>Get to Know Us</p></b>
<a href="#">Careers</a>
<a href="#">Blog</a>
<a href="#">About Amazon</a>
<a href="#">Relations</a>
<a href="#">Devices</a>
<a href="#>">Science</a>
            </ul>

            <ul>
                <b><p>Make Money with Us</p></b>
<a href="#">Sell products on Amazon</a>
<a href="#">Sell Amazon on Business</a>
<a href="#">Sell apps on Amazon</a>
<a href="#">Become an Affiliate</a>
<a href="#">Advertise Your Products</a>
<a href="#>">Self-Publish with Us</a>
<a href="#">Host an Amazon Hub</a>
            </ul>

            <ul>
                <b><p>Amazon Payment Products</p></b>
<a href="#">Amazon Business Card</a>
<a href="#">Shop with Points</a>
<a href="#">Reload Your Balance</a>
<a href="#">Amazon Currency Converter</a>
            </ul>

            <ul>
                <b><p>Let Us Help You</p></b>
<a href="#">Amazon and COVID-19</a>
<a href="#">Your Account</a>
<a href="#">Your Orders</a>
<a href="#>">Shipping Rates & Policies</a>
<a href="#">Returns & Replacements</a>
<a href="#">Manage Your Content and Devices</a>
<a href="#">Amazon Assistant</a>
<a href="#>">Help</a>
            </ul>

        </div>
        <div class="foot-panel3">
            <div class="logo"></div>
        </div>

    <div class="foot-panel4">
        <div class="pages">
            <a href="#">Conditions of Use</a>
            <a href="#">Privacy Notice</a>
            <a href="#"> Your Ads Privacy Choices</a>

            <div class="copyright">
                <b>© 1996-2024, Amazon.com, Inc. or its affiliates</b>
            </div>
        </div>

    </div>
        </footer>
</body>
</html>

Comments