GitHub - juletopi/Topicos_Especiais_em_Tecnologia: 🌐 • Repositório front-end com os conteúdos de Tópicos Especiais em Tecnologia, utilizando o VSCode e as linguagens de HTML, CSS e JavaScript como ferramentas de aprendizado.

Tópicos Especiais em Tecnologia 🌐

• Este é um repositório com os conteúdos de Tópicos Especiais em Tecnologia,
ministradas pelo professor Hailton César, utilizando a IDE VSCode e as linguagens de
HTML, CSS e JavaScript como ferramentas de aprendizado.

Sumário 🧾

Professor | Sobre o tópico | Conceitos Aprendidos 1

Conceitos Aprendidos 2 | Conceitos Aprendidos 3 | Avaliação 1

Conceitos Aprendidos 4 | Avaliação 2 | Autor

👨‍🏫 Professor:

Hailton César Alves dos Reis - Especializado em Educação da Matemática | Professor de Curso Superior
IFRO Campus Ji-Paraná • Atuando desde 2022
Linguagens & Tecnologias: VSCode • HTML • CSS • JavaScript • E outros...
Contato: Hailton César (Currículo Lattes)

🌟 Tópicos Especiais em Tecnologia

📋 Ementa:

🌐 Fundamentos de Sistemas Web:
Introdução aos princípios básicos que regem o funcionamento de sistemas web, incluindo arquitetura cliente-servidor, protocolos de comunicação como HTTP e HTTPS, e conceitos como URL e cookies.
📝 Linguagem de Marcação:
Estudo das linguagens utilizadas para estruturar e formatar conteúdo na web, como HTML (Hypertext Markup Language) e XML (Extensible Markup Language), que são essenciais para criar páginas web.
🎨 Folhas de Estilos em Cascata (CSS):
Abordagem de como o CSS (Cascading Style Sheets) é usado para estilizar o conteúdo HTML, controlando sua apresentação visual, como layout, cores, fontes e espaçamento.
🖥️ Conceito de Linguagem de Programação Web Front-end e Back-end:
Explicação sobre as diferenças entre as linguagens de programação utilizadas no desenvolvimento front-end (parte da aplicação web que interage diretamente com o usuário) e back-end (parte que lida com a lógica e o armazenamento de dados).
💾 Acesso e Interação de Página Web com Banco de Dados:
Introdução aos conceitos de como páginas web interagem com bancos de dados para armazenar e recuperar informações, utilizando tecnologias como SQL e APIs.
🔧 Conceito de Design Patterns na Programação Web:
Apresentação dos padrões de design comumente utilizados no desenvolvimento web para resolver problemas recorrentes, como MVC (Model-View-Controller) e REST (Representational State Transfer).
🚀 Desenvolvimento de Aplicações com Frameworks Front-end e Back-end:
Exploração de frameworks populares utilizados no desenvolvimento web, como Angular, React e Vue.js para front-end, e Node.js, Django e Flask para back-end, que facilitam o desenvolvimento de aplicações web.
🛠️ Versionamento no Desenvolvimento Web:
Explicação sobre o uso de sistemas de controle de versão, como Git, para gerenciar e controlar as mudanças no código fonte de um projeto web, permitindo colaboração entre desenvolvedores e controle de versões do código.
🔒 Princípios de Segurança de Sistemas Web:
Abordagem dos princípios e técnicas para garantir a segurança de aplicações web, incluindo criptografia, autenticação de usuários, controle de acesso e prevenção de ataques comuns, como XSS (Cross-Site Scripting) e SQL Injection.

🎯 Objetivo Geral:

Projetar e desenvolver páginas Web.

🎯 Objetivos Específicos:

Desenvolver algoritmos voltados para Web;
Desenvolver a capacidade de localizar e avaliar tecnologias atuais e emergentes para o desenvolvimento de aplicações para a Web;
Entender o funcionamento de servidores Web e como páginas e aplicações para a Web são servidas;
Compreender a organização e a interligação dos elementos que compõem uma página da Web.

Voltar para o início ↺

📚 Conceitos Aprendidos:

1. VSCode, HTML e Web-páginas

Note

Retirado da aula de "CodigoAula01"
Link de todas as aulas em PDF: Aulas de T.E.T em PDF

Nesta aula foram aprendidos:

Início do uso da IDE VSCode como ferramenta de aprendizado
Conceitos básicos sobre HTML
Criação do "esqueleto" de uma web-página

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Este é um título da página web</title>
</head>
<body>
    <!-- Títulos -->
    <h1>Este é um título de nível 1</h1>
    <h2>Este é um título de nível 2</h2>
    <h3>Este é um título de nível 3</h3>
    <h4>Este é um título de nível 4</h4>
    <h5>Este é um título de nível 5</h5>
    <h6>Este é um título de nível 6</h6>

    <!-- Parágrafos -->
    <p>Este é um parágrafo de texto simples.</p>

    <!-- Listas -->
    <h2>Listas</h2>
    <h3>Listas não ordenadas</h3>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <h3>Listas ordenadas</h3>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>

    <!-- Links -->
    <h2>Links</h2>
    <p>Visite a <a href="https://www.exemplo.com">página inicial</a>.</p>

    <!-- Imagens -->
    <h2>Imagens</h2>
    <img src="caminho/para/imagem.jpg" alt="Descrição da imagem" title="Mensagem que aparece ao manter o cursor do mouse emcima da imagem">

    <!-- Formulários -->
    <h2>Formulários</h2>
    <form action="/submit" method="post">
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="Enviar">
    </form>

    <!-- Tabelas -->
    <h2>Tabelas</h2>
    <table>
        <tr>
            <th>Nome</th>
            <th>Idade</th>
        </tr>
        <tr>
            <td>João</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Maria</td>
            <td>25</td>
        </tr>
    </table>

    <!-- Seções -->
    <h2>Seções</h2>
    <section>
        <h3>Seção 1</h3>
        <p>Conteúdo da seção 1...</p>
    </section>
    <section>
        <h3>Seção 2</h3>
        <p>Conteúdo da seção 2...</p>
    </section>

    <!-- Quebra de linha -->
    <br>
    
    <!-- Linha horizontal -->
    <hr>

    <!-- Quebra de linha -->
    <br>

    <!-- Estilos de texto -->
    <h2>Estilos de Texto</h2>
    <p><i>Texto em itálico</i></p>
    <p><b>Texto em negrito</b></p>
    <p><u>Texto sublinhado</u></p>
    <p><strong>Texto forte</strong></p>
    <p><small>Texto pequeno</small></p>
    <p><code>Código de programação</code></p>

    <!-- Rodapé -->
    <footer>
        <p>&copy; 2024 Aula 01 de Tópicos Especiais em Tecnologia. Todos os direitos reservados.</p>
    </footer>
</body>
</html>

🖼️ Imagem da página

Voltar para o início ↺

2. CSS e Estilização de Página

Note

Retirado da aula de "CodigoAula02"
Link de todas as aulas em PDF: Aulas de T.E.T em PDF
Link do repositório da atividade do dia 26/02: Pagina_de_Curriculo_Simples

Nesta aula foram aprendidos:

Conceitos de código em CSS
Estilização da página com CSS

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Este é um título da página web</title>
    <!-- "Linkando" o CSS com HTML -->
    <link rel="stylesheet" href="src/css/EstiloCSSAula02.css">
</head>
<body>
    <!-- Títulos -->
    <h1>Este é um título de nível 1</h1>
    <h2>Este é um título de nível 2</h2>
    <h3>Este é um título de nível 3</h3>
    <h4>Este é um título de nível 4</h4>
    <h5>Este é um título de nível 5</h5>
    <h6>Este é um título de nível 6</h6>

    <!-- "Container" com um parágrafo e uma imagem -->
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, felis at scelerisque tincidunt, nunc arcu volutpat augue, vitae tincidunt libero enim sit amet mi. Integer auctor ligula quis justo lacinia, a auctor elit vestibulum. Duis auctor auctor sapien, eu fermentum est pulvinar non. Vestibulum ut tortor id odio mollis cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <img src="src/images/textImage.png" width="120px" alt="Descrição da imagem" title="Mensagem que aparece ao manter o cursor do mouse encima da imagem">
    </div>

    <!-- Formulário -->
    <form action="/submit" method="post">
        <label for="nome"><br>Nome:</label>
        <input type="text" id="nome" name="nome"><br><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <input type="submit" value="Enviar">
    </form>

    <!-- Quebra de linha -->
    <br>
    
    <!-- Linha horizontal -->
    <hr>

    <!-- Quebra de linha -->
    <br>

    <!-- Rodapé -->
    <footer>
        <em>&copy; 2024 Aula 02 de Tópicos Especiais em Tecnologia. Todos os direitos reservados.</em>
    </footer>
</body>
</html>

CSS:

/* Estilizando o corpo da página */
body {
    background-color: #ccf892; /* Cor de fundo */
    font-family: "Helvetica Neue", sans-serif; /* Estilo de fonte da página */
    padding: 50px; 
}

/* Estilizando os títulos */
h1, h2, h3, h4, h5, h6 {
    text-align: center; /* Centraliza o texto */
    color: #9acd32; /* Cor dos títulos */
    background-color: #212B33; /* Cor de fundo */
    border: 2px solid #9acd32; /* Borda verde lima */
    border-radius: 5px; /* Borda arredondada */
    padding: 10px; /* Espaçamento interno */
    margin: 5px auto; /* Centraliza o título horizontalmente e define o espaçamento superior e inferior */
}

/* Estilizando o "cointainer" */
.container {
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    display: flex; /* Usa o modelo de layout flexível */
    flex-wrap: wrap; /* Permite que os itens sejam embrulhados para uma nova linha */
    flex-direction: row; /* Define a direção dos itens como linha */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    padding: 20px; /* Espaçamento interno */
    background-color: #212B33; /* Cor de fundo */
    color: #fff; /* Cor do texto */
    border: 2px solid #9acd32; /* Borda verde lima */
    border-radius: 5px; /* Borda arredondada */
    width: 90%; /* Largura do cointainer em relação à largura da tela */
    max-width: 600px; /* Largura máxima do container */
    height: auto; /* Altura do cointainer ajustada automaticamente */
    margin: 40px auto; /* Centraliza o container horizontalmente e define o espaçamento superior e inferior */
}

/* Estilizando o parágrafo dentro do container */
.container p {
    flex: 1; /* Ocupa todo o espaço disponível */
    margin-right: 10px; /* Espaçamento entre o texto e a imagem */
}

/* Estilizando a imagem dentro do container */
.container img {
    flex-shrink: 0; /* Não encolhe a imagem quando não há espaço suficiente */
    max-width: 30%; /* Define a largura máxima da imagem */
    margin-top: 10px; /* Espaçamento acima da imagem */
}

/* Estilizando o formulário */
form {
    background-color: #f8ffef; /* Cor de fundo */
    border: 3px solid #9acd32; /* Borda verde lima */
    padding: 20px; /* Espaçamento interno */
    border-radius: 5px; /* Borda arredondada */
    width: 250px; /* Largura do formulário */
    height: 230px; /* Altura do formulário */
    margin: 40px auto; /* Centraliza o formulário horizontalmente e define o espaçamento superior e inferior */
}

/* Estilizando o botão de envio do formulário */
input[type="submit"] {
    background-color: #9acd32; /* Cor de fundo */
    color: #fff; /* Cor do texto */
    font-weight: bold; /* Texto em negrito */
    padding: 15px 25px; /* Espaçamento interno */
    border: none; /* Sem borda */
    border-radius: 0px; /* Borda não arredondada */
    cursor: pointer; /* Cursor de apontar */
    display: block; /* Faz o botão ocupar toda a largura do container */
    margin-left: auto; /* Alinha o botão à direita */
    margin-right: auto; /* Alinha o botão à esquerda */
    margin-top: 60px; /* Espaçamento superior */
}

/* Estilizando o rodapé */
footer {
    text-align: center; /* Centraliza o texto */
    padding: 10px 0; /* Espaçamento interno */
    color: #212B33; /* Cor do texto branca */
    width: 100%; /* Largura total */
    bottom: 0; /* Alinha o footer à parte inferior da tela */
}

/* Estilizando a cor de fundo da barra de rolagem */
::-webkit-scrollbar {
    background-color: #ccf892; /* Cor de fundo */
    width: 10px;
	height: 8px;
}

/* Estilizando a cor da "thumb" (o indicador de posição) da barra de rolagem */
::-webkit-scrollbar-thumb {
    background-color: #9acd32; /* Cor da thumb */
    border-radius: 8px; /* Borda arredondada */
}

🖼️ Imagem da página

Voltar para o início ↺

3. Trabalhando com tabelas em HTML

Note

Retirado da aula de "CodigoAula03"
Link de todas as aulas em PDF: Aulas de T.E.T em PDF
Link do repositório do desafio do dia 04/03: Desafio_Pagina_Musical

Nesta aula foram aprendidos:

Diferentes conceitos de criação de tabelas em HTML

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desenvolvendo tabelas em HTML</title>
    <link rel="stylesheet" href="src/css/style.css">
    <link rel="stylesheet" href="src/css/scrollbar.css">
    <link rel="shortcut icon" href="src/images/tableIcon.ico" type="image/x-icon" />
</head>
<body>
    <header class="header">
        <img src="src/images/tableImage.png" alt="tableImage-pic">
    <h2>Tabelas em HTML</h2>
    <p>Trabalhando com tabelas em HTML.</p>
    </header>

    <br>
    <hr>
    <br>

    <!-- Primeira tabela -->
    <section class="table1">
        <h3>Primeira Tabela | Tabela simples</h3>
        <table border="1">
            <tr>
                <td>Nome</td>
                <td>Idade</td>
                <td>Profissão</td>
            </tr>
            <tr>
                <td>Elias</td>
                <td>22</td>
                <td>Dev Front-end</td>
            </tr>
            <tr>
                <td>Amanda</td>
                <td>21</td>
                <td>Dev Back-end</td>
            </tr>
            <tr>
                <td>Maxwell</td>
                <td>19</td>
                <td>Dev Fullsatck</td>
            </tr>
        </table>
        <p><strong>Sobre a tabela:</strong> É uma tabela simples com bordas, mostrando informações de nome, idade e profissão de diferentes pessoas.</p>
    </section>

    <br>
    <hr>
    <br>

    <!-- Segunda tabela -->
    <section class="table2">
        <h3>Segunda Tabela | Célula de título da tabela HTML</h3>
        <table border="1">
            <tr>
                <th>Nome</th>
                <th>Idade</th>
                <th>Profissão</th>
            </tr>
            <tr>
                <td>Túlio</td>
                <td>24</td>
                <td>Analista</td>
            </tr>
            <tr>
                <td>Marco</td>
                <td>26</td>
                <td>Designer</td>
            </tr>
        </table>
        <p><strong>Sobre a tabela:</strong> Similar à primeira, mas usa &lt;th&gt; para os títulos das colunas, o que é semanticamente correto para cabeçalhos de tabela.</p>
    </section>

    <br>
    <hr>
    <br>

    <!-- Terceira tabela -->
    <section class="table3">
        <h3>Terceira Tabela | Tabelas verticais</h3>
        <table border="1">
            <tr>
                <th>Nome:</th>
                <td>Tobias</td>
            </tr>
            <tr>
                <th>Idade:</th>
                <td>27</td>
            </tr>
         </table>
        <p><strong>Sobre a tabela:</strong> Demonstra o uso do &lt;th&gt para títulos verticais, ou seja, na primeira coluna.</p>
    </section>

    <br>
    <hr>
    <br>

    <!-- Quarta tabela -->
    <section class="table4">
        <h3>Quarta Tabela | Tags estruturais da tabela</h3>
        <table border="1">
            <thead>
            <tr>
                <th>Título 1</th>
                <th>Título 2</th>
                <th>Título 3</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Body 1 - Linha 1</td>
                <td>Body 2 - Linha 1</td>
                <td>Body 3 - Linha 1</td>
            </tr>
            <tr>
                <td>Body 1 - Linha 2</td>
                <td>Body 2 - Linha 2</td>
                <td>Body 3 - Linha 2</td>
            </tr>
            </tbody>
            <tfoot>
                <td>Foot 1</td>
                <td>Foot 2</td>
                <td>Foot 3</td>
            </tfoot>
         </table>
        <p><strong>Sobre a tabela:</strong> Demonstra o uso correto das tags &lt;thead&gt;, &lt;tbody&gt; e &lt;tfoot&gt; para organizar o conteúdo da tabela em cabeçalho, corpo e rodapé.</p>
    </section>

    <br>
    <hr>
    <br>

    <!-- Quinta tabela -->
    <section class="table5">
        <h3>Quinta Tabela | Criando células vazias</h3>
        <table border="1">
            <tr>
                <th>&nbsp;</th>
                <th>Valor</th>
            </tr>
            <tr>
                <td>Item 1</td>
                <td>R$10,00</td>
            </tr>
            <tr>
                <td>Item 2</td>
                <td>R$20,00</td>
            </tr>
        </table>
        <p><strong>Sobre a tabela:</strong> Mostra como criar células vazias em uma tabela, usando &amp;nbsp; (espaço em branco não quebrável) para representar uma célula sem conteúdo.</p>
    </section>

    <br>
    <hr>
    <br>

    <!-- Sexta tabela -->
    <section class="table6">
        <h3>Sexta Tabela | Células que abrangem mais que uma linha/coluna</h3>
        <!-- Primeiro, utilizando o colspan: -->
        <table border="1">
            <tr>
                <th>Nome</th>
                <th colspan="2">Telefones</th>
            </tr>
            <tr>
                <td>Jeferson</td>
                <td>8888-8888</td>
                <td>9999-9999</td>
            </tr>
            <tr>
                <td>Junior</td>
                <td>1111-1111</td>
                <td>2222-2222</td>
            </tr>
        </table>
        <!-- Depois, utilizando o rowspan: -->
        <table border="1">
            <tr>
              <th>Primeiro Nome:</th>
              <td>Carlos</td>
            </tr>
            <tr>
              <th rowspan="2">Telefone:</th>
              <td>8888-8888</td>
            </tr>
            <tr>
              <td>9999-9999</td>
            </tr>
        </table>
        <p><strong>Sobre a tabela:</strong> Introduz o uso de "colspan" e "rowspan" para células que ocupam mais de uma coluna ou linha, respectivamente.</p>
    </section>

    <br>
    <hr>
    <br>

    <!-- Sétima tabela -->
    <section class="table7">
        <h3>Sétima Tabela | Título da tabela</h3>
        <table border="1">
            <caption>Exemplo de Título</caption>
            <tr>
                <th>Nome</th>
                <th>Sobrenome</th>
            </tr>
            <tr>
                <td>Irineu</td>
                <td>Você não sabe nem eu</td>
            </tr>
            <tr>
                <td>Maaarco</td>
                <td>Pooolo</td>
            </tr>
        </table>
        <p><strong>Sobre a tabela:</strong> Apresenta o uso da tag &lt;caption&gt; para adicionar um título à tabela.</p>
    </section>

    <br>
    <hr>
    <br>

    <!-- Oitava tabela -->
    <section class="table8">
        <h3>Oitava Tabela | Utilizando o colgroup e col</h3>
        <table border="1">
            <colgroup>
              <col span="2" style="background-color:rgb(146, 184, 240)">
              <col style="background-color:rgb(52, 104, 247)">
            </colgroup>
            <tr>
              <th>Nome</th>
              <th>Idade</th>
              <th>Profissão</th>
            </tr>
            <tr>
              <td>Breno</td>
              <td>17</td>
              <td>Estudante</td>
            </tr>
            <tr>
              <td>Geisiane</td>
              <td>15</td>
              <td>Estudante</td>
            </tr>
          </table>
        <p><strong>Sobre a tabela:</strong> Demonstra como usar &lt;colgroup&gt; e &lt;col&gt; para aplicar estilos em colunas específicas da tabela, separadamente do conteúdo das células.</p>
    </section>

    <!-- Rodapé -->
    <footer class="footer">
        <p>&copy; 2024 Aula 03 de Tópicos Especiais em Tecnologia. Todos os direitos reservados. | Feito com 💙 por <a href="https://www.linkedin.com/in/julio-cezar-pereira-camargo/">Juletopi</a>.</p>
    </footer>
