Skip to content

Commit a8a2512

Browse files
Muhammad-Ali-Software-EngineerMuhammad-Ali-Software-Engineer
committed
Initial commit
0 parents  commit a8a2512

15 files changed

Lines changed: 570 additions & 0 deletions

‎amazon.css‎

Lines changed: 350 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,350 @@
1+
*{
2+
margin: 0;
3+
font-family: 'Amazon Ember', Arial, Helvetica, sans-serif;
4+
border: border-box;
5+
box-sizing: border-box;
6+
}
7+
.navbar{
8+
height: 60px;
9+
background-color: #0f1111;
10+
display: flex;
11+
align-items: center;
12+
justify-content: space-evenly;
13+
color: white;
14+
}
15+
.nav-logo{
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
width: 114px;
20+
height: 50px;
21+
}
22+
.logo{
23+
background-image: url("amazon_logo.png");
24+
height: 50px;
25+
width: 100%;
26+
background-size: cover;
27+
}
28+
.nav-address{
29+
display: flex;
30+
padding: 5px;
31+
}
32+
.add-icon{
33+
margin-top: 8px;
34+
}
35+
.add-det{
36+
margin-left: 5px;
37+
}
38+
.add-usp{
39+
color: #ccc;
40+
}
41+
.usp{
42+
display: inline-block;
43+
font-size: 0.75rem
44+
}
45+
.lsp{
46+
display: block;
47+
font-size: 0.875rem;
48+
font-weight: 700;
49+
padding-bottom: 1px;
50+
}
51+
.border{
52+
border: 1px solid transparent;
53+
border-radius: 2px;
54+
}
55+
.border:hover{
56+
border: 1px solid white;
57+
border-radius: 2px;
58+
}
59+
.nav-search{
60+
display: flex;
61+
justify-content: space-evenly;
62+
background-color: aquamarine;
63+
width: 560px;
64+
height: 40px;
65+
border-top-right-radius: 4px;
66+
border-bottom-right-radius: 4px;
67+
}
68+
.select-search{
69+
width: 50px;
70+
text-align: center;
71+
background-color: #e6e6e6;
72+
border-top-left-radius: 4px;
73+
border-bottom-left-radius: 4px;
74+
border: none;
75+
}
76+
.search-input{
77+
border: none;
78+
width: 473px;
79+
font-size: 15px;
80+
border: none;
81+
outline: none;
82+
padding: 5px;
83+
}
84+
.search-icon{
85+
width:45px;
86+
display: flex;
87+
align-items: center;
88+
justify-content: center;
89+
border-top-right-radius: 4px;
90+
border-bottom-right-radius: 4px;
91+
border: none;
92+
background-color: #f8bd19;
93+
color: #0f1111;
94+
font-size: 1.2rem;
95+
}
96+
.nav-lang{
97+
display: flex;
98+
align-items: center;
99+
width: 65px;
100+
height: 55px;
101+
background-color: transparent;
102+
padding-right: 1px;
103+
}
104+
.lang{
105+
border: none;
106+
background-color: transparent;
107+
color: white;
108+
text-align: center;
109+
}
110+
.nav-cart{
111+
height: 50px;
112+
display: flex;
113+
align-items: center;
114+
}
115+
.nav-cart i{
116+
font-size: 1.4rem;
117+
}
118+
.nav-cart span{
119+
display: inline-block;
120+
}
121+
.navbar>div:not(.search-input){
122+
cursor: pointer;
123+
}
124+
.select-search{
125+
cursor: pointer;
126+
}
127+
.navbar>div:not(.nav-search){
128+
padding: 5px;
129+
}
130+
.nav-search:has(.search-input:focus){
131+
outline: 2px solid #f8bd19;
132+
border-radius: 4px;
133+
}
134+
135+
.pannel{
136+
display: flex;
137+
/* justify-content: space-around; */
138+
justify-content: space-evenly;
139+
align-items: center;
140+
background-color: #232f3e;
141+
height: 40px;
142+
padding-left: 11px;
143+
}
144+
.pannel a{
145+
color: white;
146+
text-decoration: none;
147+
/* border: 1px solid transparent; */
148+
font-size: .875rem;
149+
}
150+
.pannel-menu{
151+
font-weight: bold;
152+
width: 58px;
153+
height: 39px;
154+
display: flex;
155+
align-items: center;
156+
justify-content: center;
157+
}
158+
.pannel-links{
159+
width: 70%;
160+
margin-left: 1rem;
161+
display: flex;
162+
align-items: center;
163+
}
164+
.pannel-links a{
165+
margin: 0 3px;
166+
padding: 9px 5px;
167+
}
168+
.pannel a:hover{
169+
border: 1px solid white;
170+
}
171+
.pannel-ad{
172+
padding: 9px 10px;
173+
font-weight: bold;
174+
}
175+
.pannel-ad:hover{
176+
border: 1px solid white;
177+
}
178+
.pannel-ad a:hover, .pannel-menu a:hover{
179+
border: none;
180+
}
181+
.pannel-menu:hover{
182+
border: 1px solid white;
183+
}
184+
185+
/* HERO SECTION */
186+
187+
.hero-section{
188+
background-image: url("amazong-hero-image.jpg");
189+
/* background-image: url("hero_image2.jpg"); */
190+
height: 400px;
191+
height: 350px;
192+
background-size: cover;
193+
}
194+
.shop-section{
195+
display: flex;
196+
flex-wrap: wrap;
197+
justify-content: space-evenly;
198+
background-color: lightyellow;
199+
background-color: #E3E6E6;
200+
padding-bottom: 1rem;
201+
}
202+
.box{
203+
width: 23%;
204+
height: 400px;
205+
margin-top: 1rem;
206+
padding: 20px 0px 15px;
207+
background-color: #fff;
208+
}
209+
.box-content{
210+
margin-left: 1rem;
211+
margin-right: 1rem;
212+
}
213+
.box-img{
214+
/* width: 378px; */
215+
height: 300px;
216+
background-size: cover;
217+
background-position: center;
218+
margin-top: 10px;
219+
margin-bottom: 10px;
220+
cursor: pointer;
221+
}
222+
.box-content a{
223+
text-decoration: none;
224+
font-size: .9rem;
225+
color: #2161A1;
226+
}
227+
.box-content a:hover{
228+
color: #093969;
229+
}
230+
.box-content h2{
231+
font-size: 21px;
232+
}
233+
234+
/* footer */
235+
236+
.foot-panel1{
237+
height: 50px;
238+
background-color: #37475a;
239+
display: flex;
240+
align-items: center;
241+
justify-content: center;
242+
color: white;
243+
font-size: 0.8rem;
244+
cursor: pointer;
245+
}
246+
.foot-panel1:hover{
247+
background-color: #405269;
248+
}
249+
.foot-panel2{
250+
height: 320px;
251+
background-color: #232f3e;
252+
display: flex;
253+
justify-content: space-evenly;
254+
padding-top: 40px;
255+
}
256+
.foot-panel2 p{
257+
font-weight: bold;
258+
color: white;
259+
margin: 6px 0 14px 0;
260+
}
261+
.foot-panel2 ul a{
262+
color: #ddd;
263+
font-size: .875rem;
264+
display: block;
265+
margin-bottom: 10px;
266+
text-decoration: none;
267+
}
268+
.foot-panel2 ul a:hover{
269+
text-decoration: underline;
270+
}
271+
.foot-panel3{
272+
border-top: 1px solid white;
273+
height: 68px;
274+
background-color: #232f3e;
275+
display: flex;
276+
align-items: center;
277+
justify-content: center;
278+
}
279+
.foot-panel3 .logo{
280+
background-image: url("amazon_logo.png");
281+
height: 100%;
282+
width: 114px;
283+
background-size: cover;
284+
cursor: pointer;
285+
}
286+
.rightfp3{
287+
display: flex;
288+
margin-left: 70px;
289+
}
290+
.lang-box-icon{
291+
display: inline-block;
292+
}
293+
.lang-box{
294+
display: flex;
295+
align-items: center;
296+
justify-content: center;
297+
border: 1px solid #ccc;
298+
height: 33px;
299+
width: 115px;
300+
margin-right: 4px;
301+
border-radius: 2px;
302+
}
303+
.foot-panel3 a{
304+
color: #ccc;
305+
text-decoration: none;
306+
font-size: .8rem;
307+
}
308+
.lang-box span{
309+
padding: 0 6px 0 6px;
310+
}
311+
.curr{
312+
border: 1px solid #ccc;
313+
width: 132px;
314+
height: 33px;
315+
display: flex;
316+
align-items: center;
317+
justify-content: center;
318+
margin-right: 4px;
319+
border-radius: 2px;
320+
}
321+
.country{
322+
border: 1px solid #ccc;
323+
width: 126px;
324+
height: 33px;
325+
display: flex;
326+
align-items: center;
327+
justify-content: center;
328+
margin-right: 4px;
329+
border-radius: 2px;
330+
}
331+
.foot-panel4{
332+
background-color: #131A22;
333+
height: 77px;
334+
padding: 20px 0 20px 0;
335+
text-align: center;
336+
color: #ddd;
337+
font-size: .75rem;
338+
line-height: 1.6;
339+
}
340+
.foot-panel4 a{
341+
text-decoration: none;
342+
color: #ddd;
343+
padding: 0 7px 0 7px;
344+
}
345+
.foot-panel4 a:hover{
346+
text-decoration: underline;
347+
}
348+
.copright{
349+
padding-top: 5px;
350+
}

0 commit comments

Comments
 (0)