-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
73 lines (71 loc) · 3.89 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css"rel="stylesheet"/>
<link rel="stylesheet" href="stylesheet.css">
<title>FANTA</title>
</head>
<body>
<div>
<nav class="container flex">
<label class="logo">FANTA</label>
<ul class="flex">
<li><a href="#">HOME</a></li>
<li><a href="#">DRINK</a></li>
<li><a href="#">VIEW CART</a></li>
<li><a href="#">ABOUT US</a></li>
</ul>
<i class="ri-menu-line"></i>
</nav>
<div class="one">
<h1>FANTA</h1>
<img src="asset/fanta.png" id="fanta">
<img src="asset/lemon.png" id="lemon_half">
<img src="asset/orange.webp" id="orange_fruit">
<img src="asset/leaf.webp"id="leaf1">
<img src="asset/leaf2.png" id="leaf2">
<img src="asset/coconoutleaf.png" id="coconoutleaf">
<!-- <img src="asset/orange slice.png"> -->
</div>
<div class="two">
<div class="left">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="rgb(212, 124, 124)" d="M41.5,-59.5C49.8,-51.1,49.7,-33.6,50.7,-19.2C51.7,-4.7,53.8,6.7,52.4,18.9C51.1,31.1,46.3,44.1,36.9,52.9C27.6,61.8,13.8,66.5,-2.5,70C-18.8,73.4,-37.7,75.6,-52.5,68.5C-67.3,61.5,-78.2,45.2,-84.5,27.1C-90.9,9,-92.7,-10.8,-80.5,-19.3C-68.3,-27.8,-42.1,-24.8,-26.3,-30.8C-10.6,-36.8,-5.3,-51.7,5.7,-59.5C16.6,-67.3,33.2,-68,41.5,-59.5Z" transform="translate(100 100)" />
</svg>
</div>
<div class="right">
<h1>Flavour Updated</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis autem dolorem voluptas sunt nihil, rem, labore officia quidem numquam vitae placeat eum fugit veniam a! Quaerat temporibus animi aspernatur sequi?
Dolore debitis atque quod itaque, at tempora culpa earum vitae exercitationem sunt! Distinctio cupiditate iusto voluptates perferendis velit similique assumenda dolores fugit atque? Omnis iusto dolor maxime repellendus itaque hic.
Debitis voluptate, eligendi eaque itaque cupiditate vitae quod minima repellat doloribus sunt exercitationem sequi quidem sapiente dolorem, odit assumenda! Enim quae cum alias explicabo, nostrum voluptate unde corporis magnam ipsam.</p>
</div>
</div>
<div class="three">
<div class="card" id="card1">
<img id="lemon1" class="lemon" src="asset/lemon half.png">
<img id="sprite" src="asset/sprite cane.png">
<h1>Sprite</h1>
<button>Buy Now</button>
</div>
<div class="card" id="card2">
<h1>Fanta</h1>
<button>Buy Now</button>
</div>
<div class="card" id="card3">
<img id="lemon2" class="lemon" src="asset/lemon half.png">
<img id="cococola" src="asset/cococola classic.png">
<h1>Cococola</h1>
<button>Buy Now</button>
</div>
</div>
</div>
<div class="four">
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</html>