├── a1.jpg
├── a2.jpg
├── a3.jpg
├── a4.jpg
├── a5.jpg
├── a6.jpg
├── a7.jpg
├── a8.jpg
├── a9.jpg
├── a10.jpg
├── a11.jpg
├── a12.jpg
├── a13.jpg
├── a14.jpg
├── a15.jpg
├── a16.jpg
├── amazon-logo1.png
├── amazon-app-image.jpg
├── amazon-background.jpg
├── README.md
├── amazon-web.css
└── amazon-web.html


/a1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a1.jpg


--------------------------------------------------------------------------------
/a2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a2.jpg


--------------------------------------------------------------------------------
/a3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a3.jpg


--------------------------------------------------------------------------------
/a4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a4.jpg


--------------------------------------------------------------------------------
/a5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a5.jpg


--------------------------------------------------------------------------------
/a6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a6.jpg


--------------------------------------------------------------------------------
/a7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a7.jpg


--------------------------------------------------------------------------------
/a8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a8.jpg


--------------------------------------------------------------------------------
/a9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a9.jpg


--------------------------------------------------------------------------------
/a10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a10.jpg


--------------------------------------------------------------------------------
/a11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a11.jpg


--------------------------------------------------------------------------------
/a12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a12.jpg


--------------------------------------------------------------------------------
/a13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a13.jpg


--------------------------------------------------------------------------------
/a14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a14.jpg


--------------------------------------------------------------------------------
/a15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a15.jpg


--------------------------------------------------------------------------------
/a16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/a16.jpg


--------------------------------------------------------------------------------
/amazon-logo1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/amazon-logo1.png


--------------------------------------------------------------------------------
/amazon-app-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/amazon-app-image.jpg


--------------------------------------------------------------------------------
/amazon-background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Himanshu12866/Amazon-Home-Page/HEAD/amazon-background.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |    
 7 | </head>
 8 | <body>
 9 |     <h2>Amazon Home Page</h2>
10 |     <p>This is the  home page for Amazon.In this template I used only HTML5  and CSS3 .</p>
11 |     <p>This template is one of my practice  templates.</p>
12 |     <p>All files are available in GitHub. You can ses codes </p>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/amazon-web.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 |   left: 0;
  4 |   right: 0;
  5 | }
  6 | .amazon-header {
  7 |   display: grid;
  8 |   grid-template-columns: 3fr 5.5fr 3.5fr;
  9 |   background-color: black;
 10 |   color: white;
 11 | 
 12 |   position: sticky;
 13 |   top: 0;
 14 | 
 15 |   /* background-color: darkgray; */
 16 |   padding: -30px;
 17 | }
 18 | .amazon-header-section-1 {
 19 |   display: grid;
 20 |   grid-template-columns: 3fr 7fr;
 21 | }
 22 | .a-h-s-1 img {
 23 |   width: 100%;
 24 |   padding: 10px;
 25 | }
 26 | .a-h-s-2 {
 27 |   width: 100%;
 28 |   padding: 10px;
 29 | }
 30 | .bi-geo-alt {
 31 |   /* padding: 8px; */
 32 |   font-size: 13px;
 33 | }
 34 | .bi-geo-alt .bold {
 35 |   text-align: right;
 36 |   margin-left: 10px;
 37 |   padding-left: 10px;
 38 |   font-size: 18px;
 39 |   font-weight: bold;
 40 | }
 41 | .amazon-header-section-2 {
 42 |   display: grid;
 43 |   grid-template-columns: 1fr 10fr 1fr;
 44 |   padding: -10px;
 45 |   background-color: white;
 46 | }
 47 | .a-h-s-2-1 {
 48 |   padding-top: 20px;
 49 |   text-align: center;
 50 |   background-color: rgb(0, 0, 0);
 51 |   color: white;
 52 | }
 53 | .a-h-s-2-2 {
 54 |   background-color: black;
 55 |   text-align: left;
 56 |   padding-top: 12px;
 57 |   /* padding-left: 10px; */
 58 |   color: rgb(0, 0, 0);
 59 | }
 60 | .a-h-s-2-3 {
 61 |   background-color: rgb(0, 0, 0);
 62 |   text-align: left;
 63 |   font-size: 22px;
 64 |   padding-top: 16px;
 65 |   padding-left: 4px;
 66 | }
 67 | .insidediv {
 68 |   background-color: rgb(255, 255, 255);
 69 |   /* padding-top: 10px;
 70 | margin: 0; */
 71 |   padding: 8px;
 72 | }
 73 | .insidediv1 {
 74 |   background-color: black;
 75 |   color: white;
 76 | }
 77 | .insidediv span {
 78 |   padding: 10px;
 79 |   color: grey;
 80 |   text-align: center;
 81 | }
 82 | .amazon-header-section-3 {
 83 |   display: grid;
 84 |   grid-template-columns: 3fr 3fr 3fr 3fr;
 85 | }
 86 | .a-h-s-3-1 {
 87 |   padding-top: 20px;
 88 | }
 89 | .hello {
 90 |   font-size: 12px;
 91 |   padding-top: 15px;
 92 | }
 93 | .lists {
 94 |   font-size: 15px;
 95 |   font-weight: 600;
 96 | }
 97 | .a-h-s-3-4 {
 98 |   padding-top: 10px;
 99 |   font-size: 20px;
100 | }
101 | .bi-cart {
102 |   font-size: 35px;
103 | }
104 | .header-nav {
105 |   background-color: rgb(27, 59, 59);
106 |   height: 35px;
107 |   width: 100%;
108 |   display: grid;
109 |   grid-template-columns: 8.5fr 3.5fr;
110 | }
111 | .category {
112 |   color: white;
113 |   padding-top: 5px;
114 | }
115 | .category span {
116 |   padding: 10px;
117 |   font-size: 14px;
118 |   margin-top: 20px;
119 | }
120 | .bi-list {
121 |   padding: 20px;
122 |   font-size: 18px;
123 |   font-style: normal;
124 | }
125 | .amazon-app-image {
126 |   overflow: hidden;
127 |   padding-left: -20px;
128 |   width: 100%;
129 |   left: -10%;
130 |   z-index: -5;
131 | }
132 | .amazon-background img {
133 |   width: 100%;
134 | }
135 | section {
136 |   display: grid;
137 |   grid-template-columns: 3fr 3fr 3fr 3fr;
138 |   column-gap: 30px;
139 |   margin-top: -350px;
140 |   padding: 10px;
141 | }
142 | .card {
143 |   height: 420px;
144 |   background-color: white;
145 |   padding: 5px;
146 |   /* box-shadow: 0 4px 4px black; */
147 | }
148 | .card-title {
149 |   font-family: Arial;
150 |   font-size: 20px;
151 |   font-weight: bold;
152 | }
153 | .card-header {
154 |   padding: 10px;
155 |   height: 50px;
156 | }
157 | .row {
158 |   display: grid;
159 |   grid-template-columns: 6fr 6fr;
160 |   height: 150px;
161 | }
162 | .card-img {
163 |   width: 100%;
164 | }
165 | .row div {
166 |   margin: 2px;
167 | }
168 | .card-body {
169 |   font-family: Arial;
170 |   font-size: 14px;
171 |   height: 300px;
172 | }
173 | .card-footer {
174 |   padding-top: 20px;
175 |   padding-bottom: 10px;
176 |   font-family: Arial;
177 |   color: blue;
178 |   text-align: left;
179 | }
180 | 


