Skip to content
This repository has been archived by the owner on May 25, 2024. It is now read-only.

Commit

Permalink
Merge pull request #7 from frc9611/dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
LucasHitoshi committed Jan 13, 2024
2 parents 32eb739 + e6081dd commit 2456f80
Show file tree
Hide file tree
Showing 8 changed files with 410 additions and 85 deletions.
Binary file added assets/dropdown-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion assets/fonts/stylesheet.css

This file was deleted.

79 changes: 63 additions & 16 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CyberRain - Home</title>
<link rel="stylesheet" href="./styles/global.def.css">
<link rel="stylesheet" href="./styles/index.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=Outfit:wght@100;300;600;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon">
<!-- Components -->
<script src="./javascripts/components/mobile-dropdown-menu.js" defer></script>
</head>

<body>
Expand All @@ -30,6 +33,10 @@
</ul>
<a href="not-implemented.html" class="yellow-unfilled-button">Contato</a>
</nav>
<button id="open-dropdown-button">
<span class="dropdown-text">Menu</span>
<img src="./assets/dropdown-icon.png" class="dropdown-icon" alt="Ícone para abrir o menu dropdown">
</button>
</header>

<section class="cr-carrousel">
Expand Down Expand Up @@ -159,31 +166,71 @@
Newsletter</a></span>
<span class="footer-section-title">Siga-nos nas redes sociais</span>
<ul class="footer-section-social-media-list">
<li class="social-media"><a target="_blank" href="https://www.instagram.com/cyberainfrc/"><img
class="small-icon" src="./assets/instagram-icon.png" alt="Ícone do Instagram"></a></li>
<li class="social-media"><a target="_blank" href="https://github.com/frc9611"><img
class="small-icon" src="./assets/github-icon.png" alt="Ícone do Github"></a></li>
<li class="social-media"><a target="_blank" href="https://www.thebluealliance.com/team/9611"><img
class="small-icon" src="./assets/tba-lamp.svg" alt="Ícone da The Blue Alliance"></a>
<li class="social-media">
<a target="_blank" href="https://www.instagram.com/cyberainfrc/">
<img class="small-icon" src="./assets/instagram-icon.png" alt="Ícone do Instagram">
</a>
</li>
<li class="social-media">
<a target="_blank" href="https://github.com/frc9611">
<img class="small-icon" src="./assets/github-icon.png" alt="Ícone do Github">
</a>
</li>
<li class="social-media">
<a target="_blank" href="https://www.thebluealliance.com/team/9611">
<img class="small-icon" src="./assets/tba-lamp.svg" alt="Ícone da The Blue Alliance">
</a>
</li>
<li class="social-media">
<a target="_blank" href="mailto:contact@9611.team">
<img class="small-icon" src="./assets/email-icon.png" alt="Ícone de e-mail">
</a>
</li>
</ul>
</section>
</div>
<div>
<div class="mobile-link-tree">
<section class="footer-section-link-tree">
<ul class="footer-section-link-tree-list">
<li class="social-media"><a target="_blank" href="https://www.instagram.com/cyberainfrc/"><img
class="small-icon" src="./assets/instagram-icon.png" alt="Ícone do Instagram"></a></li>
<li class="social-media"><a target="_blank" href="https://github.com/frc9611"><img class="small-icon"
src="./assets/github-icon.png" alt="Ícone do Github"></a></li>
<li class="social-media"><a target="_blank" href="https://www.thebluealliance.com/team/9611"><img
class="small-icon" src="./assets/tba-lamp.svg" alt="Ícone da The Blue Alliance"></a></li>
<li class="social-media"><a target="_blank" href="mailto:contact@9611.team"><img class="small-icon"
src="./assets/email-icon.png" alt="Ícone de e-mail"></a></li>
<li class="social-media">
<a target="_blank" href="https://www.instagram.com/cyberainfrc/">
<img class="small-icon" src="./assets/instagram-icon.png" alt="Ícone do Instagram">
</a>
</li>
<li class="social-media">
<a target="_blank" href="https://github.com/frc9611">
<img class="small-icon" src="./assets/github-icon.png" alt="Ícone do Github">
</a>
</li>
<li class="social-media">
<a target="_blank" href="https://www.thebluealliance.com/team/9611">
<img class="small-icon" src="./assets/tba-lamp.svg" alt="Ícone da The Blue Alliance">
</a>
</li>
<li class="social-media">
<a target="_blank" href="mailto:contact@9611.team">
<img class="small-icon" src="./assets/email-icon.png" alt="Ícone de e-mail">
</a>
</li>
</ul>
</section>
</div>
</footer>

