-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (102 loc) · 4.08 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
<!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="src/style.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=Roboto:wght@100;400;700&display=swap" rel="stylesheet">
<title>You face - Share Video Links</title>
</head>
<body>
<nav>
<img id="logo" src="./images/logo.png" />
<!-- <h3 id="logoText">youface</h3> -->
<ul id="navLinks">
<a href="#joinTheList"><li class="pill">Join the waitlist</li></a>
<li>Features</li>
<li>Contact</li>
<li class="pill purple">Login</li>
</ul>
</nav>
<div class="hero">
<section id="heroText">
<h1>Meetings on <br>your time</h1>
<h3>Record and send quick videos.</h3>
<h3>An essential tool for busy kids.</h3>
</section>
<section id="heroImage">
<img class="roundImage" src="./images/carton_vid.gif" />
<div class="rec">REC <sup>•</sup></div>
</section>
<!-- <form> -->
<a href="#joinTheList" class="pill hangingButton">
Join the waitlist
</a>
<!-- </form> -->
</div>
<section id="main">
<h2>More than 500+ smart kids (like you)<br></h2>
<h2>are already using Youface</h2>
<div id="kidsImages">
<div class="happyBoy">
<img loading="lazy" class="roundImage" src="./images/happyboy1.gif" />
<div class="rec">REC <sup>•</sup></div>
</div>
<div class="happyBoy">
<img loading="lazy" class="roundImage" src="./images/happyboy2.gif" />
<div class="rec">REC <sup>•</sup></div>
</div>
</div>
<article>
<h2>Easy, Powerful Video Creation</h2>
<h3>Email is boring, send fun video messages instead.</h3>
<!-- <h3>Email is boring, send fun video messages instead.</h3> -->
<div id="table">
<div class="leftCol">
<div class="header">Without Youface</div>
<ul>
<li>Your email messages are not fun and have no personality.</li>
<li>You need to set time aside to have a face to face meeting online.</li>
<li>Lower response rates to your messages, lower sales.</li>
</ul>
</div>
<div class="rightCol">
<div class="header with">With Youface</div>
<ul>
<li><b>Stand out</b> to your friends with impactful and memorable video messages.</li>
<li><b>Show your personality</b> to create warm connections and build trust</li>
<li><b>Boost response rates</b>, book meetings, and sell more.</li>
</ul>
</div>
</div>
</article>
</section>
<section id="teacher">
<h2>Teachers love using us too!</h2>
<div class="hero">
<div class="happyBoy">
<img loading="lazy" class="roundImage" src="./images/teacher2.gif" />
<div class="rec">REC <sup>•</sup></div>
</div>
<div class="happyBoy">
<img loading="lazy" class="roundImage" src="./images/teacher1.gif" />
<div class="rec">REC <sup>•</sup></div>
</div>
</div>
</section>
<section id="joinTheList">
<h2>JOIN THE WAIT LIST</h2>
<form>
<input class="textInput" type="text" placeholder="Enter your email" />
<button type="submit" class="pill subscribe">
Subscribe
</button>
</form>
</section>
<footer>
</footer>
</body>
</html>