m4rcos-dev
diff --git a/‎trybe-projetos/pixels-art/files/background.mp4‎
928 KB b/‎trybe-projetos/pixels-art/files/background.mp4‎
928 KB
diff --git a/‎trybe-projetos/pixels-art/files/background.webm‎
1.71 MB b/‎trybe-projetos/pixels-art/files/background.webm‎
1.71 MB
diff --git a/‎trybe-projetos/pixels-art/files/backgroundImage.jpg‎
121 KB b/‎trybe-projetos/pixels-art/files/backgroundImage.jpg‎
121 KB
diff --git a/‎trybe-projetos/pixels-art/index.html‎
Lines changed: 16 additions & 2 deletions b/‎trybe-projetos/pixels-art/index.html‎
Lines changed: 16 additions & 2 deletions
diff --git a/‎trybe-projetos/pixels-art/style.css‎
Lines changed: 30 additions & 0 deletions b/‎trybe-projetos/pixels-art/style.css‎
Lines changed: 30 additions & 0 deletions
@@ -7,10 +7,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="style.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=VT323&display=swap" rel="stylesheet">
 </head>
 
 <body>
-    <h1 id="title">Paleta de Cores</h1>
+    <video autoplay loop poster="files/backgroundImage.jpg" class="bg_video">
+        <source src="files/background.webm" type="video/webm">
+        <source src="files/background.mp4" type="video/mp4">
+    </video>
+
+    <h1 id="title" class="main-font bg-title font-title">PIXEL ART - SUA ARTE EM 8 BIT</h1>
+
+    <div id="palette-color" class="bg-title">
+        <div class="main-font horizontal">Escolha uma cor:</div>
+        <input class="horizontal" type="color">
+        <button id="clear-board">Limpar</button>
+    </div>
 
     <div id="color-palette">
         <div class="color color-black border horizontal size selected"></div>
@@ -19,7 +33,7 @@ <h1 id="title">Paleta de Cores</h1>
         <div class="color color-green border horizontal size"></div>
     </div>
 
-    <button id="clear-board">Limpar</button>
+    
     <input id="board-size" type="number" min="1" oninput="validity.valid ? this.save = value : value = this.save;">
     <button id="generate-board">VQV</button>
 
 
@@ -39,4 +39,34 @@
 
 .horizontal {
     display: inline-block;
+}
+
+/* BACKGROUND */
+.bg_video{
+	position: fixed; 
+	right: 0; 
+	bottom: 0;
+	min-width: 100%; 
+	min-height: 100%;
+	width: auto; 
+	height: auto; 
+	z-index: -1000;
+	background: url(files/backgroundImage.jpg) no-repeat;
+	background-size: cover; 
+}
+
+.bg-title {
+    background-color: rgb(169, 169, 169, 0.5);
+    border-radius: 5em;
+}
+
+/* FONTES */
+.main-font {
+    font-family: 'vt323', Arial, Helvetica, sans-serif;
+    font-size: x-large;
+}
+
+.font-title{
+    text-align: center;
+    font-size: 3em;
 }