Agrinho/doadores.html at main · fabiagrinho/Agrinho · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doação de Órgaos</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="cabecalho">
        <button data-text="Awesome" class="button">
            <span class="actual-text">&nbsp;Agrinho&nbsp;</span>
            <span class="hover-text" aria-hidden="true">&nbsp;Agrinho&nbsp;</span>
        </button>

        <div class="container">
            <ul>
                <li class="lista-menu__item"><a href="index.html" class="lista-menu__link">Ínicio</a></li>
            </ul>
            <ul class="opcoes">
                <input type="checkbox" id="menu" class="container__botao">
                <label for="menu">
                  <li class="opções__doação">Doação de Sangue</li>
                </label>
                <ul class="lista-menu">
                    <li class="lista-menu__item"><a href="oqépreciso.html" class="lista-menu__link">Como ser doador?</a></li>
                    <li class="lista-menu__item"><a href="carteirinha_sangue.html" class="lista-menu__link">Carteirinha de doação</a></li>
                    <li class="lista-menu__item"><a href="como_a_coleta.html" class="lista-menu__link">Como a coleta é realizada?</a></li>
                    <li class="lista-menu__item"><a href="onde_doar_s.html" class="lista-menu__link">Onde doar?</a></li>
                </ul>
            </ul>

            <ul class="opcoes2">
                <input type="checkbox" id="menu2" class="container__botao2">
                <label for="menu2">
                  <li class="opções__doação2">Doação de Órgãos</li>
                </label>
                <ul class="lista-menu">
                    <li class="lista-menu__item"><a href="como_doar_org.html" class="lista-menu__link">Como Doar?</a></li>
                    <li class="lista-menu__item"><a href="doadores.html" class="lista-menu__link">Tipos de Doadores</a></li>
                    <li class="lista-menu__item"><a href="quais_orgaos.html" class="lista-menu__link">Quais Órgaos Podem ser Doados?</a></li>
                    <li class="lista-menu__item"><a href="lista_espera.html" class="lista-menu__link">Lista de Espera de Transplante de Órgaos</a></li>
                    <li class="lista-menu__item"><a href="riscos.html" class="lista-menu__link">Riscos no Pós-Transplante</a></li>
                </ul>
            </ul>
        </div>
    </header>

    <section class="carrossel">
        <!-- Slider main container -->
        <div class="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
                <h3 class="carrossel__titulo1">Doação de Sangue e Órgãos</h3>
                <img class="sangue__carrossel__img" src="img/sangue__carrossel.png" alt="Imagem de uma gota de sangue com um fundo de vermelho com um rosa claro"></div>
                <img class="orgão__carrossel__img" src="img/órgão__carrossel.png" alt="Imagem de dois bonequinhos onde um esta com um coração em vermelho e outro com um coração pontilhado de vermelho, e um esta doando esse órgão para o outro">
            <div class="swiper-slide">
                <h3 class="carrossel__titulo2">Junho Vermelho</h3>
                <p class="carrossel__frase">É o mês da conscientização sobre a doação de sangue</p>
                <img src="img/bolsas de sangue.png" alt="Imagem com três bolsas de sangue"></div>
            <div class="swiper-slide">
                <p class="carrossel__frase2">Setembro é o mês da conscientização da importância da doação de órgãos</p>
                <img src="img/Doação de.png" alt="Imagem de um coração humano com a escrita de doação de órgãos em volta"></div>
        </div>

        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev1"></div>
        <div class="swiper-button-next1"></div>

        <!-- If we need scrollbar -->
        <div class="swiper-scrollbar"></div>
    </section>

    <section class="retangulo">
        <h1 class="tipos__doadores">Tipos de Doadores</h1>
    </section>
    <p class="doadores">Existem dois tipos de doadores de órgãos.</p>
    <div class="cards">
        <div class="myCard1">
            <div class="innerCard1">
                <div class="frontSide1">
                    <p class="title1">Doador em Vida</p>
                </div>
                <div class="backSide1">
                    <p>Doador em vida: Precisa ter uma saúde boa, ter a certeza de que quando for doar não íra prejudicar a saúde.</p>
                </div>
            </div>
        </div>

        <div class="myCard2">
            <div class="innerCard2">
                <div class="frontSide2">
                    <p class="title2">Doador já Falecido</p>
                </div>
                <div class="backSide2">
                    <p> Doador já falecido: É quem tem morte encefálica (é a morte onde tem a parada de todas as funções do cérebro). Assim os outros órgãos continuam funcionando.</p>
                </div>
            </div>
        </div>
    </div>


    <footer class="foo_ter">
        <img class="logo" src="img/logo_wilson.jpeg" alt="Logo do colégio wilson joffre">
        <h1 class="wilson"><a href="https://wilsonjoffre.com.br/">Colégio Estadual Wilson Joffre</a></h1>

        <button class="btn">
           <a href="https://github.com/fabiagrinho"> <svg width="40" height="40" fill="#0092E4" xmlns="https://github.com/fabiagrinho/Agrinho" data-name="Layer 1" viewBox="0 0 24 24" id="github">
              <path d="M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z"></path>
            </svg></a>
        </button>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
        spaceBetween: 10,
        autoplay: {
        delay: 4000,
        },
        });
    </script>
</body>
</html>