ProyectoPagWeb.github.io/Index.html at main · ProyectPagWeb/ProyectoPagWeb.github.io · 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
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prevención de Uso de Drogas</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }
        header {
            background: url('fondo.jpg') no-repeat center center/cover;
            color: white;
            padding: 50px 0;
            text-align: center;
            animation: fadeIn 1s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        h1 {
            margin: 20px 0;
            font-size: 36px;
            transition: transform 0.3s;
            position: relative;
            display: inline-block;
        }
        h1:hover {
            transform: translateY(-5px);
        }
        h1:before, h1:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #4CAF50, #FF5722);
            left: 0;
            transform: scaleX(0);
            transition: transform 0.5s ease;
        }
        h1:before {
            top: -10px;
        }
        h1:after {
            bottom: -10px;
        }
        h1:hover:before, h1:hover:after {
            transform: scaleX(1);
        }
        .portada {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #4CAF50;
            color: white;
            animation: slideIn 1s ease-in-out forwards;
        }
        @keyframes slideIn {
            from { transform: translateY(-100%); }
            to { transform: translateY(0); }
        }
        p {
            margin: 10px 20px;
            font-size: 18px;
            transition: color 0.3s;
        }
        p:hover {
            color: #4CAF50;
        }
        img, video {
            display: block;
            margin: 10px auto;
            border-radius: 10px;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        img:hover, video:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }
        section {
            margin: 20px;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            animation: fadeInSection 0.5s ease-in-out;
        }
        @keyframes fadeInSection {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .highlight {
            animation: blink 1.5s infinite;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
    </style>
</head>
<body>
    <div class="portada">
        <h1 class="highlight">Bienvenido a la Prevención de Uso de Drogas</h1>
    </div>
    <header>
  <h1 style="color: #008000;">Libre de Adicciones 🚭</h1>
</header>
        <h1>¿Qué son las drogas?⁉️</h1>
        <p>Las drogas son sustancias que pueden alterar la forma en que funciona el cerebro y el cuerpo. Pueden ser utilizadas para tratar enfermedades o aliviar el dolor, pero también pueden ser utilizadas de manera recreativa o abusiva, lo que puede llevar a problemas de salud y adicción. Incluyen medicamentos recetados, medicamentos de venta libre, alcohol, tabaco y drogas ilegales.</p>
        <img src="drogas.jpg" alt="Descripción de la imagen" width="300">
    </section>
    <section>
        <h1>¿En qué afectan las drogas?⁉️</h1>
        <p>Las drogas son sustancias que actúan sobre nuestro sistema nervioso central. A nivel cerebral, las drogas actúan sobre los neurotransmisores alterando y perturbando el correcto funcionamiento, afectando a la conducta, estado de ánimo o percepción. Además, son susceptibles de crear dependencia física y/o psicológica.</p>
        <video src="efectos.mp4" width="400" controls></video>
    </section>
    <section>
        <h1>Tipos de drogas‼️</h1>
        <p>Existen numerosos tipos de drogas, que pueden clasificarse de diferentes maneras. Las más comunes incluyen drogas psicoactivas, como el cannabis, el alcohol y las drogas sintéticas, así como drogas con fines terapéuticos, como medicamentos opioides.</p>
        <img src="tipos.jpg" alt="Descripción de la imagen" width="300">
    </section>
    <section>
        <h1>🔺 Marihuana 🔺</h1>
        <p>La marihuana es la droga psicotrópica producida por la planta cuyo nombre científico es Cannabis sativa. Fumar marihuana puede afectar la memoria y las funciones cognitivas y causar efectos cardiovasculares perjudiciales, como hipertensión arterial.</p>
        <img src="marihuana.jpg" alt="Descripción de la imagen" width="300">
    </section>
    <section>
        <h1>🔺 Cristal-Metanfetamina 🔺</h1>
        <p>La metanfetamina, también conocida como cristal o meta, es una sustancia estimulante sintética que afecta el sistema nervioso central. Es una droga altamente adictiva que puede ser consumida por vía oral, nasal, fumada o inyectada. Sus consecuencias son adicción, problemas de salud y problemas personales.</p>
        <video src="cristal.mp4" width="400" controls></video>
    </section>
    <section>
        <h1>🔺 Tussi (Coctel de drogas - cocaína rosa) 🔺</h1>
        <p>Su consumo es inhalado. Sus efectos consisten en euforia y adrenalina. Te hace sentir bien, pero puede provocar pérdida de sueño y adicción. Afecta tanto el sistema nervioso como el cerebro y las fosas nasales.</p>
        <img src="tussi.jpg" alt="Descripción de la imagen" width="300">
    </section>
    <section>
        <h1>🔺 Cocaína 🔺</h1>
        <p>La cocaína es una droga muy adictiva que se elabora a partir de las hojas de coca, una planta que crece en América del Sur. Algunas personas usan esta sustancia ilegal para drogarse. En casos raros, también se utiliza como medicamento recetado para anestesia durante ciertas cirugías.</p>
        <img src="cocaína.jpg" alt="Descripción de la imagen" width="200">
    </section>
</body>
</html>