<div id="backdrop">
<div id="dropdown-menu">
<span class="dropdown-menu-title">Menu</span>
<ul class="dropdown-menu-options">
<li><a class="dropdown-menu-option" href="./not-implemented.html">Home</a></li>
<li><a class="dropdown-menu-option" href="./not-implemented.html">Conheça-nos</a></li>
<li><a class="dropdown-menu-option" href="./not-implemented.html">Projetos</a></li>
<li><a class="dropdown-menu-option" href="./not-implemented.html">Newsletter</a></li>
<li><a class="dropdown-menu-option" href="./not-implemented.html">Patrocinadores</a></li>
<li><a class="dropdown-menu-option" href="./not-implemented.html">Contato</a></li>
</ul>
<button id="dropdown-menu-close-button">Fechar Menu</button>
</div>
</div>
</body>

</html>
34 changes: 34 additions & 0 deletions javascripts/components/mobile-dropdown-menu.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
const d = document;

/** @type {HTMLButtonElement} */
const dropdownOpenButton = d.querySelector("#open-dropdown-button");
/** @type {HTMLDivElement} */
const backdrop = d.querySelector("#backdrop");
/** @type {HTMLButtonElement} */
const dropdownCloseButton = d.querySelector("#dropdown-menu-close-button");
/** @type {HTMLImageElement} */
const dropdownOpenButtonIcon = d.querySelector(".dropdown-icon");
/** @type {HTMLDivElement} */
const dropdownMenu = d.querySelector("#dropdown-menu");
/** @type {HTMLAnchorElement[]} */
const dropdownMenuOptions = d.querySelectorAll(".dropdown-menu-option");

dropdownOpenButton.addEventListener("click", () => {
backdrop.style.display = "flex";
dropdownOpenButtonIcon.classList.add("dropdown-icon-open");
dropdownMenu.classList.add("dropdown-menu-open");
});

dropdownCloseButton.addEventListener("click", () => {
backdrop.style.display = "none";
dropdownOpenButtonIcon.classList.remove("dropdown-icon-open");
dropdownMenu.classList.remove("dropdown-menu-open");
});

dropdownMenuOptions.forEach((option) => {
option.addEventListener("click", () => {
backdrop.style.display = "none";
dropdownOpenButtonIcon.classList.remove("dropdown-icon-open");
dropdownMenu.classList.remove("dropdown-menu-open");
})
});
82 changes: 30 additions & 52 deletions not-implemented.html
Original file line number Diff line number Diff line change
@@ -1,63 +1,41 @@
<html>
<!DOCTYPE html>
<html lang="pt-br">

<head>
<title>CyberRain (9611.team)</title>
<style>
h1,
h4,
h5 {
text-decoration: bold;
font-family: sans-serif;
color: lime;
text-align: center;
font-size: 54px;
}

a#title {
color: lime;
text-decoration: underline;
}

h4 {
font-size: 38px;
}

h5 {
font-size: 24px;
text-align: center;
}

a#links {
font-size: 18px;
color: green;
text-align: center;
}

h1:hover,
h4:hover {
color: green;
}

body {
background-color: black;
}

span#center {
display: block;
text-align: center;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CyberRain - Not Implemented</title>
<link rel="stylesheet" href="./styles/global.def.css">
<link rel="stylesheet" href="./styles/not-implemented.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=Outfit:wght@100;300;600;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon">
</head>

<body>
<h1><a id="title" href="https://instagram.com/cyberainfrc">CyberRain FRC #9611 - 9611.team</a></h1>
<h1>
<span class="highlighted-text team-name">CyberRain</span>
FRC -
<span class="highlighted-text team-number">9611</span>
</h1>

<hr>
<h4>Essa parte está em construção! <br /> Novidades em breve! News soon!</h4>
<hr>

<h5>Links úteis: / Useful links:</h5>
<span id="center"><a id="links" href="https://www.thebluealliance.com/team/9611/2024"> - TheBlueAlliance</a></span>
<span id="center"><a id="links" href="https://www.instagram.com/cyberainfrc"> - Instagram</a></span>
<span id="center"><a id="links" href="mailto:cyberainfrc@gmail.com"> - Contato (Email)</a></span>
<span id="center"><a id="links" href="index.html">Voltar para o início</a></span>

<nav>
<ul>
<li><a class="links" href="https://www.thebluealliance.com/team/9611/2024">TheBlueAlliance</a></li>
<li><a class="links" href="https://www.instagram.com/cyberainfrc">Instagram</a></li>
<li><a class="links" href="mailto:contact@9611.team">Contato (Email)</a></li>
</ul>
<a class="back-to-start" href="index.html">Voltar para o início</a>
</nav>

<span id="code-501">501</span>
</body>

</html>
19 changes: 19 additions & 0 deletions styles/global.def.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* Desault CSS for the entire application */

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Outfit', sans-serif;
font-size: 4px;
}

/* Calibrations of default styles */

li {
list-style: none;
}

a {
text-decoration: none;
}
Loading

0 comments on commit 2456f80

Please sign in to comment.