</body>
</html>

CSS:

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: #e9edf0;
}

.header {
    text-align: center;
}

.header img {
    width: 100%;
    max-width: 200px;
    margin: 20px 5px;
}

.header h2 {
    color: #2773ff;
    text-align: center;
    font-size: 40px;
    line-height: 1.0;
    letter-spacing: -3px;
    line-height: 0.1
}

.header p {
    color: #0e0e0e;
    padding-bottom: 10px;
    text-align: center;
    font-size: 17px;
    line-height: 0.9;
}

.table1, .table2, .table3, .table4, .table5, .table6, .table7, .table8 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 17px;
}

.table1, .table2, .table3, .table4, .table5, .table6, .table7, .table8 h3 {
    color: #0e0e0e;
    font-size: 20px;
}

.table1, .table2, .table3, .table4, .table5, .table6, .table7, .table8 p {
    color: #0e0e0e;
    font-size: 17px;
}

.table8 p {
    padding-bottom: 80px;
}

.footer {
    background-color: #0e0e0e;
    color: #c5c5c5;
}

.footer p {
    padding-bottom: 30px;
    padding-top: 30px;
    text-align: center;
    font-size: 12px;
}

.footer a {
    color: #2773ff;
}

::-webkit-scrollbar {
    background-color: #d9dee2;
    width: 10px;
	height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #387eff;
    border-radius: 8px;
}

🖼️ Imagem da página

Voltar para o início ↺

AVALIAÇÃO 01 - HTML e CSS

Note

Retirado da aula de "CodigoAvaliacao01"
Link de todas as aulas em PDF: Aulas de T.E.T em PDF

Durante a avaliação 01 da disciplina, fora requerido a construção de uma página seguindo as seguintes orientações:

a) Na aba do navegador o título "1º Avaliação da Disciplina HTML5 + CSS" (utilize entities ou a tag correta para o símbolo "º" em "1º")
b) Metadados: "description", o que faz a página HTML; "author", o seu nome completo; "keywords", 4 ou mais palavras-chaves para os buscadores.
c) Para o corpo do documento, localize um site de seu interesse de onde você extrairá:
- I. Um título principal para sua página;
- II. Crie pelo menos 2 subtítulos;
- III. Copie e cole do site dois trechos, com pelo menos 3 linhas, uma para cada subtítulo inserido no seu doc;
- IV. Insira esses textos como blocos de citação e forneça o endereço de onde foram extraídos;
d) Insira uma tabela de exemplo que contenha 4 linhas e 5 colunas, sendo que a primeira linha deve ser definida como cabeçalho da tabela.
e) Utilize Index.html e Estilo.css como nome dos arquivos.

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Página-web feita para avaliação da disciplina de Tópicos Especiais em Tecnologia">
    <meta name="author" content="Júlio Cézar Pereira Camargo, a.k.a 'Juletopi'">
    <meta name="keywords" content="HTML, CSS, HTML5, CSS3, pagina web, web design, desenvolvimento web">
    <title>1&ordm; Avaliação da Disciplina | HTML5 + CSS3</title>
    <link rel="stylesheet" href="src/css/reset.css">
    <link rel="stylesheet" href="src/css/fonts.css">
    <link rel="stylesheet" href="src/css/style.css">
    <link rel="stylesheet" href="src/css/pseudoElementStyles.css">
    <link rel="stylesheet" href="src/css/animation.css">
    <link rel="shortcut icon" href="src/images/yellowCyberpunkIcon.ico" type="image/x-icon" />
</head>
<body>
    <!-- Overlay acima da imagem de fundo da página -->
    <div class="overlay"></div>

    <!-- Seção do cabeçalho com o título" -->
    <header class="title">
        <h1>Cyberpunk <br> Edgerunners</h1>
        <hr>
        <h2>A trilha sonora do anime</h2>
    </header>

    <!-- Seção com um pqueno texto informativo após a seção do título" -->
    <p class="more-info">O anime de "Cyberpunk Edgerunners", baseado no jogo Cyberpunk 2077 produzido pela CD Projekt Red, é um anime que conta com uma trilha sonora marcante e com diversos produtores. Escolhi falar sobre duas das mais conhecidas músicas que apareceram no anime. Veja-as abaixo.</p>

    <!-- Seta animada abaixo da seção "mais abaixo..." -->
    <div class="arrow"></div>

    <!-- Seção da primeira música" -->
    <section class="music1">
        <img src="src/images/music1Image.jpeg" alt="IReallyWantToStayAtYourHouse">
        <div class="text-container">
            <h2>I Really Want to Stay at Your House</h2>
            <sub>por Rosa Walton</sub>
            <!-- Conjunto de ícones SVG -->
            <div class="social-icons">
                <a href="https://youtu.be/gzbLODUb1sA?si=Xtzy8tMvWevqElrJ" target="_blank" title="Youtube">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M44.89844,14.5c-0.39844,-2.19922 -2.29687,-3.80078 -4.5,-4.30078c-3.29687,-0.69922 -9.39844,-1.19922 -16,-1.19922c-6.59766,0 -12.79687,0.5 -16.09766,1.19922c-2.19922,0.5 -4.10156,2 -4.5,4.30078c-0.40234,2.5 -0.80078,6 -0.80078,10.5c0,4.5 0.39844,8 0.89844,10.5c0.40234,2.19922 2.30078,3.80078 4.5,4.30078c3.5,0.69922 9.5,1.19922 16.10156,1.19922c6.60156,0 12.60156,-0.5 16.10156,-1.19922c2.19922,-0.5 4.09766,-2 4.5,-4.30078c0.39844,-2.5 0.89844,-6.10156 1,-10.5c-0.20312,-4.5 -0.70312,-8 -1.20312,-10.5zM19,32v-14l12.19922,7z"></path></g></g></svg>
                </a>
                <a href="https://open.spotify.com/intl-pt/track/7mykoq6R3BArsSpNDjFQTm" target="_blank" title="Spotify">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25.009,1.982c-12.687,0 -23.009,10.322 -23.009,23.009c0,12.687 10.322,23.009 23.009,23.009c12.687,0 23.009,-10.321 23.009,-23.009c0,-12.688 -10.322,-23.009 -23.009,-23.009zM34.748,35.333c-0.289,0.434 -0.765,0.668 -1.25,0.668c-0.286,0 -0.575,-0.081 -0.831,-0.252c-2.473,-1.649 -6.667,-2.749 -10.167,-2.748c-3.714,0.002 -6.498,0.914 -6.526,0.923c-0.784,0.266 -1.635,-0.162 -1.897,-0.948c-0.262,-0.786 0.163,-1.636 0.949,-1.897c0.132,-0.044 3.279,-1.075 7.474,-1.077c3.5,-0.002 8.368,0.942 11.832,3.251c0.69,0.46 0.876,1.391 0.416,2.08zM37.74,29.193c-0.325,0.522 -0.886,0.809 -1.459,0.809c-0.31,0 -0.624,-0.083 -0.906,-0.26c-4.484,-2.794 -9.092,-3.385 -13.062,-3.35c-4.482,0.04 -8.066,0.895 -8.127,0.913c-0.907,0.258 -1.861,-0.272 -2.12,-1.183c-0.259,-0.913 0.272,-1.862 1.184,-2.12c0.277,-0.079 3.854,-0.959 8.751,-1c4.465,-0.037 10.029,0.61 15.191,3.826c0.803,0.5 1.05,1.56 0.548,2.365zM40.725,22.013c-0.373,0.634 -1.041,0.987 -1.727,0.987c-0.344,0 -0.692,-0.089 -1.011,-0.275c-5.226,-3.068 -11.58,-3.719 -15.99,-3.725c-0.021,0 -0.042,0 -0.063,0c-5.333,0 -9.44,0.938 -9.481,0.948c-1.078,0.247 -2.151,-0.419 -2.401,-1.495c-0.25,-1.075 0.417,-2.149 1.492,-2.4c0.185,-0.043 4.573,-1.053 10.39,-1.053c0.023,0 0.046,0 0.069,0c4.905,0.007 12.011,0.753 18.01,4.275c0.952,0.56 1.271,1.786 0.712,2.738z"></path></g></g></svg>
                </a>
                <a href="https://www.deezer.com/track/1144909952" target="_blank" title="Deezer">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M39,14v2h8v-2zM21,17v2h8v-2zM39,17v2h8v-2zM21,20v2h8v-2zM39,20v2h8v-2zM3,23v2h8v-2zM21,23v2h8v-2zM30,23v2h8v-2zM39,23v2h8v-2zM3,26v2h8v-2zM21,26v2h8v-2zM30,26v2h8v-2zM39,26v2h8v-2zM3,29v2h8v-2zM12,29v2h8v-2zM21,29v2h8v-2zM30,29v2h8v-2zM39,29v2h8v-2zM3,32v2h8v-2zM12,32v2h8v-2zM21,32v2h8v-2zM30,32v2h8v-2zM39,32v2h8v-2zM3,35v2h8v-2zM12,35v2h8v-2zM21,35v2h8v-2zM30,35v2h8v-2zM39,35v2h8v-2z"></path></g></g></svg>
                </a>
                <a href="https://music.amazon.com/albums/B0BJK5QZW8" target="_blank" title="Amazon Music">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M36,5h-22c-4.971,0 -9,4.029 -9,9v22c0,4.971 4.029,9 9,9h22c4.971,0 9,-4.029 9,-9v-22c0,-4.971 -4.029,-9 -9,-9zM38.19,21.254c0.65,-0.279 1.42,-0.317 2.07,-0.121c0.27,0.084 0.51,0.196 0.74,0.335v1.23c-0.72,-0.494 -1.55,-0.634 -2.19,-0.289c-0.68,0.373 -1.08,1.155 -1.06,1.975c-0.01,0.904 0.29,1.742 0.92,2.133c0.56,0.382 1.44,0.382 2.33,0.242v1.025c-0.35,0.112 -0.72,0.177 -1.1,0.214c-0.63,0.047 -1.33,-0.047 -1.95,-0.382c-0.63,-0.326 -1.09,-0.894 -1.35,-1.463c-0.25,-0.587 -0.34,-1.183 -0.35,-1.752c-0.03,-1.21 0.62,-2.57 1.94,-3.147zM34,18.01c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1c-0.552,0 -1,-0.448 -1,-1c0,-0.552 0.448,-1 1,-1zM34.75,21.01v7h-1.5v-7zM27,26.175c0.64,0.261 1.42,0.532 2.03,0.59c0.61,0.068 1.28,-0.01 1.67,-0.223c0.19,-0.116 0.23,-0.278 0.23,-0.458c0,-0.18 -0.036,-0.282 -0.123,-0.417c-0.159,-0.246 -0.597,-0.432 -1.287,-0.597c-0.34,-0.097 -0.71,-0.194 -1.12,-0.416c-0.41,-0.184 -1.243,-0.852 -1.081,-1.991c0.087,-0.609 0.718,-1.205 1.601,-1.483c1.029,-0.325 2.15,-0.164 3.08,0.281v1.239c-0.83,-0.426 -1.82,-0.641 -2.66,-0.361c-0.25,0.077 -0.58,0.251 -0.58,0.564c0,0.751 0.87,0.893 1.2,1c0.34,0.106 0.71,0.203 1.11,0.406c0.4,0.194 1.202,0.678 1.202,1.783c0,1.058 -0.522,1.447 -0.952,1.621c-0.89,0.387 -1.68,0.319 -2.45,0.213c-0.65,-0.116 -1.28,-0.31 -1.87,-0.677zM20.25,21.012l1.5,-0.002l0.003,2.42c0.014,0.79 0.012,1.651 0.003,2.383c-0.035,0.391 0.402,0.847 0.976,0.917c0.306,0.034 0.534,0.009 0.886,-0.14c0.208,-0.082 0.42,-0.152 0.632,-0.225v-5.355l1.5,0.001v6.818h-1.5v-0.236c-0.041,0.022 -0.08,0.046 -0.12,0.067c-0.381,0.228 -0.992,0.386 -1.514,0.343c-0.542,-0.035 -1.088,-0.225 -1.533,-0.586c-0.442,-0.356 -0.776,-0.915 -0.819,-1.529c-0.027,-0.88 -0.02,-1.634 -0.011,-2.457zM9.25,21.01h1.5v0.688c0.37,-0.134 0.737,-0.274 1.109,-0.401c0.535,-0.19 1.206,-0.152 1.733,0.141c0.218,0.117 0.409,0.282 0.577,0.469c0.562,-0.208 1.123,-0.417 1.689,-0.611c0.535,-0.19 1.206,-0.152 1.733,0.141c0.532,0.286 0.946,0.809 1.093,1.418c0.039,0.152 0.056,0.306 0.065,0.461l0.004,0.317l0.006,0.625l-0.006,1.25l-0.003,2.5h-1.5l-0.006,-4.844c-0.042,-0.425 -0.519,-0.797 -1.019,-0.661c-0.51,0.135 -1.024,0.255 -1.537,0.379c0.034,0.143 0.052,0.287 0.061,0.433l0.004,0.317l0.006,0.625l-0.006,1.25l-0.003,2.5h-1.5l-0.006,-4.844c-0.042,-0.426 -0.519,-0.797 -1.019,-0.661c-0.489,0.13 -0.983,0.245 -1.475,0.364v5.14h-1.5c0,0 0,-6.996 0,-6.996zM38.768,33.932c-2.214,1.57 -4.688,2.605 -7.285,3.277c-2.595,0.663 -5.297,0.914 -7.986,0.729c-2.688,-0.18 -5.313,-0.836 -7.787,-1.794c-2.466,-0.99 -4.797,-2.263 -6.857,-3.931c-0.107,-0.087 -0.124,-0.245 -0.037,-0.352c0.077,-0.095 0.209,-0.119 0.313,-0.063l0.014,0.008c2.249,1.217 4.653,2.149 7.067,2.889c2.433,0.692 4.909,1.187 7.4,1.288c2.485,0.087 4.997,-0.107 7.449,-0.617c2.442,-0.504 4.905,-1.236 7.17,-2.279l0.039,-0.018c0.251,-0.115 0.547,-0.006 0.663,0.245c0.104,0.223 0.03,0.482 -0.163,0.618zM39.882,36.892c-0.278,0.21 -0.556,0.14 -0.417,-0.21c0.417,-1.12 1.32,-3.501 0.903,-4.061c-0.486,-0.63 -2.987,-0.28 -4.098,-0.14c-0.347,0 -0.347,-0.28 -0.069,-0.49c0.972,-0.7 2.292,-0.98 3.404,-0.98c1.111,0 2.084,0.21 2.292,0.56c0.346,0.419 -0.14,3.71 -2.015,5.321z"></path></g></g></g></svg>
                </a>
            </div>
            <!-- Botão abaixo do conjunto de ícones SVG -->
            <div class="button-container">
                <a href="https://youtu.be/KvMY1uzSC1E?si=DlHnwhDKgWePwBbh" target="_blank"><button class="transparent-button">Ver o clipe da música</button></a>
            </div>
            <p>A música 'I Really Want To Stay At Your House', interpretada por Rosa Walton e com a participação de Hallie Coggins, é uma expressão lírica que navega pelas águas turbulentas de um relacionamento complexo. A letra revela uma luta interna entre o desejo de permanecer próxima a alguém e o reconhecimento da dor que essa relação causa. A narrativa começa com a imagem de alguém esperando por outro que, ao invés de cumprir expectativas, deixa apenas um vazio simbolizado por armários vazios. A menção a 'ler nas entrelinhas' sugere uma comunicação indireta e talvez enganosa entre os envolvidos.</p>
            <cite><a href="https://www.letras.mus.br/rosa-walton/i-really-want-to-stay-at-your-house/significado.html">Fonte retirada do site www.letras.mus.br</a></cite>
        </div>
    </section>

    <!-- Seção da segunda música" -->
    <section class="music2">
        <img src="src/images/music2Image.jpeg" alt="ThisFFFire">
        <div class="text-container">
            <h2>This fffire</h2>
            <sub>por Franz Ferdinand</sub>
            <!-- Conjunto de ícones SVG -->
            <div class="social-icons">
                <a href="https://youtu.be/DkWML41wUCo?si=C8skzxYJklTXbvln" target="_blank" title="Youtube">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M44.89844,14.5c-0.39844,-2.19922 -2.29687,-3.80078 -4.5,-4.30078c-3.29687,-0.69922 -9.39844,-1.19922 -16,-1.19922c-6.59766,0 -12.79687,0.5 -16.09766,1.19922c-2.19922,0.5 -4.10156,2 -4.5,4.30078c-0.40234,2.5 -0.80078,6 -0.80078,10.5c0,4.5 0.39844,8 0.89844,10.5c0.40234,2.19922 2.30078,3.80078 4.5,4.30078c3.5,0.69922 9.5,1.19922 16.10156,1.19922c6.60156,0 12.60156,-0.5 16.10156,-1.19922c2.19922,-0.5 4.09766,-2 4.5,-4.30078c0.39844,-2.5 0.89844,-6.10156 1,-10.5c-0.20312,-4.5 -0.70312,-8 -1.20312,-10.5zM19,32v-14l12.19922,7z"></path></g></g></svg>
                </a>
                <a href="https://open.spotify.com/intl-pt/track/46gSk82duJtX3TTA182ruG" target="_blank" title="Spotify">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25.009,1.982c-12.687,0 -23.009,10.322 -23.009,23.009c0,12.687 10.322,23.009 23.009,23.009c12.687,0 23.009,-10.321 23.009,-23.009c0,-12.688 -10.322,-23.009 -23.009,-23.009zM34.748,35.333c-0.289,0.434 -0.765,0.668 -1.25,0.668c-0.286,0 -0.575,-0.081 -0.831,-0.252c-2.473,-1.649 -6.667,-2.749 -10.167,-2.748c-3.714,0.002 -6.498,0.914 -6.526,0.923c-0.784,0.266 -1.635,-0.162 -1.897,-0.948c-0.262,-0.786 0.163,-1.636 0.949,-1.897c0.132,-0.044 3.279,-1.075 7.474,-1.077c3.5,-0.002 8.368,0.942 11.832,3.251c0.69,0.46 0.876,1.391 0.416,2.08zM37.74,29.193c-0.325,0.522 -0.886,0.809 -1.459,0.809c-0.31,0 -0.624,-0.083 -0.906,-0.26c-4.484,-2.794 -9.092,-3.385 -13.062,-3.35c-4.482,0.04 -8.066,0.895 -8.127,0.913c-0.907,0.258 -1.861,-0.272 -2.12,-1.183c-0.259,-0.913 0.272,-1.862 1.184,-2.12c0.277,-0.079 3.854,-0.959 8.751,-1c4.465,-0.037 10.029,0.61 15.191,3.826c0.803,0.5 1.05,1.56 0.548,2.365zM40.725,22.013c-0.373,0.634 -1.041,0.987 -1.727,0.987c-0.344,0 -0.692,-0.089 -1.011,-0.275c-5.226,-3.068 -11.58,-3.719 -15.99,-3.725c-0.021,0 -0.042,0 -0.063,0c-5.333,0 -9.44,0.938 -9.481,0.948c-1.078,0.247 -2.151,-0.419 -2.401,-1.495c-0.25,-1.075 0.417,-2.149 1.492,-2.4c0.185,-0.043 4.573,-1.053 10.39,-1.053c0.023,0 0.046,0 0.069,0c4.905,0.007 12.011,0.753 18.01,4.275c0.952,0.56 1.271,1.786 0.712,2.738z"></path></g></g></svg>
                </a>
                <a href="https://www.deezer.com/track/4642375" target="_blank" title="Deezer">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M39,14v2h8v-2zM21,17v2h8v-2zM39,17v2h8v-2zM21,20v2h8v-2zM39,20v2h8v-2zM3,23v2h8v-2zM21,23v2h8v-2zM30,23v2h8v-2zM39,23v2h8v-2zM3,26v2h8v-2zM21,26v2h8v-2zM30,26v2h8v-2zM39,26v2h8v-2zM3,29v2h8v-2zM12,29v2h8v-2zM21,29v2h8v-2zM30,29v2h8v-2zM39,29v2h8v-2zM3,32v2h8v-2zM12,32v2h8v-2zM21,32v2h8v-2zM30,32v2h8v-2zM39,32v2h8v-2zM3,35v2h8v-2zM12,35v2h8v-2zM21,35v2h8v-2zM30,35v2h8v-2zM39,35v2h8v-2z"></path></g></g></svg>
                </a>
                <a href="https://music.amazon.com/albums/B08V4QGLF5" target="_blank" title="Amazon Music">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="fill:#000000;"><g transform="translate(-15.36,-15.36) scale(1.12,1.12)"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M36,5h-22c-4.971,0 -9,4.029 -9,9v22c0,4.971 4.029,9 9,9h22c4.971,0 9,-4.029 9,-9v-22c0,-4.971 -4.029,-9 -9,-9zM38.19,21.254c0.65,-0.279 1.42,-0.317 2.07,-0.121c0.27,0.084 0.51,0.196 0.74,0.335v1.23c-0.72,-0.494 -1.55,-0.634 -2.19,-0.289c-0.68,0.373 -1.08,1.155 -1.06,1.975c-0.01,0.904 0.29,1.742 0.92,2.133c0.56,0.382 1.44,0.382 2.33,0.242v1.025c-0.35,0.112 -0.72,0.177 -1.1,0.214c-0.63,0.047 -1.33,-0.047 -1.95,-0.382c-0.63,-0.326 -1.09,-0.894 -1.35,-1.463c-0.25,-0.587 -0.34,-1.183 -0.35,-1.752c-0.03,-1.21 0.62,-2.57 1.94,-3.147zM34,18.01c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1c-0.552,0 -1,-0.448 -1,-1c0,-0.552 0.448,-1 1,-1zM34.75,21.01v7h-1.5v-7zM27,26.175c0.64,0.261 1.42,0.532 2.03,0.59c0.61,0.068 1.28,-0.01 1.67,-0.223c0.19,-0.116 0.23,-0.278 0.23,-0.458c0,-0.18 -0.036,-0.282 -0.123,-0.417c-0.159,-0.246 -0.597,-0.432 -1.287,-0.597c-0.34,-0.097 -0.71,-0.194 -1.12,-0.416c-0.41,-0.184 -1.243,-0.852 -1.081,-1.991c0.087,-0.609 0.718,-1.205 1.601,-1.483c1.029,-0.325 2.15,-0.164 3.08,0.281v1.239c-0.83,-0.426 -1.82,-0.641 -2.66,-0.361c-0.25,0.077 -0.58,0.251 -0.58,0.564c0,0.751 0.87,0.893 1.2,1c0.34,0.106 0.71,0.203 1.11,0.406c0.4,0.194 1.202,0.678 1.202,1.783c0,1.058 -0.522,1.447 -0.952,1.621c-0.89,0.387 -1.68,0.319 -2.45,0.213c-0.65,-0.116 -1.28,-0.31 -1.87,-0.677zM20.25,21.012l1.5,-0.002l0.003,2.42c0.014,0.79 0.012,1.651 0.003,2.383c-0.035,0.391 0.402,0.847 0.976,0.917c0.306,0.034 0.534,0.009 0.886,-0.14c0.208,-0.082 0.42,-0.152 0.632,-0.225v-5.355l1.5,0.001v6.818h-1.5v-0.236c-0.041,0.022 -0.08,0.046 -0.12,0.067c-0.381,0.228 -0.992,0.386 -1.514,0.343c-0.542,-0.035 -1.088,-0.225 -1.533,-0.586c-0.442,-0.356 -0.776,-0.915 -0.819,-1.529c-0.027,-0.88 -0.02,-1.634 -0.011,-2.457zM9.25,21.01h1.5v0.688c0.37,-0.134 0.737,-0.274 1.109,-0.401c0.535,-0.19 1.206,-0.152 1.733,0.141c0.218,0.117 0.409,0.282 0.577,0.469c0.562,-0.208 1.123,-0.417 1.689,-0.611c0.535,-0.19 1.206,-0.152 1.733,0.141c0.532,0.286 0.946,0.809 1.093,1.418c0.039,0.152 0.056,0.306 0.065,0.461l0.004,0.317l0.006,0.625l-0.006,1.25l-0.003,2.5h-1.5l-0.006,-4.844c-0.042,-0.425 -0.519,-0.797 -1.019,-0.661c-0.51,0.135 -1.024,0.255 -1.537,0.379c0.034,0.143 0.052,0.287 0.061,0.433l0.004,0.317l0.006,0.625l-0.006,1.25l-0.003,2.5h-1.5l-0.006,-4.844c-0.042,-0.426 -0.519,-0.797 -1.019,-0.661c-0.489,0.13 -0.983,0.245 -1.475,0.364v5.14h-1.5c0,0 0,-6.996 0,-6.996zM38.768,33.932c-2.214,1.57 -4.688,2.605 -7.285,3.277c-2.595,0.663 -5.297,0.914 -7.986,0.729c-2.688,-0.18 -5.313,-0.836 -7.787,-1.794c-2.466,-0.99 -4.797,-2.263 -6.857,-3.931c-0.107,-0.087 -0.124,-0.245 -0.037,-0.352c0.077,-0.095 0.209,-0.119 0.313,-0.063l0.014,0.008c2.249,1.217 4.653,2.149 7.067,2.889c2.433,0.692 4.909,1.187 7.4,1.288c2.485,0.087 4.997,-0.107 7.449,-0.617c2.442,-0.504 4.905,-1.236 7.17,-2.279l0.039,-0.018c0.251,-0.115 0.547,-0.006 0.663,0.245c0.104,0.223 0.03,0.482 -0.163,0.618zM39.882,36.892c-0.278,0.21 -0.556,0.14 -0.417,-0.21c0.417,-1.12 1.32,-3.501 0.903,-4.061c-0.486,-0.63 -2.987,-0.28 -4.098,-0.14c-0.347,0 -0.347,-0.28 -0.069,-0.49c0.972,-0.7 2.292,-0.98 3.404,-0.98c1.111,0 2.084,0.21 2.292,0.56c0.346,0.419 -0.14,3.71 -2.015,5.321z"></path></g></g></g></svg>
                </a>
            </div>
            <!-- Botão abaixo do conjunto de ícones SVG -->
            <div class="button-container">
                <a href="https://youtu.be/mH2wmyeiIpA?si=b5PyqSOH_ztDmP_F" target="_blank"><button class="transparent-button">Ver o clipe da música</button></a>
            </div>
            <p>A música 'This Fire' da banda escocesa Franz Ferdinand é uma explosão de energia e emoção que parece capturar a essência de uma paixão avassaladora. A letra utiliza a metáfora de um incêndio para descrever um sentimento intenso e incontrolável que consome o eu lírico. A repetição da frase 'This fire is out of control' reforça a ideia de algo que cresceu além das capacidades de contenção, sugerindo uma paixão que se tornou maior do que a própria pessoa.</p>
            <cite><a href="https://www.letras.mus.br/franz-ferdinand/85814/significado.html">Fonte retirada do site www.letras.mus.br</a></cite>
        </div>
    </section>

    <!-- Tabelas com menções de mais músicas -->
    <main>
        <div class="table-wrapper">
            <h1>Menções <br> Adicionais</h1>
            <hr>
            <table>
                <thead>
                    <tr>
                        <th>"Chippin' In" - SAMURAI</th>
                        <th>"Never Fade Away" - SAMURAI</th>
                        <th>"Who's Ready For Tomorrow" - RAT BOY</th>
                        <th>"I Will Follow" - Snot Abundance</th>
                        <th>"On My Way to Hell" - Połoz</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <a href="https://youtu.be/Igq3d6XA75Y?si=StxI6gixwhIymEwa" target="_blank">Youtube</a><br>
                            <a href="https://open.spotify.com/track/0UHxkkgI5GfV0XBRA1rqfe" target="_blank">Spotify</a><br>
                            <a href="https://www.deezer.com/album/282491002" target="_blank">Deezer</a><br>
                            <a href="https://music.amazon.com/albums/B07TQYZ9R9" target="_blank">Amazon Music</a>
                        </td>
                        <td>
                            <a href="https://youtu.be/AN1RJF55NXI?si=H4zb7AuuinYjO6t8" target="_blank">Youtube</a><br>
                            <a href="https://open.spotify.com/track/1AslaQYl1cMb1ItQKmtJer" target="_blank">Spotify</a><br>
                            <a href="https://www.deezer.com/album/104879602" target="_blank">Deezer</a><br>
                            <a href="https://music.amazon.com/albums/B07VLBMHHS" target="_blank">Amazon Music</a>
                        </td>
                        <td>
                            <a href="https://youtu.be/JVTS3fyoAEQ?si=uwb-L3z0OKbnvULU" target="_blank">Youtube</a><br>
                            <a href="https://open.spotify.com/track/4mn5HdatHKN7iFGDes9G8i" target="_blank">Spotify</a><br>
                            <a href="https://www.deezer.com/track/1144909932" target="_blank">Deezer</a><br>
                            <a href="https://music.amazon.com/albums/B08NWQKTVP" target="_blank">Amazon Music</a>
                        </td>
                        <td>
                            <a href="https://youtu.be/TGE5SEmib9k?si=g5kh5IoL2PeblF2h" target="_blank">Youtube</a><br>
                            <a href="https://open.spotify.com/track/2yM3H6E1XpZJWNIj9O6ELs" target="_blank">Spotify</a><br>
                            <a href="https://www.deezer.com/track/1013089781" target="_blank">Deezer</a><br>
                            <a href="https://music.amazon.com.br/albums/B087WVJMD3" target="_blank">Amazon Music</a>
                        </td>
                        <td>
                            <a href="https://youtu.be/f1KsL8n2jfo?si=8hJi7nccw-OvUbMn" target="_blank">Youtube</a><br>
                            <a href="https://open.spotify.com/track/3XKEnMrPNaxyZa9Q2LH5qy" target="_blank">Spotify</a><br>
                            <a href="https://www.deezer.com/track/687212122" target="_blank">Deezer</a><br>
                            <a href="https://music.amazon.com/albums/B08NWQKTVP" target="_blank">Amazon Music</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>  
    
    <!-- Rodapé -->
    <footer class="footer">
        <p>&copy; 2024 1&ordm; Avaliação da Disciplina | Feito com 💛 por <a href="https://www.linkedin.com/in/julio-cezar-pereira-camargo/">Juletopi</a>.</p>
    </footer>
