-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
198 lines (182 loc) · 12.2 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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Tool Startup</title>
<link rel="icon" href="images/home-image.png">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body class="bg-[#01000e] text-white">
<header>
<section class="wrapper h-[90px] flex justify-between items-center max-[425px]:justify-center relative">
<h1>
<img src="images/logo.png" alt="logo" class="w-[120px] hover:scale-110 duration-500 ease-in-out">
</h1>
<ul class="flex justify-end items-center max-sm:hidden">
<li class="mr-10"><a href="#" class="text-[16px] font-normal hover:text-[#4F4CE5]">About</a></li>
<li class="mr-10"><a href="#" class="text-[16px] font-normal hover:text-[#4F4CE5]">Features</a></li>
<li class="mr-10"><a href="#" class="text-[16px] font-normal hover:text-[#4F4CE5]">Pricing</a></li>
<a href="#" class="text-[16px] font-normal py-3 px-5 bg-[#4F4CE5] rounded-full">Get
Started
</a>
</li>
</ul>
<div class="flex justify-center gap-10 sm:hidden max-[425px]:absolute max-[425px]:left-0 items-center">
<li class="list-none max-[425px]:hidden"><a href="#"
class="text-[16px] font-normal py-3 px-5 bg-[#4F4CE5] rounded-full">Get Started</a></li>
<span class="material-symbols-outlined text-[#4F4CE5]" id="toggleMenu">menu</span>
</div>
</section>
</header>
<section class="wrapper hidden sm:hidden" id="toggleSection">
<div class="bg-[#ab44bd] h-52 absolute w-[100%] p-10 rounded-xl ">
<ul class="text-white flex flex-col justify-center items-center gap-3">
<li class="hover:bg-white w-[100%] rounded-lg hover:text-black px-5 py-2">
<p>hello</p>
</li>
<li class="hover:bg-white w-[100%] rounded-lg hover:text-black px-5 py-2">
<p>hello</p>
</li>
<li class="hover:bg-white w-[100%] rounded-lg hover:text-black px-5 py-2">
<p>hello</p>
</li>
</ul>
</div>
</section>
<section class="py-10 bg-[url('images/home-bg.png')] bg-no-repeat bg-cover">
<section class="wrapper">
<h1 class=" text-center text-[40px] min-[400px]:text-[48px] min-[500px]:text-[56px] sm:text-[66px] md:text-[72px] lg:text-[80px] font-semibold bg-gradient-to-r from-[#4E4BE4] to-[#E862FE] text-transparent bg-clip-text animate-pulse-slow">AI startup tool</h1>
<h3 class="text-[20px] sm:text-[32px] md:text-[48px] font-medium text-center mb-5">Your Personal AI-Powered Branding Expert</h3>
<p class="text-center mb-10 font-semibold text-[#FF3BFF] text-[24px]">ELEVATE EVERY ASPECT</p>
<div class="flex justify-center items-center">
<img src="images/home-image.png" alt="image" class="w-[50%] animate-pulse-slow">
</div>
</section>
</section>
<section class="py-20 max-sm:py-5">
<section class="wrapper">
<h1 class=" text-center text-[48px] font-bold bg-gradient-to-r from-[#4E4BE4] to-[#E862FE] text-transparent bg-clip-text max-sm:text-[32px] animate-pulse-slow">Full Power Personal Branding</h1>
<h3 class="text-[30px] font-medium mb-20 text-center max-sm:text-[16px]">revolutionizing business withseamless AIintegration</h3>
<div class="grid grid-cols-2 gap-20 items-center m-auto">
<div class="col-span-1 max-sm:col-span-2 max-sm:text-center">
<h3 class="text-[38px] mb-3 font-semibold max-sm:text-[25px]">Title Copy Goes Here <br> Be Awesome
</h3>
<p class="text-[14px] font-normal text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing
elit. Soluta, neque! Error totam et quasi, soluta eveniet, iusto maxime mollitia consequatur,
impedit quos facilis perspiciatis harum!</p>
</div>
<div class="col-span-1 bg-[#181924] p-8 rounded-2xl w-[95%] m-auto text-gray-300 max-sm:col-span-2 hover:scale-105 duration-500">
<div class="flex justify-start pb-5 mb-3 border-b">
<img src="images/stack-pink.png" alt="stack" class="w-[40px] h-[40px] mr-5">
<div>
<h3 class="text-[18px] font-normal">Tailoring posts</h3>
<p class="text-[14px] font-light mt-1">for various social networks to maximize exposure and
audience engagement</p>
</div>
</div>
<div class="flex justify-start pt-2">
<img src="images/stack-violet.png" alt="stack" class="w-[40px] h-[40px] mr-5">
<div>
<h3 class="text-[18px] font-normal">Auto-engaging</h3>
<p class="text-[14px] font-light mt-1">with your audience to strengthen your online presence
and profile score</p>
</div>
</div>
</div>
<div class="col-span-1 max-sm:col-span-2 max-sm:text-center max-sm:block hidden">
<h3 class="text-[38px] mb-3 font-semibold max-sm:text-[25px]">Title Copy Goes Here <br> Be Awesome
</h3>
<p class="text-[14px] font-normal text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing
elit. Soluta, neque! Error totam et quasi, soluta eveniet, iusto maxime mollitia consequatur,
impedit quos facilis perspiciatis harum!</p>
</div>
<div class="col-span-1 bg-[#181924] p-8 rounded-2xl w-[95%] m-auto text-gray-300 max-sm:col-span-2 hover:scale-105 duration-500">
<div class="flex justify-start pb-5 mb-3 border-b border-b-gray-600">
<img src="images/stack-pink.png" alt="stack" class="w-[40px] h-[40px] mr-5">
<div>
<h3 class="text-[18px] font-normal">Tailoring posts</h3>
<p class="text-[14px] font-light mt-1">for various social networks to maximize exposure and
audience engagement</p>
</div>
</div>
<div class="flex justify-start pt-2">
<img src="images/stack-violet.png" alt="stack" class="w-[40px] h-[40px] mr-5">
<div>
<h3 class="text-[18px] font-normal">Auto-engaging</h3>
<p class="text-[14px] font-light mt-1">with your audience to strengthen your online presence
and profile score</p>
</div>
</div>
</div>
<div class="col-span-1 max-sm:col-span-2 max-sm:text-center hidden sm:block">
<h3 class="text-[38px] mb-3 font-semibold">Title Copy Goes Here <br> Be Awesome</h3>
<p class="text-[14px] font-normal text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing
elit. Soluta, neque! Error totam et quasi, soluta eveniet, iusto maxime mollitia consequatur,
impedit quos facilis perspiciatis harum!
</p>
</div>
</div>
</section>
</section>
<section class="py-20 max-sm:py-5">
<section class="wrapper">
<h1 class=" text-center text-[48px] font-semibold bg-gradient-to-r from-[#4E4BE4] to-[#E862FE] text-transparent bg-clip-text max-sm:text-[32px] animate-pulse-slow">Proactive and Reactive Modes</h1>
<h3 class="text-[28px] font-medium mb-20 text-center max-sm:text-[16px]">Stay Ahead in the Branding Game Content:</h3>
<div class="w-[60%] m-auto grid grid-cols-2 gap-10 max-lg:w-[80%]">
<div class="col-span-1 bg-[#181924] p-7 pb-12 rounded-3xl max-[720px]:col-span-2 hover:scale-110 duration-1000 ease-in-out">
<h3 class=" text-start text-[32px] font-semibold mb-3 bg-gradient-to-r from-[#4E4BE4] to-[#E862FE] text-transparent bg-clip-text">Proactive <span class="text-white">mode:</span> </h3>
<p class="text-[16px] text-start mb-32 text-gray-200">Regularly publish thought pieces and engage with your audience</p>
<a href="#" class="text-[14px] font-semibold py-3 px-5 bg-[#4E4BE4] rounded-full">CHOOSE THIS MODE</a>
</div>
<div class="col-span-1 bg-[#181924] p-7 pb-12 rounded-3xl max-[720px]:col-span-2 hover:scale-105 duration-1000 ease-in-out">
<h3 class=" text-start text-[32px] font-semibold mb-3 bg-gradient-to-r from-[#4E4BE4] to-[#E862FE] text-transparent bg-clip-text">Proactive <span class="text-white">mode:</span></h3>
<p class="text-[16px] text-start mb-32 text-gray-200">Regularly publish throught pieces and engage with your audience</p>
<a href="#" class="text-[14px] font-semibold py-3 px-5 bg-[#4E4BE4] rounded-full">CHOOSE THIS MODE</a>
</div>
<div class="col-span-2 bg-[#181924] p-7 pb-12 rounded-3xl hover:scale-110 duration-1000 ease-in-out">
<h3 class=" text-start text-[32px] mb-3 font-semibold bg-gradient-to-r from-[#4E4BE4] to-[#E862FE] text-transparent bg-clip-text">Seamlessly <span class="text-white">switch between modes:</span></h3>
<p class="text-[16px] text-start mb-24 text-gray-200">Regularly publish throught pieces and engage with your audience</p>
<a href="#" class="text-[14px] font-semibold py-3 px-5 bg-[#4E4BE4] rounded-full">CHOOSE THIS MODE</a>
</div>
</div>
</section>
</section>
<section>
<section class="wrapper flex justify-between items-center my-32 m-auto w-[85%] max-sm:flex-col">
<div class="w-[60%] sm:w-[40%]">
<img src="images/footer-image.png" alt="img" class="w-full transform hover:rotate-45 duration-1000">
</div>
<div class="sm:w-[55%] max-sm:mt-10 flex flex-col">
<h3 class="text-[28px] sm:text-[30px] md:text-[42px]mb-3 font-semibold max-sm:text-center">Title Copy Goes Here <br> Be Awesome</h3>
<p class="text-[16px] font-normal mb-10 max-sm:text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, neque! Error totam et quasi, soluta eveniet, iusto maxime mollitia consequatur, impedit quos facilis perspiciatis harum!</p>
<a href="#" class="text-[14px] font-semibold py-3 px-5 bg-[#4E4BE4] rounded-full self-start sm:self-start">TALK TO AN EXPERT</a>
</div>
</section>
</section>
<footer class="h-[70px]">
<section class="wrapper h-full flex justify-center pt-4 border-t border-gray-400">
<p class="text-gray-300 text-[12px] sm:text-[16px]">
Copyright © 2022 Company name
</p>
</section>
</footer>
<script>
// Get references to the menu button and toggle section
let menuBtn = document.getElementById("toggleMenu");
let toggleSection = document.getElementById("toggleSection");
// Add click event listener to the menu button
menuBtn.addEventListener("click", () => {
// Toggle the 'hidden' class on toggleSection
toggleSection.classList.toggle("hidden");
});
</script>
</body>
</html>