Scribd
Upload
15 views18 pages

Assignment 3

The document contains an assignment to create a landing page for Amazon using HTML and CSS. It includes a complete HTML code structure for the page layout, navigation bar, hero section, and footer, as well as CSS styles for visual formatting. The code features elements such as a search box, product categories, and links to various Amazon services.

Uploaded by

khushikerkar30
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views18 pages

Assignment 3

The document contains an assignment to create a landing page for Amazon using HTML and CSS. It includes a complete HTML code structure for the page layout, navigation bar, hero section, and footer, as well as CSS styles for visual formatting. The code features elements such as a search box, product categories, and links to various Amazon services.

Uploaded by

khushikerkar30
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

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">

<!--for logo-->

<div class="nav-logo">

<div class="logo">

</div>

</div>

<!-- second box -->

<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>

<!--third div-->
<div class="search-box">

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

<option value="">All</option>

<option value="">All</option>

<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>

<!--4th 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>

<!--fifth div-->

<div class="return-orders">

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

<p class="second-para">Orders</p>

</div>

<!--sixth 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">

<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">

<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">

<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">

<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">

<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">

<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">
<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>

</body>

<footer>

<!--div class foot-panel id ="t"-->

<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>

<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>

<a>Host an amazon hub</a>

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

</ul>

</div>

<div class="foot-panel3">

<div class="logo">

</div>

</div>

<div class="foot-panel4">

<div class="Pages">

<a>Condition of use</a>

<a>Privacy notice</a>

<a>Your Ads privacy</a>

</div>

<div class="Copy-write">

