-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (130 loc) · 5.5 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
<!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="style.css" />
<title>Whimsical - Where Great Ideas Take Shape</title>
</head>
<body class="body-home" id="mobile-body">
<header class="nav-container" id="mobile-nav-container">
<a href="#">
<img class="whimsical-logo" id="mobile-whimsical-logo"
src="https://global-uploads.webflow.com/5d9d02c4b01a536c7d5d4a35/5d9f669141d3077765d2af5b_whimsical-logo-on-color%402x.png"
alt="Logo Whimsical" />
</a>
<div class="login" id="mobile-login">
<div class="user"></div>
<a href="" class="sair">Sair</a>
<div class="avatar"></div>
<a href="" class="pricing">PRICING</a>
<div class="divider"></div>
<a href="" class="signInBtn">SIGN IN</a>
<a href="" class="signUpBtn">SIGN UP</a>
</div>
</header>
<section class="search-container">
<input class="inputsearch" placeholder="Digite o nome do país para receber informações sobre COVID-19" required="">
<button type="submit" class="searchbtn">Pesquisar</button>
</section>
<section class="top-container" id="mobile-top-container">
<h1 class="tagline" id="mobile-tagline">Where great ideas take shape</h1>
<div class="subheading" id="mobile-subheading">
Whimsical is the unified workspace for thinking and collaboration.
</div>
<div class="btns" id="mobile-bts">
<a class="btnSignGoogle" id="mobile-sign-google">Sign Up with Google</a>
<a href="/signup" class="btnSignEmail" id="mobile-sign-email">
Sign Up with Email</a>
</div>
</section>
<section class="mid-container" id="mobile-mid-container">
<div class="subheading" id="mobile-subheading2">
We bring together five different formats, crafted for speed and clarity.
</div>
<div class="flexboxs" id="mobile-flexboxs">
<a href="/docs" class="flexbox docs" id="mobile-flexbox">Docs</a>
<a href="/flowcharts" class="flexbox flowcharts" id="mobile-flexbox">Flowcharts</a>
<a href="/wireframes" class="flexbox wireframes" id="mobile-flexbox">Wireframes</a>
<a href="/mind-maps" class="flexbox mindmaps" id="mobile-flexbox">Mind Maps</a>
<a href="/sticky-notes" class="flexbox stickies" id="mobile-flexbox">Sticky Notes</a>
</div>
</section>
<section class="bot-container" id="mobile-bot-container">
<h3 class="subheading" id="mobile-subheading3">
Trusted by teams at thousands of top organizations.
</h3>
<div class="logos">
<div class="single-logo one" id="mobile-single-logo-one"></div>
<div class="single-logo two" id="mobile-single-logo-two"></div>
<div class="single-logo three" id="mobile-single-logo-three"></div>
<div class="single-logo four" id="mobile-single-logo-four"></div>
<div class="single-logo five" id="mobile-single-logo-five"></div>
</div>
<a href="/customers" class="customers-btn" id="mobile-customers-btn">See Why Our Customers Choose Whimsical</a>
</section>
<footer class="footer-container" id="footer">
<div class="containerF" id="mobile-footer-container">
<div class="blocosI">
<div class="bloco1" id="mobile-bloco1">
<ul>
<li><a class="footer-link" href=""> Flowcharts</a></li>
<li><a class="footer-link" href=""> Wireframes</a></li>
<li><a class="footer-link" href=""> Mind Maps</a></li>
<li><a class="footer-link" href=""> Sticky Notes</a></li>
<li><a class="footer-link" href=""> Docs</a></li>
</ul>
</div>
<div class="bloco2" id="mobile-bloco2">
<ul>
<li><a class="footer-link" href=""> Pricing </a></li>
<li><a class="footer-link" href=""> Customers</a></li>
<li><a class="footer-link" href=""> Blog</a></li>
<li><a class="footer-link" href=""> Community</a></li>
<li><a class="footer-link" href=""> Help</a></li>
<li><a class="footer-link" href=""> Careers</a></li>
</ul>
</div>
</div>
<div class="blocosF" id="mobile-blocosF">
<div class="footer-s-icons">
<a href="" class="social-icon">
<div class="twitter"></div>
</a>
<a href="" class="social-icon">
<div class="linkedin"></div>
</a>
<a href="" class="social-icon">
<div class="email"></div>
</a>
</div>
<div class="secondary-links">
<a href="" class="secondary-link">Status</a>
<a href="" class="secondary-link">Security</a>
<a href="" class="secondary-link">Terms</a>
<a href="" class="secondary-link">Privacy</a>
</div>
<div class="diretrizes">
<div class="text-block">© 2021 Whimsical Inc.</div>
</div>
</div>
</div>
</footer>
<section class="modalContainer">
<div class="modal">
<button class="fechar">X</button>
<h2>Login</h2>
<form action="">
<label for="email">Email</label>
<input type="email" class="inputEmail" placeholder="Email" required />
<span class="errorSpan"></span>
<label for="senha">Senha</label>
<input type="password" class="inputPassword" placeholder="Senha" required />
<span class="errorSpan"></span>
<button type="submit" class="btnEntrar">Entrar</button>
</form>
</div>
</section>
</body>
</html>