From fd49081d18b9dca44074b7fd166c843e551dd6fd Mon Sep 17 00:00:00 2001
From: fmk17 <fmk17@inf.ufpr.br>
Date: Wed, 23 Nov 2022 16:19:36 -0300
Subject: [PATCH] Ajusta posicionamento
---
html/assets/css/style.css | 7 ++-
html/assets/js/script.js | 1 -
html/index.html | 101 ++++++++++++++++++--------------------
3 files changed, 53 insertions(+), 56 deletions(-)
diff --git a/html/assets/css/style.css b/html/assets/css/style.css
index 980d374..0b922ce 100644
--- a/html/assets/css/style.css
+++ b/html/assets/css/style.css
@@ -2,16 +2,21 @@
font-family: Stacker;
src: url("../fonts/Stacker.otf");
}
+
@font-face {
font-family: Axeon;
src: url("../fonts/Axeon.ttf");
}
-.imagem-fundo {
+
+.bg-fundo {
background-image: url("images/fundo.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
+}
+
+.box-shadow-fundo {
box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.6);
}
diff --git a/html/assets/js/script.js b/html/assets/js/script.js
index 67b3232..0545a8c 100644
--- a/html/assets/js/script.js
+++ b/html/assets/js/script.js
@@ -5,7 +5,6 @@
* All rights reserved. Contact Nayuki for licensing.
* https://www.nayuki.io/page/animated-floating-graph-nodes
*/
-
window.addEventListener("load", function () {
("use strict");
var app;
diff --git a/html/index.html b/html/index.html
index 1829b00..9c187d8 100644
--- a/html/index.html
+++ b/html/index.html
@@ -9,8 +9,8 @@
<script src="assets/js/script.js" defer></script>
</head>
<body>
- <header class="pt-12 mb-0 flex items-center justify-center h-[90vh]">
- <svg style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;" class="imagem-fundo">
+ <header class="pt-12 mb-0 flex flex-col items-center relative justify-center h-[80vh] bg-black">
+ <svg class="absolute top-0 left-0 w-full h-full bg-fundo box-shadow-fundo opacity-50">
<rect width="1" height="1" fill="url(#background)" />
<lineargradient id="background">
<stop offset="0%" style="stop-color: rgb(5, 141, 89); stop-opacity: 0.5" />
@@ -29,10 +29,7 @@
</linearGradient>
<g stroke-width="0.00125"></g>
</svg>
- <div
- style="z-index: 10; width: 100%"
- class="svg-header flex flex-col items-center justify-center px-5 text-center"
- >
+ <div class="w-full z-10 flex flex-col items-center justify-center px-5 text-center">
<h1
class="glitch items-center flex mb-4 text-4xl font-bold text-white md:text-5xl"
>
@@ -58,61 +55,57 @@
</span>
</p>
</div>
+ <nav
+ class="pt-1 pb-2 z-10 sticky top-0 flex h-[5vh] items-center justify-center bg-fixed bg-center bg-cover"
+ >
+ <ul
+ class="flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400"
+ >
+ <li class="mx-2">
+ <a
+ href="#"
+ class="z-20 borda-colorida inline-block py-3 px-4 text-white rounded-lg active"
+ aria-current="page"
+ >
+ O que é
+ </a>
+ </li>
+ <li class="mr-2">
+ <a
+ href="#"
+ class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+ >Oficinas</a
+ >
+ </li>
+ <li class="mr-2">
+ <a
+ href="#"
+ class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+ >Palestrantes</a
+ >
+ </li>
+ <li class="mr-2">
+ <a
+ href="#"
+ class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+ >Competições</a
+ >
+ </li>
+ <li>
+ <a
+ class="inline-block py-3 px-4 text-gray-400 cursor-not-allowed dark:text-gray-500"
+ >Programação</a
+ >
+ </li>
+ </ul>
+ </nav>
</header>
- <!-- tabs -->
- <div
- class="pt-1 pb-2 z-10 sticky top-0 flex h-[5vh] items-center justify-center bg-fixed bg-center bg-cover"
- >
- <ul
- class="flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400"
- >
- <li class="mx-2">
- <a
- href="#"
- class="z-20 borda-colorida inline-block py-3 px-4 text-white rounded-lg active"
- aria-current="page"
- >
- O que é
- </a>
- </li>
- <li class="mr-2">
- <a
- href="#"
- class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
- >Oficinas</a
- >
- </li>
- <li class="mr-2">
- <a
- href="#"
- class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
- >Palestrantes</a
- >
- </li>
- <li class="mr-2">
- <a
- href="#"
- class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
- >Competições</a
- >
- </li>
- <li>
- <a
- class="inline-block py-3 px-4 text-gray-400 cursor-not-allowed dark:text-gray-500"
- >Programação</a
- >
- </li>
- </ul>
- </div>
- <!-- tailwind content presentation -->
<img
style="z-index: -99; position: absolute; left: 0"
src="assets/img/circuit.svg"
></img>
<section class="container px-5 py-24 mx-auto">
- <!-- Tela de fundo de circuitos -->
-
<div class="flex flex-wrap w-full mb-20">
<div class="w-full mb-6 lg:w-1/2 lg:mb-0">
<h1 class="mb-2 text-2xl font-medium text-gray-900 title-font">
--
GitLab