&#169;

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
e3t7fLy8uNjY2qqqqBgYEoKCgJHitJSUmampqipqkdIS1UVFT/oB4jLTf+nB7BwcA6OUHw8PB3dnYAF
ybm5uYABw4ADiJVWF7a2tohISEACxoAEx/ukhwXFxdAQEBfX194ShMAABdra2uDUxQqGg6TWhP
Bdxk6JA8ADi8bEA6mZhdoQBJbNxDhihvNfhlPMRBESlEZFyX/rBtEKw8zKC57TiRnRSmzbhaOXiY7
LylQOy0AGS83JBsAAC6hZyewuKnNAAAVI0lEQVR4nO2dCXvittPAHSuwPrkMGDZACDZQ7isk2ZB
Atk13abtv/9//27y6bEu2TCAhkDSZp+3TGCFLP49GMyMhS9KnfMqnfMqnvDPRYuTY7TqOKGaMG
Mqxm3Z4UUw18UUsCdU8dusOLmYMCwLE+GAjxohTDSLyBxsv6kYaX76YH0s9nsCRVD9xcKPlY+H
YaEmhJD6W8VDUL8kN8iXxwYyHeGoJgHww4yFppmqrYUn46qEeu32HFkFwovk8oPH4YOohEM301
UP+YMZDKIrs4Uh8uNEiEI3B8bGmWqFoqj+1yB8tjBMIYzySJrK18F/6X+8fSZPINe8Pv4TEF6TFhQ
W9OqL1vq1noMgJKklVUo4ix0bACpxqPZEjXsmBxDg2hEDgaDm6vCUjrmwKZQ4jbwlHMNVuL4mt
Lm1dz1vyeBjjcSx5S4lrzTg2Dfkt4ZAkOWhZck89TIr/El+WhTMLCGT7rsSU3qYO/249fyzDqZYb28zU
m0StJ/+B/rwvcqh4H4rgclCcsTEyLCW7rmtGLCnuVWVcKFtly6kUxZ0M40L/NywOw4XR393o5UhVo7
ED71YujEcATG1i0xQtiOns9pR5QqAdCP6brGcaQcftHrpjtyjxiJNJw1v8hNf76PuuTQyoC4B+VjuLdqB
bKXcaJ56kOvnxMNwZADIjKkWA/y46uQaSdHkUFIbdhFVBadadohgIQmGlm/7tThqw6NRFz8qUfB52
7XuFk988wX91SdU+D3tqlmCluEGd7LgI2p4O+JZBwR34/v37SIU8VABqBfiFVKrRKZckpgOZQuckLB
2nyPcFWD6v9AhIoGsx/PIZUhhIxVxQR6qcESlZd1ZPhW/XLF8YsI2w6YiHLMv2RTbSJq59tHmaKaPS
bpHvQyM/GtroE4ZGcNd8zVZBt8y0oj7yVL5YaJ6IpDNjHy7IpIN7WQCUcnzhCtYYyQr1chzmAcdk+k
QkDavWRg4RfN5I+hVxqzxJjRkcrjprRErkL9osDtBlmlWye8VQMxxcHxjl4+7YcNhu8DhK9VDhNOQB
hiEasOgspGNFK6IZXgfzNVdWKI2ncVRIxah4O1MWFen89rstY40jdw4+aZZ63ciAmKFSlVz4MiMFEI
NjGNXkegYAQVcbJcDRiIUPJXvhmpTGtjiQbrQvYvrQKJxBHlQ/eBx6tAMpvpMiCfrC4yhEdTNlgZm
oBzl2xEmbaEBbo/YJDFV1t8Jhwqffj6OBePQwDyWMY1QQlJaAsrF5cAj4FpfDkRc1IFcJDyAijPkAAoy
sdMYunXCN3jY4EA23uMHmNmdtmU4unO2oROcOhGO28ZZQZkIcadH4T9XFfa0HGiZsBStfazZxP2
DZp3EgGva0HGeMkKS/t+lky2pHpyxqqgS4odLIZfPZHN+KugjHibgBMc1q+BMUyLNFUp16Plvnb5eu
9AmNJ3E0MwDRSE75EdrodDpsV6F9tgkPbrAI65Yq7F91p1RUuiWHGwh+X56yMhvEn9IzrHJ0rEpm2
M2MueHamPVp9gFk8tBD4oSrtKxjGrbJjtBU1hlD35rtQXM2Jc5Yr8aUE7aTM2z5EfWGubkmVYrDke
qk0yLIzU4ndDdvwDGOHDITCrndkONhJWwvghg5nPCzVrPrYne07bDebTkz7fV7bc4LyBdJAODWTk
LSqfNDQWL+8t0yCTists1icOScSqlUyYc5pwuVUmXGX7Y8j5Wxec3AKHXZNn09a/mWBkYUPU90ja
OWGk+Ja66ydrTexZZY7tWYKpszXRbhaBZKF98rrBGRmPqdwOCNWPVwxDhyI8GjhTRK+DLvXZ
QpDtZ/zzLTDaejNR8HFMMPcFv8zFgG5HKPNc7Q5aOluSrLSl+EozLtu26vzzhwUvAQO5UAB9cZS4ij
SSmBIaduHTq0QIkt7OEYBjrccBgcDlO2ftFncGgK5aGXOH3LDWkEDNhpJSe1aDwH2OLQX1ajOBw
SRPczQaOkSqGc68CgDja5G7RPYV3eshBH3YvvAD/y/QGQF1Yxs+rpDrpdR2JwsAa9fuEy2QdFJV6Zrf
MjNUO9NbvGjJVUGdDisg1YiwJHC4prOBydLgnwbDMASrM0w4wfL5P2PYkjVfZHPqvEKd/jApagC
porGhZLYzbSjccBdQO3OQm+cjQKU9rt9m9Mo2C3k/R6ErDGtKzaERyWTouCwBYzrWSb9zSOphP0
kCmbDsxxIRWtIrgBlwfhcORg2OItE1LdSCb0MUcjb6DuoWyWznq5TeDKPg62CxAxvMTjKHnRABj71
keKNhM9PWkHHBKLI5cR4rBCONjbAUmRQtrhpfkJDegxuIDzIZsZHLirMHrT2dm3SR64qSIcrD3qo
L6rfRZHc+R6OIJMBde0Ybc4mjlWOZ9usmZLiIM1vEzZ7LY4SBZvNJ4Vyvl6k+0sxEH9MDJS0C4Y3j6
lZrgnqqaZcpsdRGmAaWgI4/Q35oPGuA+Ls17pSa5ITEfSjOIAQMmUZuVsR+TIi3GMhDjyxa1wwIl4N
LaynabAOUSKjZeBPLsBaThciTzqSVJFS/DmGQsqB3BxSTNUeXrBfmXWU/kQ7qReIzjkKA7QrVi52E
hTiCOdeT4OAEZONjYeIeNc9ecUGGtkuMLp7y7WDdIm1mIiHNjuQB68oXB0iQ/hTrJnBIeqhHAAqV
LeFGeKcRSfjQNkCpsSThgH5BHQAFz83nRcG48UXBeXoawDLxGoKW6S1TycxeJwfPVwSDwOULQ2
h2b7xQHATJwU4XHgaQPT0CQuVkmV0VBR6R4VwKVd68DPEmutKdeHYSwOjcMBPdBN2YJ94wD
SE/kfDwfVDU0KZdjqmX5S9leYwzjYEcl+K4+8KiEOk8PBe49IUs1Omovz9ovDCtHAt2PHKosD52w4Z
Wo6UzTed8ZRjMNh8Dj4DHSjXrZm40pJ7GG/HAfglzBS6bzlwNvxMYuPQ0Vb57hUVwP7l8H+05drB2d
/pDE3LrMOTXk86YY9Dwcf2KXSFgwNcIJFjAOZfYfjlyWxir/DkMeRi8URazvgBMXiYNW0YWWo7/x
qOFg7lcLpJtIpAQ5sSnV+bavzW9u3KZQv+3kOBNEOmLIP2ombWUweB3szKwgyXwcHnzjO+UGjAA
eZV9wzPnHoh11Jqh+gy07CaeDbWK3F+R2zOBxGLI564GAPWdd3jzhYO9Bk3Hw2QKPaYaDVpyk3D
aWypq363hnmoXGRLoxZcNIZzsJqyCuNw6FIMTjYbFjxVUwp4NZD6iAwiOzqBsWhwICkzy/mNi/acE4
xaJSLeSjcsEYRLeGh8jFLc9xHKxWsk05wqFIcDmZtGWTYdu8PR0mYMAnlRjzt0KRWj5v2GmOa2aa
ROeygoursbZq1NjK/mqYmE6GIFq39RrUD/6JIjIONUUWZvT3gmLFpTXb1l9OaC9cz+QXOQWzk0rl6
3kJ7Y3Sc7jAVWW6P+TpRFxUc4LN1ZlFYaADWnBDtMLfCwW0O2B8O1hJwONjJNEcTEVrsil2z7gx
B20ZbmWT3gvHSUnnP1Moyt55WwBOSG8VhbIEDdDklTe8NhyXGwS+MNipkMLQ2rbye1GdDF9vC
Nmue0zSJAS+PmMuNWS8Gh7SF7QitBnrrTvvFwdgOfmH0pEBw9Mabg5v0GHdId6I5YqQc7BOlzlsEB
9ldGzPR+r5Sl0/Teisi+x0sgdsRXjVP49Fi90U7DlhJWdBSqC0upqm3iHr02eUOqIh4eo5qB56dYnDA0YIce
zAMb6Sh+3dejmPM+cAF5JPCf8N7QlI4LrF/j+wjCksT9yg0BHuubbs9zlPIlYAhxmFswHGSHRclpVuJL
vWT1NfLcYTcCCczlLql6L60xgzjEG5v4srhhHBrxK2GWaNarVZhaUAtMrCXG8WhbBgsUD/yVjkvM
Oep/HAvOELGsZEtW8JtM52MvTUOaCa4nEEqly/zmcf6iBqUCA41nFHjccDKxKmgJrKm+3DSw4oXk
3mquBDHV/FngTRGGEe/uDG91nSoPYngSD6JI6ahOJzZdwgXf7sGNKb22bY4+FXrSCHLsJMxOMwI
jpgkbiqbZVeCK3uxHaEAn5UOt3rkQMPH4Ug1oEOazWbr3AoQxYGWFWPnZLw3U47BQdIBLI6SsK
JUNsMYqGxpPzMLqkKMP11i/ITcrI9NKcWBM2azyvcLJJWxUyh7O9B8HHYvLgGbyo+CZFLEdkgR
HMKdfGjrdDD/lYt78jsic60nWRiG+KDqxCulODpfnVKt3ev1XSz9Xq99djGz6hwOyEO4gxPSKPbkWB
xqFIckRStqOthDIqBS1nCvqePoXssG3rfuzcJZ2kfbLaCdRKWaDR0JmRV44ffMONs46fT9D+xpZBM0
YjkrMln5CA6aUuMXFkApy9sxa4SzYmQHcWoW7CvtMpqeBkIcOCdJrrLjmdmHDYp8Lj2VrQwDJy3
1tQhoH+2a41y4Lo/C673t1r5blTZzpV8M/8qgUb7oc9+2u8ydy2feUVTMSh7+c1jyV+Ga2ULR6z8ATpMJ
cxHGfJZKnt05O/OuZpnfJ4Buwb/ML8JJGX8FtJG2SkMfdyXXtCSg0aVZqAVtvAMSC/yfhOwvRqHdp
HbbTQZdTUIFKTrMvtZ0OYN+AMHiSLpjpqW2n48HY69fXseha57JFCUpvM8j+rMdwc+hxJdjCnvV
FjOZbuQb6B/yewwCxPClpetTKHrLiJcWrC3jlL9+LVslWJOgKNOkFnNYSFzrpYMJ+bmS8CMleJ6Kp
mkQBBTp7mqxuLq8vwXw71bsQY7cE/iPnPSo+jjMli7N7xbL0+ofVSJ/VAfXk3nr6UpeT5TWbeuQDTC9
EW/b87v14Lx6fspKtbp8PCqPu8Xd/HBAvJ/32L/+/LE6DbEgQK4O1RaBtG6W1dP1/a1+qBtqhMbZz9U5
ZnFOhMGxuD3eb+aV+Rq2aHn1oOmHaYSGjYf9c1DFDAaenHpIqusj4pB0zON0dfWoHERDyFR79tdg
uVpdr9dwQsFytV4N3gIOyGMxOD/FQOAs9/r3w1Ot/fePn//8PYd390S6uVyd08Hy+o3YIPr8anlKNUR6/
SFDjIf77duvX71Wy78d9DguiXZcHnVmgS25nSzRg4FAFg+vriEa43kQ14ki0ScD1Irq/cHMeoy0pPvrUwx
ksFzf3eqt11QRxk9X0QlOaKRgT5TgOB886nEnjG8tL22jfrMY0HlveX15o7/mmAn8dNXsT9sPi+vFsG+a
Zm+Cx8rq//pxJ4xvK8aLj8fS55eDKh6756cDPGZeT2X9qPbXv2c/1tBunS6+oRj3L6yg/zsThv27yYtPMGl
JDyvCAw2bwerq1VREI366/e3XP/+DsysaIEuEo7jA+vljDzTkPRz4qN8uqlXPNzw/hVZEfx27aiQgi38TPz
xP47T6F8Th/rPCZP5xn+7sk5Lcw9nKLf1h6fNAZmSwuJP2T0TRv/3754/rwA3FNORfPxGd6l7GCuSxj3
hf1xkFQY07H6zv9X0qCUpw3EIWQfBWHfz8F7bfbv+F7/xjH8oBZS/pj5b+uGJ5oGd3fn35KO0BiYJRP
Fwtzxnk5+frb0g3ZPfPdRV56H/vRzn2dVisrkOfjI+7z5GSTB7mt61W63kuiYK+eXtzf3nNJzig4/fzG+m/+x
O7gj/E6eQdYaj7OzpX0W/W2N7zRKqD1fry4fEGBhSob9vW1sIg5jePEMUSqRpb6elgcTsliU5zeIWurG5
6G/Kl24qy12M5df0xCgQjqQ6Wi6sJhDJHJlZvxagLVoYW/FyXIIiHCQxXT/+ohnI9EMb60R+BrRs0rww
uj+2gC0WXJlCtBakqNHBOB8vr9dXk7v7h8XE+h0NID8stvAwx3N9NrhbXS5TKiLI9H1xPpKDz+j26uD
5uojRWWvptHBCqJzC8Wa5Wa5QBn0wmd77APy6vFov19Wo1GOCCogpOl9eTOWOcldurKvQ57t6kci
BBQNZhoxp+wn5eD+Wzlkuc1Qo+iPsujItwoMje7QbeanApvaGjNMMCgdwtlrEqEovmqYLQ/oRgwHtN
4FcXt29zqHgCrcL9VfyYeYYgk3F1z/kwOCC/hd7O+ub5Q+VAK0+K3rqZLFZ7IQKVB8bKk5sW02tNM
kxVVe3u4HTx+FwamqIY6ABGc88zrFDgmHmYLJanLyQCv75cTB74UQJ7kcBv7jj78aPbe15XNEVVZ
VwJOl36AGeTQhdijoicV6tPd1socH6BevEw5/w32A/mJSYJdETz7kA0SZW51+KohzidHrpU88cH6FjujA
R9Ybme3N/Mw76syb7RBSvJ7sfwaqacDL8Y5jAnPbeQj4mUZBDjTAhRINN59whdjIj3aiYixzkndn0vhW
aGq0DnPR/s5Gv0gG8RkxX2sOKo0M+W19Bwzm91YYhjMhAYMLt1hXllAVvJId9Ch+N0GIvcX0IHfE
k8jqonxPdYrq4Xdw83c5wpETfNJCcR44eJTuVNJOmFXfSDVoKOBJbJkb/0eONDHwWutPzFs/v7O7So
iOXy8u7+/sZbWtuQDDB8bTCIz6D4h0Rt/woA/6Bg2avE9K4c6d04SjR+24jBE9k7pNpvNppnyLWtNd37g
un7X34lO0A9vngWkJ9ZPQXZ9h1h9Bjk0HtfVGJD3tWLxsgPi8N+hnfiy5bqoSZw6bAe0J+eviP1ML2Db
kLXDZrn3KoScoR0ZIFJIz/FfUfqQd9wJDD/sR8IxPBMcViIPZVf2sqDCX0pR9T6a7Qn2zxYan8E6KhNe
cOpE140MlYEwYVBTs/aqhZVOFYkrHzvy3hQQxr9gB5JsFVPCA4BU7KBJPl+XjQWi0PaAQe2pKL3N
mmxoN6oPKEd2+n5Ezj+C9pBcWxlBeN1YAemb0HIZjmxKZW3NaVarCl9dziIhYg6St62se0mWlmsY3S
bd2IvTT2EeD2JqAc9pXK7cFSJcW2pcryl1309IXSzXEQ9zJ3CDVpJ6CplfawQ/zmicSce+WKIOxhXiRf5
8Fe904PeD41gLyXHw9tvuq0NpJXw+URDTPqNi7fzOOgKnGOTuyiHFPDznQ/Nu/SeLAcS74CwpIzWzh
TD8Hdm75A79ipBu31gJYphejtW5Xf2HnFNUfmffVLV2O2dxooqi+V9DRUpMHkh2XFRUVzJG3tr4lYi
5LHziqJQP94hDSiKGaWxey0mByT5vErehhjoCGj88kfE4nmr75qCgfiVvFsYSAzTJC/HRL+6eHEl6gsqe
SuCptkXvo5co5W8m/Top3zKp3zKp/wn5P8BSYB0x3P0vmYAAAAASUVORK5CYII=');

