-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (140 loc) · 12.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body class="bg-slate-100" dir="rtl">
<!--hedear-->
<div class="hedear w-[100%] h-[135px] ">
<!--header-->
<div class="rowlr w-full h-[25px] px-[90px] bg-purple-700">
<!--part 1 of header(text with purple background)-->
<div class="textupheader items-center">
<p>میتوانید شعار دلخواهتان را بنویسید...</p>
</div>
<div class="flex items-center">
<div class=" mx-[10px]">
<div class="textupheader"><p>درباره ما</p></div>
</div>
<div class=" mx-[10px]">
<div class=" textupheader"><p>تماس با ما</p></div>
</div>
<div class=" mx-[10px]">
<div class="textupheader"><p>درخواست همکاری</p></div>
</div>
</div>
</div>
<div class="rowlr flex-row-reverse w-full px-[50px] py-[20px] h-[60px] bg-gray-200">
<!--part 2 of header(serch and logo and...)-->
<div class="rowlr w-full">
<div class="flex">
<h1 class="font-bold text-4xl text-gray-500 px-[10px]"> LOGO </h1>
<div class="mb-3 xl:w-96">
<div class="input-group items-center relative m[10px] flex flex-row w-full mb-4 bg-gray-300 rounded-lg">
<div class="flex flex-row w-[180px] m-auto px-[8px]">
<output class="text-sm hover:shadow-lg hover:text-gray-500 font-[yekan] text-gray-600">دسته بندی</output>
<svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</div>
<input type="search" class="search_box" placeholder="شروع به نوشتن کنید..." aria-label="Search" aria-describedby="button-addon2">
<button class="btn inline-block px-6 py-2.5 text-gray-600 font-medium uppercase hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-300 active:shadow-lg transition flex items-center" type="button" id="button-serch">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</div>
</div>
</div>
<div class="flex flex-row items-center">
<div class="mx-[10px]"><svg class="w-6 h-6 hover:shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg></div>
<div class="mx-[10px]"><svg class="w-6 h-6 hover:shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg></div>
<div class="mx-[10px]"><svg class="w-6 h-6 hover:shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></div>
<div class=" mx-[10px]">
<p>مجموع سبد خرید: </p>
<output type="text-box" class=" hover:text-red-500">000000ریال</output>
</div>
</div>
</div>
</div>
<div class="rowlr px-[20px] py-[10px] h-[45px] bg-gray-200"">
<!--part 3 of header(home-menu)-->
<div class="flex flex-row px-[10px] ">
<div class="flex flex-row px-[10px]">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
<p>خانه</p>
</div>
<div class="flex flex-row px-[10px]">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
<p>دسته بندی محصولات</p>
</div>
<div class="flex flex-row px-[10px]">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2zM10 8.5a.5.5 0 11-1 0 .5.5 0 011 0zm5 5a.5.5 0 11-1 0 .5.5 0 011 0z"></path></svg>
<p>تخفیفات</p>
</div>
<div class="flex flex-row px-[10px]">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>
<p>فروشنده شوید</p>
</div>
</div>
<div class="flex flex-row px-[10px]">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<p>کالاهایی که اخیرا دیده اید</p>
</div>
</div>
</div>
<!--advertisement baner-->
<div class="h-[500px] w-full flex flex-row items-center justify-center " style="background-image: url('https://th.bing.com/th/id/R.7d3a36bc847a1b068db1c9ebf86fa6da?rik=3HqBFxTggbquKg&pid=ImgRaw&r=0');">
<!-- baner -->
<!--big baner-->
<div class="baner baner_pic flex w-[800px] h-[400px] m-[10px] items-end justify-center" style="background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/1075d938773749.5d91be616db29.jpg');">
<!-- next and... botton for baner -->
<div class="navar_inner w-[750px] my-[30px]">
<div class="botton"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div>
<div class="navar_inner w-[700px] justify-center">
<div class="dot_inner"></div>
<div class="dot_inner_click"></div>
<div class="dot_inner"></div>
<div class="dot_inner"></div>
</div>
<div class="botton"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg></div>
</div>
</div>
<!--esmall baners-->
<div class="flex flex-col h-[400px] w-[210]">
<div class="baner_pic baner_minipic" style="background-image: url('https://th.bing.com/th/id/OIP.uDAL8d6AJmrcejXTmc-hhgHaDb?pid=ImgDet&rs=1');"></div>
<div class="baner_pic baner_minipic " style="background-image: url('https://th.bing.com/th/id/R.0972bbe49894c806254892fe2a188a25?rik=m8TpfGqWnixKRw&pid=ImgRaw&r=0&sres=1&sresct=1');"></div>
<div class="baner_pic baner_minipic " style="background-image: url('https://img.dalfak.com/16/168072226-357995171.jpg');"></div>
</div>
</div>
<!-- category list -->
<div class="category flex flex-col h-[210px] w-full justify-center items-center ">
<div class="h-[200px] w-[1200px] m-[20px]">
<!-- category text -->
<div class="part1 justify-between items-center ">
<div class="h-[70px]">
<h1 class="text-xl text-yellow-500 font-bold">دسته بندی محصولات</h1>
<p>فروشگاه را بر اساس دسته بندی محصولات مشاهده کنید</p>
</div>
<div class="flex flex-row h-[30px] w-[120px] bg-indigo-900 rounded items-center justify-center hover:bg-indigo-600 hover:shadow-md text-white ">
<div class="text-xs font-bold"><p>همه دسته بندی ها</p></div>
<div class="botton"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg></div>
</div>
</div>
<!-- category pic -->
<div class="part1 flex flex-row items-center">
<div class="pic" style="background-image: url('https://img9.irna.ir/old/Image/1397/13970516/82994542/N82994542-72480333.jpg');"></div>
<div class="pic" style="background-image: url('https://img9.irna.ir/old/Image/1397/13970516/82994542/N82994542-72480333.jpg');"></div>
<div class="pic" style="background-image: url('https://img9.irna.ir/old/Image/1397/13970516/82994542/N82994542-72480333.jpg');"></div>
<div class="pic" style="background-image: url('https://img9.irna.ir/old/Image/1397/13970516/82994542/N82994542-72480333.jpg');"></div>
<div class="pic" style="background-image: url('https://img9.irna.ir/old/Image/1397/13970516/82994542/N82994542-72480333.jpg');"></div>
<div class="pic" style="background-image: url('https://img9.irna.ir/old/Image/1397/13970516/82994542/N82994542-72480333.jpg');"></div>
<div class="pic" style="background-image: url('https://img9.irna.ir/old/Image/1397/13970516/82994542/N82994542-72480333.jpg');"></div>
<div class="pic" style="background-image: url('https://img9.irna.ir/old/Image/1397/13970516/82994542/N82994542-72480333.jpg');"></div>
<div class="pic" style="background-image: url('https://img9.irna.ir/old/Image/1397/13970516/82994542/N82994542-72480333.jpg');"></div>
<div class="pic" style="background-image: url('https://img9.irna.ir/old/Image/1397/13970516/82994542/N82994542-72480333.jpg');"></div>
<div class="pic" style="background-image: url('https://img9.irna.ir/old/Image/1397/13970516/82994542/N82994542-72480333.jpg');"></div>
</div>
</div>
</div>
</body>
</html>