-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
235 lines (185 loc) · 9.78 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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<html>
<head>
<meta name="viewport" c.ontent="with=device-width, initial-scale=1.0">
<title> Herfetna Platform </title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="slider.css">
<link rel="stylesheet" href="./swiper-bundle.min.css">
</head>
<body>
<section class="header">
<nav>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()" ></i>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="aboutUs.html">ABOUT</a></li>
<li><a href="login.php">SIGN IN</a></li>
<li><a href="Shop.php">SHOP</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1> HERFETNA PLATFORM </h1>
<p> We help to preserve the legacy of the handicrafts!</p>
<a href="aboutUs.html" class="btn"> Get to know more! </a>
</div>
</section>
<!------------------------------------ search by artist ------------------------------------------>
<section class="by-artist">
<h1> Find Your Favourite Artist Now!</h1>
<p></p>
<div class="slide-container swiper">
<div class="slide-content">
<div class="card-wrapper swiper-wrapper">
<div class="card swiper-slide">
<div class="image-content">
<span class="overlay"></span>
<div class="card-image">
<img src="https://github.com/maram-mahmoudi/Herfetna/blob/main/images/wood_maker.jpg?raw=true" alt="" class="card-img">
</div>
</div>
<div class="card-content">
<h2 class="name">Jane Philips</h2>
<p class="description">Hi, I'm Sarah Smith, a glass artist from Seattle, Washington.
I've been working with glass for over a decade and specialize in blown and fused glass pieces.
My work often features vibrant colors and organic shapes, inspired by the natural world and my surroundings.
I love experimenting with different techniques and pushing the boundaries of what's possible with glass.</p>
<button class="button">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<span class="overlay"></span>
<div class="card-image">
<img src="https://github.com/maram-mahmoudi/Herfetna/blob/main/images/photographer.jpg?raw=true" alt="" class="card-img">
</div>
</div>
<div class="card-content">
<h2 class="name">Jacob Jensen</h2>
<p class="description">Hello, I'm Jacob Jensen, a wood artist from Portland, Oregon.
I create functional and decorative pieces using a variety of woods and finishes.
My work is all about simplicity and minimalism,
and I'm constantly experimenting with new designs and techniques to bring my vision to life. feel free to explore my collection and give feedback. <br></p>
<button class="button">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<span class="overlay"></span>
<div class="card-image">
<img src="https://github.com/maram-mahmoudi/Herfetna/blob/main/images/female%20painter.jpg?raw=true" alt="" class="card-img">
</div>
</div>
<div class="card-content">
<h2 class="name">Tasha Maccoy</h2>
<p class="description">Hello there, I'm Tasha Maccoy, a glass artist based in San Francisco, California.
I've been creating stained glass pieces for several years now and draw inspiration from the beauty of the natural world and cultural symbolism.
My work is highly intricate and detailed, and I love exploring new techniques and approaches to glass art.</p>
<button class="button">View More</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image-content">
<span class="overlay"></span>
<div class="card-image">
<img src="https://github.com/maram-mahmoudi/Herfetna/blob/main/images/Hindi-Art-for-Busniness-Leaders.jpg?raw=true" alt="" class="card-img">
</div>
</div>
<div class="card-content">
<h2 class="name">Lily James</h2>
<p class="description">Hola, I'm Lily James, an embroidery artist from Mexico City, Mexico.
I specialize in creating colorful and detailed embroidery pieces, drawing inspiration from the rich cultural traditions of my home country.
I love exploring new motifs and techniques and am passionate about keeping the art of embroidery alive and thriving.</p>
<button class="button">View More</button>
</div>
</div>
</div>
</div>
<div class="swiper-button-next swiper-navBtn"></div>
<div class="swiper-button-prev swiper-navBtn"></div>
<div class="swiper-pagination"></div>
</div>
</section>
<!--------------------------- shop by type of art ------------------------------------------->
<section class="art-style">
<h1> Shop By Art Style. </h1>
<!--p>whatever u wanna say again</p-->
<div class="row">
<div class="art-style-col">
<img src="https://github.com/maram-mahmoudi/Herfetna/blob/main/images/P08586-P00018f.jpg?raw=true" alt="" [href]="glassshop.php">
<div class="layer">
<h3><a href="glassshop.php">Glass Art</a> </h3>
</div>
</div>
<div class="art-style-col">
<img src="https://github.com/maram-mahmoudi/Herfetna/blob/main/images/art-and-airplanes-reclaimed-wood-art-4.jpg?raw=true" alt=""> <!-- you need to add an iamage here-->
<div class="layer">
<h3> <a href="woodshop.php">Wood Art & sculptures</a> </h3>
</div>
</div>
<div class="art-style-col">
<img src="https://github.com/maram-mahmoudi/Herfetna/blob/main/images/landscape-embroidery-sew-beautiful-3.jpg?raw=true" alt=""> <!-- you need to add an iamage here-->
<div class="layer">
<h3> <a href="embroideryshop.php">Embroidery </a> </h3>
</div>
</div>
</div>
</section>
<!------------------------------------------- testimonials------------------------------------>
<section class="testimonials">
<h1> What Our Customers Think</h1>
<p> </p>
<div class="row">
<div class="testimonial-col">
<img src="https://github.com/maram-mahmoudi/Herfetna/blob/main/images/wood_maker.jpg?raw=true">
<div>
<p> Good handmade stuff and an affordable price and quick delivery.
</p>
<h3>Sarah Smith</h3>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
</div>
</div>
<div class="testimonial-col">
<img src="https://github.com/maram-mahmoudi/Herfetna/blob/main/images/glass_artist.jpg?raw=true" alt=""> <!--u add image-->
<div>
<p> I loved their sevice, the products are of high quality and the service is
</p>
<h3> Shaun Lee</h3>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
</div>
</div>
</section>
<!--------------------footer------------------------------->
<section class="footer">
<h3>About Us</h3>
<p>We thrive to be the biggest platform for handicrafts.<br> Do not hesitate to be part of us.</p>
<div class="icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
</div>
</section>
<!--Javascript for toggle menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right= "0";
}
function hideMenu(){
navLinks.style.right= "-200px"
}
</script>
</body>
<!-- swiper JavaScript -->
<script src="./swiper-bundle.min.js"></script>
<!-- JavaScript -->
<script src="./slider.js"></script>
</html>