• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
How to Create An Amazon Clone in HTML and CSS
If you’re new to web development and excited to create your own website, why not start by creating an Amazon-inspired homepage? It’s a valuable project that allows you to practice your skills while making a familiar and engaging website.
In this blog post, I’ll guide you through the process of creating a simple yet impressive Amazon clone using only HTML and CSS. By recreating the main elements of the Amazon homepage, such as the navigation bar, search bar, hero section, cards, and footer, you’ll gain a solid understanding of how these components come together to create an attractive website.
Throughout the post, we’ll also explore different HTML tags and CSS properties that will help us efficiently create our Amazon-inspired homepage. To keep it beginner-friendly, we’ll use tags like nav, sections, divs, inputs, links, footer, and other commonly used tags.
Steps To Create Amazon clone Form HTML & CSS
To create an Amazon-inspired Homepage Clone using only HTML and CSS, follow these step-by-step instructions:
1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css
To start, add the following HTML codes to your index.html file: These codes include navigation (nav), sections, input fields, links, and various other tags necessary for your Amazon clone webpage.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amazon Website Clone | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
</head>
<body>
<header>
<nav class="navbar">
<div class="nav-logo">
<a href="#"><img src="images/amazon_logo.png" alt="logo"></a>
</div>
<div class="address">
<a href="#" class="deliver">Deliver</a>
<div class="map-icon">
<span class="material-symbols-outlined">location_on</span>
<a href="#" class="location">Nepal</a>
</div>
</div>
<div class="nav-search">
<select class="select-search">
<option>All</option>
<option>All Categories</option>
<option>Amazon Devices</option>
</select>
<input type="text" placeholder="Search Amazon" class="search-input">
<div class="search-icon">
<span class="material-symbols-outlined">search</span>
</div>
</div>
<div class="sign-in">
<a href="#"> <p>Hello, sign in</p>
<span>Account &amp; Lists</span></a>
</div>
<div class="returns">
<a href="#"><p>Returns</p>
<span>&amp; Orders</span></a>
</div>
<div class="cart">
<a href="#">
<span class="material-symbols-outlined cart-icon">shopping_cart</span>
</a>
<p>Cart</p>
</div>
</nav>
<div class="banner">
<div class="banner-content">
<div class="panel">
<span class="material-symbols-outlined">menu</span>
<a href="#">All</a>
</div>
<ul class="links">
<li><a href="#">Today's Deals</a></li>
<li><a href="#">Customer Service</a></li>
<li><a href="#">Registry</a></li>
<li><a href="#">Gift Cards</a></li>
<li><a href="#">Sell</a></li>
</ul>
<div class="deals">
<a href="#">Shop deals in Electronics</a>
</div>
</div>
</div>
</header>
<section class="hero-section"></section>
<section class="shop-section">
<div class="shop-images">
<div class="shop-link">
<h3>Shop Laptops &amp; Tables</h3>
<img src="images/img-1.png" alt="card">
<a href="#">Shop now</a>
</div>
<div class="shop-link">
<h3>Shop Smartwatches</h3>
<img src="images/img-2.png" alt="card">
<a href="#">Shop now</a>
</div>
<div class="shop-link">
<h3>Create with Strip Lights</h3>
<img src="images/img-3.png" alt="card">
<a href="#">Shop now</a>
</div>
<div class="shop-link">
<h3>Home Refresh Ideas</h3>
<img src="images/img-4.png" alt="card">
<a href="#">Shop now</a>
</div>
</div>
</section>
<footer>
<a href="#" class="footer-title">
Back to top
</a>
<div class="footer-items">
<ul>
<h3>Get to Know Us</h3>
<li><a href="#">About us</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press Release</a></li>
<li><a href="#">Amazon Science</a></li>
</ul>
<ul>
<h3>Connect with Us</h3>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
<ul>
<h3>Make Money with Us</h3>
<li><a href="#">Sell on Amazon</a></li>
<li><a href="#">Sell under Amazon Accelerator</a></li>
<li><a href="#">Protect and Build Your Brand</a></li>
<li><a href="#">Amazon Global Selling</a></li>
<li><a href="#">Become an Affiliate</a></li>
<li><a href="#">Fulfillment by Amazon</a></li>
<li><a href="#">Advertise Your Products</a></li>
<li><a href="#">Amazon Pay on Merchants</a></li>
</ul>
<ul>
<h3>Let Us Help You</h3>
<li><a href="#">COVID-19 and Amazon</a></li>
<li><a href="#">Your Account</a></li>
<li><a href="#">Return Centre</a></li>
<li><a href="#">100% Purchase Protection</a></li>
<li><a href="#">Amazon App Download</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</footer>
</body>
</html>
<!DOCTYPE html> <!-- Coding By CodingNepal - www.codingnepalweb.com --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Amazon Website Clone | CodingNepal</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> </head> <body> <header> <nav class="navbar"> <div class="nav-logo"> <a href="#"><img src="images/amazon_logo.png" alt="logo"></a> </div> <div class="address"> <a href="#" class="deliver">Deliver</a> <div class="map-icon"> <span class="material-symbols-outlined">location_on</span> <a href="#" class="location">Nepal</a> </div> </div> <div class="nav-search"> <select class="select-search"> <option>All</option> <option>All Categories</option> <option>Amazon Devices</option> </select> <input type="text" placeholder="Search Amazon" class="search-input"> <div class="search-icon"> <span class="material-symbols-outlined">search</span> </div> </div> <div class="sign-in"> <a href="#"> <p>Hello, sign in</p> <span>Account &amp; Lists</span></a> </div> <div class="returns"> <a href="#"><p>Returns</p> <span>&amp; Orders</span></a> </div> <div class="cart"> <a href="#"> <span class="material-symbols-outlined cart-icon">shopping_cart</span> </a> <p>Cart</p> </div> </nav> <div class="banner"> <div class="banner-content"> <div class="panel"> <span class="material-symbols-outlined">menu</span> <a href="#">All</a> </div> <ul class="links"> <li><a href="#">Today's Deals</a></li> <li><a href="#">Customer Service</a></li> <li><a href="#">Registry</a></li> <li><a href="#">Gift Cards</a></li> <li><a href="#">Sell</a></li> </ul> <div class="deals"> <a href="#">Shop deals in Electronics</a> </div> </div> </div> </header> <section class="hero-section"></section> <section class="shop-section"> <div class="shop-images"> <div class="shop-link"> <h3>Shop Laptops &amp; Tables</h3> <img src="images/img-1.png" alt="card"> <a href="#">Shop now</a> </div> <div class="shop-link"> <h3>Shop Smartwatches</h3> <img src="images/img-2.png" alt="card"> <a href="#">Shop now</a> </div> <div class="shop-link"> <h3>Create with Strip Lights</h3> <img src="images/img-3.png" alt="card"> <a href="#">Shop now</a> </div> <div class="shop-link"> <h3>Home Refresh Ideas</h3> <img src="images/img-4.png" alt="card"> <a href="#">Shop now</a> </div> </div> </section> <footer> <a href="#" class="footer-title"> Back to top </a> <div class="footer-items"> <ul> <h3>Get to Know Us</h3> <li><a href="#">About us</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Press Release</a></li> <li><a href="#">Amazon Science</a></li> </ul> <ul> <h3>Connect with Us</h3> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Instagram</a></li> </ul> <ul> <h3>Make Money with Us</h3> <li><a href="#">Sell on Amazon</a></li> <li><a href="#">Sell under Amazon Accelerator</a></li> <li><a href="#">Protect and Build Your Brand</a></li> <li><a href="#">Amazon Global Selling</a></li> <li><a href="#">Become an Affiliate</a></li> <li><a href="#">Fulfillment by Amazon</a></li> <li><a href="#">Advertise Your Products</a></li> <li><a href="#">Amazon Pay on Merchants</a></li> </ul> <ul> <h3>Let Us Help You</h3> <li><a href="#">COVID-19 and Amazon</a></li> <li><a href="#">Your Account</a></li> <li><a href="#">Return Centre</a></li> <li><a href="#">100% Purchase Protection</a></li> <li><a href="#">Amazon App Download</a></li> <li><a href="#">Help</a></li> </ul> </div> </footer> </body> </html>
Next, add the following CSS codes to your style.css file to style our login form, along with the glassmorphism effect and floating label animation. These lines of code include various CSS properties like blur, background, background image, etc. to achieve the desired Glassmorphism effect.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
html {
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: #fff;
}
a:hover {
color: #ddd;
}
/* Header or Navbar */
header {
width: 100%;
background-color: #0f1111;
}
.navbar {
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
color: #fff;
max-width: 1280px;
margin: 0 auto;
}
.nav-logo img {
margin-top: 10px;
width: 128px;
}
.address .deliver {
margin-left: 20px;
font-size: 0.75rem;
color: #ccc;
}
.address .map-icon {
display: flex;
align-items: center;
}
.nav-search {
display: flex;
justify-content: space-evenly;
max-width: 620px;
width: 100%;
height: 40px;
border-radius: 4px;
}
.select-search {
background: #f3f3f3;
width: 50px;
text-align: center;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: none;
}
.search-input {
max-width: 600px;
width: 100%;
font-size: 1rem;
border: none;
outline: none;
padding-left: 10px;
}
.search-icon {
max-width: 45px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
background: #febd68;
color: #000;
cursor: pointer;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.sign-in p,
.returns p {
font-size: 0.75rem;
}
.sign-in,
.returns span {
font-size: 0.875rem;
font-weight: 600;
}
.cart {
display: flex;
}
.cart .cart-icon {
font-size: 2.5rem
}
.cart p {
margin-top: 20px;
font-weight: 500;
}
.banner {
padding: 10px 20px;
background: #222f3d;
color: #fff;
font-size: 0.875rem;
}
.banner-content {
margin: 0 auto;
max-width: 1280px;
display: flex;
align-items: center;
justify-content: space-between;
}
.panel {
max-width: 1280px;
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
.panel span {
margin-right: 7px;
}
.links {
display: flex;
align-items: center;
list-style: none;
gap: 15px;
flex-grow: 1;
margin-left: 15px;
}
.links a {
padding: 10px 0;
}
.deals a {
font-size: 0.9rem;
font-weight: 500;
white-space: nowrap;
}
/* Hero Section */
.hero-section {
height: 400px;
background-image: url("images/hero-img.jpg");
background-position: center;
background-size: cover;
}
/* Shop Section */
.shop-section {
display: flex;
align-items: center;
flex-direction: column;
background-color: #f3f3f3;
padding: 50px 0;
}
.shop-images {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
max-width: 1280px;
width: 100%;
}
.shop-link {
background-color: #fff;
padding: 30px;
display: flex;
cursor: pointer;
flex-direction: column;
white-space: nowrap;
}
.shop-link img {
width: 100%;
height: 280px;
object-fit: cover;
margin-bottom: 10px;
}
.shop-link h3 {
margin-bottom: 10px;
}
.shop-link a {
display: inline-block;
margin-top: 10px;
font-size: 0.9rem;
color: blue;
font-weight: 500;
transition: color 0.3s ease;
}
.shop-link:hover a {
color: #c7511f;
text-decoration: underline;
}
/* Footer */
.footer-title {
display: flex;
align-items: center;
justify-content: center;
background-color: #37475a;
color: #fff;
font-size: 0.875rem;
font-weight: 600;
height: 60px;
}
.footer-items {
display: flex;
justify-content: space-evenly;
width: 100%;
margin: 0 auto;
background: #232f3e;
}
.footer-items h3 {
font-size: 1rem;
font-weight: 500;
color: #fff;
margin: 20px 0 10px 0;
}
.footer-items ul {
list-style: none;
margin-bottom: 20px;
}
.footer-items li a {
color: #ddd;
font-size: 0.875rem;
}
.footer-items li a:hover {
text-decoration: underline;
}
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } html { scroll-behavior: smooth; } a { text-decoration: none; color: #fff; } a:hover { color: #ddd; } /* Header or Navbar */ header { width: 100%; background-color: #0f1111; } .navbar { height: 60px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: #fff; max-width: 1280px; margin: 0 auto; } .nav-logo img { margin-top: 10px; width: 128px; } .address .deliver { margin-left: 20px; font-size: 0.75rem; color: #ccc; } .address .map-icon { display: flex; align-items: center; } .nav-search { display: flex; justify-content: space-evenly; max-width: 620px; width: 100%; height: 40px; border-radius: 4px; } .select-search { background: #f3f3f3; width: 50px; text-align: center; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border: none; } .search-input { max-width: 600px; width: 100%; font-size: 1rem; border: none; outline: none; padding-left: 10px; } .search-icon { max-width: 45px; width: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; background: #febd68; color: #000; cursor: pointer; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .sign-in p, .returns p { font-size: 0.75rem; } .sign-in, .returns span { font-size: 0.875rem; font-weight: 600; } .cart { display: flex; } .cart .cart-icon { font-size: 2.5rem } .cart p { margin-top: 20px; font-weight: 500; } .banner { padding: 10px 20px; background: #222f3d; color: #fff; font-size: 0.875rem; } .banner-content { margin: 0 auto; max-width: 1280px; display: flex; align-items: center; justify-content: space-between; } .panel { max-width: 1280px; display: flex; align-items: center; gap: 5px; cursor: pointer; } .panel span { margin-right: 7px; } .links { display: flex; align-items: center; list-style: none; gap: 15px; flex-grow: 1; margin-left: 15px; } .links a { padding: 10px 0; } .deals a { font-size: 0.9rem; font-weight: 500; white-space: nowrap; } /* Hero Section */ .hero-section { height: 400px; background-image: url("images/hero-img.jpg"); background-position: center; background-size: cover; } /* Shop Section */ .shop-section { display: flex; align-items: center; flex-direction: column; background-color: #f3f3f3; padding: 50px 0; } .shop-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; max-width: 1280px; width: 100%; } .shop-link { background-color: #fff; padding: 30px; display: flex; cursor: pointer; flex-direction: column; white-space: nowrap; } .shop-link img { width: 100%; height: 280px; object-fit: cover; margin-bottom: 10px; } .shop-link h3 { margin-bottom: 10px; } .shop-link a { display: inline-block; margin-top: 10px; font-size: 0.9rem; color: blue; font-weight: 500; transition: color 0.3s ease; } .shop-link:hover a { color: #c7511f; text-decoration: underline; } /* Footer */ .footer-title { display: flex; align-items: center; justify-content: center; background-color: #37475a; color: #fff; font-size: 0.875rem; font-weight: 600; height: 60px; } .footer-items { display: flex; justify-content: space-evenly; width: 100%; margin: 0 auto; background: #232f3e; } .footer-items h3 { font-size: 1rem; font-weight: 500; color: #fff; margin: 20px 0 10px 0; } .footer-items ul { list-style: none; margin-bottom: 20px; } .footer-items li a { color: #ddd; font-size: 0.875rem; } .footer-items li a:hover { text-decoration: underline; }
Conclusion and Final Words
In conclusion, building an Amazon-inspired clone using HTML and CSS is a helpful project, especially for those new to web development. By following the steps outlined in this blog post, you have successfully created your own version of an Amazon homepage.
To continue improving your web development skills, I suggest you try recreating the responsive Fiverr homepage in HTML and CSS This project will teach you how to use media queries to create a responsive layout for the website.
If you encounter any problems while creating your Amazon-inspired Homepage, you can download the source code files for this project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}