</body>
</html>

CSS (reset.css):

/* Reset básico para todos os elementos */
* {
    in: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Remove os estilos padrão das listas não ordenadas */
ul {
    list-style: none;
}

/* Remove a decoração padrão dos links */
a {
    text-decoration: none;
}

CSS (font.css):

/* Definição da fonte FFFForward */
@font-face {
    font-family: "FFFFoward";
    src: url("../fonts/FFFFORWARD.ttf") format("woff2"),
         url("../fonts/FFFFORWARD.ttf") format("woff");
}

CSS (style.css):

/* Estilização básica do corpo do documento */
body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #fff;
    background-color: #3e375f;
    background-image: url('../images/mainBackgroundImage.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* Estilização da sobreposição para efeitos visuais desejados na imagem de fundo */
.overlay {
    background-color: rgba(0, 0, 0, 0.719);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

/* Estilização do título da página */
.title h1 {
    font-family: FFFFoward;
    font-size: 50px;
    padding-top: 100px;
    text-align: center;
    line-height: 1.0;
    letter-spacing: -2px;
    opacity: 0;
    animation: fadeInDown 2.0s forwards;
}

/* Estilização da linha abaixo do título */
.title hr {
    border: none;
    border: 2px solid #dacf3f;
    width: 30%;
    margin: 50px auto;
    margin-top: 50px;
    margin-bottom: -5px;
}

/* Estilização do subtítulo abaixo do título */
.title h2 {
    font-size: 21px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);
    padding-top: 35px;
    text-align: center;
    line-height: 1.0;
    line-height: 1.3,5;
    opacity: 0;
    animation: fadeInUp 2.5s forwards;
}

/* Estilização do a seção informativa abaixo do título */
.more-info {
    font-size: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);
    padding-top: 50px;
    padding-bottom: 10px;
    padding-left: 150px;
    padding-right: 150px;
    text-align: center;
    font-size: 18px;
    line-height: 1.5;
}

/* Estilização a seta animada abaixo da seção informativa */
.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #fff;
    position: relative;
    margin: 10px auto;
    padding-bottom: 15px;
    animation: arrowAnimation 1s infinite alternate;
}

/* Estilização das duas seções sobre as músicas */
.music1, .music2 {
    display: flex;
    align-items: flex-start;
    background-color: #191625dc;
    color: #fff;
    padding: 50px 0px;
    margin-top: 20px;
    opacity: 0;
    animation: fadeInDown 1.5s forwards;
}

/* Estilização dos títulos das seções sobre as músicas */
.music1 h2, .music2 h2 {
    font-size: 30px;
}

/* Estilização das imagens das seções sobre as músicas */
.music1 img, .music2 img {
    width: 100%;
    height: auto;
    max-width: 250px;
    margin-left: 20px;
}

/* Estilização do preenchimento do ícone do artista ao passar o mouse */
.music1 a:hover svg path, .music2 a:hover svg path {
    fill: #dacf3f;
    transition: fill 0.2s ease;
}

/* Estilização dos ícones sociais dos artistas*/
.social-icons {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
}

/* Estilização dos links sociais dos artistas*/
.social-icons a {
    margin-right: 10px;
}

/* Estilização do container do botão */
.button-container {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
}

/* Estilização dos botões transparentes e brancos */
.transparent-button {
    background-color: transparent;
    color: white;
    border: 2px solid #dacf3f;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Estilização do contêiner do texto */
.music1 .text-container, .music2 .text-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-left: 20px;
}

/* Estilização do título das seções sobre as músicas */
.music1 h2, .music2 h2 {
    margin: 0;
    color: #dacf3f;
}

/* Estilização do subtítulo das seções sobre as músicas */
.music1 sub, .music2 sub {
    margin-top: 5px;
    margin-bottom: 10px;
    color: #dacf3f;
}

/* Estilização do texto das seções sobre as músicas */
.music1 p, .music2 p {
    margin: 10px 0;
    padding-right: 20px;
}

/* Estilização da citação das seções sobre as músicas */
.music1 cite, .music2 cite {
    margin-top: 10px;
}

/* Estilização dos links de citação das seções sobre as músicas */
.music1 a, .music2 a {
    color: #dacf3f;
    margin-top: 10px;
}

/* Estilização dos links dos links de citação ao passar o mouse */
.music1 a:hover, .music2 a:hover {
    text-decoration: underline;
}

/* Estilização da tabela e do título */
.table-wrapper {
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);
    margin: 0 auto;
    width: 80%;
    max-width: 800px;
    margin-top: 20px;
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeInDown 1.5s forwards;
}

/* Estilização do título da tabela */
.table-wrapper h1 {
    font-family: FFFFoward;
    font-size: 40px;
    margin-top: 60px;
    margin-bottom: 20px;
    line-height: 1.4;
    letter-spacing: -1px;
    opacity: 0;
    animation: fadeInDown 2.0s forwards;
}

