AMAZON PROJECT HTML & CSS
AMAZON PROJECT HTML & CSS
HTML CODE
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Amajon Project</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css” integrity=”sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==” crossorigin=”anonymous” referrerpolicy=”no-referrer” />
<link rel=”stylesheet” href=”style.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=”select-search”>
<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-option”>
<p>Today’Deals</p>
<p>Customer Service</p>
<p>Gifts Cards</p>
<p>Sell</p>
</div>
<div class=”panel-deal”>
Shop Deal in Electronics
</div>
</div>
</header>
<div class=”hero-section”>
<div class=”hero-message”>
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>
</div>
</div>
<div class=”shop-section”>
<div class=”box1 box”>
<div class=”box-content”>
<h2>Clothes</h2>
<div class=”box-image” style=”background-image: url(‘box1_image.jpg’);”></div>
<p>see more</p>
</div>
</div>
<div class=”box2 box”>
<div class=”box-content”>
<h2>Health & Personal Care</h2>
<div class=”box-image” style=”background-image: url(‘box2_image.jpg’);”></div>
<p>see more</p>
</div>
</div>
<div class=”box3 box”>
<div class=”box-content”>
<h2>Furniture</h2>
<div class=”box-image” style=”background-image: url(‘box3_image.jpg’);”></div>
<p>see more</p>
</div>
</div>
<div class=”box4 box”><div class=”box-content”>
<h2>Electronics</h2>
<div class=”box-image” style=”background-image: url(‘box4_image.jpg’);”></div>
<p>see more</p>
</div></div>
</div>
<div class=”shop-section”>
<div class=”box1 box”>
<div class=”box-content”>
<h2>beauty Picks</h2>
<div class=”box-image” style=”background-image: url(‘box5_image.jpg’);”></div>
<p>see more</p>
</div>
</div>
<div class=”box2 box”>
<div class=”box-content”>
<h2>Pets Care</h2>
<div class=”box-image” style=”background-image: url(‘box6_image.jpg’);”></div>
<p>see more</p>
</div>
</div>
<div class=”box3 box”>
<div class=”box-content”>
<h2>New Arrival in Toys</h2>
<div class=”box-image” style=”background-image: url(‘box7_image.jpg’);”></div>
<p>see more</p>
</div>
</div>
<div class=”box4 box”><div class=”box-content”>
<h2>Discover Fashion Trends</h2>
<div class=”box-image” style=”background-image: url(‘box8_image.jpg’);”></div>
<p>see more</p>
</div></div>
</div>
<footer>
<div class=”foot-panel1″>
Back to Top
</div>
<div class=”foot-panel2″>
<ul>
<p>Get to Know Us</p>
<a href=”&”>About Us</a>
<a href=”&”>Careers</a>
<a href=”&”>Press Releases</a>
<a href=”&”>Amazon Science</a>
</ul>
<ul>
<p>Connect with Us</p>
<a href=”$”>Facebook</a>
<a href=”$”>Twitter</a>
<a href=”$”>Instagram</a>
</ul>
<ul>
<p>Make Money with Us</p>
<a href=””>Sell on Amazon</a>
<a href=”$”>Sell under Amazon Accelerator</a>
<a href=”$”>Protect and Build Your Brand</a>
<a href=”$”>Amazon Global Selling</a>
<a href=”$”>Become an Affiliate</a>
<a href=”$”>Fulfilment by Amazon</a>
<a href=”$”>Advertise Your Products</a>
<a href=”$”>Amazon Pay on Merchants</a>
</ul>
<ul>
<p>Let Us Help You</p>
<a href=”$”>COVID-19 and Amazon</a>
<a href=”$”>Your Account</a>$
<a href=”$”>Returns Centre</a>
<a href=”$”>100% Purchase Protection</a>
<a href=”$”>Amazon App Download</a>
Help
</ul>
</div>
<div class=”foot-panel3″>
<div class=”logo”>
</div>
</div>
<div class=”foot-panel4″>
<div class=”pages”>
<a href=”$”>Condition of Use</a>
<a href=”$”>Privacy Notice</a>
<a href=”$”>Your ads Privacy Choices</a>
</div>
<div class=”copyright”>
© 1996-2024, Amazon.com, Inc. or its affiliates
</div>
</div>
</footer>
</body>
</html>
CSS CODE
*{
margin: 0px;
padding: 0px;
font-family: arial;
border: border-box;
}
.navbar{
height: 60px;
background-color: #0F1111;
color: white;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.nav-logo{
height: 50px;
width: 100px;
}
.logo{
background-image: url(amazon_logo.png);
background-size: cover;
height: 50px;
width: 100%;
}
.border{
border: 1.5px solid transparent;
}
.border:hover{
border: 1.5px solid white;
}
/*box 2*/
.add-icon{
display: flex;
align-items: center;
}
.add-first{
color: #cccccc;
font-size: 0.85rem;
margin-left: 15px;
}
.add-second{
font-size: 1rem;
margin-left: 3px;
}
/*box3*/
.nav-search{
display: flex;
justify-content: space-evenly;
background-color: pink;
width: 620px;
height: 40px;
border-radius: 4px;
}
.nav-search:hover{
border: 2px solid orange;
}
.select-search{
background-color: #f3f3f3;
width: 50px;
text-align: center;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: none;
}
.search-input{
width: 100%;
font-size: 1rem;
border: none;
}
.search-icon{
width: 45px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
background-color: #f79412;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/*box4*/
span{
font-size: 0.7rem;
}
.nav-second{
font-size: 0.85rem;
font-weight: 700;
}
/*box5*/
.nav-cart i{
font-size: 30px;
}
.nav-cart{
font-weight: 700;
}
/*panel*/
.panel{
height: 40px;
background-color: #222f3d;
display: flex;
color: white;
align-items: center;
justify-content: space-evenly;
}
.panel-option p{
display: inline;
margin-left: 15px;
}
.panel-option{
width: 70%;
font-size: 0.85rem;
}
.panel-deal{
font: size 0.9rem;
font-weight: 700;
}
/*Hero-Section*/
.hero-section{
width: 1256px;
height: 320px;
background-image: url(“hero_image.jpg”);
background-size: cover;
display: flex;
justify-content: center;
align-items: flex-end;
}
.hero-message{
width: 90%;
height: 40px;
font-size: 0.85rem;
background-color: white;
color: black;
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.hero-message a{
color: #007185;
text-decoration: none;
}
/* shop section*/
.shop-section{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color: #e2e7e6;
}
.box{
width: 23%;
height: 320px;
/* border: 2px solid black; */
background-color: white;
padding: 20px 0px 15px ;
margin-top: 15px;
}
.box-image{
height: 250px;
background-size: cover;
margin-top: 1rem;
margin-bottom: 1rem;
}
.box-content{
margin-left: 10px;
margin-right: 10px;
}
.box-content p{
color: #007185;
}
/*Footer*/
footer{
margin-top: 30px;
}
.foot-panel1{
background-color: #37475a;
color: white;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.85rem;
}
.foot-panel2{
background-color: #222f3d;
color: white;
height: 300px;
display: flex;
justify-content: space-evenly;
}
ul{
margin-top: 20px;
}
ul a{
display: block;
text-decoration: none;
color: #DDDDDD;
font-size: .75rem;
margin-top: 10px;
}
/*foot-panel3*/
.foot-panel3{
background-color: #222f3d;
color: white;
border: 0.5px solid white;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
background-image: url(“amazon_logo.png”);
width: 100px;
}
/*panel4*/
.foot-panel4{
background-color: #0F1111;
color: white;
height: 80px;
/* display: flex; */
}
.foot-panel4 a{
text-decoration: none;
color: white;
}
.pages{
font-size: 0.7rem;
display: flex;
justify-content: center;
align-items: center;
padding-top: 25px;
}
.copyright{
font-size: 0.7rem;
display: flex;
justify-content: center;
align-items: center;
padding-top: 5px;
}
Thanks for reading this blog. Hope you get satisfied with the blog and definitely this blog must have valued your time and effort of reading.
Take a time to connect our other digital creations such as Instagram , Facebook and Youtube.
Social Media Links of Tech DCode :
YouTube : https://www.youtube.com/channel/UCjJnEdeugftBwQ3yMuD4B_A
Instagram : https://www.instagram.com/thetechdcode/
Facebook Page : https://www.facebook.com/thetechdcode
Twitter : https://twitter.com/thetechdcode
Telegram Channel : https://t.me/thetechdcode
Tech DCode Linktree : https://linktr.ee/thetechdcode
My Personal Handles : https://linktr.ee/virtualshivamin
Social Media Links of SHIVAM SINGH (OWNER) :
Instagram : https://www.instagram.com/virtualshivamin/
Facebook Page : https://www.facebook.com/virtualshivamin/
Twitter : https://twitter.com/virtualshivamin/
Personal Linktree : https://linktr.ee/virtualshivamin
html css project
html css projects
how to make profile card in html
how to create profile card in html
flipping card ui design in html u0026 css
how to make responsive cards,css hover effect
css hover effects
how to make profile card in html and css
how to make profile card ui design
how to create profile card in html and css
how to make profile card using html and css
css animation effects
profile card html css
responsive profile card