final-project/index.html at main · Estivenm06/final-project · 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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./resources/cssFiles/index.css">
    <link rel="shortcut icon" href="./resources/images/Logo-icon.png" type="image/x-icon">
    <title>inicio</title>

    <header>
        <nav>
            <input type="checkbox" id="check">
            <label for="check">
                <img class="checked" src="./resources/images/menu.png" alt="menu-bar">
            </label>
            <div><a class="logotype" href="./index.html"></a></div>
            <ul class="menu">
                <li>
                    <a id="navbar_item" class="login_header" href="./resources/htmlFiles/login.html">Iniciar sesión</a>
                </li>
                <li>
                    <a id="navbar_item" class="signup_header" href="./resources/htmlFiles/register.html">Registrarse</a>
                </li>
                <li>
                    <a id="navbar_item" href="./resources/htmlFiles/plans.html#review">Reseñas</a>
                </li>
                <li>
                    <a id="navbar_item" href="#title2">Servicios</a>
                </li>
                <li>
                    <span class="account" id="account"></span>
                    <img id="user_img" src="./resources/images/user.png" alt="user">
                </li>
                <li><input type="button" onclick="Log_out()" value="Cerrar Sesión" class="log_out"></input></a>
                </li>
            </ul>


            <div class="test open">
                <li><a href="./resources/htmlFiles/login.html" id="drop" class="login_mobile">Iniciar sesión</a></li>
                <li><a href="./resources/htmlFiles/register.html" id="drop" class="signup_mobile">Registrarse</a></li>
                <li><a href="./resources/htmlFiles/plans.html#review" id="drop">Reseñas</a></li>
                <li><a href="#title2" id="drop">Servicios</a></li>
                <li>
                    <span id="drop" class="account_mobile"></span>
                    <img id="user_img_mobile" src="./resources/images/user.png" alt="user">
                </li>
                <li><input type="button" onclick="Log_out()" value="Cerrar Sesión" class="log_out log_out_mobile"></input></li>
            </div>

        </nav>
    </header>

</head>

<body>


    <section class="all_body">
        <div class="greeting_container">
            <div class="greeting">
              <h1>Bienvenido</h1><span id="nameuser"></span>
            </div>
        </div>
        <section class="about">
            <div class="container">
                <h1 class="title">Sobre nosotros</h1>

                <div>
                    <p class="text">
                        ¿Alguna vez has mirado al cielo nocturno y te has maravillado ante la inmensidad del
                        cosmos?.</br>
                        La astronomía es una ciencia fascinante que nos invita a explorar los secretos del universo,
                        desde
                        las estrellas y galaxias distantes hasta los planetas cercanos.
                        Sin embargo, para adentrarse en este apasionante mundo, uno necesita acceso a imágenes de
                        calidad
                        que muestren la belleza del espacio profundo y los objetos celestes.</br>
                        Aquí es donde entra en juego "Nebulã", una innovadora empresa dedicada a proporcionar imágenes
                        astronómicas de alta calidad de manera accesible para todos los entusiastas de la
                        astronomía.</br>
                        Nuestra misión es acercar las maravillas del universo a tu pantalla, permitiéndote explorar el
                        cosmos desde la comodidad de tu hogar.</br>
                    <div class="button-modal">
                        <button class="button">
                            Presione
                        </button>
                    </div>
                    </p>
                </div>

                <div class="modal">
                    <dialog id="float_window">
                        <div class="photo_container">
                            <div class="photo">

                            </div>
                            <button class="close_button">
                                <svg viewBox="0 0 24 24">
                                    <path
                                        d="m12.002 2.005c5.518 0 9.998 4.48 9.998 9.997 0 5.518-4.48 9.998-9.998 9.998-5.517 0-9.997-4.48-9.997-9.998 0-5.517 4.48-9.997 9.997-9.997zm0 1.5c-4.69 0-8.497 3.807-8.497 8.497s3.807 8.498 8.497 8.498 8.498-3.808 8.498-8.498-3.808-8.497-8.498-8.497zm0 7.425 2.717-2.718c.146-.146.339-.219.531-.219.404 0 .75.325.75.75 0 .193-.073.384-.219.531l-2.717 2.717 2.727 2.728c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.384-.073-.53-.219l-2.729-2.728-2.728 2.728c-.146.146-.338.219-.53.219-.401 0-.751-.323-.751-.75 0-.192.073-.384.22-.531l2.728-2.728-2.722-2.722c-.146-.147-.219-.338-.219-.531 0-.425.346-.749.75-.749.192 0 .385.073.531.219z"
                                        fill-rule="nonzero" />
                                </svg>
                            </button>
                        </div>
                    </dialog>
                </div>

            </div>


        </section>

        <section class="services">
            <h1 id="title2">Servicios</h1>
            <div class="containerS">
                <p class="text01">
                    En "Nebulã", creemos que la belleza del universo no debe estar reservada solo para astrónomos
                    profesionales. </br>
                    Por eso, trabajamos arduamente para capturar imágenes espectaculares de los objetos celestes más
                    fascinantes y convertirlas en recursos accesibles para todos.
                    Así que, si eres un apasionado de la astronomía, un educador que busca recursos visuales impactantes
                    o
                    simplemente alguien que busca contemplar las maravillas del espacio, "Nebulã" es tu fuente confiable
                    de
                    imágenes astronómicas excepcionales. </br>
                </p>

                <p class="text02">
                    ¡Come and explore the universe with us!
                </p>
            </div>
            <div class="button-class">
                <button id="buttonS">
                    <a class="plans" href="./resources/htmlFiles/plans.html">Planes</a>
                </button>
            </div>
        </section>
    </section>

    <footer>
        <div class="footer_container">
            <div class="why">
                <span class="title_footer">¿Por qué usar Nebulã? <span id="copy">&copy;</span></span>
                <p>Es tu fuente confiable de imágenes astronómicas excepcionales que combina calidad, accesibilidad y
                    una pasión por la astronomía. Si eres un entusiasta de la astronomía, un educador en busca de
                    recursos visuales impactantes o simplemente alguien que busca contemplar las maravillas del espacio.
                </p>
            </div>
            <div class="social_media">
                <span class="title_footer social">Redes Sociales</span>
                <div class="media">
                    <a class="links_footer instagram" href="./resources/htmlFiles/plans.html">.......</a>
                </div>
                <div class="media">
                    <a class="links_footer facebook" href="./resources/htmlFiles/plans.html">.......</a>
                </div>
                <div class="media">
                    <a class="links_footer twitter" href="./resources/htmlFiles/plans.html">.......</a>
                </div>
                <div class="media">
                    <a class="links_footer github" href="./resources/htmlFiles/plans.html">.......</a>

                </div>
            </div>
            <div class="collaborations">
                <span class="title_footer">Colaboraciones</span>
                <p>-CelestialTech</br>-CosmicLearning</br>-eCommerceGalaxy</br>-AstronomySoft</br>-StellarPrints</p>
            </div>
        </div>
    </footer>

</body>
<script src="./resources/jsFiles/index.js"></script>
</html>