CODE TO BUILD A BASIC AMAZON CLONE USING
HTML AND CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Amazon</title>
<link rel="stylesheet"href="style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/
all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBE
akCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
</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>
</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>Fresh</p>
<p>Sell</p>
<p>Mobiles</p>
<p>Today's Deals</p>
<p> Prime</p>
<p>Customer Service</p>
<p>New Releases</p>
<p> Fashion</p>
<p> Electronics</p>
</div>
<div class="panel-deals ">
Shop deals in Electronics
</div>
</div>
</header>
<div class="hero-section">
</div>
<div class="shop-section">
HTML AND CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Amazon</title>
<link rel="stylesheet"href="style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/
all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBE
akCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
</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>
</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>Fresh</p>
<p>Sell</p>
<p>Mobiles</p>
<p>Today's Deals</p>
<p> Prime</p>
<p>Customer Service</p>
<p>New Releases</p>
<p> Fashion</p>
<p> Electronics</p>
</div>
<div class="panel-deals ">
Shop deals in Electronics
</div>
</div>
</header>
<div class="hero-section">
</div>
<div class="shop-section">