--------------------------------------------------------------------------------
/amazon-web.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>Amazon</title>
  7 |     <link
  8 |       rel="stylesheet"
  9 |       href="../node_modules/bootstrap-icons/font/bootstrap-icons.css"
 10 |     />
 11 |     <link rel="stylesheet" href="amazon-web.css" />
 12 |    
 13 |   </head>
 14 |   <body>
 15 |     <!------------------------ Header ------------------------>
 16 |     <header class="amazon-header">
 17 |       <div class="amazon-header-section-1">
 18 |         <div class="a-h-s-1"><img src="./Image/amazon-logo1.png" alt="" /></div>
 19 |         <div class="a-h-s-2">
 20 |           <span class="bi bi-geo-alt"
 21 |             >
 22 |             Delivering to Hyderabad 500081
 23 |             <sapn class="bold">Udate Loaction</span>
 24 |           </span>
 25 |         </div>
 26 |       </div>
 27 |       <div class="amazon-header-section-2">
 28 |         <div class="a-h-s-2-1"> <div class="insidediv1">ALL <span class="bi bi-chevron-down"></span></div></div>
 29 |         <div class="a-h-s-2-2">
 30 |             <div class="insidediv">
 31 |             <span>Search In Amazon</span>
 32 |         </div>
 33 |         </div>
 34 |         <div class="a-h-s-2-3"><span class="bi bi-search"></span></div>
 35 |       </div>
 36 |       <div class="amazon-header-section-3">
 37 |           <div class="a-h-s-3-1"><span>IND<sub style="color: white;"> &nbsp;EN</sub></span> <span class="bi bi-chevron-down"></span></div>
 38 |           <div class="a-h-s-3-2">
 39 |             <div class="hello">Hello,Signin</div>
 40 |             <div class="lists">Account & Lists</div>
 41 |           </div>
 42 |           <div class="a-h-s-3-3">
 43 |             <div class="hello">Returns</div>
 44 |             <div class="lists">& Orders</div>
 45 |           </div>
 46 |           <div class="a-h-s-3-4">
 47 |             <span class="bi bi-cart"></span>Cart
 48 |           </div></div>
 49 |           
 50 |     </header>
 51 |     <nav class="header-nav">
 52 |         <div  class="category">
 53 |             <i class="bi bi-list"">All</i>
 54 |             
 55 |             <span>Fresh</span>
 56 |             <span>AmazonTV</span>
 57 |             <span>Sell</span>
 58 |             <span>Best Sellers</span>
 59 |             <span>Mobiles</span>
 60 |             <span>Today's Deal</span>
 61 |             <span>Prime <span class="bi bi-chevron-down"></span></span>
 62 |             <span>Customer Service</span>
 63 |             <span>Electronics</span>
 64 |             <span>New Release</span>
 65 |         </div>
 66 |         <div class="amazon-app-image">
 67 |             <img src="./Image/amazon-app-image.jpg" alt="">
 68 |         </div>
 69 |       </nav>
 70 |       <!------------------------------Main Content Section --------------------------->
 71 |       <article class="amazon-background">
 72 |         <img src="./Image/amazon-background.jpg" alt="">
 73 |       </article>
 74 |       <section>
 75 |         <div class="card">
 76 |             <div class="card-header">
 77 |                 <span class="card-title">Starting ₹149 | Bestseling earbuds</span>
 78 |             </div>
 79 |             <div class="card-body">
 80 |                 <div class="row">
 81 |                     <div>
 82 |                         <img src="./Image/a1.jpg" class="card-img">
 83 |                         <p> Starting &#8377;249 |boAt</p>
 84 |                     </div>
 85 |                     <div>
 86 |                         <img src="./image/a2.jpg" class="card-img">
 87 |                         <p> Starting &#8377;349 |boult</p>
 88 |                     </div>
 89 |                 </div>
 90 |                 <div class="row">
 91 |                     <div>
 92 |                         <img src="./image/a3.jpg" class="card-img">
 93 |                         <p> Starting &#8377;649 |Noise</p>
 94 |                     </div>
 95 |                     <div>
 96 |                         <img src="./image/a4.jpg" class="card-img">
 97 |                         <p> Starting &#8377;149 |Zeb</p>
 98 |                     </div>
 99 |                 </div>
