Skip to content

Commit 9368d42

Browse files
m4rcos-devm4rcos-dev
committed
Finaliza Estrutura e Estilo da Página
1 parent 90efe7f commit 9368d42

File tree

4 files changed

+95
-236
lines changed

4 files changed

+95
-236
lines changed

‎trybe-projetos/pixels-art/index.html‎

Lines changed: 55 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -13,75 +13,76 @@
1313
</head>
1414

1515
<body>
16-
<video autoplay loop poster="files/backgroundImage.jpg" class="bg_video">
16+
<video autoplay loop poster="files/backgroundImage.jpg" id="bg_video">
1717
<source src="files/background.webm" type="video/webm">
1818
<source src="files/background.mp4" type="video/mp4">
1919
</video>
2020

21-
<h1 id="title" class="main-font bg-title font-title">PIXEL ART - SUA ARTE EM 8 BIT</h1>
21+
<h1 id="title" class="main-font bg-title">PIXEL ART - SUA ARTE EM 8 BIT</h1>
2222

23-
<div id="palette-color" class="bg-title">
24-
<div class="main-font horizontal">Escolha uma cor:</div>
25-
<input class="horizontal" type="color">
26-
<button id="clear-board">Limpar</button>
27-
</div>
23+
<main id="main">
24+
<div id="setup">
25+
<div id="size" class="main-font horizontal">Escolha um tamanho:
26+
<input id="board-size" type="number" min="1"
27+
oninput="validity.valid ? this.save = value : value = this.save;" placeholder="Min: 5 Max: 50"
28+
class="main-font">
29+
<button id="generate-board" class="main-font">VQV</button>
30+
</div>
2831

29-
<div id="color-palette">
30-
<div class="color color-black border horizontal size selected"></div>
31-
<div class="color color-red border horizontal size"></div>
32-
<div class="color color-blue border horizontal size"></div>
33-
<div class="color color-green border horizontal size"></div>
34-
</div>
35-
36-
37-
<input id="board-size" type="number" min="1" oninput="validity.valid ? this.save = value : value = this.save;">
38-
<button id="generate-board">VQV</button>
32+
<div id="color" class="main-font horizontal">Escolha uma cor:
33+
<input id="palette-color" class="horizontal main-font" type="color">
34+
<button id="clear-board" class="main-font">Limpar</button>
35+
</div>
36+
</div>
3937

40-
<div id="pixel-board">
38+
<div id="pixel-board">
4139

42-
<div id="board1" class="line newLine">
43-
<div class="pixel color-white size border horizontal"></div>
44-
<div class="pixel color-white size border horizontal"></div>
45-
<div class="pixel color-white size border horizontal"></div>
46-
<div class="pixel color-white size border horizontal"></div>
47-
<div class="pixel color-white size border horizontal"></div>
48-
</div>
40+
<div id="board1" class="line newLine">
41+
<div class="pixel color-white size border horizontal"></div>
42+
<div class="pixel color-white size border horizontal"></div>
43+
<div class="pixel color-white size border horizontal"></div>
44+
<div class="pixel color-white size border horizontal"></div>
45+
<div class="pixel color-white size border horizontal"></div>
46+
</div>
4947

50-
<div id="board2" class="line newLine">
51-
<div class="pixel color-white size border horizontal"></div>
52-
<div class="pixel color-white size border horizontal"></div>
53-
<div class="pixel color-white size border horizontal"></div>
54-
<div class="pixel color-white size border horizontal"></div>
55-
<div class="pixel color-white size border horizontal"></div>
56-
</div>
48+
<div id="board2" class="line newLine">
49+
<div class="pixel color-white size border horizontal"></div>
50+
<div class="pixel color-white size border horizontal"></div>
51+
<div class="pixel color-white size border horizontal"></div>
52+
<div class="pixel color-white size border horizontal"></div>
53+
<div class="pixel color-white size border horizontal"></div>
54+
</div>
5755

58-
<div id="board3" class="line newLine">
59-
<div class="pixel color-white size border horizontal"></div>
60-
<div class="pixel color-white size border horizontal"></div>
61-
<div class="pixel color-white size border horizontal"></div>
62-
<div class="pixel color-white size border horizontal"></div>
63-
<div class="pixel color-white size border horizontal"></div>
64-
</div>
56+
<div id="board3" class="line newLine">
57+
<div class="pixel color-white size border horizontal"></div>
58+
<div class="pixel color-white size border horizontal"></div>
59+
<div class="pixel color-white size border horizontal"></div>
60+
<div class="pixel color-white size border horizontal"></div>
61+
<div class="pixel color-white size border horizontal"></div>
62+
</div>
6563

