Agrinho/index.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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!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 Sangue e Órgãos</title>
    <link rel="stylesheet" href="reset.css">
    <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>

        <div class="container">
            <!--Card 1 -->
            <div class="card card-1">
                <!-- card-header -->
                <div class="card-header">
                    <img src="img/img__1.jpg" class="card-img" alt="Imagem com um coração e escrita doe sangue doe vida">
                </div>
                <!-- card-header -->

                <!-- card-body -->
                <div class="card-body">
                    <h2 class="card-titulo">Doação de Sangue</h2>
                    <p class="card-texto">
                        A doação de sangue é quando é
                        coletado sangue de um doador e armazenado em bancos de sangue ou
                        hemocentros para quem precisa.
                    </p>
                </div>
                <!-- card-body -->

                <!-- card-footer -->
                <div class="card-footer">
                    <a href="dsangue.html">Saiba mais</a>
                </div>
                <!-- card-footer -->
            </div>
            <!--Card 1 -->

            <!--Card 2 -->
            <div class="card card-2">
                <!-- card-header -->
                <div class="card-header">
                    <img src="img/img__2.jpg" class="card-img" alt="">
                </div>
                <!-- card-header -->

                <!-- card-body -->
                <div class="card-body">
                    <h2 class="card-titulo">Doação de Órgãos</h2>
                    <p class="card-texto">
                        A doação de órgãos acontece quando um doador
                        que pode ser vivo ou já falecido, doa algum órgão
                        para o tratamento de outras pessoas.
                    </p>
                </div>
                <!-- card-body -->

                <!-- card-footer -->
                <div class="card-footer">
                    <a href="dorgaos.html">Saiba mais</a>
                </div>
                <!-- card-footer -->
            </div>
            <!--Card 2 -->
        </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>