100 |             </div>
101 |             <div class="card-footer">
102 |                 <span>See all offers</span>
103 |             </div>
104 |         </div>
105 |         <div class="card">
106 |             <div class="card-header">
107 |                 <span class="card-title"> Revamp your home in style </span>
108 |             </div>
109 |             <div class="card-body">
110 |                 <div class="row">
111 |                     <div>
112 |                         <img src="./image/a5.jpg" class="card-img">
113 |                         <p>Cushion covers, bedsheets & more</p>
114 |                     </div>
115 |                     <div>
116 |                         <img src="./image/a6.jpg" class="card-img">
117 |                         <p>Figurines, vases and more</p>
118 |                     </div>
119 |                 </div>
120 |                 <div class="row">
121 |                     <div>
122 |                         <img src="./image/a7.jpg" class="card-img">
123 |                         <p>Home Storage</p>
124 |                     </div>
125 |                     <div>
126 |                         <img src="./image/a8.jpg" class="card-img">
127 |                         <p>Lightning Solutions</p>
128 |                     </div>
129 |                 </div>
130 |             </div>
131 |             <div class="card-footer">
132 |                 <span>Explore all</span>
133 |             </div>
134 |         </div>
135 |         <div class="card">
136 |             <div class="card-header">
137 |                 <span class="card-title">Appliances for your home | Up to 55% off </span>
138 |             </div>
139 |             <div class="card-body">
140 |                 <div class="row">
141 |                     <div>
142 |                         <img src="./image/a9.jpg" class="card-img">
143 |                         <p> Starting &#8377;349 |boult</p>
144 |                     </div>
145 |                     <div>
146 |                         <img src="./image/a10.jpg" class="card-img">
147 |                         <p> Starting &#8377;349 |boult</p>
148 |                     </div>
149 |                 </div>
150 |                 <div class="row">
151 |                     <div>
152 |                         <img src="./image/a11.jpg" class="card-img">
153 |                         <p> Starting &#8377;349 |boult</p>
154 |                     </div>
155 |                     <div>
156 |                         <img src="./image/a12.jpg" class="card-img">
157 |                         <p> Starting &#8377;349 |boult</p>
158 |                     </div>
159 |                 </div>
160 |             </div>
161 |             <div class="card-footer">
162 |                 <span>See more</span>
163 |             </div>
164 |         </div>
165 |         <div class="card">
166 |             <div class="card-header">
167 |                 <span class="card-title"> Starting ₹99 | Amazon Brands & more </span>
168 |             </div>
169 |             <div class="card-body">
170 |                 <div class="row">
171 |                     <div>
172 |                         <img src="./image/a13.jpg" class="card-img">
173 |                         <p> Starting &#8377;349 |boult</p>
174 |                     </div>
175 |                     <div>
176 |                         <img src="./image/a14.jpg" class="card-img">
177 |                         <p> Starting &#8377;349 |boult</p>
178 |                     </div>
179 |                 </div>
180 |                 <div class="row">
181 |                     <div>
182 |                         <img src="./image/a15.jpg" class="card-img">
183 |                         <p> Starting &#8377;349 |boult</p>
184 |                     </div>
185 |                     <div>
186 |                         <img src="./image/a16.jpg" class="card-img">
187 |                         <p> Starting &#8377;349 |boult</p>
188 |                     </div>
189 |                 </div>
190 |             </div>
191 |             <div class="card-footer">
192 |                 <span>Shop Now</span>
193 |             </div>
194 |         </div>
195 |     </section>
196 | 
197 |   </body>
198 | </html>
199 | 


--------------------------------------------------------------------------------