Restructure in-progress
This commit is contained in:
n0mad1k
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
@@ -0,0 +1,238 @@
|
||||
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" 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">US</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">Accounts & 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-options">
|
||||
<p>Today's Deals</p>
|
||||
<p>Buy Again</p>
|
||||
<p>Customer Service</p>
|
||||
<p>Registry</p>
|
||||
<p>Gift Cards</p>
|
||||
<p>Sell</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="hero-section">
|
||||
<div class="hero-msg">
|
||||
<p>You are on amazon.com. You can also shop on Amazon for millions of products with fast local delivery. <a>Click here to go to amazon.in</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="shop-section">
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<h2>Clothes</h2>
|
||||
<div class="box-img" style="background-image: url('box1_image.jpg');"></div>
|
||||
<p>Shop now</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<h2>Health & Personal Care</h2>
|
||||
<div class="box-img" style="background-image: url('box2_image.jpg');"></div>
|
||||
<p>Shop now</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<h2>Furniture</h2>
|
||||
<div class="box-img" style="background-image: url('box3_image.jpg');"></div>
|
||||
<p>Shop now</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<h2>Electronics</h2>
|
||||
<div class="box-img" style="background-image: url('box4_image.jpg');"></div>
|
||||
<p>See more</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<h2>Beauty picks</h2>
|
||||
<div class="box-img" style="background-image: url('box5_image.jpg');"></div>
|
||||
<p>Shop now</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<h2>Shop Pet Supplies</h2>
|
||||
<div class="box-img" style="background-image: url('box6_image.jpg');"></div>
|
||||
<p>See more</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<h2>New Arrival in Toys</h2>
|
||||
<div class="box-img" style="background-image: url('box7_image.jpg');"></div>
|
||||
<p>Shop now</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<h2>Discover Fashion Trends</h2>
|
||||
<div class="box-img" style="background-image: url('box8_image.jpg');"></div>
|
||||
<p>Shop now</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<h2>Home refresh ideas</h2>
|
||||
<div class="box-img" style="background-image: url('box9_image.jpg');"></div>
|
||||
<p>Shop kitchen upgrades</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<h2>Create with strip lights</h2>
|
||||
<div class="box-img" style="background-image: url('box10_image.jpg');"></div>
|
||||
<p>Shop now</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<h2>For your Fitness Needs</h2>
|
||||
<div class="box-img" style="background-image: url('box11_image.jpg');"></div>
|
||||
<p>Shop now</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="box-content">
|
||||
<h2>Spring new arrivals</h2>
|
||||
<div class="box-img" style="background-image: url('box12_image.jpg');"></div>
|
||||
<p>Discover 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>Careers</a>
|
||||
<a>Blog</a>
|
||||
<a>About Amazon</a>
|
||||
<a>Investor Relations</a>
|
||||
<a>Amazon Devices</a>
|
||||
<a>Amazon Science</a>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<p>Make Money 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 Products</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>Amazon Business Card</a>
|
||||
<a>Shop with Points</a>
|
||||
<a>Reload Your Balance</a>
|
||||
<a>Amazon Currency Converter</a>
|
||||
</ul>
|
||||
|
||||
<ul>
|
||||
<p>Let Us Help You</p>
|
||||
<a>Amazon and COVID-19</a>
|
||||
<a>Your Account</a>
|
||||
<a>Your Orders</a>
|
||||
<a>Shipping Rates & Policies</a>
|
||||
<a>Returns & Replacements</a>
|
||||
<a>Manage Your Content and Devices</a>
|
||||
<a>Amazon Assistant</a>
|
||||
<a>Help</a>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="foot-panel3">
|
||||
<div class="logo"></div>
|
||||
</div>
|
||||
|
||||
<div class="foot-panel4">
|
||||
<div class="policies">
|
||||
<a>Conditions of Use</a>
|
||||
<a>Privacy Policies</a>
|
||||
<a>Your Ads Privacy Choices</a>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
© 1996-2023, Amazon.com, Inc. or its affiliates
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,269 @@
|
||||
* {
|
||||
margin: 0;
|
||||
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: 110px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* box2 */
|
||||
.add-first {
|
||||
color: #CCCCCC;
|
||||
font-size: 0.85rem;
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
.add-second {
|
||||
font-size: 1rem;
|
||||
margin-left: 1.5px;
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* box3 */
|
||||
.nav-search {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
background-color: pink;
|
||||
width: 600px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.search-select {
|
||||
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: #febd68;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
color: #0F1111;
|
||||
}
|
||||
|
||||
/* box4 */
|
||||
span {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.nav-second {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* box6 */
|
||||
.nav-cart i {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.nav-cart {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* panel */
|
||||
.panel {
|
||||
height: 40px;
|
||||
background-color: #222f3d;
|
||||
display: flex;
|
||||
color: white;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.panel-all:hover {
|
||||
border: 1.5px solid white;
|
||||
}
|
||||
|
||||
.panel-options p {
|
||||
display: inline;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.panel-options {
|
||||
width: 85%;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.panel-options p:hover {
|
||||
border: 1.5px solid white;
|
||||
}
|
||||
/* hero section */
|
||||
.hero-section {
|
||||
background-image: url("hero1_image.jpg");
|
||||
background-size: cover;
|
||||
height: 350px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.hero-msg {
|
||||
background-color: white;
|
||||
color: black;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.85rem;
|
||||
width: 80%;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.hero-msg a {
|
||||
color: #007185;
|
||||
}
|
||||
|
||||
/* shop-section */
|
||||
.shop-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
background-color: hsl(318, 65%, 90%);
|
||||
}
|
||||
|
||||
|
||||
.box {
|
||||
/*border: 2px solid black;*/
|
||||
border-radius: 5px;
|
||||
height: 400px;
|
||||
width: 23%;
|
||||
background-color: white;
|
||||
padding: 20px 0px 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.box-img {
|
||||
height: 300px;
|
||||
background-size: cover;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.box-content p {
|
||||
color: #007185;
|
||||
}
|
||||
|
||||
.box-content p:hover {
|
||||
color: #febd68;
|
||||
}
|
||||
/* footer */
|
||||
footer {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.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: 500px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.foot-panel2 a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
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;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
background-image: url("amazon_logo.png");
|
||||
background-size: cover;
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.foot-panel4 {
|
||||
background-color: #0F1111;
|
||||
color: white;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.policies {
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
padding-top: 5px;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user