-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (121 loc) · 6.32 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.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=Open+Sans&display=swap" rel="stylesheet">
<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=Open+Sans:wght@700&display=swap" rel="stylesheet">
<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=Poppins:wght@600&display=swap" rel="stylesheet">
<title>Huddle Landing Page</title>
</head>
<body>
<header>
<div class="page1">
<div class="div-flex1">
<img class="img1" src="./images/logo.svg" alt="huddle logo">
<button class="btn01">Try It Free</button>
</div>
<div class="div-flex2">
<div class="titlediv2">
<h1 class="animate__animated animate__wobble">Build The Community<br>Your Fans Will Love</h1>
<p class="animate__animated animate__flip" id="btnpad">Huddle re-imagines the way we build
communities. You have a voice, but so does your audience. create connections with your users as
you engage in genuine discussion.</p>
<button class="btn03">Get Started For Free</button>
</div>
<div class="wdiv" id="do"><img class="animate__animated animate__flip" id="img03"
src="./images/illustration-mockups.svg" alt="mockup"></div>
</div>
</div>
</header>
<main>
<div class="pages" id="topup1">
<div class="titlediv1" id="diff1">
<h2 class="animate__animated animate__wobble">Grow Together</h2>
<p class="p2" id="btnpad2">Generate meaningful discussions with your audience and build a strong
loyal Community. Think of the insightful conversations you miss out on with a feedback form.</p>
</div>
<img class="img02" src="./images/illustration-grow-together.svg" alt="grow together">
</div>
<div class="pages" id="topup3">
<img class="img02" id="diff2" src="./images/illustration-flowing-conversation.svg"
alt="flowing conversation">
<div class="titlediv1" id="diff4">
<h2>Flowing Conversations</h2>
<p class="p2" id="btnpad2">You wouldn,t pagimate a conversation in real life, so why do it online? Our
threads have just in time loading for a more natural flow.</p>
</div>
</div>
<div class="pages" id="topup2">
<div class="titlediv1" id="diff3">
<h2>Your Users</h2>
<p class="p2" id="btnpad2">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>
<img class="img02" src="./images/illustration-your-users.svg" alt="user">
</div>
</main>
<footer>
<div>
<div class="page4">
<h2 class="head2">Ready To Build Your Community?</h2>
<button class="btn03" id="head3">Get Started For Free</button>
</div>
<div class="lastf" id="fed">
<div class="logodiv1"><img class="logoimg" src="./images/logo-bg-white.svg" alt="footerlogo"></div>
<div class="page6">
<div class="flexf">
<div class="icondiv">
<div class="merge"><img class="icon" id="loca" src="./images/icon-location.svg"
alt="location"></div>
<div class="lorem">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do elusmod tempor
incididunt ut labore et dalore magna aliqua</p>
</div>
</div>
<div class="icondiv">
<div class="merge"><img class="icon" src="./images/icon-phone.svg" alt="tel"></div>
<div class="tel">
<p>+236-800-000-000</p>
</div>
</div>
<div class="icondiv">
<div class="merge"><img class="icon" src="./images/icon-email.svg" alt="email"></div>
<div class="email">
<p>@huddle.com</p>
</div>
</div>
</div>
<div class="profilediv">
<a href="./aboutus.html">About Us</a>
<a href="./whatwedo.html">What We Do</a>
<a href="./FAQ.html">FAQ</a>
</div>
<div class="contactdiv">
<a href="./career.html">Career</a>
<a href="./blog.html">Blog</a>
<a href="./contactus.html">Contact Us</a>
</div>
<div class="sm">
<a href=""><img class="facebook" src="./images/Facebook.png" alt=""></a>
<a href=""><img class="facebook" src="./images/Twitter.png" alt=""></a>
<a href=""><img class="facebook" src="./images/ig.png" alt=""></a>
</div>
</div>
<div class="p10">
<p class="lastpara">© Copyright 2018 Huddle. All rights reserved.</p>
</div>
</div>
</div>
</footer>
</body>
</html>