-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (90 loc) · 4.71 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
<!DOCTYPE html>
<html lang="pt-br">
<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="css/reset.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=Inter:wght@100;200;300;400;500;600;700;800;900&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=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/nav-bar.css">
<link rel="stylesheet" href="css/corpo.css">
<link rel="stylesheet" href="css/menu/menu.css">
<link rel="stylesheet" href="css/projeto/projeto.css">
<link rel="stylesheet" href="css/projeto/seu-projeto.css">
<link rel="stylesheet" href="css/projeto/personalizacao.css">
<link rel="stylesheet" href="css/editor/editor.css">
<link rel="stylesheet" href="css/editor/campo.css">
<link rel="stylesheet" href="css/editor/botao-highlight.css">
<title>Alura DEV</title>
</head>
<body>
<header class="cabecalho">
<div class="cabecalho__container"><img class="cabecalho__logo" src="img/logo__alura/Logologo__aluraDEV.svg" alt="logo alura dev"></div>
<input class="cabecalho__pesquisa texto--input" type="text" placeholder="Busque por algo">
<div class="cabecalho__perfil--espacamento">
<div class="cabecalho__perfil">
<div class="perfil__img"></div>
<p class="perfil__nome">Gustavo</p>
</div>
</div>
<div class="cabecalho__mobile">
<img class="mobile__pesquisa" src="img/menu/buscar-img.svg" alt="atalho para busca">
<img class="mobile__menu" src="img/menu/Menu hamburguer.svg" alt="menu mobile">
</div>
</header>
<main class="corpo">
<section class="menu">
<h2 class="sidebar--titulo">Menu</h2>
<nav class="menu__navegacao">
<a class="menu__link" href="#"><img class="link__img link--ativo" src="img/menu/editor-img.svg" alt=""><p class="link__text link--ativo">Editor de código</p></a>
<a class="menu__link" href="#"><img class="link__img" src="img/menu/comunidade-img.svg" alt=""><p class="link__text">Comunidade</p></a>
</nav>
</section>
<section class="editor">
<div class="campo">
<div class="campo__circulos">
<div class="circulo"></div>
<div class="circulo"></div>
<div class="circulo"></div>
</div>
<textarea class="campo__input" spellcheck="false">
const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
const unfold = (f, seed) => {
const go = (f, seed, acc) => {
const res = f(seed)
return res ? go(f, res[1], acc.concat([res[0]])) : acc
}
return go(f, seed, [])
}</textarea>
</div>
<button class="editor__botao">Visualizar com o highlight</button>
</section>
<section class="projeto">
<div class="seu-projeto">
<h2 class="sidebar--titulo">Seu projeto</h2>
<input class="seu-projeto__nome texto--input" type="text" placeholder="Nome do seu projeto">
<textarea class="seu-projeto__descricao texto--input" type="text" placeholder="Descrição do seu projeto"></textarea>
</div>
<div class="personalizacao">
<h2 class="sidebar--titulo">Personalização</h2>
<div class="personalizacao__container">
<select class="personalizacao__codigo texto--input">
<option value="JavaScrip">JavaScrip</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
</select>
<input class="personalizacao__cor" type="color" value="#6BD1FF">
</div>
<button class="personalizacao__botao">Salvar projeto</button>
</div>
</section>
</main>
</body>
</html>