-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbabble.html
101 lines (89 loc) · 5.61 KB
/
babble.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
<html>
<!--The header of the document -->
<head>
<meta charset="UTF-8"> <!-- Set character encoding to the most comon character enconding used on the web (supports most languages) -->
<!-- Set the width of the viewport to the width of the device, set the initial scale of the page to 1.0 (natural size) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Allows for responseive design regardless of screen resoluion (up to a certain point) -->
<title>Babble - by Blab</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<!--The body of the document -->
<body>
<!-- This is the navigation bar -->
<div class="navbar">
<h1 class="main_top_left no_select"><span class="babble_typeface">Babble</span><br> <span class="logo subheading"><span class="logo subheading by">by </span><a href="index.html" class="logo subheading blab home">blab.</a></span></h1> <!-- Logo on the top left -->
<!-- Navigation bar top level (Apps, Solutions, About us) -->
<ul>
<!-- Navigation bar, Apps -->
<li>
<a href="#">Apps</a>
<ul class="dropdown">
<!-- Navigation bar second level, (APPS -> PIECE) -->
<li><a href="piece.html">
<span class="piece_typeface">Piece</span><br>
<span class="navbar_dropdown_desc">A long-form social media site for deep discussions and text-based interactions.</span>
</a></li>
<!-- Navigation bar second level, (APPS -> BABBLE)-->
<li><a href="babble.html">
<span class="babble_typeface">Babble</span><br>
<span class="navbar_dropdown_desc">An anonymous forum for verified professionals to discuss their jobs, work life, and organisations.</span>
</a></li>
</ul>
</li>
<!-- Navigation bar, Solutions -->
<li>
<a href="#">Solutions</a>
<ul class="dropdown">
<!-- Navigation bar second level, (SOLUTIONS -> BLAB+ )-->
<li><a href="blab-plus.html">
<span class="blab_typeface">blab<span class="blab_plus">+</span></span><br>
<span class="navbar_dropdown_desc">Edit posts, priority rankings in conversations and search, longer posts, less ads, and more... on all of our platforms.</span>
</a></li>
</ul>
</li>
<!-- Navigation bar, About us -->
<li><a href="about.html">About us</a></li>
</ul>
</div>
<!-- This is the main about card which contains the main description of Babble -->
<div class="about_card">
<div class="about_card_description">
<p>
<!-- The "slogan" for the idea of Babble -->
<span class="about_card_header">A <span class="about_card_header main">safe space</span> for professionals to discuss <span class="about_card_header main">work,
<br>life, and everything in between.</span>
</span>
<br><br>
<!-- A further description regarding the "slogan" -->
<span class="babble_typeface">Babble</span> is an anonymous forum where verified professionals can discuss their jobs,
<br> life, and organisations without fear of judgment or retaliation. Whether you're looking
<br> for advice on a specific issue or just want to stay up-to-date on the latest trends, this
<br> is the perfect place to do it.
</p>
</div>
</div>
<!-- This is another card which contains more information on Babble -->
<div class="about_card">
<div class="about_card_description">
<p>
<!-- The "slogan" for the idea of Babble -->
<span class="about_card_header">
<span class="about_card_header main">Learn, grow, and connect.</span>
</span>
<br><br>
<!-- A further description regarding the "slogan" -->
We want <span class="babble_typeface">Babble</span> to be more than just a forum for discussion. This is a community
<br> for professionals to share their experiences and insights, grow their skills, and make
<br> make connections with people who can help you succeed in your career.
</p>
</div>
</div>
<!-- This is the collage of sample posts made on Babble -->
<div class="babble_posts_collage">
<img src="./images/babble_post_nader_phillip.png" class="babble_post nader" alt="Babble post - Nader">
<img src="./images/babble_post_sahil_mauri_armaan.png" class="babble_post sahil" alt="Babble post - Sahil">
<img src="./images/babble_post_writersonbabble_diego.png" class="babble_post writersonbabble" alt="Babble post - Writers on Babble">
</div>
<a href="#" class="button" style="position: absolute; left: 95px; font-size: 85px; ">Join the discussion</a>
</body>
</html>