-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (120 loc) · 5.16 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
<!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">
<link rel="stylesheet" href="https://fonts.google.com/specimen/Poppins">
<title>Huddle landing page with alternating feature blocks</title>
<link rel="stylesheet" href="style.css">
<!-- 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>
<!-- First section start -->
<Section class="section1">
<!-- Header Starting -->
<div class=" grid_container1">
<div><span><img class="logo" src="images/logo.svg" alt=""></span></div>
<div></div>
<div>
<button class="buttons">Try It Free</button>
</div>
</div>
<!-- End Header -->
<!-- Main-part -->
<div class="grid_container2">
<div class="grid_item1">
<p class="container2_heading" style=" font-weight:600;">Build the Community your fans will love.</p>
<p class="container2_para" style=" line-height: 28px;">Huddles re-imagines the way we build communities. you have a voice, but so does the audience. Create Connections with your Users as you engage in the genuine audience. </p>
<button class="pink_button mediaQ_pink">Get Started For Free</button>
</div>
<div class="grid_item2">
<img class="heading_image" src="images/illustration-mockups.svg" alt="">
</div>
</div>
<!-- End main-part -->
</Section>
<!-- First Section end -->
<!-- second section start -->
<section>
<div class="grid_container3">
<div> </div>
<div class="box1 media_box">
<div style=" padding:14%; ">
<h2 class="container3_heading" style="font-weight: 600;"><p>Grow Together</p></h2>
<p style="line-height: 25px;">Generate meaningful discussions with your audience, and build a strong, loyal community. Think of the insightful conversations you miss out with a feedback form.</p>
</div>
<div> <img class="grow_together" src="images/illustration-grow-together.svg" width="70%;" alt=""></div>
</div>
<div> </div>
</div>
<div class="grid_container3">
<div> </div>
<div class="box1 media_box">
<div>
<img class="box_image" src="images/illustration-flowing-conversation.svg" alt="">
</div>
<div style=" padding:15%;">
<h2 style="font-weight: 600;"><p>Flowing Conversations</p></h2>
<p style="line-height: 25px;">Generate meaningful discussions with your audience, and build a strong, loyal community. Think of the insightful conversations you miss out with a feedback form.</p>
</div>
</div>
<div> </div>
</div>
<div class="grid_container3">
<div> </div>
<div class="box1 media_box">
<div style="padding:15% 15% 15% 15%; ">
<h2 style="font-weight: 600;"><p>Your Users</p></h2>
<p style="line-height: 25px;"> It takes no time at all to integrate Huddle with your app's authentication solution. This means, once signed in to your app, your Users can start Chatting immediately </p>
</div>
<div style="margin-top: 8%;"> <img src="images/illustration-your-users.svg" style="width: 68%; margin: 0% 0% 0% 8%;" alt=""></div>
</div>
<div> </div>
</div>
<div class="grid_container4">
<div></div>
<div class="box2">
<div></div>
<div style="margin: 30px auto;">
<h2>Ready to Build Your Community?</h2>
<button class="pink_button la_button">Get Started for Free</button>
</div>
<div></div>
</div>
<div></div>
</div>
</section>
<footer class="footer_section">
<div></div>
<div style="display:grid; grid-template-columns: 30px auto;">
<div><span><img src="images/icon-location.svg" alt=""> </div>
<div><p style="margin: 0;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae eaque doloribus enim error ipsam temporibus. </p></span>
</div>
</div>
<div>
<p class="footer_options" style="margin-top: 0;">About Us</p>
<p class="footer_options">What We Do</p>
<p class="footer_options">FAQ</p>
</div>
<div>
<p class="footer_options" style="margin-top: 0;">Career</p>
<p class="footer_options">Blog</p>
<p class="footer_options">Contact Us</p>
</div>
<div style="display:grid; grid-template-columns: 30px 30px 30px auto;">
<div><img src="images/facebook.png" style="width: 24px;" alt=""></div>
<div><img src="images/twitter.png" style="width: 24px" alt=""></div>
<div><img src="images/instagram.png" style="width: 24px;" alt=""></div>
</div>
<!-- <p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Rajvir Singh</a>.
</p> -->
</footer>
</body>
</html>