-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
96 lines (91 loc) · 8.21 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet"
/>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<main class="h-screen w-full">
<!-- just re-cheking the website -->
<nav class=" flex h-[10vmin] items-center justify-between p-14">
<div class="logo flex items-center justify-center gap-[0.7rem]">
<i class="ri-shining-2-fill text-[55px] -rotate-45 "></i>
<h1 class="text-[34px] font-bold">WizardZ</h1>
</div>
<div class="nav2 gap-10 items-center md:flex hidden ">
<div class="rghtnav text-[2.7vmin] font-medium tracking-widest">About us</div>
<div class="rghtnav text-[2.7vmin] font-medium tracking-widest">Services</div>
<div class="rghtnav text-[2.7vmin] font-medium tracking-widest">Use Cases</div>
<div class="rghtnav text-[2.7vmin] font-medium tracking-widest">Pricing</div>
<div class="rghtnav text-[2.7vmin] font-medium tracking-widest">Blog</div>
<button class="text-[3vmin] font-medium border-black border-[3px] rounded-2xl py-[0.90rem] px-10">Request a quote</button>
</div>
</nav>
<div class="hero-section h-[90vmin] w-full flex ">
<div class="section1 flex flex-col items-center justify-evenly h-full w-[50%]">
<div class="text w-[70vmin] ">
<h1 class="innertext text-[8vmin] font-medium leading-tight tracking-wider">Navigating the digital landscape for success</h1>
<p class="innertext text-[1.3rem] font-normal text-[#292828] mt-10">Our digital marketing agency helps businesses grow and succeed online through a range of services including SEO, PPC. social media marketing, and content creation.</p>
<button class="text-[3vmin] mt-10 font-medium border-black border-[3px] rounded-2xl py-[0.90rem] px-10 bg-black text-white">Book a consultation</button>
</div>
</div>
<div class="section2 h-full w-[50%] ">
<img class="mt-16" src="https://www.unicuscreatives.in/media/graphics/homepage-megaphone.svg" alt="">
</div>
</div>
<div class="section-botm-logos flex items-center justify-evenly">
<img class="h-[15vmin] mt-[10px]" src="https://th.bing.com/th/id/R.cdc3b91c884ce76f319cbb79e7cbc208?rik=NH0BrtDo4xOw8w&riu=http%3a%2f%2fwww.pngmart.com%2ffiles%2f8%2fAmazon-PNG-Transparent-Image.png&ehk=Tm5D0jSj3oYHn8Px2J64v1zU%2bOZ%2b2qUFTgRwMxqJIUo%3d&risl=&pid=ImgRaw&r=0" alt="">
<img class="h-[4vmin]" src="https://www.vectorico.com/wp-content/uploads/2018/02/Dribbble-logo.png" alt="">
<img class="h-[4vmin]" src="https://th.bing.com/th/id/R.9a2e12758d1880fcf4c4ee056c0c8794?rik=zaWXJkd8iOVU2w&riu=http%3a%2f%2fassets.stickpng.com%2fimages%2f5842a629a6515b1e0ad75afa.png&ehk=hb9i0e1Wp%2b2%2bOZ1z5mP8BWJwvr%2fxd%2bMPwdF%2bGlZ4kOM%3d&risl=&pid=ImgRaw&r=0" alt="">
<img class="h-[4vmin]" src="https://get.site/wp-content/uploads/bfi_thumb/notion-logo-peqh5gbhoys6i2bebhuf42tq1x07si312gdpszgse0.png" alt="">
<img class="h-[3.5vmin]" src="https://th.bing.com/th/id/R.715e69176d3cec74504b3ae00f2676c6?rik=vGDJl%2bfFL64qmw&riu=http%3a%2f%2fwww.pngall.com%2fwp-content%2fuploads%2f4%2fNetflix-Logo-HD.png&ehk=aWIF5J5TR6tD4IrfNFhXE0dNVq%2f6n%2f6OViRGEsRS%2bNg%3d&risl=&pid=ImgRaw&r=0" alt="">
<img class="h-[3.5vmin]" src="https://images.squarespace-cdn.com/content/v1/504eb270e4b07d0f5698991c/1558404439704-MM7HW48FNEBLU9382HBS/ke17ZwdGBToddI8pDm48kBpxzseUilb_a71UGvUsYxUUqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYxCRW4BPu10St3TBAUQYVKcPliYlRGwiIuto4D74TWDs8FI1KpCC7i-H8NHlDrv6X9Be1dAFfJlpMi37Sys0q3f/zoom_communications.png" alt="">
</div>
<div class="services-section h-screen w-full p-20 px-28">
<div class="about flex items-center gap-10">
<h1 class="text-[4.5vmin] tracking-wider font-medium bg-[#B9FF66] px-2 rounded-md">Services</h1>
<p class="w-[70vmin]">At our digital marketing agency, we offer a range of services to help businesses grow succeed online. These services include:</p>
</div>
<div class="container grid grid-cols-2 gap-10 py-20">
<div class="elem line1 left border-2 border-black h-[40vmin] w-[80vmin] shadow-[0px_8px_0px] shadow-gray-900 rounded-[2rem] flex justify-between">
<div class="text mt-14 ml-10">
<h1 class="text-[3.5vmin] tracking-wider font-medium bg-[#B9FF66] px-2 rounded-md">Search engine</h1> <h2 class="text-[3vmin] tracking-wider font-medium bg-[#B9FF66] px-2 rounded-md">optimization</h2>
<button class="mt-20 flex gap-4 items-center text-[1.1rem]"><i class="ri-arrow-right-up-line text-[2rem] bg-black text-[#B9FF66] px-2 rounded-full"></i>Learn more</button>
</div>
<img class="h-[30vmin] mt-10" src="https://pluspng.com/img-png/png-images--800.png" alt="">
</div>
<div class="elem line1 right rounded-[2rem] border-2 border-black w-[80vmin] shadow-[0px_2px_5px] shadow-black flex justify-between bg-black">
<div class="text mt-14 ml-10">
<h1 class="text-[3.5vmin] tracking-wider font-medium bg-white px-2 rounded-md">Pay per click</h1> <h2 class="text-[3vmin] tracking-wider font-medium bg-white px-2 rounded-md">advertising</h2>
<button class="mt-20 flex gap-4 items-center text-[1.1rem] text-white"><i class="ri-arrow-right-up-line text-[2rem] bg-white text-black px-2 rounded-full"></i>Learn more</button>
</div>
<img class="h-[30vmin] mt-10 mr-10" src="https://www.unicuscreatives.in/media/graphics/homepage-megaphone.svg" alt="">
</div>
<div class="elem line2 left rounded-[2rem] border-2 border-black w-[80vmin] shadow-[0px_2px_5px] shadow-black h-[40vmin] flex justify-between bg-black">
<div class="text mt-14 ml-10">
<h1 class="text-[3.5vmin] tracking-wider font-medium bg-white px-2 rounded-md">Social media</h1> <h2 class="text-[3vmin] tracking-wider font-medium bg-white px-2 rounded-md">marketing</h2>
<button class="mt-20 flex gap-4 items-center text-[1.1rem] text-white"><i class="ri-arrow-right-up-line text-[2rem] bg-white text-black px-2 rounded-full"></i>Learn more</button>
</div>
<img class="h-[30vmin] mt-10 mr-10" src="https://www.unicuscreatives.in/media/graphics/homepage-megaphone.svg" alt="">
</div>
<div class="elem line2 right rounded-[2rem] border-2 border-black w-[80vmin] shadow-[0px_2px_5px] shadow-black flex justify-between">
<div class="text mt-14 ml-10">
<h1 class="text-[3.5vmin] tracking-wider font-medium bg-[#B9FF66] px-2 rounded-md">E-mail</h1> <h2 class="text-[3vmin] tracking-wider font-medium bg-[#B9FF66] px-2 rounded-md">marketing</h2>
<button class="mt-20 flex gap-4 items-center text-[1.1rem]"><i class="ri-arrow-right-up-line text-[2rem] bg-black text-[#B9FF66] px-2 rounded-full"></i>Learn more</button>
</div>
<img class="h-[30vmin] mt-10" src="https://pluspng.com/img-png/png-images--800.png" alt="">
</div>
</div>
</div>
</main>
<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>