-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·104 lines (103 loc) · 6.26 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/normalize.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/dracula.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicon.png">
<title>AluraDev</title>
</head>
<body>
<div class="container">
<header class="header">
<img src="./assets/img/logo.png" alt="Logo do site" class="header__logo">
<input type="text" class="header__search" placeholder="Busque por algo">
<div class="search-icon">
<img src="./assets/img/search-icon.svg" alt="Ícone de pesquisa">
</div>
<div class="profile">
<img src="./assets/img/photo.png" alt="Foto do autor" class="profile__photo">
<p class="profile__name">Harry</p>
</div>
<div class="hamburger">
<img src="./assets/img/navbar-open-icon.svg" alt="Icone do navbar mobile">
</div>
</header>
<nav class="navbar">
<p class="navbar__title">Menu</p>
<ul class="navbar__items">
<li class="navbar__item navbar__item--active">
<a href="./">
<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="16"/>
<path d="M22.7157 31.9832L20.8096 31.4301C20.6096 31.3739 20.4971 31.1645 20.5534 30.9645L24.8187 16.2719C24.8749 16.0719 25.0843 15.9594 25.2843 16.0157L27.1904 16.5688C27.3904 16.625 27.5029 16.8344 27.4466 17.0344L23.1813 31.727C23.1219 31.9269 22.9157 32.0426 22.7157 31.9832ZM19.1535 28.4772L20.5128 27.0273C20.6565 26.8742 20.6471 26.6305 20.4878 26.4899L17.6567 23.9994L20.4878 21.509C20.6471 21.3684 20.6596 21.1247 20.5128 20.9715L19.1535 19.5217C19.0129 19.3717 18.7754 19.3623 18.6223 19.506L14.1195 23.7245C13.9602 23.8713 13.9602 24.1244 14.1195 24.2713L18.6223 28.4928C18.7754 28.6366 19.0129 28.6303 19.1535 28.4772ZM29.3777 28.496L33.8805 24.2744C34.0398 24.1275 34.0398 23.8744 33.8805 23.7276L29.3777 19.5029C29.2277 19.3623 28.9902 19.3685 28.8465 19.5185L27.4872 20.9684C27.3435 21.1215 27.3529 21.3653 27.5122 21.5059L30.3433 23.9994L27.5122 26.4899C27.3529 26.6305 27.3404 26.8742 27.4872 27.0273L28.8465 28.4772C28.9871 28.6303 29.2246 28.6366 29.3777 28.496Z"/>
</svg>
<p> Editor de código </p>
</a>
</li>
<li class="navbar__item">
<a href="./comunidade.html">
<svg class="" width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="48" rx="16"/>
<path d="M17 23C18.1031 23 19 22.1031 19 21C19 19.8969 18.1031 19 17 19C15.8969 19 15 19.8969 15 21C15 22.1031 15.8969 23 17 23ZM31 23C32.1031 23 33 22.1031 33 21C33 19.8969 32.1031 19 31 19C29.8969 19 29 19.8969 29 21C29 22.1031 29.8969 23 31 23ZM32 24H30C29.45 24 28.9531 24.2219 28.5906 24.5813C29.85 25.2719 30.7437 26.5188 30.9375 28H33C33.5531 28 34 27.5531 34 27V26C34 24.8969 33.1031 24 32 24ZM24 24C25.9344 24 27.5 22.4344 27.5 20.5C27.5 18.5656 25.9344 17 24 17C22.0656 17 20.5 18.5656 20.5 20.5C20.5 22.4344 22.0656 24 24 24ZM26.4 25H26.1406C25.4906 25.3125 24.7688 25.5 24 25.5C23.2312 25.5 22.5125 25.3125 21.8594 25H21.6C19.6125 25 18 26.6125 18 28.6V29.5C18 30.3281 18.6719 31 19.5 31H28.5C29.3281 31 30 30.3281 30 29.5V28.6C30 26.6125 28.3875 25 26.4 25ZM19.4094 24.5813C19.0469 24.2219 18.55 24 18 24H16C14.8969 24 14 24.8969 14 26V27C14 27.5531 14.4469 28 15 28H17.0594C17.2563 26.5188 18.15 25.2719 19.4094 24.5813Z"/>
</svg>
<p> Comunidade </p>
</a>
</li>
</ul>
<hr>
<div class="profile">
<img src="./assets/img/photo.png" alt="Foto do autor" class="profile__photo">
<p class="profile__name">Harry</p>
</div>
</nav>
<main>
<div class="error" data-js="error">
Ops, você esqueceu de colocar o código!
</div>
<div class="editor" data-js="editor">
<header class="buttons">
<svg class="buttons__icon buttons__icon--primary" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="./assets/img/symbols.svg#ball" />
</svg>
<svg class="buttons__icon buttons__icon--secondary" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="./assets/img/symbols.svg#ball" />
</svg>
<svg class="buttons__icon buttons__icon--third" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="./assets/img/symbols.svg#ball" />
</svg>
</header>
<code class="editor__code javascript hljs" data-js="editor__code" contenteditable="true" aria-label="editor">
</code>
</div>
<button class="button-preview">Visualizar com highligth</button>
</main>
<section class="project">
<form action="#" data-js="form-project">
<h2 class="project__title">Seu Projeto</h2>
<input class="project__name" data-js="project__name" placeholder="Nome do seu projeto" type="text" required>
<textarea class="project__description" data-js="project__description" placeholder="Descrição do seu projeto" required></textarea>
<h2 class="project__title">Personalização</h2>
<select class="project__language" data-js="project__language" required>
<option value="">Selecione uma linguagem</option>
<option value="javascript">Javascript</option>
<option value="css">CSS</option>
<option value="html">Html</option>
<option value="java">Java</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
</select>
<input class="project__color" data-js="project__color" type="color" value="#6bd1ff">
<button class="project__button" type="submit">Salvar Projeto</button>
</form>
</section>
</div>
<script src="./assets/js/highlight.min.js"></script>
<script src="./assets/js/navbar.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>