height: 50px;

width: 100px;

background-size: cover;

.first-text{

font-size: 0.85rem;

color:#cccccc;

margin-left:15px;

.location{

color: #fff;

display: flex;

align-items: center;

justify-content: space-evenly;

}
.second-text{

margin-right:3px;

.search-box{

height: 400px; ;

width: 620px;

display: flex;

align-items: center;

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%;

border-top-left-radius: 4px;

border-bottom-left-radius: 4px;

.search-input:hover{

border:2px solid yellow;

.search-icon{

height:40px;

width: 100px;

background-color: yellow;

border-radius: 4px;

font-size:1.5rem;

padding: 10px;
font-weight:900;

color: #000;

border-top-left-radius: 4px;

border-bottom-left-radius: 4px;

.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;

justify-content: space-evenly;

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;

align-items: center;

justify-content: space-evenly;

}*/

.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;
align-items: center;

justify-content: center;

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;

background-size:cover;

margin-bottom:1rem;

.box-img{

height: 300px;

background-size:cover;

margin-top:1rem;

margin-bottom: 1rem;

}
.box-contnt p{

color:#007185;

cursor:pointer;

.footer{

margin-top: 15px;

.foot-panel{

background-color: #37475a;

color: white;

height: 50px;

display: flex;

justify-content: center;

align-items: center;

font-size: 0.85rem;

cursor: pointer;

.foot-panel2{

background-color: #222f3d;

color: white;

height: 500px;

display: flex;

justify-content: space-evenly;

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;

justify-content: center;

.logo{

background-image:
url("data:image/png;base64,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");

.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:

You might also like