Skip to content

Commit fb24f50

Browse files
Taha-M-FawyTaha-M-Fawy
committed
add Home
1 parent ecf68e1 commit fb24f50

28 files changed

+1832
-284
lines changed

‎Home/CategoryProduct.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
3+
#categoryTitle {
4+
padding: 60px 0;
5+
color: #db4444;
6+
font-weight: bold;
7+
position: relative;
8+
}

‎Home/Home.Css‎

Lines changed: 344 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,344 @@
1+
:root {
2+
--primary: #ffffff;
3+
--text1: #7d8184;
4+
}
5+
* {
6+
font-family: "Inter", sans-serif;
7+
}
8+
9+
.sec_categories {
10+
padding: 60px 0;
11+
}
12+
.img-top-head {
13+
background: url(../image/bac.jpg);
14+
position: relative;
15+
height: 100vh;
16+
background-position: center;
17+
background-repeat: no-repeat;
18+
background-size: cover;
19+
background-attachment: fixed;
20+
}
21+
@media (width < 1000px) {
22+
.img-top-head {
23+
background-position: left;
24+
}
25+
}
26+
.content-img {
27+
font-size: 2rem;
28+
position: absolute;
29+
top: 45%;
30+
transform: translateY(-50%);
31+
margin-left: 30%;
32+
}
33+
.lifestyle {
34+
text-transform: uppercase;
35+
font-size: 1.7rem;
36+
}
37+
.sale {
38+
margin-block: 0.5rem;
39+
font-weight: bold;
40+
}
41+
.sale span {
42+
color: crimson;
43+
margin-left: 0.8rem;
44+
}
45+
.free-shipping {
46+
font-size: 1.5rem;
47+
}
48+
.img-top-head button {
49+
background-color: black;
50+
color: white;
51+
margin-top: 0.9rem;
52+
font-size: 0.9rem;
53+
border-radius: 3px;
54+
padding: 0.6rem 1.6rem;
55+
}
56+
57+
.cat-title p {
58+
font-size: 14px;
59+
margin-left: 23px;
60+
color: #db4444;
61+
position: relative;
62+
}
63+
.cat-title p::before {
64+
content: '';
65+
position: absolute;
66+
width: 15px;
67+
height: 15px;
68+
background-color: #db4444;
69+
left: -20px;
70+
top: 50%;
71+
transform: translatey(-50%);
72+
73+
}
74+
.cat-title h2 {
75+
margin-top: 10px;
76+
margin-bottom: 30px;
77+
font-weight: bold;
78+
79+
}
80+
.categories {
81+
display: flex;
82+
max-height: 140px;
83+
justify-content: space-between;
84+
align-items: center;
85+
overflow-x: auto;
86+
column-gap: 20px;
87+
}
88+
.categories::-webkit-scrollbar {
89+
width: 40px;
90+
}
91+
.categories::-webkit-scrollbar-track {
92+
background-color: transparent;
93+
}
94+
.categories::-webkit-scrollbar-thumb {
95+
background-color: #db4444;
96+
border-radius: 20px;
97+
border: 6px solid transparent;
98+
background-clip: content-box;
99+
}
100+
101+
.categories .Card {
102+
margin: auto;
103+
padding: 40px;
104+
min-width: 250px;
105+
height: 100px;
106+
text-align: center;
107+
text-decoration: none;
108+
border: 1px solid #ddd;
109+
border-radius: 8px;
110+
transition: 0.3s;
111+
}
112+
.categories .Card:hover {
113+
background-color: #db4444;
114+
}
115+
.categories .Card:hover a {
116+
color: white;
117+
}
118+
.categories .Card a {
119+
text-decoration: none;
120+
color: #db4444;
121+
font-weight: bold;
122+
}
123+
124+
.all_product {
125+
padding: 60px 0;
126+
background-color: #fff;
127+
}
128+
@media (min-width: 768px) {
129+
.all_product .products {
130+
display: grid;
131+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
132+
grid-column-gap: 40px;
133+
grid-row-gap: 60px;
134+
}
135+
}
136+
.head_prduct {
137+
138+
margin-left: 30px;
139+
}
140+
.head_prduct .containers h3 {
141+
color: #db4444;
142+
padding: 7px 10px;
143+
border-radius: 16px;
144+
font-weight: bold;
145+
position: relative;
146+
147+
}
148+
.head_prduct .containers h3::before{
149+
content: '';
150+
position: absolute;
151+
width: 15px;
152+
height: 15px;
153+
background-color: #db4444;
154+
left: -20px;
155+
top: 50%;
156+
transform: translatey(-50%);
157+
}
158+
159+
.card {
160+
text-align: center;
161+
margin: auto;
162+
box-shadow: rgba(50, 50, 93, 0.1) 0px 7px 13px -2px,
163+
rgba(0, 0, 0, 0.1) 0px 4px 5px -4px;
164+
transition: 0.3s;
165+
}
166+
.card:hover {
167+
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
168+
rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
169+
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
170+
}
171+
.coloum {
172+
margin-bottom: 20px;
173+
}
174+
175+
.card .card-img-top {
176+
width: 250px;
177+
margin: auto;
178+
height: 250px;
179+
}
180+
.card .card-body {
181+
display: flex;
182+
flex-direction: column;
183+
align-items: center;
184+
justify-content: center;
185+
height: 280px;
186+
}
187+
.card .card-title {
188+
font-weight: bold;
189+
font-size: 18px;
190+
}
191+
.card .card-text {
192+
color: #333;
193+
height: 144px;
194+
}
195+
.card .btn {
196+
margin: auto;
197+
background: #db4444;
198+
color: white;
199+
transition: 0.3s;
200+
}
201+
.card .btn:hover {
202+
color: #db4444;
203+
background-color: #eee;
204+
}
205+
206+
.categories .category-btn {
207+
background-color: #007bff !important; /* استخدام !important لإعطاء الأولوية */
208+
color: white !important;
209+
padding: 10px 20px;
210+
border-radius: 25px;
211+
text-decoration: none;
212+
font-size: 16px;
213+
transition: background-color 0.3s, transform 0.2s;
214+
}
215+
216+
.categories .category-btn:hover {
217+
background-color: #0056b3 !important; /* تأكيد الأولوية هنا */
218+
transform: scale(1.05);
219+
}
220+
221+
222+
223+
.person {
224+
display: flex;
225+
justify-content: space-between;
226+
align-items: center;
227+
228+
}
229+
.person p {
230+
margin: 0;
231+
margin-left: 10px;
232+
}
233+
.person img {
234+
width: 40px;
235+
height: 40px;
236+
margin-left: 20px;
237+
}
238+
@media (max-width:767px) {
239+
.person {
240+
display: none;
241+
}
242+
}
243+
244+
.list-group {
245+
gap: 5px !important;
246+
border-right: 1px solid #dee2e6;
247+
width: 20%;
248+
direction: ltr !important;
249+
margin-left: 40px !important;
250+
margin-top:15px !important;
251+
}
252+
253+
.list-group li {
254+
border: none !important;
255+
}
256+
257+
.scrollable-list {
258+
max-height: 400px !important;
259+
overflow-y: auto !important;
260+
padding-right: 5px !important;
261+
scroll-behavior: smooth !important;
262+
scrollbar-width: thin !important; /* دعم لـ Firefox */
263+
scrollbar-color: #db4444 transparent!important;
264+
}
265+
266+
.scrollable-list::-webkit-scrollbar-track {
267+
background-color: transparent!important;
268+
}
269+
270+
.scrollable-list::-webkit-scrollbar-thumb {
271+
background-color: #db4444!important;
272+
border-radius: 20px!important;
273+
border: 6px solid transparent!important;
274+
background-clip: content-box !important;
275+
}
276+
277+
#carouselExampleIndicators{
278+
margin-top: 50px !important;
279+
}
280+
281+
/* تخصيص المؤشرات (الدوائر) */
282+
#carouselExampleIndicators .carousel-indicators button {
283+
border-radius: 50%;
284+
width: 15px;
285+
height: 15px;
286+
background-color: #000; /* اللون الافتراضي */
287+
border: none;
288+
margin: 0 5px; /* مسافة بين الدوائر */
289+
transition: background-color 0.3s ease;
290+
}
291+
292+
#carouselExampleIndicators .carousel-indicators .active {
293+
background-color: #ff5733; /* تغيير اللون عند تحديد الدائرة */
294+
}
295+
296+
/* تخصيص مظهر المؤشرات في حالة التمرير (hover) */
297+
#carouselExampleIndicators .carousel-indicators button:hover {
298+
background-color: #ff5733; /* لون عند التمرير على الدائرة */
299+
}
300+
@media (max-width: 768px) {
301+
/* For small screens, keep the list centered and make the carousel fill available space */
302+
.d-flex {
303+
flex-direction: column;
304+
justify-content: center;
305+
align-items: center; /* Center elements */
306+
}
307+
308+
#4 {
309+
width: 90%; /* List takes up 90% of the width */
310+
max-width: 600px; /* Max width of the list */
311+
margin-bottom: 15px;
312+
}
313+
314+
#carouselExampleIndicators {
315+
width: 90%; /* Carousel takes up 90% of the width */
316+
max-width: 500px; /* Max width of the carousel */
317+
height: auto;
318+
}
319+
}
320+
321+
@media (min-width: 769px) {
322+
/* For larger screens, keep the layout in row format */
323+
.d-flex {
324+
flex-direction: row; /* Row layout for large screens */
325+
justify-content: center; /* Center horizontally */
326+
align-items: center; /* Center vertically */
327+
}
328+
329+
.d-flex #4 {
330+
width: 100%; /* List width 80% of the parent container */
331+
max-width: 600px; /* Max width of the list */
332+
margin-bottom: 20px;
333+
}
334+
335+
#carouselExampleIndicators {
336+
width: 500px; /* Fixed width for the carousel */
337+
height: 350px; /* Fixed height */
338+
}
339+
}
340+
@media (max-width: 767px) {
341+
.navegation ul {
342+
width: 90%;
343+
}
344+
}

0 commit comments

Comments
 (0)