UnderSound/about.html at main · davidzz-code/UnderSound · 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
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./resources/css/main.css"" type=" text/css">
    <link rel="stylesheet" href="./resources/css/about.css" type="text/css">
    <title>UnderSound</title>
</head>

<body>
    <!-- Menú header fijo de la página  -->
    <header>
        <div class="logo">
            <h2><a href="index.html">UnderSound</a></h2>
        </div>
        <nav>
            <!-- Menú principal  -->
            <ul class="list">
                <li><a href="./galeria.html">Galería</a></li>
                <li><a href="index.html">Ciudades</a>

                    <!-- Submenú de las ciudades  -->
                    <ul class="sublist">
                        <li><a href="./index.html">Madrid</a></li>
                        <li><a href="./index.html">Barcelona</a></li>
                        <li><a href="./index.html">Palma de Mallorca</a></li>
                        <li><a href="./index.html">Sevilla</a></li>
                        <li><a href="./index.html">Bilbao</a></li>
                        <li><a href="./index.html">Salamanca</a></li>
                    </ul>
                </li>
                <li><a href="events.html">Eventos</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </nav>
    </header>

    <!-- Sección contenedora del about -->
    <section class="container__about">
        <h1>About</h1>
        <div class="about-flexbox">
            <article class="about">
                UnderSound es una página web pensada para dar voz y valorar a los músicos callejeros. A través de
                esta página web se puede conocer sus historias, sus ciudades y su música. La página "Eventos" organiza
                una tabla de los eventos y fiestas populares en las que los músicos callejeros estarán tocando.
                Esta página web acerca al público a esos músicos a los que muchas veces no se les valora como
                merecen.</br>
                </br>
                Lorem ipsum dolor sit amet consectetur adipiscing elit, cum arcu magnis blandit potenti purus primis
                sollicitudin, ac montes platea porttitor nisl vitae. Diam vel aliquam gravida malesuada torquent
                maecenas mollis, rutrum feugiat cubilia mattis lectus cum volutpat aliquet, dui risus sagittis vivamus
                ullamcorper nulla. Hendrerit montes bibendum senectus vulputate fames aptent nec pharetra habitasse
                varius non placerat lacus aliquam, quis etiam lacinia ornare quisque arcu hac vitae curabitur accumsan
                commodo malesuada.
            </article>

            <img class="vertical" src="./resources/artists/Duo.jpg" alt="Foto random para el about">
        </div>

        <!-- Sección contenedora del formulario y los datos de contacto -->
        <div class="container__form">
            <div class="form">
                <div class="form-title">
                    <h1>Formulario</h1>
                </div>
                <div class="inputs">
                    <form action="#" method="post">
                        <!-- Nombre, apellido y el email -->
                        <input class="name" type="text" name="name" id="name" placeholder="Nombre" required>
                        <input class="email" type="email" name="email" id="email" placeholder="Email" required><br>
                        <textarea class="mensaje" id="mensaje" name="mensaje" pattern="+[0-9]{2}[0-9]{9}"
                            placeholder="Mensaje" required></textarea>

                        <!-- Botones "radio" de selección -->
                        <div class="radio">
                            <label for="answer">¿Tocas un instrumento?</label><br><br>
                            <input type="radio" name="answer" id="answerYes" value="si">
                            <label for="answerYes">Sí</label>
                            <input type="radio" name="answer" id="answerNo" value="no">
                            <label for="answerNo">No</label>
                        </div><br>

                        <!-- Botón de submit -->
                        <input class="button submit" name="submit" type="submit" value="Enviar">
                        <input class="button reset" name="reset" type="reset" value="Restablecer">
                    </form>
                </div>
            </div>

            <div class="contact">
                <div class="contact-title">
                    <h1>¡Contáctanos!</h1>
                </div>
                <div class="contact-info">
                    <p>Email: hola@gmail.com</p>
                    <p>Teléfono: 123 123 123</p>
                    <p>Dirección: Calle Ejemplo, nº31</p>
                </div>
            </div>
        </div>
        <section class="container__footer">
            <h1>FOOTER</h1>
        </section>
    </section>
</body>

</html>