-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (138 loc) · 4.79 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link rel="stylesheet" href="style.css" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/images/favicon-32x32.png"
/>
<title>Frontend Mentor | Bento grid</title>
</head>
<body>
<div class="container">
<div class="grid grid-columns-4 py-2 w-full">
<div class="grid grid-columns-3 span-col-3 order-1 span-col-1">
<div
class="rounded py-4 px-4 span-col-1 bg-purple-500 text-white text-center span-col-2 order-1 gap-1 flex flex-col"
>
<p class="text-xxxl">
Social Media <span class="text-yellow-500">10x</span>
<span class="italic">Faster</span> with AI
</p>
<div>
<image
src="./assets/images/illustration-five-stars.webp"
alt="5 stars"
width="200px"
/>
<p>Over 4,000 5-star reviews</p>
</div>
</div>
<div
class="rounded span-col-1 bg-white order-7 overflow-hidden flex flex-col justify-between py-2 gap-1"
>
<div class="px-2 sm:px-1">
<img
src="./assets/images/illustration-multiple-platforms.webp"
alt="Multiple platforms"
width="170%"
class="sm:w-full"
/>
</div>
<p class="text-xl px-2 sm:px-1">
Manage multiple accounts and platforms.
</p>
</div>
<div
class="rounded span-col-1 bg-yellow-500 order-8"
style="overflow: hidden"
>
<p class="text-xl p-1 sm:px-1">
Maintain a consistent posting schedule.
</p>
<img
src="./assets/images/illustration-consistent-schedule.webp"
alt="Consistent schedule"
class="px-1 sm:px-1 w-full sm:w-75"
style="margin-bottom: -25%"
/>
</div>
<div
class="rounded p-0 span-col-1 bg-purple-100 order-3 span-row-2 order-2 flex flex-col justify-between"
style="overflow: hidden"
>
<p class="text-xl p-2 sm:text-center">Schedule to social media.</p>
<div class="flex-1 relative">
<img
src="./assets/images/illustration-schedule-posts.webp"
alt="Schedule posts"
class="lg:absolute lg:w-auto sm:px-1"
width="100%"
style="max-height: 100%; left: 30px"
/>
</div>
<p class="p-2 sm:text-center">
Optimize post timings to publish content at the perfect time for
your audience.
</p>
</div>
<div
class="rounded p-1 span-col-1 span-col-2 bg-purple-500 text-white flex align-center gap-1 order-10 sm:flex-col"
>
<img
src="./assets/images/illustration-grow-followers.webp"
alt="Grow followers"
class="w-50 sm:w-full"
/>
<p class="text-xxl sm:text-center">
Grow followers with non-stop content.
</p>
</div>
<div
class="rounded p-2 span-col-1 bg-white flex flex-col justify-between order-9 gap-1"
>
<div class="flex flex-col gap-1">
<p class="text-xxxl">>56%</p>
<p>faster audience growth</p>
</div>
<img
src="./assets/images/illustration-audience-growth.webp"
alt="Audience growth"
width="70%"
/>
</div>
</div>
<div class="grid grid-columns-1">
<div
class="rounded p-2 bg-yellow-100 flex-1 flex flex-col justify-center align-center gap-1"
>
<p class="text-xxl text-black">
Create and schedule content
<span class="text-purple-500 italic">quicker.</span>
</p>
<img
src="./assets/images/illustration-create-post.webp"
alt="Create post"
class="w-full sm:w-75"
/>
</div>
<div
class="rounded p-1 bg-yellow-500 flex-1 flex flex-col justify-between gap-1"
>
<p class="text-xxl text-black">Write your content using AI.</p>
<img
src="./assets/images/illustration-ai-content.webp"
alt="AI content"
class="w-full sm:w-75"
/>
</div>
</div>
</div>
</div>
</body>
</html>