-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblab-plus.html
142 lines (125 loc) · 7.34 KB
/
blab-plus.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
<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>blab+ | 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">
<a href="index.html"><h1 class="logo no_select"><span class="logo home">blab</span><span class="blab_plus">+</span></h1></a> <!-- 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 text of the whole page -->
<div class="about_blab_plus_contact">
<span class="about blab_plus_contact_main">
The <span class=" blab_typeface blab_plus">best</span> way to experience
<!-- Piece and Babble are typed in their respective fonts, with the blab+ gradient overlay -->
<br> <a href="piece.html" class="piece_typeface blab_plus">Piece </a> and <a href="babble.html" class="babble_typeface blab_plus">Babble</a>
<br><br>
</span>
<!-- This is the pricing description of blab+ -->
<span class="about blab_plus_pricing_description">
1-month free trial • Then $9/month • Cancel at any time
<br><br>
</span>
<!-- This is a button to try blab+ for free, it leads to nowhere since it is a made-up company -->
<a href="#" class="button">Try it for free</a>
<br><br>
</div>
<!-- This is the container for the features of blab+ -->
<div class="blab_plus_about_container">
<!-- This is the card about how blab+ is ad-free -->
<div class="about_card pricing_1">
<div class="about_card_description">
<p>
<span class="about_card_header">
<span class="about_card_header main">Ad-free</span>
</span>
<br><br>
As a <span class="blab_typeface" style="color: black;">blab<span class="blab_plus">+</span></span> subscriber, you will see absolutely zero ads on your timeline. Our
<br> marketers will leave you alone, so that you can get back to focusing on reading and
<br> interacting with posts without being interrupted.
</p>
</div>
</div>
<!-- This is the card about how users can edit their posts with blab+ -->
<div class="about_card pricing_2">
<div class="about_card_description">
<p>
<span class="about_card_header">
<span class="about_card_header main">Edit your posts</span> after you've published them.
</span>
<br><br>
Make your post perfect even after it's live. If you make a mistake or want to add
<br> some additional information, you can easily edit your post without having to delete
<br> it and start over.
</p>
</div>
</div>
<!-- This is the card about how users get priority rankings when they have blab+ -->
<div class="about_card pricing_3">
<div class="about_card_description">
<p>
<span class="about_card_header">
Get <span class="about_card_header main">priority rankings</span> on our platforms.
</span>
<br><br>
When you have <span class="blab_typeface" style="color: black;">blab<span class="blab_plus">+</span></span>, your posts will be ranked higher in conversations and search
<br> results. This means that more people will see your posts, which can help you to
<br> connect with more people and get your message out there.
</p>
</div>
</div>
<!-- This is the card about how users can post longer posts when they subscribe to blab+ -->
<div class="about_card pricing_4">
<div class="about_card_description">
<p>
<span class="about_card_header">
Post <span class="about_card_header main">longer posts</span>
</span>
<br><br>
We believe that there should be no limit to your thoughts and ideas. If you have a
<br> detailed idea that you want to share, you now have up to 10,000 characters to send
<br> that message across. Lots of room to go as deep as you like.
</p>
</div>
</div>
</div>
</body>
</html>