66-
<div id="board4" class="line newLine">
67-
<div class="pixel color-white size border horizontal"></div>
68-
<div class="pixel color-white size border horizontal"></div>
69-
<div class="pixel color-white size border horizontal"></div>
70-
<div class="pixel color-white size border horizontal"></div>
71-
<div class="pixel color-white size border horizontal"></div>
72-
</div>
64+
<div id="board4" class="line newLine">
65+
<div class="pixel color-white size border horizontal"></div>
66+
<div class="pixel color-white size border horizontal"></div>
67+
<div class="pixel color-white size border horizontal"></div>
68+
<div class="pixel color-white size border horizontal"></div>
69+
<div class="pixel color-white size border horizontal"></div>
70+
</div>
7371

74-
<div id="board5" class="line newLine">
75-
<div class="pixel color-white size border horizontal"></div>
76-
<div class="pixel color-white size border horizontal"></div>
77-
<div class="pixel color-white size border horizontal"></div>
78-
<div class="pixel color-white size border horizontal"></div>
79-
<div class="pixel color-white size border horizontal"></div>
72+
<div id="board5" class="line newLine">
73+
<div class="pixel color-white size border horizontal"></div>
74+
<div class="pixel color-white size border horizontal"></div>
75+
<div class="pixel color-white size border horizontal"></div>
76+
<div class="pixel color-white size border horizontal"></div>
77+
<div class="pixel color-white size border horizontal"></div>
78+
</div>
8079
</div>
80+
</main>
8181

82+
<footer>
8283

83-
</div>
84-
<script src="script.js"></script>
84+
</footer>
85+
<script src="refatorando.js"></script>
8586
</body>
8687

8788
</html>

‎trybe-projetos/pixels-art/refatorando.js‎

Whitespace-only changes.

‎trybe-projetos/pixels-art/script.js‎

Lines changed: 0 additions & 131 deletions
This file was deleted.

‎trybe-projetos/pixels-art/style.css‎

Lines changed: 40 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,61 @@
1-
/* CORES */
1+
/* GERAL */
2+
#bg_video {
3+
position: fixed;
4+
right: 0;
5+
bottom: 0;
6+
min-width: 100%;
7+
min-height: 100%;
8+
width: auto;
9+
height: auto;
10+
z-index: -1000;
11+
background: url(files/backgroundImage.jpg) no-repeat;
12+
background-size: cover;
13+
}
214

3-
.color-black {
4-
background-color: black;
15+
.main-font {
16+
font-family: 'vt323', Arial, Helvetica, sans-serif;
17+
font-size: x-large;
18+
text-align: center;
519
}
620

7-
.color-red {
8-
background-color: red;
21+
.horizontal {
22+
display: inline-block;
923
}
1024

11-
.color-blue {
12-
background-color: blue;
25+
/* TITLE */
26+
#title {
27+
text-align: center;
28+
font-size: 3em;
29+
background-color: rgb(169, 169, 169, 0.5);
30+
border-radius: 5em;
31+
margin-bottom: 0.2em;
1332
}
1433

15-
.color-green {
16-
background-color: green;
34+
/* MAIN */
35+
#main {
36+
background-color: rgb(169, 169, 169, 0.5);
37+
border-radius: 1em;
38+
}
39+
40+
/* SETUP */
41+
#setup {
42+
padding: 5px;
43+
}
44+
45+
/* PIXEL BOARD */
46+
#pixel-board {
47+
padding: 2px;
1748
}
1849

1950
.color-white {
2051
background-color: white;
2152
}
2253

23-
/* BORDAS */
2454
.border {
2555
border: solid 1px;
2656
}
2757

28-
/* TAMANHOS */
29-
.size-mainboard {
30-
width: 25px;
31-
}
32-
3358
.size {
3459
width: 40px;
3560
height: 40px;
3661
}
37-
38-
/* POSICIONAMENTO */
39-
40-
.horizontal {
41-
display: inline-block;
42-
}
43-
44-
/* BACKGROUND */
45-
.bg_video{
46-
position: fixed;
47-
right: 0;
48-
bottom: 0;
49-
min-width: 100%;
50-
min-height: 100%;
51-
width: auto;
52-
height: auto;
53-
z-index: -1000;
54-
background: url(files/backgroundImage.jpg) no-repeat;
55-
background-size: cover;
56-
}
57-
58-
.bg-title {
59-
background-color: rgb(169, 169, 169, 0.5);
60-
border-radius: 5em;
61-
}
62-
63-
/* FONTES */
64-
.main-font {
65-
font-family: 'vt323', Arial, Helvetica, sans-serif;
66-
font-size: x-large;
67-
}
68-
69-
.font-title{
70-
text-align: center;
71-
font-size: 3em;
72-
}

0 commit comments

Comments
 (0)