Skip to content

Commit a86811e

Browse files
ayaanwebdeveloperayaanwebdeveloper
authored
Task Done
0 parents  commit a86811e

11 files changed

+368
-0
lines changed

‎img/a-bee.png

140 KB
Loading

‎img/background.png

3.04 MB
Loading

‎img/bee1.png

7.31 KB
Loading

‎img/bee2.png

9.79 KB
Loading

‎img/bee4.png

9.86 KB
Loading

‎img/leaf1.png

103 KB
Loading

‎img/leaf2.png

153 KB
Loading

‎img/logo1.png

14.4 KB
Loading

‎img/main-honey.png

241 KB
Loading

‎index.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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>Honey</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<header>
12+
<nav>
13+
<img src="img/logo1.png" alt="" class="logo" >
14+
<ul class="u">
15+
<li class="l">Home</li>
16+
<li class="l">About</li>
17+
<li class="l">Prooduct</li>
18+
<li class="l">Booking</li>
19+
<li class="l">Contact</li>
20+
</ul>
21+
<ul class="ui">
22+
<li class="i"><i class="fa-brands fa-square-facebook" id="ic"></i></li>
23+
<li class="i"><i class="fa-brands fa-square-twitter" id="ic"></i></li>
24+
<li class="i"><i class="fa-brands fa-github" id="ic"></i></li>
25+
<li class="i"><i class="fa-brands fa-linkedin" id="ic"></i></li>
26+
</ul>
27+
</nav>
28+
</header>
29+
<div class="text">
30+
<img src="img/leaf1.png" alt="" class="leaf1">
31+
<h1 class="ycg">YOU CAN GET <br> PURE HONEY <br> HERE</h1>
32+
<p class="lor">There are many variations of passages of Lorem Ipsum available, but the majority have suffered There are many variations of passages of Lorem Ipsum available, but the majority have suffered</p>
33+
<button class="bookb">Booking</button>
34+
35+
</div>
36+
<img src="img/leaf2.png" alt="" class="leaf2">
37+
<div class="honey">
38+
39+
<img src="img/main-honey.png" alt="" class="mh">
40+
41+
</div>
42+
<img src="img/bee1.png" alt="" class="bee1">
43+
<img src="img/a-bee.png" alt="" class="bee2">
44+
<img src="img/bee4.png" alt="" class="bee3">
45+
<img src="img/bee2.png" alt="" class="bee4">
46+
</body>
47+
</html>

‎style.css