/* Estilização da linha horizontal abaixo do título da tabela */
.table-wrapper hr {
    border: none;
    border: 2px solid #dacf3f;
    width: 40%;
    margin: 50px auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Estilização dos títulos das colunas */
table th {
    background-color: #191625dc;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    border-bottom: 4px solid #dacf3f;
}

/* Estilização das células da tabela */
table td {
    background-color: #19162563;
    padding: 10px;
    font-size: 16px;
}

/* Estilização dos links nas células da tabela */
table td a {
    color: #fff;
}

table td:hover {
    background-color: #191625dc;
}

/* Estilização dos links nas células da tabela ao passar o mouse */
table td a:hover {
    background-color: #191625dc;
    text-decoration: underline;
    color: #dacf3f;
}

/* Estilização do rodapé */
.footer {
    background-color: #191625;
    color: #c5c5c5;
    margin-top: 30px;
}

/* Estilização do texto do rodapé */
.footer p {
    padding-bottom: 30px;
    padding-top: 30px;
    text-align: center;
    font-size: 12px;
}

/* Estilização do link no rodapé */
.footer a {
    color: #9b9323;
}

CSS (animation.css):

/* Animação da seta */
@keyframes arrowAnimation {
    from {
        top: 0;
    }
    to {
        top: 10px;
    }
}

/* Animação de fade-in para baixo */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animação de fade-in para cima */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-35px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

CSS (pseudoElementStyles.css):

/* Estilos da barra de rolagem */
::-webkit-scrollbar {
    background-color: #191625;
    width: 10px;
	height: 8px;
}

/* Estilos do indicador da barra de rolagem */
::-webkit-scrollbar-thumb {
    background-color: #dacf3f;
    border-radius: 8px;
}

/* Estilos da seleção de texto */
::selection {
    background-color: #d8db1659;
    color: #fff;
}

/* Estilização dos botões transparentes ao passar o mouse */
.transparent-button:hover {
    background-color: #dacf3f;
    color: white;
    border-color: #dacf3f;
}

/* Estilização do link no rodapé ao passar o mouse */
.footer a:hover,
.footer a:focus {
    color: #dacf3f;
}

🖼️ Imagem da página

Voltar para o início ↺

4. Operadores e Tabelas em JavaScript

Note

Retirado da aula de "CodigoAula04"
Link de todas as aulas em PDF: Aulas de T.E.T em PDF

Nesta aula foram aprendidos:

Significados de operadores de JavaScript
Criação de uma tabela gerado por JavaScript

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabelas sobre JavaScript</title>
    <link rel="stylesheet" href="src/css/reset.css">
    <link rel="stylesheet" href="src/css/style.css">
    <link rel="stylesheet" href="src/css/scrollbar.css">
    <link rel="shortcut icon" href="src/images/javascriptIcon.ico" type="image/x-icon" />
</head>
<body>
    <header class="header">
        <img src="src/images/javascriptImage.png" alt="tableImage-pic">
    <h2>Tabelas sobre JavaScript</h2>
    <p>Entendendo sobre operadores lógicos e lógica de verdadeiro/falso.</p>
    </header>

    <br>
    <hr>
    <br>

    <section class="operadores-logicos">
        <h3>Operadores Lógicos</h3>
        <table class="tabela-operadores" border="1">
            <tr>
                <th>Operador</th>
                <th>Nome</th>
                <th>Exemplo</th>
                <th>Resultado</th>
            </tr>
            <tr>
                <td>==</td>
                <td>Igual</td>
                <td>a == b</td>
                <td>Verdadeiro se a for igual a b</td>
            </tr>
            <tr>
                <td>!=</td>
                <td>Diferente</td>
                <td>a != b</td>
                <td>Verdadeiro se a não for igual a b</td>
            </tr>
            <tr>
                <td><></td>
                <td>Diferente</td>
                <td>a <> b</td>
                <td>Verdadeiro se a não for igual a b</td>
            </tr>
            <tr>
                <td>===</td>
                <td>Idêntico</td>
                <td>a === b</td>
                <td>Verdadeiro se a for igual a b e for do mesmo tipo</td>
            </tr>
            <tr>
                <td>!==</td>
                <td>Não idêntico</td>
                <td>a !== b</td>
                <td>Verdadeiro se a não for igual a b, ou eles não forem do mesmo tipo</td>
            </tr>
            <tr>
                <td><</td>
                <td>Menor que</td>
                <td>a < b</td>
                <td>Verdadeiro se a for menor que b</td>
            </tr>
            <tr>
                <td>></td>
                <td>Maior que</td>
                <td>a > b</td>
                <td>Verdadeiro se a for maior que b</td>
            </tr>
            <tr>
                <td><=</td>
                <td>Menor ou igual</td>
                <td>a <= b</td>
                <td>Verdadeiro se a for menor ou igual a b</td>
            </tr>
            <tr>
                <td>>=</td>
                <td>Maior ou igual</td>
                <td>a >= b</td>
                <td>Verdadeiro se a for maior ou igual a b</td>
            </tr>
        </table>
    </section>

    <section class="operadores-logicos">
        <h3>Operadores Lógicos (Gerado com JavaScript)</h3>
        <table class="tabela-operadores" id="tabela-operadores" border="1">
            <!-- CONTEÚDO GERADO POR JAVASCRIPT AQUI -->
        </table>
    </section>
    
    <footer class="footer">
        <p>&copy; 2024 Aula 04 de Tópicos Especiais em Tecnologia. Todos os direitos reservados. | Feito com 💛 por <a href="https://www.linkedin.com/in/julio-cezar-pereira-camargo/">Juletopi</a>.</p>
    </footer>
    <script src="src/js/script.js"></script>
</body>
</html>

CSS (reset.css):

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

CSS (style.css):

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: #fffcd0;
}

.header {
    text-align: center;
}

.header img {
    width: 100%;
    max-width: 150px;
    margin-top: 40px;
    margin-bottom: 30px;
}

.header h2 {
    color: #e6da3a;
    text-align: center;
    font-size: 35px;
    line-height: 1.0;
    letter-spacing: -3px;
    line-height: 0.1
}

.header p {
    color: #0e0e0e;
    padding-top: 30px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 17px;
    line-height: 0.9;
}

.operadores-logicos {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 17px;
    padding-bottom: 40px;
}

.operadores-logicos h3 {
    color: #0e0e0e;
    font-size: 25px;
    padding-top: 20px;
    padding-bottom: 10px;
}

.operadores-logicos p {
    color: #0e0e0e;
    font-size: 17px;
}

.tabela-operadores {
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
}

.tabela-operadores th,
.tabela-operadores td {
    padding: 8px;
    border: 1px solid #a5a5a5;
}

.tabela-operadores td:nth-child(1),
.tabela-operadores td:nth-child(3) {
    text-align: center;
    color: #e62a91;
}

.tabela-operadores td:nth-child(2),
.tabela-operadores td:nth-child(4) {
    text-align: left;
}

.tabela-operadores th {
    text-align: center;
    background-color: #f8f18c;
}

.tabela-operadores td {
    background-color: #fcfbf5;
}

.footer {
    margin-top: 50px;
    background-color: #0e0e0e;
    color: #c5c5c5;
}

.footer p {
    padding-bottom: 30px;
    padding-top: 30px;
    text-align: center;
    font-size: 12px;
}

.footer a {
    color: #e6da3a;
}

CSS (scrollbar.css):

::-webkit-scrollbar {
    background-color: #eeebc4;
    width: 10px;
	height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #e6da3a;
    border-radius: 8px;
}

JavaScript:

