-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
88 lines (75 loc) · 3.66 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
<!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">
<title>Home | Alura Challenge FrontEnd</title>
<link rel="stylesheet" href="css/base/base.css">
<link rel="stylesheet" href="css/componentes/cabecalho.css">
<link rel="stylesheet" href="css/componentes/inputESelect.css">
<link rel="stylesheet" href="css/componentes/botoes.css">
<link rel="stylesheet" href="css/componentes/principal.css">
<link rel="stylesheet" href="css/componentes/editor.css">
</head>
<body>
<header class="container cabecalho">
<div class="logo">
<img src="img/logo.png" class="logo-alura" alt="Logo da AluraDev"/>
</div>
<input type="text" class="busca-input" placeholder="Busque por Algo">
<div class="perfil">
<a href="#" class="link-perfil">
<button class="botao-perfil"><img src="https://avatars.githubusercontent.com/u/84103586?s=400&u=e01317bd8448d9bc481b68b77a10fd1f8b8ce743&v=4"
class="foto-perfil" alt="Foto do Perfil"/>Ju Mota
</button>
</a>
</div>
<div class="pesquisa-mobile">
<button class="botao-pesquisa mobile"><img src="/img/lupa.png"
class="icone-lupa" alt="Ícone de pesquisa"/>
</button>
</div>
<div class="menu-mobile">
<button class="botao-hamburguer mobile"><img src="/img/Hamburguer.png"
class="icone-hamburguer" alt="Ícone do vetor hamburguer"/>
</button>
</div>
</header>
<main class="container principal">
<section class="menu-esquerdo">
<h2>Menu</h2>
<a href="index.html" class="active-link code">
<button class="active-button code"><img src="img/code-home.png" alt="ícone do código"></button>Editor de código</a>
<a href="comunidade.html" class="inactive-link comunidade">
<button class="inactive-button comunidade"><img src="img/comunidade-home.png" alt="ícone da comunidade"></button>Comunidade</a>
</section>
<section class="editor">
<div class="borda-editor">
<div class="editor-code">
<img src="./img/mac_buttons.png" class="mac-buttons" alt="botoes do mac">
<!-- <button class="button-salvar"><img src="img/salve.png" alt="ícone salvar"></button> -->
<div class="preview-code">
<pre><code class="preview hljs" contenteditable="true" aria-label="editor"></code></pre>
</div>
</div>
</div>
<button class="visualizador">Visualizar com o highlight</button>
</section>
<section class="projeto">
<h2>Seu projeto</h2>
<input type="text" class="nome-projeto" placeholder="Nome do seu projeto"></input>
<textarea class="detalhe-projeto" placeholder="Descrição do seu projeto"></textarea>
<h2>Personalização</h2>
<select class="lista-linguagens">
<option value="Javascript">Javascript</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>
<input type="color" value="#6BD1FF" class="select-color"/>
<button class="salvar-projeto">Salvar projeto</button>
</section>
</main>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
</body>
</html>