Khushi 1

Assignment No.
Q. Create a landing page of Amazon using HTML and CSS.

HTML Code File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My website2</title>
<link rel="stylesheet" href="style2.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-
SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9Qe
vSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<nav class="navbar">

<div class="nav-logo">
<div class="logo">
</div>
</div>

<div class="address-box">
<p class="first-text">Deliver to</p>
<div class="location">
<i class="fa-sharp fa-solid fa-location-dot"></i>
<p class="second-text">India</p>
</div>
</div>

<div class="search-box">
<select name="" id="" class="search-select">
<option value="">All</option>
</select>
<input type="text" placeholder="Search amazon" class="search-input">
<div class="search-icon">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>

<div class="Sign-in">
<p class="first-para"><span>Hello,Sign in</span></p>
<p class="second-para"><span>Account & lists</span></p>
</div>

<div class="return-orders">
<p class="first-para"><span>Return &</span></p>
<p class="second-para">Orders</p>
</div>

<div class="cart-section">
<i class="fa-solid fa-cart-shopping"></i>cart
</div>
</nav>
<div class="panel-box">
<div class="panel-all">
<i class="fa-solid fa-bars"></i>All
</div>
<div class="panel-option">
<p>Today's deals</p>
<p> Customer</p>
<p>Service</p>
<p>Registry</p>
<p>Gift</p>
<p>Card</p>
<p>Sell</p>
</div>
<div class="panel-deals">
<p>Shop Deals in Electronics</p>
</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 product with fast local
delivery.
</p>
<a>Click here to go to amazon.in</a>
</div>
</div>
<div class="shop-section">
<div class="box">
<div class="box-content">
<h2>Computers</h2>
<div class="box-img" style="background-image: url('box.jpg')"></div>
<p class="box-content">See more</p>
</div>
</div>
<div class="box">
<h2>Computers</h2>
</div>
</div>
<div class="box">
<h2>Computers</h2>
</div>
</div>
<div class="box">
<h2>Computers</h2>
</div>
</div>
<div class="box">
<h2>Computers</h2>
</div>
</div>
<div class="box">
<h2>Computers</h2>
</div>
</div>
<div class="box">
<h2>Computers</h2>
</div>
</div>
<div class="box">
<h2>Computers </h2>
</div>
</div>
</div>
</body>
<footer>

<div class="foot-panel" id="to-top" >
Back to top
</div>
<div class="foot-panel2">
<ul>
<p>Get to Knows us</p>
<a>Careers</a>
<a>Block</a>
<a>About Amazon</a>
<a>Invester Relations</a>
<a>Amazon Devices</a>
<a>Amazon Sciences</a>
</ul>
<ul>
<p>Make with us</p>
<a>Sell Products on Amazon</a>
<a>Sell On Amazon business</a>
<a>Sell Apps on Amazon</a>
<a>Become an Affiliate</a>
<a>Advertise Your Product</a>
<a>Self-publish with us</a>
<a>Host an amazon hub</a>
<a>See More Make money with us</a>

