index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- feather icons -->
    <script src="https://unpkg.com/feather-icons"></script>
    <!-- icone do site -->
    <link rel="shortcut icon" href="assets/png/shortcut-icon.png" type="image">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- referencia ao css -->
    <link rel="stylesheet" href="css/config.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/responsive/resp-index.css">

    <!-- CSS media query em um elemento de link para dispositivos com altura máxima de 800px -->
    <link rel="stylesheet" media="(max-width: 500px)" href="css/responsive/mobi-index.css" />
    <title>Web History</title>
</head>
<body>
    <section class="shadows" ondragstart="return false;">
        <div class="vignette"></div>
        <div class="filter"></div>
    </section>

    <header>
        <div class="header">
            <p class="references" id="name-web"><a class="references" href="subpages/references.html"><span id="arrow">↠</span><span style="color: var(--mid-brown);-webkit-text-stroke: 1px var(--mid-brown);"> Referências </span><span id="arrow">↞</span></a></p>
            <div class="name-web">
                <h1 id="name-web" ><a id="name-web" href="index.html">Web History</a></h1>
            </div>
        </div>
        <hr>
    </header>

    <main>
        <div class="main">
            <h1 id="title">A Trajetória da <span style="animation: neon 1s 3s 3 forwards">Mulher</span> na<br> História do Brasil</h1>
            <div class="back-shadow-title"></div>
            <div class="timeline"></div>
            <div class="timeline" id="timeline-id"></div>
            <div class="box-time" ondragstart="return false;">
                <a  href="subpages/brasil-colonia.html">      <img id="box1" src="assets/box/box 1.png" alt="brasil-colonia"></a>
                <a  href="subpages/brasil-imperio.html">      <img id="box2" src="assets/box/box 2.png" alt="brasil-imperio"></a>
                <a  href="subpages/primeira-republica.html">  <img id="box3" src="assets/box/box 3.png" alt="primeira-republica"></a>
                <a  href="subpages/era-vargas-republica.html"><img id="box4" src="assets/box/box 4.png" alt="era-vargas"></a>
                <a  href="subpages/era-vargas-republica.html#title-populista"><img id="box5" src="assets/box/box 5.png" alt="republica-populista"></a>
                <a  href="subpages/ditadura-militar.html">    <img id="box6" src="assets/box/box 6.png" alt="ditadura-militar"></a>
                <a  href="subpages/nova-republica.html">      <img id="box7" src="assets/box/box 7.png" alt="nova-republicca"></a>
            </div>
            <div class="back-shadow"></div>
        </div>
    </main>

    <footer>
        <div class="footer">
            <div class="text-icon">
                <label for="icon-network" id="about-us" style="-webkit-text-stroke: 1px var(--light-brown);">SOBRE NÓS</label>
                <div name="icon-network" class="icon-network">
                    <a href="https://www.instagram.com/maju_raposo" class="insta" target="_blank"><i id="insta1" data-feather="instagram"></i></a>
                    <a href="https://github.com/MaJuks/TCC.git" class="git" target="_blank"><i id="git" data-feather="github"></i></a>
                    <a href="https://www.instagram.com/riitamavila" class="insta" target="_blank" ><i id="insta2" data-feather="instagram"></i></a>
                </div>
            </div>
            <p id="credits">Copyright ©  Maria Júlia & Rita Maria 2022</p>
        </div>
    </footer>
    <script>
        feather.replace()
    </script>
</body>
</html>