firstHackaton/index.html at main · JonathanADB/firstHackaton · 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
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Desmos</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>

    <nav class="navbar">
        <a class="marca" href="#">
            <img src="img/logomarca.svg" alt="Logo de Desmos">
        </a>

        <div class="nav-enlaces">
            <ul class="nav-links">
                <li class="nav-li"><a class="inicio" href="contacto.html">Iniciar sesión</a></li>
                <li class="nav-li"><a class="contactar" href="/formulario-contacto.html">Contacto</a></li>
            </ul>
            <button class="nav-button" type="button">Apúntate</button>
        </div>
        <div class="burger" onclick="toggleNav()">
            <div class="burger-first"></div>
            <div class="burger-second"></div>
            <div class="burger-last"></div>
        </div>
    </nav>

    <div class="primeraZonaVerde_JI">
        <div class="video-container">
            <div class="titulo_JI">
                <h1>Donde la colaboración cobra vida</h1>
            </div>
            <div class="videoFondo_JI">
                <video src="/img/logoAnimado.mp4" autoplay muted loop></video>
            </div>
        </div>


        <div class="botonesFrase_JI">
            <h2 class="text-connect">Conectando profesionales como tú para intercambiar
                servicios y ofertas de manera eficiente
            </h2>
            <div class="Botones_JI">
                <button id="irASeccion" class="soy_JI">Soy un profesional</button>
                <button class="Busco_JI">Busco a profesional</button>
            </div>
        </div>
    </div>

    <div class="info-web">
        <div class="descubrir-forma">
            <div class="images-container">
                <img src="./img/girl_infoweb.png" alt="Chica con portátil" class="img-girl">
                <img src="./img/boy_infoweb.png" alt="Chico con portátil" class="img-boy">
            </div>
            <h1>Descubre una nueva forma de encontrar y ofrecer servicios</h1>
            <p>Somos una plataforma online diseñada <strong>para facilitar el intercambio de servicios entre
                    profesionales</strong> de diversos sectores. Conectamos a demandantes de servicios con
                proveedores
                profesionales</strong> de diversos sectores.</p>
            <p>Conectamos a demandantes de servicios con proveedores
                adecuados,
                ofreciendo una alternativa innovadora a las plataformas tradicionales de freelance.</p>
        </div>

        <div class="intersection1">
            <h1>Nuestro objetivo es simplificar conexión entre la búsqueda de profesionales y la oferta de nuevas
                oportunidades.</h1>
        </div>

        <div>
            <div class="funtion-infoweb">
                <h1>¿Cómo funciona?</h1>
                <img src="./img/2boy_infoweb.svg" alt="2 chicos felices mirando el ordenador" class="img-2boy">
                <div>
                    <h2>✅Publica tu solicitud</h2>
                    <p>Describe el servicio que necesitas o la oferta que deseas compartir.</p>
                </div>
                <div>
                    <h2>✅Encuentra a tu profesional</h2>
                    <p>Nuestra plataforma identifica a los proveedores más adecuados para tus necesidades.</p>
                </div>
                <div>
                    <h2>✅Haz tus negocios</h2>
                    <p>Comunícate directamente con los profesionales, negocia los términos y completa la transacción de
                        manera segura.</p>
                </div>
            </div>
        </div>
    </div>

    <section class="unete">
        <div class="textunete">
            <h2 class="unete-h2">Únete a Desmos hoy mismo</h2>
            <h3 class="conectando-h3">Conectando talentos, creando soluciones</h3>
            <div class="buttons">
                <button class="soy-button">Soy un profesional</button>
                <button class="busco-button">Busco a profesionales</button>
            </div>
        </div>
    </section>

    <div class="contenedor-cards">
        <div class="card" id="tarjetaProfesionales">
            <img src="./img/buscarprofesionales.png" alt="Imagen 1">
            <div class="descripcion">
                <h2 class="h2cards">Para quien busca profesionales</h2>
                <ul>
                    <li>Encuentra rápidamente a profesionales calificados para tus proyectos</li>
                    <li>Publica tus solicitudes y recibe ofertas competitivas en tiempo récord</li>
                    <li>Amplía tu red de contactos profesionales y accede a oportunidades exclusivas.</li>
                </ul>
                <button class="boton-circular" type="button"><a href="/tarjetaSoy.html">Busco Profesional</a></button>
                </a>
            </div>
        </div>

        <div class="card">
            <img src="./img/paraprofesionales.png" alt="Imagen 2">
            <div class="descripcion">
                <h2 class="h2cards">Para profesionales</h2>
                <ul>
                    <li>Destaca tu experiencia y habilidades para atraer más oportunidades de negocio.</li>
                    <li>Administra tus proyectos y comunicaciones de manera centralizada y eficiente.</li>
                    <li>Encuentra nuevos retos.</li>
                </ul>
                <button id="seccionDestino" class="boton-circular-dos" type="button"><a href="/tarjetaSoy.html">Soy un
                        Profesional</a></button>
            </div>
        </div>
    </div>

    <section class="conectando">
        <div class="text-conectando">
            <h2 class="desmos-h2">Desmos</h2>
            <h3 class="conectando-h3">Conectando talentos, creando soluciones</h3>
        </div>
        </div>
    </section>

    <footer class="container-footer">
        <div class="contenido-footer">
            <div class="footer-logo-container">
                <img src="./img/logomarca.svg" alt="Logo de la empresa" class="footer-logo">
            </div>
            <a href="terminos_y_condiciones.html" class="terms-link">©2024 Desmos | Aviso legal | Política de Privacidad
                | Política de cookies</a>
            <div class="social-icons">
                <a href="https://es-es.facebook.com/"><img src="./img/facebook.png" alt="Facebook"
                        class="logo-footer"></a>
                <a href="https://twitter.com/"><img src="./img/twitter.png" alt="Twitter" class="logo-footer"></a>
                <a href="https://github.com/BeatrizCPerez/Desmos"><img src="./img/github.png" alt="Github"
                        class="logo_grande"></a>
                <a href="https://www.instagram.com/"><img src="./img/instagram.png" alt="Instagram"
                        class="logo_grande"></a>
            </div>
        </div>
    </footer>

    <script src="./js/navbar.js"></script>
    <script src="./js/tarjetas.js"></script>

</body>

</html>