-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (157 loc) · 8.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Landing Page</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<div class="cursor"></div>
<section id="home-section">
<header>
<nav>
<div class="part1 logo">
<h1><i class="ri-gemini-fill"></i>WizardZ</h1>
</div>
<div class="part2">
<h3>About us</h3>
<h3>Services</h3>
<h3>Use Cases</h3>
<h3>Pricing</h3>
<h3>Blog</h3>
<button>Request a quote</button>
</div>
</nav>
</header>
<div class="center">
<div class="center-part1">
<h1>Navigating the digital landspace for success</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, quibusdam nemo dignissimos neque
alias ullam et voluptatem impedit adipisci nisi, perferendis recusandae debitis illum quos omnis
quidem, odit id quis facilis sunt voluptates eius incidunt! Omnis, magnam. In, qui nobis!</p>
<button class="black-btn">Book a consultation</button>
</div>
<div class="center-part2">
<img src="https://master--kreatif-software.netlify.app/_astro/hero-pic.Cf7ZIw9T_LTlHA.webp" alt="">
</div>
</div>
<div class="bottom-section">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAkvq8eq3u3EIkZt5bEcxJaR7Wz7fO0QvOUA&s"
alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS5RUlXXus1cZHNgkdhSxE6Iyf2I7LpFLYfn6R2zR9OBhyDVBkjQooz1mABszUXTHB1Z2U&usqp=CAU"
alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQR7px5g1-Ldm6b1-YIxofXWRLrOF4ZAFP77g&s"
alt="">
<img src="https://get.site/wp-content/uploads/2021/10/notion-logo.png" alt="">
<img src="https://logowik.com/content/uploads/images/netflix-black6126.logowik.com.webp" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnEXT9P1sl9J0HeaQJxQZb7sVPXUjFYg0dDnQubAG-yaxsyRSwDmX9TKfTL86eCh5po7E&usqp=CAU"
alt="">
</div>
</section>
<section id="services-section">
<div class="services">
<h3>Services</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. In repellendus eum recusandae officiis placeat
esse earum quas, nesciunt, exercitationem explicabo quis beatae dignissimos!</p>
</div>
<div class="container">
<div class="elem left line1">
<div class="element1">
<h2>Search engine optimization</h2>
<p><i class="ri-arrow-right-up-line"></i>Learn more</p>
</div>
<div class="element2">
<img src="https://ouch-cdn2.icons8.com/6ltz8GVQYPxTK7MH4dbRa724Vk5ajntUlDxRIEJ1UzY/rs:fit:368:368/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvMzUv/NTliOGVkOGItMjFj/YS00YmFjLWI4YjIt/MDE2YTg3NDk4ODYy/LnN2Zw.png"
alt="">
</div>
</div>
<div class="elem black right line1">
<div class="element1 element-black">
<h2>Pay per click advertising</h2>
<p><i class="ri-arrow-right-up-line"></i>Learn more</p>
</div>
<div class="element2 imgbox">
<img src="https://i.pinimg.com/170x/1b/26/a9/1b26a900010b517351f5dcbfce43ce61.jpg" alt="">
</div>
</div>
<div class="elem black left line2">
<div class="element1 element-black">
<h2>Social Media Marketing</h2>
<p><i class="ri-arrow-right-up-line"></i>Learn more</p>
</div>
<div class="element2 imgbox">
<img src="https://i.pinimg.com/170x/1b/26/a9/1b26a900010b517351f5dcbfce43ce61.jpg" alt="">
</div>
</div>
<div class="elem right line2">
<div class="element1">
<h2>E-mail Marketing</h2>
<p><i class="ri-arrow-right-up-line"></i>Learn more</p>
</div>
<div class="element2">
<img src="https://ouch-cdn2.icons8.com/6ltz8GVQYPxTK7MH4dbRa724Vk5ajntUlDxRIEJ1UzY/rs:fit:368:368/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvMzUv/NTliOGVkOGItMjFj/YS00YmFjLWI4YjIt/MDE2YTg3NDk4ODYy/LnN2Zw.png"
alt="">
</div>
</div>
</div>
</section>
<section id="contact-section">
<div class="contact">
<div class="contact-element">
<h2>Let's make things happen</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, repellat possimus id quis
perferendis sunt perspiciatis ratione sapiente, veritatis dolorem nemo commodi delectus eos
distinctio corporis error. Fuga reiciendis, aperiam iusto quam reprehenderit magni quibusdam beatae
delectus pariatur officiis adipisci.</p>
<button class="black-btn">Get your free proposal</button>
</div>
<div class="contact-img">
<img src="https://ocspd.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fproposal.eff2804c.png&w=384&q=75"
alt="">
</div>
</div>
</section>
<section id="caseStudy-section">
<div class="services">
<h3>Case study</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. In repellendus eum recusandae officiis placeat
esse earum quas!</p>
</div>
<div class="caseBox-container">
<div class="caseBox caseBox1">
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, magnam quo omnis suscipit
recusandae
unde nostrum temporibus amet perferendis repellat, exercitationem ad obcaecati, porro maxime quia
voluptate consequatur praesentium. Maxime repellendus similique ad aliquam dignissimos aspernatur
doloremque nulla, quo eaque?</h4>
<p>Learn more<i class="ri-arrow-right-up-line"></i></p>
</div>
<div class="caseBox caseBox2">
<h4>Lorem, ipsum dolor amet consectetur adipisicing elit. Totam, magnam quo omnis suscipit
recusandae
unde nostrum temporibus amet perferendis repellat, exercitationem ad obcaecati, porro maxime quia
voluptate consequatur praesentium. Maxime repellendus similique ad aliquam dignissimos aspernatur
doloremque nulla, quo eaque?</h4>
<p>Learn more<i class="ri-arrow-right-up-line"></i></p>
</div>
<div class="caseBox caseBox3">
<h4>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Totam, magnam quo omnis suscipit
recusandae
unde nostrum temporibus amet perferendis repellat, exercitationem ad obcaecati, porro maxime quia
voluptate consequatur praesentium. Maxime repellendus similique ad aliquam dignissimos aspernatur
doloremque nulla, quo eaque?</h4>
<p>Learn more<i class="ri-arrow-right-up-line"></i></p>
</div>
</div>
</section>
<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>