// Definindo um array de objetos da tabela
document.addEventListener('DOMContentLoaded', () => {
    const operadores = [
        { operador: '==', nome: 'Igual', exemplo: 'a == b', resultado: 'Verdadeiro se a for igual a b' },
        { operador: '!=', nome: 'Diferente', exemplo: 'a != b', resultado: 'Verdadeiro se a não for igual a b' },
        { operador: '<>', nome: 'Diferente', exemplo: 'a <> b', resultado: 'Verdadeiro se a não for igual a b' },
        { operador: '===', nome: 'Idêntico', exemplo: 'a === b', resultado: 'Verdadeiro se a for igual a b e for do mesmo tipo' },
        { operador: '!==', nome: 'Não idêntico', exemplo: 'a !== b', resultado: 'Verdadeiro se a não for igual a b, ou eles não forem do mesmo tipo' },
        { operador: '<', nome: 'Menor que', exemplo: 'a < b', resultado: 'Verdadeiro se a for menor que b' },
        { operador: '>', nome: 'Maior que', exemplo: 'a > b', resultado: 'Verdadeiro se a for maior que b' },
        { operador: '<=', nome: 'Menor ou igual', exemplo: 'a <= b', resultado: 'Verdadeiro se a for menor ou igual a b' },
        { operador: '>=', nome: 'Maior ou igual', exemplo: 'a >= b', resultado: 'Verdadeiro se a for maior ou igual a b' }
    ];

    const tabela = document.getElementById('tabela-operadores');

    // Adicionando o cabeçalho da tabela
    const thead = document.createElement('thead');
    thead.innerHTML = `
        <tr>
            <th>Operador</th>
            <th>Nome</th>
            <th>Exemplo</th>
            <th>Resultado</th>
        </tr>
    `;
    tabela.appendChild(thead);

    // Adicionando o corpo da tabela
    const tbody = document.createElement('tbody');
    operadores.forEach(op => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${op.operador}</td>
            <td>${op.nome}</td>
            <td>${op.exemplo}</td>
            <td>${op.resultado}</td>
        `;
        tbody.appendChild(row);
    });
    tabela.appendChild(tbody);
});

🖼️ Imagem da página

Voltar para o início ↺

AVALIAÇÃO 02 - HTML, CSS e JAVASCRIPT

Note

Retirado da aula de "CodigoAvaliacao02"
Link de todas as aulas em PDF: Aulas de T.E.T em PDF
Link do repositório do projeto: Página Cyberpunk Edgerunners

Durante a avaliação 02 da disciplina, fora requerido a construção de um website seguindo um dos temas fornecidos, o tema escolhido foi o Tema 9 - Anime com as seguintes orientações:

Páginas obrigatórias:
- Home
- Quem somos
- Personagens
- História
- Contato
- Localização

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Página-web sobre o anime Cyberpunk Edgerunners">
    <meta name="author" content="Júlio Cézar Pereira Camargo, a.k.a 'Juletopi'">
    <meta name="keywords" content="anime, Anime, cyberpunk, Cyberpunk, edgerunners, Edgerunners, Cyberpunk Edgerunners">
    <title>Cyberpunk Edgerunners | Tudo sobre o anime</title>
    <link rel="stylesheet" href="src/css/reset.css">
    <link rel="stylesheet" href="src/css/fonts.css">
    <link rel="stylesheet" href="src/css/style.css">
    <link rel="stylesheet" href="src/css/modalVideo.css">
    <link rel="stylesheet" href="src/css/pseudoElementStyles.css">
    <link rel="stylesheet" href="src/css/animation.css">
    <link rel="stylesheet" href="src/css/responsive.css">
    <link rel="shortcut icon" href="src/images/yellowCyberpunkIcon.ico" type="image/x-icon" />
</head>
<body>
    <!-- Overlay acima da imagem de fundo da página -->
    <div class="overlay"></div>

    <!-- Barra de navegação -->
    <nav class="navbar">
        <div class="logo">
            <img src="src/images/yellowCyberpunkImage.png" alt="imagePageLogo">
        </div>
        <ul class="nav-links hide show">
            <li><a href="#soundtrack">Trilha Sonora</a></li>
            <li><a href="#other-songs">Sons Extras</a></li>
            <li><a href="#characters">Personagens</a></li>
            <li><a href="#about-game">Sobre o Jogo</a></li>
            <li><a href="#where-to-watch">Onde Assistir</a></li>
        </ul>
    </nav>

    <!-- Seção do cabeçalho com o título" -->
    <header class="header-title" id="home">
        <img src="src/images/CyberpunkEdgerunnersLogoImage.png" alt="CyberpunkEdgerunnersLogo">
        <hr>
        <h2>Tudo sobre o anime</h2>
    </header>

    <!-- Seção com um pqueno texto informativo após a seção do título" -->
    <p class="more-info">O anime "Cyberpunk Edgerunners", criado pelo estúdio de animação japonesa Studio Trigger e inspirado no jogo Cyberpunk 2077 da desenvolvedora polonesa CD Projekt Red, é um sucesso que se destaca pela sua arte incrível, personagens memoráveis, trilha sonora marcante e uma história envolvente que levou muitos fãs a revisitarem o jogo. Vamos explorar um pouco mais sobre o que o anime oferece a seguir.</p>

    <!-- Seta animada abaixo da seção "mais abaixo..." -->
    <div class="arrow"></div>

    <!-- Seção da primeira música -->
    <h1 class="title2" id="soundtrack">Tri lha<br>S o n o ra</h1>
    <hr class="hr">
    <section class="music1">
        <img src="src/images/music1Image.jpeg" alt="IReallyWantToStayAtYourHouse" title="Capa da música 'I Really Want to Stay at Your House'">
        <div class="text-container">
            <h2>I Really Want to Stay at Your House</h2>
            <sub>por Rosa Walton</sub>
            <!-- Conjunto de ícones SVG -->
            <div class="social-icons">
                <a href="https://youtu.be/gzbLODUb1sA?si=Xtzy8tMvWevqElrJ" target="_blank" title="Youtube">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M44.89844,14.5c-0.39844,-2.19922 -2.29687,-3.80078 -4.5,-4.30078c-3.29687,-0.69922 -9.39844,-1.19922 -16,-1.19922c-6.59766,0 -12.79687,0.5 -16.09766,1.19922c-2.19922,0.5 -4.10156,2 -4.5,4.30078c-0.40234,2.5 -0.80078,6 -0.80078,10.5c0,4.5 0.39844,8 0.89844,10.5c0.40234,2.19922 2.30078,3.80078 4.5,4.30078c3.5,0.69922 9.5,1.19922 16.10156,1.19922c6.60156,0 12.60156,-0.5 16.10156,-1.19922c2.19922,-0.5 4.09766,-2 4.5,-4.30078c0.39844,-2.5 0.89844,-6.10156 1,-10.5c-0.20312,-4.5 -0.70312,-8 -1.20312,-10.5zM19,32v-14l12.19922,7z"></path></g></g></svg>
                </a>
                <a href="https://open.spotify.com/intl-pt/track/7mykoq6R3BArsSpNDjFQTm" target="_blank" title="Spotify">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25.009,1.982c-12.687,0 -23.009,10.322 -23.009,23.009c0,12.687 10.322,23.009 23.009,23.009c12.687,0 23.009,-10.321 23.009,-23.009c0,-12.688 -10.322,-23.009 -23.009,-23.009zM34.748,35.333c-0.289,0.434 -0.765,0.668 -1.25,0.668c-0.286,0 -0.575,-0.081 -0.831,-0.252c-2.473,-1.649 -6.667,-2.749 -10.167,-2.748c-3.714,0.002 -6.498,0.914 -6.526,0.923c-0.784,0.266 -1.635,-0.162 -1.897,-0.948c-0.262,-0.786 0.163,-1.636 0.949,-1.897c0.132,-0.044 3.279,-1.075 7.474,-1.077c3.5,-0.002 8.368,0.942 11.832,3.251c0.69,0.46 0.876,1.391 0.416,2.08zM37.74,29.193c-0.325,0.522 -0.886,0.809 -1.459,0.809c-0.31,0 -0.624,-0.083 -0.906,-0.26c-4.484,-2.794 -9.092,-3.385 -13.062,-3.35c-4.482,0.04 -8.066,0.895 -8.127,0.913c-0.907,0.258 -1.861,-0.272 -2.12,-1.183c-0.259,-0.913 0.272,-1.862 1.184,-2.12c0.277,-0.079 3.854,-0.959 8.751,-1c4.465,-0.037 10.029,0.61 15.191,3.826c0.803,0.5 1.05,1.56 0.548,2.365zM40.725,22.013c-0.373,0.634 -1.041,0.987 -1.727,0.987c-0.344,0 -0.692,-0.089 -1.011,-0.275c-5.226,-3.068 -11.58,-3.719 -15.99,-3.725c-0.021,0 -0.042,0 -0.063,0c-5.333,0 -9.44,0.938 -9.481,0.948c-1.078,0.247 -2.151,-0.419 -2.401,-1.495c-0.25,-1.075 0.417,-2.149 1.492,-2.4c0.185,-0.043 4.573,-1.053 10.39,-1.053c0.023,0 0.046,0 0.069,0c4.905,0.007 12.011,0.753 18.01,4.275c0.952,0.56 1.271,1.786 0.712,2.738z"></path></g></g></svg>
                </a>
                <a href="https://www.deezer.com/track/1144909952" target="_blank" title="Deezer">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M39,14v2h8v-2zM21,17v2h8v-2zM39,17v2h8v-2zM21,20v2h8v-2zM39,20v2h8v-2zM3,23v2h8v-2zM21,23v2h8v-2zM30,23v2h8v-2zM39,23v2h8v-2zM3,26v2h8v-2zM21,26v2h8v-2zM30,26v2h8v-2zM39,26v2h8v-2zM3,29v2h8v-2zM12,29v2h8v-2zM21,29v2h8v-2zM30,29v2h8v-2zM39,29v2h8v-2zM3,32v2h8v-2zM12,32v2h8v-2zM21,32v2h8v-2zM30,32v2h8v-2zM39,32v2h8v-2zM3,35v2h8v-2zM12,35v2h8v-2zM21,35v2h8v-2zM30,35v2h8v-2zM39,35v2h8v-2z"></path></g></g></svg>
                </a>
                <a href="https://music.amazon.com/albums/B0BJK5QZW8" target="_blank" title="Amazon Music">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M36,5h-22c-4.971,0 -9,4.029 -9,9v22c0,4.971 4.029,9 9,9h22c4.971,0 9,-4.029 9,-9v-22c0,-4.971 -4.029,-9 -9,-9zM38.19,21.254c0.65,-0.279 1.42,-0.317 2.07,-0.121c0.27,0.084 0.51,0.196 0.74,0.335v1.23c-0.72,-0.494 -1.55,-0.634 -2.19,-0.289c-0.68,0.373 -1.08,1.155 -1.06,1.975c-0.01,0.904 0.29,1.742 0.92,2.133c0.56,0.382 1.44,0.382 2.33,0.242v1.025c-0.35,0.112 -0.72,0.177 -1.1,0.214c-0.63,0.047 -1.33,-0.047 -1.95,-0.382c-0.63,-0.326 -1.09,-0.894 -1.35,-1.463c-0.25,-0.587 -0.34,-1.183 -0.35,-1.752c-0.03,-1.21 0.62,-2.57 1.94,-3.147zM34,18.01c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1c-0.552,0 -1,-0.448 -1,-1c0,-0.552 0.448,-1 1,-1zM34.75,21.01v7h-1.5v-7zM27,26.175c0.64,0.261 1.42,0.532 2.03,0.59c0.61,0.068 1.28,-0.01 1.67,-0.223c0.19,-0.116 0.23,-0.278 0.23,-0.458c0,-0.18 -0.036,-0.282 -0.123,-0.417c-0.159,-0.246 -0.597,-0.432 -1.287,-0.597c-0.34,-0.097 -0.71,-0.194 -1.12,-0.416c-0.41,-0.184 -1.243,-0.852 -1.081,-1.991c0.087,-0.609 0.718,-1.205 1.601,-1.483c1.029,-0.325 2.15,-0.164 3.08,0.281v1.239c-0.83,-0.426 -1.82,-0.641 -2.66,-0.361c-0.25,0.077 -0.58,0.251 -0.58,0.564c0,0.751 0.87,0.893 1.2,1c0.34,0.106 0.71,0.203 1.11,0.406c0.4,0.194 1.202,0.678 1.202,1.783c0,1.058 -0.522,1.447 -0.952,1.621c-0.89,0.387 -1.68,0.319 -2.45,0.213c-0.65,-0.116 -1.28,-0.31 -1.87,-0.677zM20.25,21.012l1.5,-0.002l0.003,2.42c0.014,0.79 0.012,1.651 0.003,2.383c-0.035,0.391 0.402,0.847 0.976,0.917c0.306,0.034 0.534,0.009 0.886,-0.14c0.208,-0.082 0.42,-0.152 0.632,-0.225v-5.355l1.5,0.001v6.818h-1.5v-0.236c-0.041,0.022 -0.08,0.046 -0.12,0.067c-0.381,0.228 -0.992,0.386 -1.514,0.343c-0.542,-0.035 -1.088,-0.225 -1.533,-0.586c-0.442,-0.356 -0.776,-0.915 -0.819,-1.529c-0.027,-0.88 -0.02,-1.634 -0.011,-2.457zM9.25,21.01h1.5v0.688c0.37,-0.134 0.737,-0.274 1.109,-0.401c0.535,-0.19 1.206,-0.152 1.733,0.141c0.218,0.117 0.409,0.282 0.577,0.469c0.562,-0.208 1.123,-0.417 1.689,-0.611c0.535,-0.19 1.206,-0.152 1.733,0.141c0.532,0.286 0.946,0.809 1.093,1.418c0.039,0.152 0.056,0.306 0.065,0.461l0.004,0.317l0.006,0.625l-0.006,1.25l-0.003,2.5h-1.5l-0.006,-4.844c-0.042,-0.425 -0.519,-0.797 -1.019,-0.661c-0.51,0.135 -1.024,0.255 -1.537,0.379c0.034,0.143 0.052,0.287 0.061,0.433l0.004,0.317l0.006,0.625l-0.006,1.25l-0.003,2.5h-1.5l-0.006,-4.844c-0.042,-0.426 -0.519,-0.797 -1.019,-0.661c-0.489,0.13 -0.983,0.245 -1.475,0.364v5.14h-1.5c0,0 0,-6.996 0,-6.996zM38.768,33.932c-2.214,1.57 -4.688,2.605 -7.285,3.277c-2.595,0.663 -5.297,0.914 -7.986,0.729c-2.688,-0.18 -5.313,-0.836 -7.787,-1.794c-2.466,-0.99 -4.797,-2.263 -6.857,-3.931c-0.107,-0.087 -0.124,-0.245 -0.037,-0.352c0.077,-0.095 0.209,-0.119 0.313,-0.063l0.014,0.008c2.249,1.217 4.653,2.149 7.067,2.889c2.433,0.692 4.909,1.187 7.4,1.288c2.485,0.087 4.997,-0.107 7.449,-0.617c2.442,-0.504 4.905,-1.236 7.17,-2.279l0.039,-0.018c0.251,-0.115 0.547,-0.006 0.663,0.245c0.104,0.223 0.03,0.482 -0.163,0.618zM39.882,36.892c-0.278,0.21 -0.556,0.14 -0.417,-0.21c0.417,-1.12 1.32,-3.501 0.903,-4.061c-0.486,-0.63 -2.987,-0.28 -4.098,-0.14c-0.347,0 -0.347,-0.28 -0.069,-0.49c0.972,-0.7 2.292,-0.98 3.404,-0.98c1.111,0 2.084,0.21 2.292,0.56c0.346,0.419 -0.14,3.71 -2.015,5.321z"></path></g></g></g></svg>
                </a>
            </div>
            <!-- Botão abaixo do conjunto de ícones SVG -->
            <div class="button-container">
                <button class="transparent-button" id="openModalButton1" data-video-link="https://www.youtube.com/embed/KvMY1uzSC1E">Ver o clipe da música</button>
            </div>
            <p>A música 'I Really Want To Stay At Your House', interpretada por Rosa Walton e com a participação de Hallie Coggins, é uma expressão lírica que navega pelas águas turbulentas de um relacionamento complexo. A letra revela uma luta interna entre o desejo de permanecer próxima a alguém e o reconhecimento da dor que essa relação causa. A narrativa começa com a imagem de alguém esperando por outro que, ao invés de cumprir expectativas, deixa apenas um vazio simbolizado por armários vazios. A menção a 'ler nas entrelinhas' sugere uma comunicação indireta e talvez enganosa entre os envolvidos.</p>
            <cite><a href="https://www.letras.mus.br/rosa-walton/i-really-want-to-stay-at-your-house/significado.html">Fonte retirada do site www.letras.mus.br</a></cite>
        </div>
    </section>

    <!-- Seção da segunda música -->
    <section class="music2">
        <img src="src/images/music2Image.jpeg" alt="ThisFFFire" title="Capa da música 'This fffire'">
        <div class="text-container">
            <h2>This fffire</h2>
            <sub>por Franz Ferdinand</sub>
            <!-- Conjunto de ícones SVG -->
            <div class="social-icons">
                <a href="https://youtu.be/DkWML41wUCo?si=C8skzxYJklTXbvln" target="_blank" title="Youtube">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M44.89844,14.5c-0.39844,-2.19922 -2.29687,-3.80078 -4.5,-4.30078c-3.29687,-0.69922 -9.39844,-1.19922 -16,-1.19922c-6.59766,0 -12.79687,0.5 -16.09766,1.19922c-2.19922,0.5 -4.10156,2 -4.5,4.30078c-0.40234,2.5 -0.80078,6 -0.80078,10.5c0,4.5 0.39844,8 0.89844,10.5c0.40234,2.19922 2.30078,3.80078 4.5,4.30078c3.5,0.69922 9.5,1.19922 16.10156,1.19922c6.60156,0 12.60156,-0.5 16.10156,-1.19922c2.19922,-0.5 4.09766,-2 4.5,-4.30078c0.39844,-2.5 0.89844,-6.10156 1,-10.5c-0.20312,-4.5 -0.70312,-8 -1.20312,-10.5zM19,32v-14l12.19922,7z"></path></g></g></svg>
                </a>
                <a href="https://open.spotify.com/intl-pt/track/46gSk82duJtX3TTA182ruG" target="_blank" title="Spotify">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25.009,1.982c-12.687,0 -23.009,10.322 -23.009,23.009c0,12.687 10.322,23.009 23.009,23.009c12.687,0 23.009,-10.321 23.009,-23.009c0,-12.688 -10.322,-23.009 -23.009,-23.009zM34.748,35.333c-0.289,0.434 -0.765,0.668 -1.25,0.668c-0.286,0 -0.575,-0.081 -0.831,-0.252c-2.473,-1.649 -6.667,-2.749 -10.167,-2.748c-3.714,0.002 -6.498,0.914 -6.526,0.923c-0.784,0.266 -1.635,-0.162 -1.897,-0.948c-0.262,-0.786 0.163,-1.636 0.949,-1.897c0.132,-0.044 3.279,-1.075 7.474,-1.077c3.5,-0.002 8.368,0.942 11.832,3.251c0.69,0.46 0.876,1.391 0.416,2.08zM37.74,29.193c-0.325,0.522 -0.886,0.809 -1.459,0.809c-0.31,0 -0.624,-0.083 -0.906,-0.26c-4.484,-2.794 -9.092,-3.385 -13.062,-3.35c-4.482,0.04 -8.066,0.895 -8.127,0.913c-0.907,0.258 -1.861,-0.272 -2.12,-1.183c-0.259,-0.913 0.272,-1.862 1.184,-2.12c0.277,-0.079 3.854,-0.959 8.751,-1c4.465,-0.037 10.029,0.61 15.191,3.826c0.803,0.5 1.05,1.56 0.548,2.365zM40.725,22.013c-0.373,0.634 -1.041,0.987 -1.727,0.987c-0.344,0 -0.692,-0.089 -1.011,-0.275c-5.226,-3.068 -11.58,-3.719 -15.99,-3.725c-0.021,0 -0.042,0 -0.063,0c-5.333,0 -9.44,0.938 -9.481,0.948c-1.078,0.247 -2.151,-0.419 -2.401,-1.495c-0.25,-1.075 0.417,-2.149 1.492,-2.4c0.185,-0.043 4.573,-1.053 10.39,-1.053c0.023,0 0.046,0 0.069,0c4.905,0.007 12.011,0.753 18.01,4.275c0.952,0.56 1.271,1.786 0.712,2.738z"></path></g></g></svg>
                </a>
                <a href="https://www.deezer.com/track/4642375" target="_blank" title="Deezer">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="fill:#000000;"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M39,14v2h8v-2zM21,17v2h8v-2zM39,17v2h8v-2zM21,20v2h8v-2zM39,20v2h8v-2zM3,23v2h8v-2zM21,23v2h8v-2zM30,23v2h8v-2zM39,23v2h8v-2zM3,26v2h8v-2zM21,26v2h8v-2zM30,26v2h8v-2zM39,26v2h8v-2zM3,29v2h8v-2zM12,29v2h8v-2zM21,29v2h8v-2zM30,29v2h8v-2zM39,29v2h8v-2zM3,32v2h8v-2zM12,32v2h8v-2zM21,32v2h8v-2zM30,32v2h8v-2zM39,32v2h8v-2zM3,35v2h8v-2zM12,35v2h8v-2zM21,35v2h8v-2zM30,35v2h8v-2zM39,35v2h8v-2z"></path></g></g></svg>
                </a>
                <a href="https://music.amazon.com/albums/B08V4QGLF5" target="_blank" title="Amazon Music">
                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256" style="fill:#000000;"><g transform="translate(-15.36,-15.36) scale(1.12,1.12)"><g fill="#e0e0e0" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M36,5h-22c-4.971,0 -9,4.029 -9,9v22c0,4.971 4.029,9 9,9h22c4.971,0 9,-4.029 9,-9v-22c0,-4.971 -4.029,-9 -9,-9zM38.19,21.254c0.65,-0.279 1.42,-0.317 2.07,-0.121c0.27,0.084 0.51,0.196 0.74,0.335v1.23c-0.72,-0.494 -1.55,-0.634 -2.19,-0.289c-0.68,0.373 -1.08,1.155 -1.06,1.975c-0.01,0.904 0.29,1.742 0.92,2.133c0.56,0.382 1.44,0.382 2.33,0.242v1.025c-0.35,0.112 -0.72,0.177 -1.1,0.214c-0.63,0.047 -1.33,-0.047 -1.95,-0.382c-0.63,-0.326 -1.09,-0.894 -1.35,-1.463c-0.25,-0.587 -0.34,-1.183 -0.35,-1.752c-0.03,-1.21 0.62,-2.57 1.94,-3.147zM34,18.01c0.552,0 1,0.448 1,1c0,0.552 -0.448,1 -1,1c-0.552,0 -1,-0.448 -1,-1c0,-0.552 0.448,-1 1,-1zM34.75,21.01v7h-1.5v-7zM27,26.175c0.64,0.261 1.42,0.532 2.03,0.59c0.61,0.068 1.28,-0.01 1.67,-0.223c0.19,-0.116 0.23,-0.278 0.23,-0.458c0,-0.18 -0.036,-0.282 -0.123,-0.417c-0.159,-0.246 -0.597,-0.432 -1.287,-0.597c-0.34,-0.097 -0.71,-0.194 -1.12,-0.416c-0.41,-0.184 -1.243,-0.852 -1.081,-1.991c0.087,-0.609 0.718,-1.205 1.601,-1.483c1.029,-0.325 2.15,-0.164 3.08,0.281v1.239c-0.83,-0.426 -1.82,-0.641 -2.66,-0.361c-0.25,0.077 -0.58,0.251 -0.58,0.564c0,0.751 0.87,0.893 1.2,1c0.34,0.106 0.71,0.203 1.11,0.406c0.4,0.194 1.202,0.678 1.202,1.783c0,1.058 -0.522,1.447 -0.952,1.621c-0.89,0.387 -1.68,0.319 -2.45,0.213c-0.65,-0.116 -1.28,-0.31 -1.87,-0.677zM20.25,21.012l1.5,-0.002l0.003,2.42c0.014,0.79 0.012,1.651 0.003,2.383c-0.035,0.391 0.402,0.847 0.976,0.917c0.306,0.034 0.534,0.009 0.886,-0.14c0.208,-0.082 0.42,-0.152 0.632,-0.225v-5.355l1.5,0.001v6.818h-1.5v-0.236c-0.041,0.022 -0.08,0.046 -0.12,0.067c-0.381,0.228 -0.992,0.386 -1.514,0.343c-0.542,-0.035 -1.088,-0.225 -1.533,-0.586c-0.442,-0.356 -0.776,-0.915 -0.819,-1.529c-0.027,-0.88 -0.02,-1.634 -0.011,-2.457zM9.25,21.01h1.5v0.688c0.37,-0.134 0.737,-0.274 1.109,-0.401c0.535,-0.19 1.206,-0.152 1.733,0.141c0.218,0.117 0.409,0.282 0.577,0.469c0.562,-0.208 1.123,-0.417 1.689,-0.611c0.535,-0.19 1.206,-0.152 1.733,0.141c0.532,0.286 0.946,0.809 1.093,1.418c0.039,0.152 0.056,0.306 0.065,0.461l0.004,0.317l0.006,0.625l-0.006,1.25l-0.003,2.5h-1.5l-0.006,-4.844c-0.042,-0.425 -0.519,-0.797 -1.019,-0.661c-0.51,0.135 -1.024,0.255 -1.537,0.379c0.034,0.143 0.052,0.287 0.061,0.433l0.004,0.317l0.006,0.625l-0.006,1.25l-0.003,2.5h-1.5l-0.006,-4.844c-0.042,-0.426 -0.519,-0.797 -1.019,-0.661c-0.489,0.13 -0.983,0.245 -1.475,0.364v5.14h-1.5c0,0 0,-6.996 0,-6.996zM38.768,33.932c-2.214,1.57 -4.688,2.605 -7.285,3.277c-2.595,0.663 -5.297,0.914 -7.986,0.729c-2.688,-0.18 -5.313,-0.836 -7.787,-1.794c-2.466,-0.99 -4.797,-2.263 -6.857,-3.931c-0.107,-0.087 -0.124,-0.245 -0.037,-0.352c0.077,-0.095 0.209,-0.119 0.313,-0.063l0.014,0.008c2.249,1.217 4.653,2.149 7.067,2.889c2.433,0.692 4.909,1.187 7.4,1.288c2.485,0.087 4.997,-0.107 7.449,-0.617c2.442,-0.504 4.905,-1.236 7.17,-2.279l0.039,-0.018c0.251,-0.115 0.547,-0.006 0.663,0.245c0.104,0.223 0.03,0.482 -0.163,0.618zM39.882,36.892c-0.278,0.21 -0.556,0.14 -0.417,-0.21c0.417,-1.12 1.32,-3.501 0.903,-4.061c-0.486,-0.63 -2.987,-0.28 -4.098,-0.14c-0.347,0 -0.347,-0.28 -0.069,-0.49c0.972,-0.7 2.292,-0.98 3.404,-0.98c1.111,0 2.084,0.21 2.292,0.56c0.346,0.419 -0.14,3.71 -2.015,5.321z"></path></g></g></g></svg>
                </a>
            </div>
            <!-- Botão abaixo do conjunto de ícones SVG -->
            <div class="button-container">
                <button class="transparent-button" id="openModalButton2" data-video-link="https://www.youtube.com/embed/mH2wmyeiIpA">Ver o clipe da música</button>
            </div>
            <p>A música 'This Fire' da banda escocesa Franz Ferdinand é uma explosão de energia e emoção que parece capturar a essência de uma paixão avassaladora. A letra utiliza a metáfora de um incêndio para descrever um sentimento intenso e incontrolável que consome o eu lírico. A repetição da frase 'This fire is out of control' reforça a ideia de algo que cresceu além das capacidades de contenção, sugerindo uma paixão que se tornou maior do que a própria pessoa.</p>
            <cite><a href="https://www.letras.mus.br/franz-ferdinand/85814/significado.html">Fonte retirada do site www.letras.mus.br</a></cite>
        </div>
    </section>

    <!-- Tabela com menções de mais músicas -->
    <h1 class="title3" id="other-songs">S o n s<br>Ex tra s</h1>
    <hr class="hr2">
    <p class="more-info2">Além de <i>I Really Want to Stay at Your House</i> e <i>This fffire</i>, vale a pena mencionar algumas outras músicas incríveis que apareceram no anime e que também merecem ser ouvidas.</p>
    <main>
        <div class="table-wrapper">
            <table>
                <thead>
                    <tr>
                        <th>"Chippin' In" - SAMURAI</th>
                        <th>"Fryday Night Fire Fight" - Aligns</th>
                        <th>"Who's Ready For Tomorrow" - RAT BOY</th>
                        <th>"I Will Follow" - Snot Abundance</th>
                        <th>"On My Way to Hell" - Połoz</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <a href="https://youtu.be/Igq3d6XA75Y?si=StxI6gixwhIymEwa" target="_blank">Youtube</a><br>
                            <a href="https://open.spotify.com/track/0UHxkkgI5GfV0XBRA1rqfe" target="_blank">Spotify</a><br>
                            <a href="https://www.deezer.com/album/282491002" target="_blank">Deezer</a><br>
                            <a href="https://music.amazon.com/albums/B07TQYZ9R9" target="_blank">Amazon Music</a>
                        </td>
                        <td>
                            <a href="https://youtu.be/FV3_G3NDCPg?si=SM0vEh4W98mO6HbX" target="_blank">Youtube</a><br>
                            <a href="https://open.spotify.com/intl-pt/track/1GhEAuoPdSPiOgqiwLvdf0" target="_blank">Spotify</a><br>
                            <a href="https://www.deezer.com/en/track/1182328292" target="_blank">Deezer</a><br>
                            <a href="https://music.amazon.com/albums/B08QYVH956" target="_blank">Amazon Music</a>
                        </td>
                        <td>
                            <a href="https://youtu.be/JVTS3fyoAEQ?si=uwb-L3z0OKbnvULU" target="_blank">Youtube</a><br>
                            <a href="https://open.spotify.com/track/4mn5HdatHKN7iFGDes9G8i" target="_blank">Spotify</a><br>
                            <a href="https://www.deezer.com/track/1144909932" target="_blank">Deezer</a><br>
                            <a href="https://music.amazon.com/albums/B08NWQKTVP" target="_blank">Amazon Music</a>
                        </td>
                        <td>
                            <a href="https://youtu.be/TGE5SEmib9k?si=g5kh5IoL2PeblF2h" target="_blank">Youtube</a><br>
                            <a href="https://open.spotify.com/track/2yM3H6E1XpZJWNIj9O6ELs" target="_blank">Spotify</a><br>
                            <a href="https://www.deezer.com/track/1013089781" target="_blank">Deezer</a><br>
                            <a href="https://music.amazon.com.br/albums/B087WVJMD3" target="_blank">Amazon Music</a>
                        </td>
                        <td>
                            <a href="https://youtu.be/f1KsL8n2jfo?si=8hJi7nccw-OvUbMn" target="_blank">Youtube</a><br>
                            <a href="https://open.spotify.com/track/3XKEnMrPNaxyZa9Q2LH5qy" target="_blank">Spotify</a><br>
                            <a href="https://www.deezer.com/track/687212122" target="_blank">Deezer</a><br>
                            <a href="https://music.amazon.com/albums/B08NWQKTVP" target="_blank">Amazon Music</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>

    <!-- Seção sobre os personagens -->
    <h2 class="title4" id="characters">Personagens</h2>
    <hr class="hr3">
    <section class="characters">
    <div class="card">
        <img src="src/images/DavidMartinez.jpeg" alt="DavidMartinez">
        <h2>David Martínez</h2>
        <sub>(デイビッド・マルティネス)</sub>
        <p>O protagonista da série.<br><br> Um garoto que se torna um mercenário e acaba se envolvendo em vários crimes junto a sua gangue e participando em eventos que o tornaram uma lenda em Night City.</p>
    </div>
    <div class="card">
        <img src="src/images/Lucy.jpeg" alt="Lucy">
        <h2>Lucy</h2>
        <sub>(ルーシー)</sub>
        <p>Uma <i>netrunner</i> habilidosa com um passado misterioso.<br><br> Um dos membros da gangue mercenária de Maine, se torna o par romântico de David Martinez durante a série e vê Night City como uma "prisão", nutrindo um desejo de deixá-la e ir para a lua.</p>
    </div>
    <div class="card">
        <img src="src/images/Maine.jpeg" alt="Maine">
        <h2>Maine</h2>
        <sub>(メイン)</sub>
        <p>Um ex-militar que se tornou o líder de uma gangue de mercenários.<br><br> <i>Edgerunner</i> veterano, ele é quem aceita David Martinez como um membro de sua gangue e até se torna uma espécie de mentor para o garoto. É o par romântico de Dorio e sempre está buscando a glória junto de sua equipe da qual ele valoriza a amizade.</p>
    </div>
    <div class="card">
        <img src="src/images/Dorio.jpeg" alt="Dorio">
        <h2>Dorio</h2>
        <sub>(ドリオ)</sub>
        <p>Uma <i>edgerunner</i> veterana musculosa e a mão-direita da gangue de mercenários de Maine.<br><br> Ela faz o par romântico de Maine e sempre está ao seu lado. Apesar de ser uma montanha de músculos ela têm o seu lado mole por dentro do qual só mostra a pessoas em que confia.</p>
    </div>
    <div class="card">
        <img src="src/images/Rebecca.jpeg" alt="Rebecca">
        <h2>Rebecca</h2>
        <sub>(レベッカ)</sub>
        <p>Uma jovem mercenária de língua muito afiada e que tende a ser extrema e imprevisível.<br><br> É a irmã de Pilar e se destaca pela sua aparência pálida por conta de seus implantes cibernéticos. No entanto, Rebecca é um membro leal do grupo de mercenários de Maine e apoia os outros membros do grupo como pode.</p>
    </div>
    <div class="card">
        <img src="src/images/Pilar.jpeg" alt="Pilar">
        <h2>Pilar</h2>
        <sub>(ピラル)</sub>
        <p>O irmão de Rebecca e um mercenário <i>edgerunner</i> de Night City.<br><br> Possui uma relação caótica pois vive atiçando sua irmã. Faz parte do grupo de mercenários de Maine e possui longos braços de implante cibernético.</p>
    </div>
    <div class="card">
        <img src="src/images/Kiwi.jpeg" alt="Kiwi">
        <h2>Kiwi</h2>
        <sub>(キーウィ)</sub>
        <p>Uma <i>netrunner</i> profissional enigmática e sarcástica.<br><br> Ela é um dos membros da gangue de mercenários de Maine e usa uma máscara de mandíbula cibernética.</p>
    </div>
    <div class="card">
        <img src="src/images/Falco.jpeg" alt="Falco">
        <h2>Falco</h2>
        <sub>(ファルコ)</sub>
        <p>Um nômade que age como o volante na maioria dos golpes da equipe mercenária de Maine.<br><br> Um homem um tanto recluso e que prefere se abster dos perigos, mas ainda assim leal e feliz em trabalhar com a gangue.</p>
    </div>
    <div class="card">
        <img src="src/images/GloriaMartinez.jpeg" alt="GloriaMartinez">
        <h2>Gloria Martínez</h2>
        <sub>(グロリア・マルティネス)</sub>
        <p>A mãe do protagonista.<br><br> Trabalha na emergência médica e vende implantes cibernéticos retirado dos cadáveres para <i>edgerunners</i> no mercado-negro para prover do melhor para seu filho David Martinez.</p>
    </div>
    <div class="card">
        <img src="src/images/Faraday.jpeg" alt="Faraday">
        <h2>Faraday</h2>
        <sub>(ファラデー)</sub>
        <p>Um corporativo falastrão que faz outros mercenários sujarem as mãos por ele.<br><br> A sua aparência se destaca pelo seu implante cibernético que lhe faz ter três olhos.</p>
    </div>
    <div class="card">
        <img src="src/images/AdamSmasher.jpeg" alt="AdamSmasher">
        <h2>Adam Smasher</h2>
        <sub>Ḁ̴͐̈́̽d̶͖̎̽̉͡a̶̽ͅm̶̝̩͓̩̓͘ ̴͚̘̼̠̫̅͌S̸̜̀̌̀̍m̸͓̠͊̆̑͡ȃ̴͕̺̙̞̘̕͡s̵̟̓h̶̛̞̘͚͒̕e̵͕̖̞̽̕r̸̦̱̦̊̑̇͊</sub>
        <p>Um ciborgue maníaco com 97% do corpo completamente sintético.<br><br> Com pouca humanidade sobrando e nenhuma empatia, Adam Smasher é um dos principais antagonistas do anime e uma lenda temida por todos.</p>
    </div>
    <div class="card">
        <img src="src/images/Julio.jpeg" alt="Julio">
        <h2>Julio</h2>
        <sub>(フリオ)</sub>
        <p>Um aspirante a mercenário bem emocionado e empolgado.<br><br> Ele morre antes de você perceber...</p>
    </div>
    </section>

    <!-- Seção sobre o jogo -->
    <h2 class="title5" id="about-game">Sobre&nbsp&nbsp&nbspo&nbsp&nbsp&nbsp&nbspJogo</h2>
    <hr class="hr4">
    <section class="about-game">
        <img src="src/images/cyberpunk2077ArtCover.jpg" alt="Cyberpunk2077ArtCover" title="Arte conceitual da capa do jogo">
        <div class="text-container">
            <h2 id="title1">Como foi o lançamento? Como o jogo está atualmente?</h2>
            <p>Desenvolvido pela renomada CD Projekt Red, Cyberpunk 2077 prometia bastante como um RPG de mundo aberto ambientado na estética futurista cyberpunk. No entanto, o lançamento do jogo em dezembro de 2020 foi marcado por controvérsias, com problemas técnicos e bugs que afetaram a experiência dos jogadores, especialmente nos consoles de última geração.
                <br><br>
                Apesar do lançamento conturbado do jogo, a CD Projekt Red continuou trabalhando durantes os anos que se vieram para corrigir os problemas e melhorar a qualidade do jogo. O lançamento do anime Cyberpunk: Edgerunners em parceria com a Netflix juntamente com uma atualização gratuíta que trazia diversos conteúdos extras baseados no anime também contribuiu bastante para revitalizar o interesse dos fãs em voltar a jogar e conquistar as ruas de Night City.
                <br><br>
                Com o passar do tempo, as atualizações e melhorias contínuas transformaram Cyberpunk 2077 em um título mais estável e envolvente. Atualmente, a comunidade de jogadores continua a crescer e diversos novos conteúdos foram adicionados ao jogo, mostrando a resiliência e o potencial deste ambicioso projeto da CD Projekt Red.
                <br><br>
                <p id="official-site-link">Clique <a href="https://www.cyberpunk.net/br/pt-br/cyberpunk-2077" target="_blank">aqui</a> para ir ao site oficial do jogo.</p>
            </p>
            <h2 id="title2">O jogo, atualmente, está disponível para as plataformas:</h2>
            <!-- Conjunto de ícones SVG -->
            <div class="game-platform-icons">
                <img id="platform-pc" src="src/images/platformPCSVG.svg" alt="PC">
                <img id="platform-xboxseries" src="src/images/platformXboxSeriesSXSSVG.svg" alt="XboxSeriesSX">
                <img id="platform-ps5" src="src/images/platformPS5SVG.svg" alt="PS5">
                <img id="platform-xboxone" src="src/images/platformXboxOneSVG.svg" alt="XboxOne">
                <img id="platform-ps4" src="src/images/platformPS4SVG.svg" alt="PS4">
            </div>
        </div>
    </section>

    <!-- Seção sobre onde assistir o anime -->
    <h2 class="title6" id="where-to-watch">Onde Assistir</h2>
    <hr class="hr5">
    <section class="where-to-watch">
        <img id="netiflix-cyberpunk-logo" src="src/images/netflixCyberpunkEdgerunnersLogo.png" alt="NetflixCyberpunkEdgerunnersLogo">
        <div class="text-container">
            <p>2022 | <img id="indicative-classification" src="src/images/classificacaoIndicativa16.png" alt="ClassificaçãoIndicativa16+" title="Classificação Indicativa: +16 anos"> | 1 Temporada | 10 Episódios</p>
            <div class="score-icons">
                <a href="https://www.rottentomatoes.com/tv/cyberpunk_edgerunners" target="_blank"><img id="rotten-tomatoes-critics-icon" src="src/images/rottenTomatoesFreshCriticsScore.png" alt="RottenTomatoesFreshCriticsScore" title="Nota dos críticos no Rotten Tomatoes"></a>
                <a href="https://www.rottentomatoes.com/tv/cyberpunk_edgerunners" target="_blank"><img id="rotten-tomatoes-audience-icon" src="src/images/rottenTomatoesPositiveAudienceScore.png" alt="RottenTomatoesPositiveAudienceScore" title="Nota da audiência no Rotten Tomatoes"></a>
                <a href="https://www.imdb.com/title/tt12590266/" target="_blank"><img id="imdb-icon" src="src/images/IMDbLogo.png" alt="IMDbScore" title="Nota na IMDb"></a>
                <div class="score-text">
                    <p id="rotten-tomatoes-critics-score">100%</p>
                    <p id="rotten-tomatoes-audience-score">95%</p>
                    <p id="imdb-score">8,3/10</p>
                </div>
            </div>
            <p id="where-to-watch-text">O anime Cyberpunk Edgerunners é uma produção oficial da Netflix e está disponível em sua plataforma de streaming desde o seu lançamento em Setembro de 2022.</p>
            <a href="https://www.netflix.com/br/title/81054853" target="_blank"><p id="where-to-watch-link">Ir para o site oficial sobre o anime na Netflix ⇱</p></a>
            <div class="trailer-container">
                <div class="video-text-container">
                    <p id="video-text1">Trailer Official [JP/ENG]<br>(Versão do Studio Trigger)</p>
                    <p id="video-text2">Abertura do Anime [ENG]<br>(Abertura Oficial da Netflix)</p>
                </div>
                <div class="iframe-container">
                    <iframe class="trailer-iframe1" width="450" height="250" src="https://www.youtube.com/embed/ax5YUmkWf_Y?si=luRAeAG6_JcPpvQ7" frameborder="0" allowfullscreen></iframe>
                    <iframe class="trailer-iframe2" width="450" height="250" src="https://www.youtube.com/embed/OifiVCnFKzM?si=QGE3f2cYGo4K1jaW" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </section>

    <!-- Modal para abrir os vídeos embed do Youtube -->
    <div class="modal">
        <div class="modal-content">
            <span class="close-modal">X</span>
            <iframe
                id="video"
                width="560"
                height="315"
                src=""
                title="Music Video-Clip"
                frameborder="1"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen>
            </iframe>
        </div>
    </div>

    <!-- Botão de volta ao topo -->
    <button id="back-to-top" class="hidden">&#9650;
        <span class="tooltip">Voltar para<br> o topo</span>
    </button>
    
    <!-- Rodapé -->
    <footer class="footer">
        <img src="src/images/edgeRunnersLogo.png" alt="EdgeRunnersLogo">
        <p id="ER-phrase">About&nbsp&nbsp&nbsp&nbsp&nbsptime<br>to&nbsp&nbsp&nbsp&nbsp&nbspCRHOME&nbsp&nbsp&nbspup.</p>
        <hr>
        <p id="copyright">&copy; <span id="current-year"></span> Todos os direitos reservados | Feito com ♥️ por Juletopi.</p>
        <p id="my-links">Me encontre aqui:</p>
        <div class="personal-social-icons">
            <a href="https://www.facebook.com/profile.php?id=100006955867774" target="_blank" title="Facebook">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,3c-12.15,0 -22,9.85 -22,22c0,11.03 8.125,20.137 18.712,21.728v-15.897h-5.443v-5.783h5.443v-3.848c0,-6.371 3.104,-9.168 8.399,-9.168c2.536,0 3.877,0.188 4.512,0.274v5.048h-3.612c-2.248,0 -3.033,2.131 -3.033,4.533v3.161h6.588l-0.894,5.783h-5.694v15.944c10.738,-1.457 19.022,-10.638 19.022,-21.775c0,-12.15 -9.85,-22 -22,-22z"></path></g></g></svg>
            </a>
            <a href="https://www.instagram.com/juletopi/" target="_blank" title="Instagram">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M21.58008,7c-8.039,0 -14.58008,6.54494 -14.58008,14.58594v20.83203c0,8.04 6.54494,14.58203 14.58594,14.58203h20.83203c8.04,0 14.58203,-6.54494 14.58203,-14.58594v-20.83398c0,-8.039 -6.54494,-14.58008 -14.58594,-14.58008zM47,15c1.104,0 2,0.896 2,2c0,1.104 -0.896,2 -2,2c-1.104,0 -2,-0.896 -2,-2c0,-1.104 0.896,-2 2,-2zM32,19c7.17,0 13,5.83 13,13c0,7.17 -5.831,13 -13,13c-7.17,0 -13,-5.831 -13,-13c0,-7.169 5.83,-13 13,-13zM32,23c-4.971,0 -9,4.029 -9,9c0,4.971 4.029,9 9,9c4.971,0 9,-4.029 9,-9c0,-4.971 -4.029,-9 -9,-9z"></path></g></g></svg>
            </a>
            <a href="https://www.linkedin.com/in/julio-cezar-pereira-camargo/" target="_blank" title="LinkedIn">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="29" height="29" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M41,4h-32c-2.76,0 -5,2.24 -5,5v32c0,2.76 2.24,5 5,5h32c2.76,0 5,-2.24 5,-5v-32c0,-2.76 -2.24,-5 -5,-5zM17,20v19h-6v-19zM11,14.47c0,-1.4 1.2,-2.47 3,-2.47c1.8,0 2.93,1.07 3,2.47c0,1.4 -1.12,2.53 -3,2.53c-1.8,0 -3,-1.13 -3,-2.53zM39,39h-6c0,0 0,-9.26 0,-10c0,-2 -1,-4 -3.5,-4.04h-0.08c-2.42,0 -3.42,2.06 -3.42,4.04c0,0.91 0,10 0,10h-6v-19h6v2.56c0,0 1.93,-2.56 5.81,-2.56c3.97,0 7.19,2.73 7.19,8.26z"></path></g></g></svg>
            </a>
            <a href="https://github.com/juletopi" target="_blank" title="GitHub">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(4,4)"><path d="M32,6c-14.359,0 -26,11.641 -26,26c0,12.277 8.512,22.56 19.955,25.286c-0.592,-0.141 -1.179,-0.299 -1.755,-0.479v-5.957c0,0 -0.975,0.325 -2.275,0.325c-3.637,0 -5.148,-3.245 -5.525,-4.875c-0.229,-0.993 -0.827,-1.934 -1.469,-2.509c-0.767,-0.684 -1.126,-0.686 -1.131,-0.92c-0.01,-0.491 0.658,-0.471 0.975,-0.471c1.625,0 2.857,1.729 3.429,2.623c1.417,2.207 2.938,2.577 3.721,2.577c0.975,0 1.817,-0.146 2.397,-0.426c0.268,-1.888 1.108,-3.57 2.478,-4.774c-6.097,-1.219 -10.4,-4.716 -10.4,-10.4c0,-2.928 1.175,-5.619 3.133,-7.792c-0.2,-0.567 -0.533,-1.714 -0.533,-3.583c0,-1.235 0.086,-2.751 0.65,-4.225c0,0 3.708,0.026 7.205,3.338c1.614,-0.47 3.341,-0.738 5.145,-0.738c1.804,0 3.531,0.268 5.145,0.738c3.497,-3.312 7.205,-3.338 7.205,-3.338c0.567,1.474 0.65,2.99 0.65,4.225c0,2.015 -0.268,3.19 -0.432,3.697c1.898,2.153 3.032,4.802 3.032,7.678c0,5.684 -4.303,9.181 -10.4,10.4c1.628,1.43 2.6,3.513 2.6,5.85v8.557c-0.576,0.181 -1.162,0.338 -1.755,0.479c11.443,-2.726 19.955,-13.009 19.955,-25.286c0,-14.359 -11.641,-26 -26,-26zM33.813,57.93c-0.599,0.042 -1.203,0.07 -1.813,0.07c0.61,0 1.213,-0.029 1.813,-0.07zM37.786,57.346c-1.164,0.265 -2.357,0.451 -3.575,0.554c1.218,-0.103 2.411,-0.29 3.575,-0.554zM32,58c-0.61,0 -1.214,-0.028 -1.813,-0.07c0.6,0.041 1.203,0.07 1.813,0.07zM29.788,57.9c-1.217,-0.103 -2.411,-0.289 -3.574,-0.554c1.164,0.264 2.357,0.451 3.574,0.554z"></path></g></g></svg>
            </a>
            <a href="http://api.whatsapp.com/send?phone=5569993606894" target="_blank" title="Whatsapp">
                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0,0,256,256"style="fill:#000000;"><g fill="#a59cc2" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g transform="scale(5.12,5.12)"><path d="M25,2c-12.682,0 -23,10.318 -23,23c0,3.96 1.023,7.854 2.963,11.29l-2.926,10.44c-0.096,0.343 -0.003,0.711 0.245,0.966c0.191,0.197 0.451,0.304 0.718,0.304c0.08,0 0.161,-0.01 0.24,-0.029l10.896,-2.699c3.327,1.786 7.074,2.728 10.864,2.728c12.682,0 23,-10.318 23,-23c0,-12.682 -10.318,-23 -23,-23zM36.57,33.116c-0.492,1.362 -2.852,2.605 -3.986,2.772c-1.018,0.149 -2.306,0.213 -3.72,-0.231c-0.857,-0.27 -1.957,-0.628 -3.366,-1.229c-5.923,-2.526 -9.791,-8.415 -10.087,-8.804c-0.295,-0.389 -2.411,-3.161 -2.411,-6.03c0,-2.869 1.525,-4.28 2.067,-4.864c0.542,-0.584 1.181,-0.73 1.575,-0.73c0.394,0 0.787,0.005 1.132,0.021c0.363,0.018 0.85,-0.137 1.329,1.001c0.492,1.168 1.673,4.037 1.819,4.33c0.148,0.292 0.246,0.633 0.05,1.022c-0.196,0.389 -0.294,0.632 -0.59,0.973c-0.296,0.341 -0.62,0.76 -0.886,1.022c-0.296,0.291 -0.603,0.606 -0.259,1.19c0.344,0.584 1.529,2.493 3.285,4.039c2.255,1.986 4.158,2.602 4.748,2.894c0.59,0.292 0.935,0.243 1.279,-0.146c0.344,-0.39 1.476,-1.703 1.869,-2.286c0.393,-0.583 0.787,-0.487 1.329,-0.292c0.542,0.194 3.445,1.604 4.035,1.896c0.59,0.292 0.984,0.438 1.132,0.681c0.148,0.242 0.148,1.41 -0.344,2.771z"></path></g></g></svg>
            </a>
        </div>
        <p id="repository-link">Este site é de código aberto. Clique <a href="https://github.com/juletopi/Projeto_Pagina_Cyberpunk-Edgerunners" target="_blank">aqui</a> para acessar o repositório com o código-fonte.</p>
    </footer>
    <!-- Link para o script do JavaScript -->
    <script src="src/js/script.js"></script>
</body>
</html>

CSS (reset.css):

/* Reset básico para todos os elementos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Remove os estilos padrão das listas não ordenadas */
ul {
    list-style: none;
}

/* Remove a decoração padrão dos links */
a {
    text-decoration: none;
}

/* Adiciona um scroll suave */
html {
    scroll-behavior: smooth;
}

CSS (font.css):

/* Definição da fonte Cyberpunk-Regular */
@font-face {
    font-family: "Cyberpunk-Regular";
    src: url("../fonts/Cyberpunk-Regular.ttf") format("woff2"),
         url("../fonts/Cyberpunk-Regular.ttf") format("woff");
}

/* Definição da fonte Refinery25-Regular */
@font-face {
    font-family: "Refinery25-Regular";
    src: url("../fonts/Refinery25-Regular.ttf") format("woff2"),
         url("../fonts/Refinery25-Regular.ttf") format("woff");
}

CSS (style.css):

/* Estilização básica do corpo do documento */
body {
    font-family: Refinery25-Regular;
    color: #fff;
    background-color: #322d47;
    background-image: url('../images/mainBackgroundImage.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* Estilização da sobreposição para efeitos visuais desejados na imagem de fundo */
.overlay {
    background-color: rgba(0, 0, 0, 0.719);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

/* Estilização da barra de navegação */
.navbar {
    position: fixed;
    z-index: 1000;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    color: #dacf3f;
    background-color: #191625d3;
    box-shadow: 0 10px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

/* Estilização para esconder a navbar */
.navbar.hide {
    transform: translateY(-100%);
}

/* Estilização para a barra de navegação com animação */
.navbar.show {
    transform: translateY(0);
}

/* Estilização do logotipo na barra de navegação */
.logo {
    display: flex;
    align-items: center;
}

/* Estilização da imagem do logotipo na barra de navegação */
.logo img {
    width: 60px;
    height: 60px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
}

/* Estilização geral dos links de navegação */
.nav-links {
    display: flex;
    list-style-type: none;
    font-size: 23px;
    position: relative;
}

/* Estilização dos itens da lista de links de navegação */
.nav-links li {
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
}

/* Estilização específica dos links de navegação */
.nav-links a {
    color: #dacf3f;
    padding-inline: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-decoration: none;
    position: relative;
}

/* Estilização do sublinhado dos links de navegação */
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: #d3c831;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

/* Estilização do sublinhado dos links de navegação ao passar o mouse */
.nav-links a:hover::after,
.nav-links a:focus::after {
    transform: scaleX(1);
    transform-origin: center;
}

/* Estilização da imagem no título da página */
.header-title img {
    width: 100%;
    height: auto;
    max-width: 550px;
    display: block;
    margin: 0 auto;
    padding-top: 160px;
    margin-bottom: -20px;
    text-align: center;
    line-height: 1.0;
    opacity: 0;
    animation: fadeInDown 2.0s forwards;
}

/* Estilização da linha abaixo do título */
.header-title hr {
    border: none;
    border: 2px solid #dacf3f;
    width: 30%;
    margin: 50px auto;
    margin-bottom: -5px;
}

/* Estilização dos subtítulo abaixo da linha abaixo do título*/
.header-title h2 {
    font-size: 28px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);
    padding-top: 35px;
    text-align: center;
    line-height: 1.0;
    line-height: 1.3,5;
    opacity: 0;
    animation: fadeInUp 2.5s forwards;
}

/* Estilização do a seção informativa abaixo do título principal */
.more-info {
    font-size: 23px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);
    padding-top: 50px;
    padding-bottom: 10px;
    padding-left: 150px;
    padding-right: 150px;
    text-align: center;
    line-height: 1.5;
}

/* Estilização do a seção informativa abaixo do título 2 */
.more-info2 {
    font-size: 23px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 300px;
    padding-right: 300px;
    text-align: center;
    line-height: 1.0;
    line-height: 1.3,5;
    opacity: 0;
    animation: fadeInUp 2.5s forwards;
}

/* Estilização a seta animada abaixo da seção informativa */
.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #fff;
    position: relative;
    margin: 10px auto;
    padding-bottom: -15px;
    animation: arrowAnimation 1s infinite alternate;
}

/* Estilização dos títulos principais da página */
.title2, .title3, .title4, .title5, .title6 {
    text-align: center;
    font-family: Cyberpunk-Regular;
    font-size: 65px;
    margin-top: 60px;
    margin-bottom: 20px;
    line-height: 0.7;
    letter-spacing: -13px;
    opacity: 0;
    animation: fadeInDown 2.0s forwards;
}

/* Estilização específica do título 2 da página */
.title2 {
    line-height: 0.6;
}

/* Estilização específica do título 4 da página */
.title4 {
    letter-spacing: -7px;
}

/* Estilização específica do título 5 da página */
.title6 {
    letter-spacing: -5px;
}

/* Estilização da linha horizontal abaixo dos títulos principais da página */
.hr, .hr2, .hr3, .hr4, .hr5 {
    border: none;
    border: 2px solid #dacf3f;
    margin: 35px auto;
    margin-bottom: 20px;
}

/* Estilização específica da linha horizontal 1 da página */
.hr {
    width: 30%;
}

/* Estilização específica da linha horizontal 2 da página */
.hr2 {
    width: 50%;
}

/* Estilização específica da linha horizontal 3 da página */
.hr3 {
    width: 50%;
}

/* Estilização específica da linha horizontal 4 da página */
.hr4 {
    width: 40%;
}

/* Estilização específica da linha horizontal 5 da página */
.hr5 {
    width: 40%;
}

/* Estilização das seções sobre as músicas */
.music1, .music2 {
    display: flex;
    align-items: flex-start;
    background-color: #191625dc;
    color: #fff;
    padding: 50px 0px;
    margin-top: 15px;
    opacity: 0;
    animation: fadeInDown 1.5s forwards;
}

/* Estilização do contêiner do texto das seções sobre as músicas */
.music1 .text-container, .music2 .text-container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Estilização dos títulos das seções sobre as músicas */
.music1 h2, .music2 h2 {
    color: #dacf3f;
    font-size: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Estilização do subtítulo das seções sobre as músicas */
.music1 sub, .music2 sub {
    color: #dacf3f;
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Estilização do parágrafo das seções sobre as músicas */
.music1 p, .music2 p {
    font-size: 23px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Estilização da imagem das seções sobre as músicas */
.music1 img, .music2 img {
    width: 100%;
    height: auto;
    max-width: 250px;
    margin-left: 20px;
    border-radius: 5px;
}

/* Estilização da citação das seções sobre as músicas */
.music1 cite, .music2 cite {
    font-family: Verdana;
    margin-top: 10px;
    font-size: 12px;
    padding-left: 20px;
}

/* Estilização dos links de citação das seções sobre as músicas */
.music1 a, .music2 a {
    color: #dacf3f;
    margin-top: 10px;
}

/*Estilização dos links de citação das seções sobre as músicas ao passar o mouse */
.music1 a:hover, .music2 a:hover {
    color: #00be3c;
    text-decoration: underline;
}

/* Estilização dos ícones SVGs das seções sobre as músicas */
.social-icons {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    display: flex;
    gap: 10px;
}

/* Estilização do preenchimento dos ícones SVGs das seções sobre as músicas ao passar o mouse */
.music1 a:hover svg path, .music2 a:hover svg path {
    fill: #dacf3f;
    transition: fill 0.3s ease;
}

/* Estilização do container do botão das seções sobre as músicas */
.button-container {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    padding-left: 20px;
}

/* Estilização dos botões transparente das seções sobre as músicas */
.transparent-button {
    background-color: transparent;
    color: white;
    border: 2px solid #dacf3f;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Estilização do botão transparente das seções sobre as músicas ao passar o mouse */
.transparent-button:hover {
    background-color: #dacf3f;
    color: white;
    border-color: #dacf3f;
}

/* Estilização da tabela e do título */
.table-wrapper {
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);
    margin: 0 auto;
    width: 80%;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 50px;
    opacity: 0;
    animation: fadeInDown 1.5s forwards;
}

/* Estilização dos títulos das colunas */
table th {
    background-color: #191625dc;
    color: #fff;
    font-size: 26px;
    padding: 10px;
    border-bottom: 4px solid #dacf3f;
}

/* Estilização das células da tabela */
table td {
    background-color: #19162563;
    padding: 10px;
    font-size: 23px;
}

/* Estilização dos links nas células da tabela */
table td a {
    color: #fff;
}

/* Estilização da tabela ao passar o mouse */
table td:hover {
    background-color: #191625dc;
}

/* Estilização dos links nas células da tabela ao passar o mouse */
table td a:hover {
    background-color: #191625dc;
    text-decoration: underline;
    color: #dacf3f;
}

/* Estilização geral da seção sobre os personagens */
.characters {
    text-align: center;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
}

/* Estilização das imagens da seção sobre os personagens */
.characters img {
    max-width: 130px;
}

/* Estilização dos parágrafos da seção sobre os personagens */
.characters p {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 25px;
    padding-right: 25px;
}

/* Estilização geral para os cards */
.card {
    background-color: #191625dc;
    padding: 20px;
    border-radius: 5px;
    overflow: hidden;
    animation: fadeInDown 1.5s forwards;
}

/* Estilização da imagem para os cards */
.card img {
    width: 100%;
    border-radius: 10px;
}

/* Estilização do título para os cards */
.card h2 {
    font-size: 30px;
    color: #dacf3f;
    margin-top: 10px;
}

/* Estilização do parágrafo para os cards */
.card p {
    font-size: 23px;
    margin-top: 5px;
}

/* Estilização da seção sobre o jogo */
.about-game {
    display: flex;
    align-items: flex-start;
    background-color: #191625dc;
    color: #fff;
    padding: 60px 0px;
    margin-top: 15px;
    opacity: 0;
    animation: fadeInDown 1.5s forwards;
}

/* Estilização do contêiner do texto da seção sobre o jogo */
.about-game .text-container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Estilização dos títulos da seção sobre o jogo */
.about-game h2 {
    color: #dacf3f;
    font-size: 40px;
    margin-top: -30px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
}

/* Estilização dos parágrafos da seção sobre o jogo */
.about-game p {
    font-size: 23px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Estilização da imagem da seção sobre o jogo */
.about-game img {
    width: 100%;
    height: auto;
    max-width: 300px;
    margin-left: 20px;
    border-radius: 5px;
}

/* Estilização do link no parágrafo da seção sobre o jogo */
#official-site-link a {
    color: #dacf3f;
}

/* Estilização do link no parágrafo da seção sobre o jogo ao passar o mouse */
#official-site-link:hover a {
    color: #00be3c;
}

/* Estilização específica do segundo título da seção sobre o jogo */
.about-game #title2 {
    font-size: 33px;
    margin-top: 30px;
}

/* Estilização dos ícones SVGs da seção sobre o jogo */
.game-platform-icons {
    margin-top: 20px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Estilização específica do ícone SVG "platform-pc" na seção sobre o jogo */
.game-platform-icons #platform-pc {
    width: 100%;
    height: auto;
    max-width: 100px;
    margin-left: -200px;
    margin-right: 0;
}

/* Estilização específica do ícone SVG "platform-xboxseries" na seção sobre o jogo */
.game-platform-icons #platform-xboxseries {
    width: 100%;
    height: auto;
    max-width: 230px;
    margin-left: 0;
    margin-right: 0;
}

/* Estilização específica do ícone SVG "platform-ps5" na seção sobre o jogo */
.game-platform-icons #platform-ps5 {
    width: 100%;
    height: auto;
    max-width: 150px;
    margin-left: 0;
    margin-right: 0;
}

/* Estilização específica do ícone SVG "platform-xboxone" na seção sobre o jogo */
.game-platform-icons #platform-xboxone {
    width: 100%;
    height: auto;
    max-width: 150px;
    margin-left: 0;
    margin-right: 0;
}

/* Estilização específica do ícone SVG "platform-ps4" na seção sobre o jogo */
.game-platform-icons #platform-ps4 {
    width: 100%;
    height: auto;
    max-width: 150px;
    margin-left: 0;
    margin-right: 0;
}

/* Estilização da seção sobre onde assistir o anime */
.where-to-watch {
    background-image: url('../images/DavidSandevistanBackgroundImage.png');
    background-color: #191625dc;
    background-size: cover;
    background-attachment: fixed;
    background-position: right center;
    color: #fff;
    padding: 60px 0px;
    margin-top: 15px;
    margin-bottom: 120px;
    opacity: 0;
    animation: fadeInDown 1.5s forwards;
}

/* Estilização do logo da "Netlix Series" na seção sobre onde assistir o anime */
#netiflix-cyberpunk-logo {
    width: 100%;
    height: auto;
    max-width: 460px;
    margin-left: 50px;
}

/* Estilização do ícone de classificação indicativa para +16 na seção sobre onde assistir o anime */
#indicative-classification {
    vertical-align: middle;
    width: 100%;
    height: auto;
    max-width: 25px;
    margin-left: 0px;
}

/* Estilização dos parágrafos da seção sobre onde assistir o anime */
.where-to-watch p {
    font-family: Verdana;
    font-size: 16px;
    padding-left: 50px;
    padding-right: 20px;
    padding-top: 40px;
}

/* Estilização geral dos ícones das notas na seção sobre onde assistir o anime */
.score-icons {
    margin-top: 20px;
}

/* Estilização do ícone da crítica do "Rotten Tomatoes" na seção sobre onde assistir o anime */
.score-icons #rotten-tomatoes-critics-icon {
    width: 30px;
    height: auto;
    margin-left: 100px;
}

/* Estilização do ícone da audiência do "Rotten Tomatoes" na seção sobre onde assistir o anime */
.score-icons #rotten-tomatoes-audience-icon {
    width: 25px;
    height: auto;
    margin-left: 45px;
}

/* Estilização do ícone da pontuação do "IMDb" na seção sobre onde assistir o anime */
.score-icons #imdb-icon {
    width: 30px;
    height: auto;
    margin-left: 90px;
}

/* Estilização geral dos textos das notas na seção sobre onde assistir o anime */
.score-text {
    display: flex;
    font-weight: bold;
    cursor:default;
}

/* Estilização do texto da crítica do "Rotten Tomatoes" na seção sobre onde assistir o anime */
.score-text #rotten-tomatoes-critics-score {
    margin-top: -35px;
    margin-left: 36px;
}

/* Estilização do texto da audiência do "Rotten Tomatoes" na seção sobre onde assistir o anime */
.score-text #rotten-tomatoes-audience-score {
    margin-top: -35px;
    margin-left: -42px;
}

/* Estilização do texto da pontuação do "IMDb" na seção sobre onde assistir o anime */
.score-icons #imdb-score {
    margin-top: -35px;
    margin-left: -5px;
}

/* Estilização do container dos vídeos-trailer na seção sobre onde assistir o anime */
.trailer-container {
    margin-left: 50px;
    margin-right: 20px;
}

/* Estilização do texto do parágrafo de "onde assistir" na seção sobre onde assistir o anime */
#where-to-watch-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);
    font-family: "Refinery25-Regular";
    font-size: 26px;
    margin-right: 600px;
}

/* Estilização do link do parágrafo de "onde assistir" na seção sobre onde assistir o anime */
#where-to-watch-link {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.651);
    color: #dacf3f;
    font-family: "Refinery25-Regular";
    font-size: 23px;
    margin-top: -25px;
}

/* Estilização do link no parágrafo de "onde assistir" na seção sobre onde assistir o anime ao passar o mouse */
#where-to-watch-link:hover {
    color: #00be3c;
    text-decoration: underline;
}

/* Estilização específica dos textos 1 e 2 nos vídeos-trailer na seção sobre onde assistir o anime */
.trailer-container #video-text1, 
.trailer-container #video-text2 {
    color: #dacf3f;
    font-family: "Refinery25-Regular";
    font-size: 30px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 50px;
    padding-top: 0;
    display: inline-block;
    border-left: 5px solid #dacf3f;
    padding-left: 10px;
}

/* Estilização específica do texto 2 nos vídeos-trailer na seção sobre onde assistir o anime */
.trailer-container #video-text2 {
    margin-left: 260px;
}

/* Estilização específica dos iframe 1 e 2 do vídeo-trailer na seção sobre onde assistir o anime */
.trailer-iframe1, 
.trailer-iframe2 {
    background-color: #0e0c14;
    display: inline-block;
    width: 500px;
    height: 280px;
}

/* Estilização específica do iframe 2 do vídeo-trailer na seção sobre onde assistir o anime */
.trailer-iframe1 {
    margin-right: 30px;
}

/* Estilização para o botão de volta ao topo */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #0c0a11;
    color: #fff;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: default;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

/* Estilização para o botão de voltar ao topo quando estiver visível */
#back-to-top.visible {
    opacity: 1;
    cursor: pointer;
}

/* Estilização para o botão de voltar ao topo quando estiver visível ao passar o mouse */
#back-to-top.visible:hover {
    color: #dacf3f;
    text-shadow: 0 0 16px #dacf3f;
}

/* Estilização para o texto do botão de voltar ao topo */
#back-to-top .tooltip {
    position: absolute;
    background-color: #0c0a11;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Triângulo do balão de fala */
#back-to-top .tooltip::after {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 10px;
    border-color: #0c0a11 transparent transparent transparent;
    bottom: -1px;
    top: 0%;
    left: 118px;
    transform: translateX(50%) rotate(-90deg);;
}

/* Estilização do texto do botão de voltar ao topo */
.tooltip {
    font-size: 18px;
    position: absolute;
    top: -5px;
    left: -130px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Estilização do texto do botão de voltar ao topo ao passar o mouse */
#back-to-top:hover .tooltip {
    opacity: 1;
    color: #fff;
    text-shadow: none;
}

/* Estilização do rodapé */
.footer {
    background-color: #191625;
    color: #c5c5c5;
    margin-top: 30px;
}

/* Estilização da imagem no rodapé */
.footer img {
    width: 100%;
    height: auto;
    max-width: 90px;
    display: block;
    margin: 0 auto;
    padding-top: 20px;
    margin-bottom: -10px;
    text-align: center;
    line-height: 1.0;
}

/* Estilização "frase especial" no rodapé */
#ER-phrase {
    font-family: Cyberpunk-Regular;
    color: #06FB55;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 40px;
    line-height: 0.9;
    letter-spacing: -2px;
}

/* Estilização da linha horizontal no rodapé */
.footer hr {
    border: none;
    height: 2px;
    background-image: linear-gradient(to right, transparent, #3f375fd3, transparent);
}

/* Estilização geral do texto no rodapé */
.footer p {
    color: #a59cc2;
    text-align: center;
    font-size: 14px;
}

/* Estilização do texto de copyright no rodapé */
#copyright {
    font-family: Verdana;
    padding-top: 30px;
    padding-bottom: 15px;
}

/* Estilização do texto predescente aos links pessoais do autor do site no rodapé */
#my-links {
    font-family: Verdana;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Estilização dos ícones sociais pessoais do autor do site */
.personal-social-icons {
    margin-top: 10px;
    padding-bottom: 30px;
    display: flex;
    justify-content: center;
    gap: 30px;
}

/* Estilização do preenchimento dos ícones sociais pessoais do autor do site ao passar o mouse */
.personal-social-icons a:hover svg path {
    fill: #66617a;
    transition: fill 0.3s ease;
}

/* Estilização do texto no final do site no rodapé */
#repository-link {
    color: #665e86;
    background-color: #0e0c14;
    font-family: Verdana;
    font-size: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Estilização do link texto no final do site no rodapé */
#repository-link a {
    color: #aaa235;
}

/* Estilização do link texto no final do site no rodapé ao passar o mouse */
#repository-link:hover a {
    color: #00be3c;
}

CSS (animation.css):

/* Animação da seta */
@keyframes arrowAnimation {
    from {
        top: 0;
    }
    to {
        top: 10px;
    }
}

/* Animação de fade-in para baixo */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animação de fade-in para cima */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-35px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

CSS (pseudoElementStyles.css):

/* Estilos da barra de rolagem */
::-webkit-scrollbar {
    background-color: #191625;
    width: 10px;
    height: 8px;
}

/* Estilos do indicador da barra de rolagem */
::-webkit-scrollbar-thumb {
    background-color: #dacf3f;
    border-radius: 8px;
}

/* Estilos da seleção de texto */
::selection {
    background-color: #d8db163f;
    color: #fff;
}

CSS (modalVideo.css):

/* Estilização para a modal */
.modal {
    background-color: #1a1727c2;
    backdrop-filter: blur(2px);
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    visibility: hidden;
    z-index: 2000;
}

/* Estilização para o conteúdo da modal */
.modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    border-radius: 5px;
    gap: 15px;
}

/* Estilização para o botão de fechar a modal */
.close-modal {
    font-family: Verdana;
    background-color: #0f0e11;
    color: #fff;
    font-weight: bolder;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    padding: 0;
    box-sizing: border-box;
    transition: text-shadow 0.3s ease;
}

.close-modal:hover {
    color: #dacf3f;
    text-shadow: 0 0 16px #dacf3f;
}

/* Estilização para o iframe dentro da modal */
.modal iframe {
    border-width: 0;
    width: 65vw;
    height: 75vh;
}

/* Estilização para a modal quando estiver aberta */
.modal.open {
    opacity: 1;
    visibility: visible;
}

CSS (responsive.css):

/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .navbar {
        display: none;
    }

    .header-title img {
        max-width: 440px;
        margin-bottom: -30px;
        margin-top: -80px;
    }

    .header-title hr {
        width: 40%;
        margin-bottom: -15px;
    }

    .more-info {
        font-size: 23px;
        padding-top: 50px;
        padding-bottom: 10px;
        padding-left: 45px;
        padding-right: 45px;
    }

    .more-info2 {
        font-size: 23px;
        padding-bottom: 20px;
        padding-left: 80px;
        padding-right: 80px;
    }

    .title2, .title3, .title4, .title5 {
        font-size: 55px;
        letter-spacing: -7px;
    }

    .music1 h2, .music2 h2 {
        font-size: 33px;
        margin-top: -25px;
    }

    .music1 sub, .music2 sub {
        margin-top: 0px;
    }

    .music1 p, .music2 p {
        font-size: 20px;
        margin-left: 0px;
        margin-right: 20px;
    }

    .table-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-left: 30px;
        margin-right: 30px;
        width: 90%;
        text-shadow: none;
        padding-bottom: 10px;
    }

    table th {
        font-size: 20px;
    }

    table td {
        font-size: 22px;
    }

    .characters {
        grid-template-columns: repeat(3, 1fr);
    }

    .card p {
        font-size: 20px;
        margin-top: 5px;
    }

    .about-game img {
        max-width: 250px;
        margin-top: -10px;
    }

    .about-game #title1 {
        font-size: 27px;
        margin-top: -30px;
        margin-bottom: 15px;
    }

    .about-game p {
        font-size: 20px;
        margin-right: 20px;
    }

    .about-game #title2 {
        font-size: 26px;
        margin-top: 40px;
    }

    .game-platform-icons {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .game-platform-icons #platform-pc {
        width: 50%;
        height: auto;
        max-width: 80px;
        margin-left: -240px;
    }

    .game-platform-icons #platform-xboxseries {
        width: 50%;
        height: auto;
        max-width: 210px;
    }

    .game-platform-icons #platform-ps5 {
        width: 50%;
        height: auto;
        max-width: 130px;
    }

    .game-platform-icons #platform-xboxone {
        width: 50%;
        height: auto;
        max-width: 130px;
    }

    .game-platform-icons #platform-ps4 {
        width: 50%;
        height: auto;
        max-width: 130px;
    }

    .where-to-watch {
        background-position: center;
        flex-direction: column;
        margin-bottom: 60px;
    }

    #netiflix-cyberpunk-logo {
        max-width: 350px;
    }

    .score-icons #rotten-tomatoes-critics-icon {
        margin-left: 85px;
    }

    #where-to-watch-text {
        font-size: 22px;
        margin-right: 180px;
    }
    
    #where-to-watch-link {
        font-size: 21px;
        margin-top: -25px;
    }

    .video-text-container #video-text1 {
        display: none;
    }

    .iframe-container .trailer-iframe1 {
        margin-right: 30px;
        margin-top: 50px;
        width: 500px;
        height: 280px;
    }

    .video-text-container #video-text2 {
        display: none;
    }

    .iframe-container .trailer-iframe2 {
        margin-right: 30px;
        margin-top: 20px;
        width: 500px;
        height: 280px;
    }

    .personal-social-icons svg {
        max-width: 25px;
    }

    .footer img {
        display: none;
    }

    #ER-phrase {
        display: none;
    }


    .footer hr {
        display: none;
    }

    #back-to-top {
        display: none;
    }

    .modal #video {
        width: 800px;
        height: 455px;
    }
}

/* Smartphones */
@media screen and (max-width: 767px) {
    .navbar {
        display: none;
    }

    .header-title img {
        max-width: 320px;
        margin-bottom: -40px;
        margin-top: -100px;
    }

    .header-title hr {
        width: 60%;
        margin-bottom: -15px;
    }

    .header-title h2 {
        font-size: 23px;
        padding-top: 35px;
    }

    .more-info {
        font-size: 20px;
        padding-top: 50px;
        padding-bottom: 10px;
        padding-left: 45px;
        padding-right: 45px;
    }

    .more-info2 {
        font-size: 20px;
        padding-bottom: 20px;
        padding-left: 40px;
        padding-right: 40px;
    }

    .title2, .title3, .title4, .title5, .title6 {
        font-size: 50px;
        letter-spacing: -7px;
    }

    .hr, .hr2, .hr3, .hr4, .hr5 {
        width: 55%;
        margin-top: 20px;
    }

    .hr2 {
        width: 65%;
    }

    .hr3 {
        width: 80%;
    }

    .hr4 {
        width: 75%;
    }

    .hr5 {
        width: 80%;
    }

    .music1, .music2 {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-bottom: 35px;
        margin-bottom: -10px;
    }

    .music1 img, .music2 img {
        order: -1;
        margin-top: -10px;
        margin-left: 0px;
    }

    .music1 h2, .music2 h2 {
        order: 0;
        font-size: 30px;
        margin-top: 10px;
        margin-left: 0px;
    }

    .music1 sub, .music2 sub {
        order: 1;
        margin-top: 0px;
        margin-left: 0px;
    }

    .button-container {
        order: 2;
        margin-top: 20px;
        margin-bottom: -30px;
        padding-left: 0px;
        display: flex;
        flex-direction: column;
    }

    .social-icons {
        order: 3;
        margin-top: 20px; 
        padding-left: 0;
        margin-left: 0px;
        align-items: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .music1 p, .music2 p {
        order: 4;
        font-size: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .music1 cite, .music2 cite {
        order: 5;
        padding-left: 0;
    }

    .table-wrapper {
        margin-left: 0px;
        margin-right: 0px;
        width: 100%;
        text-shadow: none;
        padding-bottom: 10px;
    }

    table th {
        font-size: 18px;
    }

    table td {
        font-size: 20px;
    }

    .characters {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

    .characters p {
        padding-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .card h2 {
        font-size: 26px;
        color: #dacf3f;
        margin-top: 10px;
    }

    .card p {
        font-size: 20px;
        margin-top: 5px;
    }

    .about-game {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-bottom: 35px;
        margin-bottom: -10px;
    }

    .about-game img {
        order: -1;
        margin-top: -10px;
        max-width: 260px;
    }

    .about-game #title1 {
        order: 0;
        font-size: 27px;
        margin-top: 20px;
        margin-bottom: 15px;
        margin-left: 1px;
        margin-right: 1px;
    }

    .about-game p {
        order: 1;
        font-size: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .about-game #title2 {
        order: 2;
        font-size: 26px;
        margin-top: 40px;
        margin-left: 1px;
        margin-right: 1px;
    }

    .game-platform-icons {
        order: 3;
        margin-top: 20px; 
        padding-left: 0;
        align-items: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .game-platform-icons #platform-pc {
        width: 15%;
        height: auto;
        max-width: 90px;
        margin-left: 0;
    }

    .game-platform-icons #platform-xboxseries {
        width: 30%;
        height: auto;
        max-width: 220px;
    }

    .game-platform-icons #platform-ps5 {
        width: 25%;
        height: auto;
        max-width: 140px;
    }

    .game-platform-icons #platform-xboxone {
        width: 25%;
        height: auto;
        max-width: 140px;
    }

    .game-platform-icons #platform-ps4 {
        width: 25%;
        height: auto;
        max-width: 140px;
    }

    .where-to-watch {
        background-position: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 60px;
    }

    #netiflix-cyberpunk-logo {
        order: -1;
        max-width: 330px;
        margin-left: 0px;
    }

    #indicative-classification {
        order: 0;
        vertical-align: middle;
        width: 100%;
        max-width: 25px;
        margin-left: 0px;
    }

    .where-to-watch p {
        font-size: 14px;
    }

    .score-icons {
        order: 1;
        align-items: center;
    }

    .score-icons #rotten-tomatoes-critics-icon {
        margin-left: 35px;
        width: 5%;
    }

    .score-icons #rotten-tomatoes-audience-icon {
        margin-left: 50px;
        width: 4%;
    }

    .score-icons #imdb-icon {
        margin-left: 70px;
        width: 5%;
    }
    
    .score-text {
        order: 2;
        justify-content: center;
    }

    .score-text #rotten-tomatoes-critics-score {
        margin-left: 0px;
    }

    .score-text #rotten-tomatoes-audience-score {
        margin-left: -35px;
    }

    .score-text #imdb-score {
        margin-left: -20px;
    }

    #where-to-watch-text {
        order: 3;
        font-size: 21px;
        margin-right: 0px;
        margin-left: -30px;
    }
    
    #where-to-watch-link {
        order: 4;
        font-size: 19px;
        margin-top: -25px;
        margin-left: -30px;
    }

    .video-text-container #video-text1 {
        display: none;
    }

    .iframe-container .trailer-iframe1 {
        order: 5;
        margin-left: -30px;
        margin-right: 0px;
        margin-top: 30px;
        width: 300px;
        height: 175px;
    }

    .video-text-container #video-text2 {
        display: none;
    }

    .iframe-container .trailer-iframe2 {
        order: 6;
        margin-left: -30px;
        margin-right: 0px;
        margin-top: 20px;
        width: 300px;
        height: 175px;
    }

    .footer p {
        font-size: 12px;
    }

    #copyright {
        padding-top: 20px;
        padding-bottom: 5px;
    }

    #my-links {
        padding-top: 10px;
        padding-bottom: 5px;
    }
    
    .personal-social-icons svg {
        max-width: 22px;
    }

    #repository-link {
        margin-top: -20px;
    }

    .footer img {
        display: none;
    }

    #ER-phrase {
        display: none;
    }

    .footer hr {
        display: none;
    }

    #repository-link {
        font-size: 9px;
    }

    #back-to-top {
        display: none;
    }

    .modal #video {
        width: 400px;
        height: 220px;
    }
}

JavaScript:

// Span com atualização automática do ano para o rodapé
document.getElementById('current-year').textContent = new Date().getFullYear();

// Span que esconde e mostra a navbar conforme o usuário rola a página para baixo ou para cima
document.addEventListener('DOMContentLoaded', () => {
    let lastScrollTop = 0;
    const navbar = document.querySelector('.navbar');
    const hideThreshold = 50;

    window.addEventListener('scroll', () => {
        const currentScroll = window.pageYOffset;

        if (Math.abs(currentScroll - lastScrollTop) > hideThreshold) {
            if (currentScroll > lastScrollTop) {
                // Rolagem para baixo
                navbar.classList.add('hide');
                navbar.classList.remove('show');
            } else {
                // Rolagem para cima
                navbar.classList.add('show');
                navbar.classList.remove('hide');
            }

            lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
        }
    });
});

// Seleciona os botões da modal dos vídeos embed do Youtube
const openModalButton1 = document.getElementById("openModalButton1");
const openModalButton2 = document.getElementById("openModalButton2");
const closeModalButton = document.querySelector(".close-modal");
const video = document.getElementById("video");
const modal = document.querySelector(".modal");

// Função para alternar a visibilidade da modal
function alternateModal(){
    modal.classList.toggle("open");
}

// Função para abrir a modal com o vídeo correspondente ao botão clicado
function openModalWithVideo(videoLink) {
    alternateModal();
    video.setAttribute("src", videoLink);
}

// Event listener para o botão do vídeo 1
openModalButton1.addEventListener("click", () => {
    const videoLink = openModalButton1.dataset.videoLink;
    openModalWithVideo(videoLink);
});

// Event listener para o botão do vídeo 2
openModalButton2.addEventListener("click", () => {
    const videoLink = openModalButton2.dataset.videoLink;
    openModalWithVideo(videoLink);
});

// Event listener para o botão de fechar a modal
closeModalButton.addEventListener("click", () => {
    alternateModal();
    video.setAttribute("src", "");
});

// Seleciona o botão "back-to-top" pelo ID
const backToTopButton = document.getElementById('back-to-top');

// Adiciona um evento de scroll à janela
window.addEventListener('scroll', () => {
    // Verifica se o usuário rolou mais de 100 pixels para baixo
    if (window.scrollY > 100) {
        // Se sim, adiciona a classe "visible" ao botão
        backToTopButton.classList.add('visible');
    } else {
        // Se não, remove a classe "visible" do botão
        backToTopButton.classList.remove('visible');
    }
});

// Adiciona um evento de clique ao botão
backToTopButton.addEventListener('click', () => {
    // Quando clicado, faz a página rolar suavemente de volta ao topo
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});

🖼️ Imagem da página

Voltar para o início ↺

👤 Autor

_{Júlio Cézar | Juletopi}

_{LinkedIn - Júlio Cézar P. Camargo}
_{Email - [email protected]}
_{Whatsapp - +55 (69) 9 9360-6894}
_{Instagram - @juletopi}

Voltar para o início ↺

Feito com ❤️ por Juletopi.

Name		Name	Last commit message	Last commit date
Latest commit History 48 Commits
Assets		Assets
CodigoAula01		CodigoAula01
CodigoAula02		CodigoAula02
CodigoAula03		CodigoAula03
CodigoAula04		CodigoAula04
CodigoAvaliacao01		CodigoAvaliacao01
CodigoAvaliacao02		CodigoAvaliacao02
LICENSE		LICENSE
README.md		README.md

License

juletopi/Topicos_Especiais_em_Tecnologia

Folders and files

Latest commit

History

Repository files navigation

Tópicos Especiais em Tecnologia 🌐

Sumário 🧾

👨‍🏫 Professor:

🌟 Tópicos Especiais em Tecnologia

📋 Ementa:

🎯 Objetivo Geral:

🎯 Objetivos Específicos:

📚 Conceitos Aprendidos:

1. VSCode, HTML e Web-páginas

🖼️ Imagem da página

2. CSS e Estilização de Página

HTML:

CSS:

🖼️ Imagem da página

3. Trabalhando com tabelas em HTML

HTML:

CSS:

🖼️ Imagem da página

AVALIAÇÃO 01 - HTML e CSS

HTML:

CSS (reset.css):

CSS (font.css):

CSS (style.css):

CSS (animation.css):

CSS (pseudoElementStyles.css):

🖼️ Imagem da página

4. Operadores e Tabelas em JavaScript

HTML:

CSS (reset.css):

CSS (style.css):

CSS (scrollbar.css):

JavaScript:

🖼️ Imagem da página

AVALIAÇÃO 02 - HTML, CSS e JAVASCRIPT

HTML:

CSS (reset.css):

CSS (font.css):

CSS (style.css):

CSS (animation.css):

CSS (pseudoElementStyles.css):

CSS (modalVideo.css):

CSS (responsive.css):

JavaScript:

🖼️ Imagem da página

👤 Autor

About

Topics

Resources

License

Stars

Watchers

Forks

Languages