This repository has been archived by the owner on Apr 11, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
175 lines (162 loc) · 8.27 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/favicon-32x32.png" type="image/x-icon">
<!-- Required Social Preview MetaTags -->
<!-- Primary Meta Tags -->
<meta name="title" content="Social Proof Section | FrontEndMentor.io Challenge by alnahian2003">
<meta name="description"
content="Social Proof Section design is a front end challenge from frontendmentor.io . This challenge is completed by alnahian2003 using HTML, CSS">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://github.com/alnahian2003/social-proof-section">
<meta property="og:title" content="Social Proof Section | FrontEndMentor.io Challenge by alnahian2003">
<meta property="og:description"
content="Social Proof Section design is a front end challenge from frontendmentor.io . This challenge is completed by alnahian2003 using HTML, CSS">
<meta property="og:image" content="assets/images/desktop-design.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://github.com/alnahian2003/social-proof-section">
<meta property="twitter:title" content="Social Proof Section | FrontEndMentor.io Challenge by alnahian2003">
<meta property="twitter:description"
content="Social Proof Section design is a front end challenge from frontendmentor.io . This challenge is completed by alnahian2003 using HTML, CSS">
<meta property="twitter:image" content="assets/images/desktop-design.jpg">
<!-- End of Required Social Preview MetaTags -->
<!-- CSS Linking -->
<link rel="stylesheet" href="assets/style.css">
<!-- Spartan Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Spartan:wght@400;500;700&display=swap" rel="stylesheet">
<title>Social Proof Section | FrontEndMentor.io</title>
</head>
<body>
<!-- Main Section -->
<section id="main">
<!-- Review Heading and Description With 3 Tabs -->
<div class="first-row">
<div class="first-row-first-col">
<h1 class="heading">
10,000+ of our users love our products.
</h1>
<p class="section-description">
We only provide great products combined with excellent customer service. See what our satisfied
customers are saying
about our services.
</p>
</div>
<!-- Star Ratings Tabs -->
<div class="first-row-second-col">
<div class="ratings-tabs">
<div class="stars">
<div class="star-icons">
<img src="assets/images/icon-star.svg" alt="star">
<img src="assets/images/icon-star.svg" alt="star">
<img src="assets/images/icon-star.svg" alt="star">
<img src="assets/images/icon-star.svg" alt="star">
<img src="assets/images/icon-star.svg" alt="star">
</div>
<h4 class="ratings-title">Rated 5 Stars in Reviews</h4>
</div>
<div class="stars">
<div class="star-icons">
<img src="assets/images/icon-star.svg" alt="star">
<img src="assets/images/icon-star.svg" alt="star">
<img src="assets/images/icon-star.svg" alt="star">
<img src="assets/images/icon-star.svg" alt="star">
<img src="assets/images/icon-star.svg" alt="star">
</div>
<h4 class="ratings-title">Rated 5 Stars in Report Guru</h4>
</div>
<div class="stars">
<div class="star-icons">
<img src="assets/images/icon-star.svg" alt="star">
<img src="assets/images/icon-star.svg" alt="star">
<img src="assets/images/icon-star.svg" alt="star">
<img src="assets/images/icon-star.svg" alt="star">
<img src="assets/images/icon-star.svg" alt="star">
</div>
<h4 class="ratings-title">Rated 5 Stars in BestTech</h4>
</div>
</div>
</div>
<!-- End Star Ratings Tabs -->
</div>
<!-- End Review Heading and Description With 3 Tabs -->
<!-- Testimonials Tabs -->
<div class="second-row">
<div class="clients-reviews">
<!-- Colton Smith -->
<div class="testimony-tab">
<!-- Clients Profile (eg. name, status) -->
<div class="clients-profile">
<div class="avatar">
<img src="assets/images/image-colton.jpg" alt="Colton Smith">
</div>
<div class="client-info">
<h3 class="name">Colton Smith</h3>
<p class="client-status">
Verified Buyer
</p>
</div>
</div>
<!-- Clients Testimony -->
<div class="testimony">
<p>"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!"</p>
</div>
</div>
<!-- Irene Roberts -->
<div class="testimony-tab">
<!-- Clients Profile (eg. name, status) -->
<div class="clients-profile">
<div class="avatar">
<img src="assets/images/image-irene.jpg" alt="Irene Roberts">
</div>
<div class="client-info">
<h3 class="name">Irene Roberts</h3>
<p class="client-status">
Verified Buyer
</p>
</div>
</div>
<!-- Clients Testimony -->
<div class="testimony">
<p>"Customer service is always excellent and very quick turn around. Completely delighted with
the simplicity of the purchase and the speed of delivery."</p>
</div>
</div>
<!-- Anne Wallace -->
<div class="testimony-tab">
<!-- Clients Profile (eg. name, status) -->
<div class="clients-profile">
<div class="avatar">
<img src="assets/images/image-anne.jpg" alt="Anne Wallace">
</div>
<div class="client-info">
<h3 class="name">Anne Wallace</h3>
<p class="client-status">
Verified Buyer
</p>
</div>
</div>
<!-- Clients Testimony -->
<div class="testimony">
<p>"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!"</p>
</div>
</div>
</div>
</div>
<!-- End Testimonials Tabs -->
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a
href="https://github.com/alnahian2003" target="_blank">Al Nahian</a>.
</div>
</section>
<!-- End Main Section -->
</body>
</html>