-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·211 lines (187 loc) · 8.68 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
199
200
201
202
203
204
205
206
207
208
209
210
211
<!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="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<!-- Tailwind CSS file -->
<link rel="stylesheet" href="index.css" />
<!-- Google Fonts-->
<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=League+Spartan:wght@100..900&display=swap" rel="stylesheet" />
<title>Frontend Mentor | Social proof section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body class="p-5 font-sans md:p-0">
<main
class="mx-auto mt-16 grid min-h-svh gap-8 max-md:max-w-lg md:mt-0 md:max-w-7xl md:auto-rows-min md:grid-cols-2 md:place-content-center md:gap-y-16 lg:gap-y-20">
<!-- INTRO SECTION START -->
<section class="space-y-5 px-4 md:space-y-6 md:ps-8 lg:pe-28 xl:space-y-7">
<h1
class="lg:leading-11 text-center text-3xl/none font-bold text-[theme(color.darkMagenta)] min-[425px]:text-[2.75rem]/none md:pt-2 md:text-left md:text-5xl/none lg:text-5xl xl:text-6xl xl:leading-10.5 xl:tracking-tight">
10,000+ of our users love our products.
</h1>
<p
class="max-w-prose text-center text-base/snug font-normal text-[theme(color.darkGrayishMagenta)] min-[425px]:text-[1.1rem] md:text-left md:text-lg/tight lg:text-xl/tight">
We only provide great products combined with excellent customer
service. See what our satisfied customers are saying about our
services.
</p>
</section>
<!-- INTRO SECTION END -->
<!-- RATING SECTION START -->
<div
class="md:flex-start flex w-full flex-col justify-between gap-4 min-[425px]:px-4 md:justify-center md:px-4 md:pe-8 lg:justify-start lg:gap-5 lg:pt-8 min-[1185px]:pt-4 xl:justify-center xl:pt-0">
<svg width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol id="star" viewBox="0 0 17 16">
<path
d="M16.539 6.097a0.3 0.3 0 0 0 -0.24 -0.202l-5.36 -0.779L8.542 0.26a0.296 0.296 0 0 0 -0.53 0L5.613 5.117l-5.36 0.779a0.297 0.297 0 0 0 -0.165 0.505l3.88 3.78 -0.917 5.34a0.297 0.297 0 0 0 0.43 0.312l4.795 -2.52 4.794 2.52a0.296 0.296 0 0 0 0.43 -0.313l-0.916 -5.338 3.88 -3.782c0.08 -0.08 0.11 -0.197 0.075 -0.304z"
fill="#EF9546" fill-rule="nonzero" />
</symbol>
</svg>
<div
class="shrink-0 gap-4 space-y-2.5 rounded-md bg-[theme(color.lightGrayishMagenta)] p-3 min-[425px]:w-[22.5rem] min-[425px]:self-start md:max-w-80 md:space-y-1 lg:flex lg:max-w-[25rem] lg:items-center lg:justify-evenly lg:space-y-0">
<div class="flex justify-center gap-2 lg:relative lg:-top-[0.2rem]">
<svg width="1em" height="1em">
<use href="#star" />
</svg>
<svg width="1em" height="1em">
<use href="#star" />
</svg>
<svg width="1em" height="1em">
<use href="#star" />
</svg>
<svg width="1em" height="1em">
<use href="#star" />
</svg>
<svg width="1em" height="1em">
<use href="#star" />
</svg>
</div>
<p class="text-center text-base font-bold text-[theme(color.darkMagenta)]">
Rated 5 Stars in Reviews
</p>
</div>
<div
class="shrink-0 gap-4 space-y-2.5 rounded-md bg-[theme(color.lightGrayishMagenta)] p-3 min-[425px]:w-[22.5rem] min-[425px]:self-center md:max-w-80 md:space-y-1 lg:flex lg:max-w-[25rem] lg:items-center lg:justify-evenly lg:space-y-0">
<div class="flex justify-center gap-2 lg:relative lg:-top-[0.2rem]">
<svg width="1em" height="1em">
<use href="#star" />
</svg>
<svg width="1em" height="1em">
<use href="#star" />
</svg>
<svg width="1em" height="1em">
<use href="#star" />
</svg>
<svg width="1em" height="1em">
<use href="#star" />
</svg>
<svg width="1em" height="1em">
<use href="#star" />
</svg>
</div>
<p class="text-center text-base font-bold text-[theme(color.darkMagenta)]">
Rated 5 Stars in Report Guru
</p>
</div>
<div
class="shrink-0 gap-4 space-y-2.5 rounded-md bg-[theme(color.lightGrayishMagenta)] p-3 min-[425px]:w-[22.5rem] min-[425px]:self-end md:max-w-80 md:space-y-1 lg:flex lg:max-w-[25rem] lg:items-center lg:justify-evenly lg:space-y-0">
<div class="flex justify-center gap-2 lg:relative lg:-top-[0.2rem]">
<svg width="1em" height="1em">
<use href="#star" />
</svg>
<svg width="1em" height="1em">
<use href="#star" />
</svg>
<svg width="1em" height="1em">
<use href="#star" />
</svg>
<svg width="1em" height="1em">
<use href="#star" />
</svg>
<svg width="1em" height="1em">
<use href="#star" />
</svg>
</div>
<p class="text-center text-base font-bold text-[theme(color.darkMagenta)]">
Rated 5 Stars in BestTech
</p>
</div>
</div>
<!-- RATING SECTION END -->
<!-- PROFILE SECTION START -->
<div class="flex w-full flex-col justify-center gap-4 md:col-span-full md:flex-row md:px-8 lg:h-80">
<section class="flex-1 rounded-lg bg-[theme(color.darkMagenta)] p-6 lg:h-60 lg:self-start">
<div class="mb-5 flex items-center gap-4 lg:mb-6">
<img src="./images/image-colton.jpg" alt="A headshot of Colton Smith" class="size-10 rounded-full" />
<div class="leading-none">
<h2 class="text-base/tight font-medium text-[theme(color.lightGrayishMagenta)] lg:text-[1.1rem]">
Colton Smith
</h2>
<span class="text-base/tight text-[theme(color.softPink)] lg:text-[1.1rem]">Verified Buyer</span>
</div>
</div>
<p class="text-base/snug text-[theme(color.lightGrayishMagenta)] lg:text-[1.1rem]">
<q>We needed the same printed design as the one we had ordered a
week prior. Not only did they find the original order, but we also
received it in time. Excellent!</q>
</p>
</section>
<section class="flex-1 rounded-lg bg-[theme(color.darkMagenta)] p-6 lg:h-60 lg:self-center">
<div class="mb-5 flex items-center gap-4 lg:mb-6">
<img src="./images/image-irene.jpg" alt="A headshot of Irene Roberts" class="size-10 rounded-full" />
<div class="leading-none">
<h2 class="text-base/tight font-medium text-[theme(color.lightGrayishMagenta)] lg:text-[1.1rem]">
Irene Roberts
</h2>
<span class="text-base/tight text-[theme(color.softPink)] lg:text-[1.1rem]">Verified Buyer</span>
</div>
</div>
<p class="text-base/snug text-[theme(color.lightGrayishMagenta)] lg:text-[1.1rem]">
<q>Customer service is always excellent and very quick turn around.
Completely delighted with the simplicity of the purchase and the
speed of delivery.</q>
</p>
</section>
<section class="flex-1 rounded-lg bg-[theme(color.darkMagenta)] p-6 lg:h-60 lg:self-end">
<div class="mb-5 flex items-center gap-4 lg:mb-6">
<img src="./images/image-anne.jpg" alt="A headshot of Anne Wallace" class="size-10 rounded-full" />
<div class="leading-none">
<h2 class="text-base/tight font-medium text-[theme(color.lightGrayishMagenta)] lg:text-[1.1rem]">
Anne Wallace
</h2>
<span class="text-base/tight text-[theme(color.softPink)] lg:text-[1.1rem]">Verified Buyer</span>
</div>
</div>
<p class="text-base/snug text-[theme(color.lightGrayishMagenta)] lg:text-[1.1rem]">
<q>Put an order with this company and can only praise them for the
very high standard. Will definitely use them again and recommend
them to everyone!</q>
</p>
</section>
</div>
<!-- PROFILE SECTION END -->
</main>
<!--
<footer>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a
href="#">Your Name Here</a>.
</div>
</footer>
-->
</body>
</html>