+321
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
1+
*{
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body{
8+
width: 100%;
9+
background-image: url(img/background.png);
10+
background-position: center;
11+
background-repeat: no-repeat;
12+
background-size: cover;
13+
object-fit: cover;
14+
15+
}
16+
header{
17+
width: 100%;
18+
position: absolute;
19+
top: 10px;
20+
border-bottom: 2px solid #CB6F18;
21+
box-shadow: 0px 0px 30px #CB6F18;
22+
margin-top: -5px;
23+
background-color: transparent;
24+
display: flex;
25+
align-items: center;
26+
27+
28+
}
29+
nav{
30+
display: flex;
31+
justify-content: space-around;
32+
align-items: center;
33+
}
34+
.u{
35+
display: flex;
36+
gap: 30px;
37+
list-style: none;
38+
color: #F39216;
39+
40+
41+
}
42+
.l{
43+
font-size: 19px;
44+
font-weight: bold;
45+
font-family: Arial, Helvetica, sans-serif;
46+
}
47+
.l:hover{
48+
border: 2px solid #F39216;
49+
border-radius: 5px;
50+
box-shadow: 0px 0px 20px#CB6F18;
51+
cursor: pointer;
52+
53+
54+
}
55+
.logo{
56+
width: 8%;
57+
margin-bottom: 10px;
58+
cursor: pointer;
59+
60+
61+
}
62+
63+
64+
.ui{
65+
display: flex;
66+
gap: 20px;
67+
list-style: none;
68+
color: #F39216;
69+
position: absolute;
70+
left: 1000px;
71+
}
72+
73+
.i{
74+
font-size: 25px;
75+
font-weight: bold;
76+
font-family: Arial, Helvetica, sans-serif;
77+
78+
}
79+
.i:hover{
80+
color: black;
81+
background-color: white;
82+
box-shadow: 0px 0px 20px#CB6F18;
83+
cursor: pointer;
84+
85+
86+
}
87+
.text{
88+
width: 40%;
89+
position: absolute;
90+
top: 100px;
91+
left: 50px;
92+
}
93+
.leaf1{
94+
width: 15%;
95+
rotate: 60deg;
96+
animation-name: leaf1;
97+
animation-duration: 10s;
98+
99+
}
100+
.ycg{
101+
color: white;
102+
font-size: 50px;
103+
position: absolute;
104+
left: -399px;
105+
top: 100px;
106+
animation-name: bt;
107+
animation-duration: 5s;
108+
animation-fill-mode: forwards;
109+
}
110+
.lor{
111+
color: white;
112+
font-size: 25px;
113+
text-align: justify;
114+
position: absolute;
115+
top: 300px;
116+
left: -2000px;
117+
animation-name: t;
118+
animation-duration: 5s;
119+
animation-fill-mode: forwards;
120+
animation-delay: 2s;
121+
}
122+
.bookb{
123+
background-color: #F39216;
124+
height: 35%;
125+
position: absolute;
126+
left: -50px;
127+
z-index: 2;
128+
font-size: 20px;
129+
border-top-left-radius: 20px;
130+
border-top-left-radius: 20px;
131+
top: 450px;
132+
left: -250px;
133+
color: white;
134+
border: 2px solid white;
135+
width: 30%;
136+
animation-name: book;
137+
animation-duration: 5s;
138+
animation-fill-mode: forwards;
139+
animation-delay: 4s;
140+
}
141+
.bookb:hover{
142+
background-color: rgba(0, 0, 0, 0.199);
143+
cursor: pointer;
144+
box-shadow: 15px 15px 50px #F39216;
145+
}
146+
.leaf2{
147+
position: absolute;
148+
top: 150px;
149+
left: 500px;
150+
width: 15%;
151+
}
152+
.honey{
153+
position: absolute;
154+
left: 900px;
155+
top: 150px;
156+
}
157+
.mh{
158+
159+
position: absolute;
160+
right: -899px;
161+
top: -30px;
162+
animation-name: ms;
163+
animation-duration: 5s;
164+
animation-fill-mode: forwards;
165+
166+
}
167+
168+
.bee1{
169+
position: absolute;
170+
left: 5px;
171+
animation-name: e1;
172+
animation-duration: 11s;
173+
animation-iteration-count: infinite;
174+
animation-fill-mode: backwards;
175+
animation-direction: alternate;
176+
177+
178+
}
179+
.bee2{
180+
position: absolute;
181+
left: 1200px;
182+
width: 5%;
183+
overflow-y: hidden;
184+
animation-name: e2;
185+
animation-duration: 11s;
186+
animation-iteration-count: infinite;
187+
animation-fill-mode: backwards;
188+
animation-direction: alternate;
189+
}
190+
.bee3{
191+
position: absolute;
192+
top: 400px;
193+
left: 800px;
194+
animation-name: e3;
195+
animation-duration: 11s;
196+
animation-iteration-count: infinite;
197+
animation-direction: alternate;
198+
animation-fill-mode: backwards;
199+
}
200+
201+
.bee4{
202+
position: absolute;
203+
top: 400px;
204+
left: 600px;
205+
animation-name: e4;
206+
animation-duration: 11s;
207+
animation-iteration-count: infinite;
208+
animation-fill-mode: backwards;
209+
animation-direction: alternate;
210+
}
211+
@keyframes book {
212+
213+
from{
214+
right: 0;
215+
}
216+
to{
217+
left: 10px;
218+
}
219+
220+
221+
}
222+
@keyframes bt {
223+
224+
from{
225+
right: 0;
226+
}
227+
to{
228+
left: 10px;
229+
}
230+
231+
}
232+
@keyframes t {
233+
234+
from{
235+
right: 0;
236+
}
237+
to{
238+
left: 10px;
239+
}
240+
241+
}
242+
@keyframes mainh {
243+
244+
from{
245+
right: 0;
246+
}
247+
to{
248+
left: 10px;
249+
}
250+
251+
}
252+
253+
@keyframes e1{
254+
255+
to{
256+
/* background-color: purple; */
257+
color: white;
258+
top: 500px;
259+
left: 900px;
260+
261+
}
262+
263+
from{
264+
/* background-color: white; */
265+
}
266+
267+
}
268+
@keyframes e2{
269+
270+
to{
271+
/* background-color: purple; */
272+
color: white;
273+
top: 200px;
274+
left: -0.5px;
275+
276+
}
277+
278+
from{
279+
/* background-color: white; */
280+
}
281+
282+
}
283+
@keyframes e3{
284+
285+
to{
286+
/* background-color: purple; */
287+
color: white;
288+
top: 200px;
289+
right: -1000px;
290+
291+
292+
}
293+
294+
from{
295+
right: -1000px;
296+
}
297+
298+
}
299+
@keyframes e4{
300+
301+
to{
302+
/* background-color: purple; */
303+
color: white;
304+
top: -500px;
305+
306+
307+
308+
}
309+
310+
311+
}
312+
@keyframes ms {
313+
314+
from{
315+
left: 0;
316+
}
317+
to{
318+
right: -150px;
319+
}
320+
321+
}

0 commit comments

Comments
 (0)