-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (64 loc) · 3.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fanta website</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<nav>
<a href="#">Logo</a>
<div class="menu">
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">Shop</a>
</div>
<i class="ri-menu-fill"></i>
</nav>
<div id="page1">
<h1>fanta</h1>
<img id="png2"src="pngegg (1).png" alt="">
<img id="png1" src="pngegg.png" alt="">
<img id="fanta" src="fanta.png" alt="its fanta">
</div>
<div id="page2">
<div id="page2-left">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#FF0066" d="M33.2,-49.3C42.4,-45.6,48.9,-35.5,57.1,-24.2C65.3,-12.8,75,-0.3,71.2,8.6C67.4,17.6,50,22.9,37.7,27.1C25.4,31.2,18.1,34.2,10.2,38C2.2,41.9,-6.5,46.7,-19.1,49.9C-31.6,53,-48.2,54.5,-56.6,47.5C-65.1,40.5,-65.5,25,-66.5,10.3C-67.5,-4.4,-69,-18.3,-66.8,-33.6C-64.7,-48.9,-58.8,-65.6,-47,-68.1C-35.3,-70.6,-17.6,-58.9,-2.8,-54.5C12,-50,23.9,-52.9,33.2,-49.3Z" transform="translate(100 100)" />
</svg>
</div>
<div id="page2-right">
<img id="purple"src="grapes.png" alt="">
<h1>Flavour update</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos saepe eligendi quibusdam magnam. Maiores nihil, ipsa minima officia quibusdam nam, ut labore in, velit aperiam quod facere? Provident dignissimos quod enim esse dolorum. Ut nihil aliquid totam eius dolores possimus quisquam eveniet impedit adipisci odit rem in, repellat, pariatur, cum quam. Veritatis porro vel temporibus exc.
</p>
</div>
</div>
<div id="page3">
<div class="card" id="card1">
<h1>fanta grape</h1>
<img id="grape"src="pngwing.com (2).png" alt="">
<button>Buy now</button>
</div>
<div class="card" id="card2">
<h1>fanta</h1>
<button>Buy now</button>
</div>
<div class="card" id="card3" >
<h1>zero coke</h1>
<img id="coke"src="pngwing.com (5).png" alt="">
<button>Buy now</button>
</div>
</div>
</div>
<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>
</body>
</html>