</ul>
<ul>
<p>Amazon payment Products</p>
<a> investor-relations</a>
<a>Amazon devices</a>
</ul>
<ul>
<p>Amazon payment Products</p>
<a> investor-relations</a>
<a>Amazon devices</a>
</ul>
</div>
<div class="logo">
</div>
</div>
<div class="Pages">
<a>Condition of use</a>
<a>Privacy notice</a>
<a>Your Ads privacy</a>
</div>
<div class="Copy-write">
©
1996-2023 Amazon.com,Inc,or its affiliate
</div>
</div>
</footer>
</html>
CSS Code File:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
html,body{ height
: 100%;
width: 100%;
.navbar{ height:
60px; width:
auto;
background-color: black;
color: white;
align-items: center;
justify-content: space-evenly;
display: flex;
cursor: pointer;
.nav-
logo{ height:
60px;
width:100px;
.logo{
background-image:
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAACUCAMAAABV5TcGAAAA8
FBMVEUODg7///8OIi4AAAD4mB0QJTERJDEUKTUOEBERHygODQoAAA0PFBgOFxz5+fnR0dE3Nz
e3t7fLy8uNjY2qqqqBgYEoKCgJHitJSUmampqipqkdIS');
height: 50px;
width: 100px;
background-size: cover;
.first-text{
font-size: 0.85rem;
color:#cccccc;
margin-left:15px;
}
.location{ color:
#fff; display:
flex;
}
.second-text{ margin-
right:3px;
.search-
box{ height:
400px; ; width:
620px; display:
flex;
justify-content:space-evenly;
.search-
select{ height
: 40px; width:
60px;
background-color:#ecdfdffb;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: none;
.search-
input{ height:
40px;
width:500%;
.search-
input:hover{ border:2px
solid yellow;
.search-
icon{ height:40
px; width:
100px;
background-color: yellow;
border-radius: 4px;
font-size:1.5rem;
padding: 10px;
font-weight:900;
color: #000;
}
.first-para{ color:
#cccccc;
font-size: small;
.second-para{ color:
white; font-
weight: 800;
}
.cart-
selection{ font-
size:1rem;
color:white;
.panel-
box{ height:
60px; width:
auto;
background-color: #222f3d;
display: flex;
align-items:center;
color: white;
cursor: pointer;
.panel-option
p{ display:
inline; margin:
15px;
.panel-option
p:hover{ border: 2px
solid white ;
}
/*.panel-all{
margin-right: 500px;
padding:20px;
margin:100px;
width:100px;
.panel-
option{ display:
flex;
}*/
.panel-option{
font-size: 0.85rem;
width:70%;
}
.panel-deals{
font-size: 0.9rem;
font-weight: 700;
/* CSS for hero Section*/
.hero-
section{ height
: 300px; width:
auto;
background-image: url("./img1_hrero.jpg");
background-size:cover;
display:flex;
align-items: flex-end;
justify-content: center;
}
.hero-
msg{ height:
40px; width:
80%;
background-color: #fff;
display: flex;
margin-bottom:25px;
font-weight:500;
font-size: 14px;
.hero-msg
a{ color:#007185;
cursor: pointer;
.shop-section{
flex-wrap: wrap;
display: flex;
justify-content:space-evenly;
background-color:#fff;
.box{
height: 400px;
width: 23%;
background-color:white;
padding: 20px 0px,15px;
margin-top:15px;
.box-
content{ height:
300px;
margin-bottom:1rem;
.box-
img{ height:
300px;
margin-top:1rem;
margin-bottom: 1rem;
}
.box-contnt
p{ color:#00718
5;
cursor:pointer;
.footer{
margin-top: 15px;
.foot-panel{
background-color: #37475a;
color: white;
height: 50px;
display: flex;
font-size: 0.85rem;
cursor: pointer;
}
.foot-panel2{
background-color: #222f3d;
color: white;
height: 500px;
display: flex;
ul{
margin-top: 20px;
ul a{
display: block;
font-size: 0.85rem;
margin-top: 10px;
color: #dddddd;
}
.foot-panel3{
background-color: #222f3d; color:white;
border-top: 0.5px solid white;
height: 70px;
display: flex;
.logo{
background-image:
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARMAAAC3CAMAAAAGjUrGAAAA
1VBMVEUjLz//////mQD/mwD/nQAAFy0dKjsTIzYKHTIAJkEAFSzKzM8AECmqrbIZJzkgLD3x8vOHi
5Lf4OJcY21qcHhIUV0tOEbQ0tQAGi8AJEEdLU");
.foot-panel4{
background-color: #0f1111;
color: white;
height: 90px;
font-size:0.8rem;
text-align: center;
.pages{
padding-top:25px ;
.copyright{
padding-top: 5px;
}
Output:

Khushi 1

Uploaded by

Copyright:

Available Formats

Khushi 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Khushi 1

Uploaded by

Copyright:

Available Formats

Assignment No.

Q. Create a landing page of Amazon using HTML and CSS.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style2.css">

crossorigin="anonymous" referrerpolicy="no-referrer" />

<p class="first-text">Deliver to</p>

<i class="fa-sharp fa-solid fa-location-dot"></i>

<select name="" id="" class="search-select">

<input type="text" placeholder="Search amazon" class="search-input">

<i class="fa-solid fa-magnifying-glass"></i>

<p class="first-para"><span>Hello,Sign in</span></p>

<p class="second-para"><span>Account & lists</span></p>

<p class="first-para"><span>Return &</span></p>

<i class="fa-solid fa-cart-shopping"></i>cart

<i class="fa-solid fa-bars"></i>All

<p>Shop Deals in Electronics</p>

<a>Click here to go to amazon.in</a>

<div class="box-img" style="background-image: url('box.jpg')"></div>

<p class="box-content">See more</p>

<div class="box-img" style="background-image: url('box.jpg')"></div>

<p class="box-content">See more</p>

<div class="box-img" style="background-image: url('box.jpg')"></div>

<p class="box-content">See more</p>

<div class="box-img" style="background-image: url('box.jpg')"></div>

<p class="box-content">See more</p>

<div class="box-img" style="background-image: url('box.jpg')"></div>

<p class="box-content">See more</p>

<div class="box-img" style="background-image: url('box.jpg')"></div>

<p class="box-content">See more</p>

<div class="box-img" style="background-image: url('box.jpg')"></div>

<p class="box-content">See more</p>

<div class="box-img" style="background-image: url('box.jpg')"></div>

<p class="box-content">See more</p>

<div class="foot-panel" id="to-top" >

<p>Get to Knows us</p>

<p>Make with us</p>

<a>Sell Products on Amazon</a>

<a>Sell On Amazon business</a>

<a>Sell Apps on Amazon</a>

<a>Advertise Your Product</a>

<a>Self-publish with us</a>

<a>Host an amazon hub</a>

<a>See More Make money with us</a>

<p>Amazon payment Products</p>

<a>Host an amazon hub</a>

<a>See More Make money with us</a>

<p>Amazon payment Products</p>

<a>Host an amazon hub</a>

<a>See More Make money with us</a>

<a>Your Ads privacy</a>

1996-2023 Amazon.com,Inc,or its affiliate

p:hover{ border: 2px

/* CSS for hero Section*/

padding: 20px 0px,15px;

background-color: #222f3d; color:white;

border-top: 0.5px solid white;

You might also like