ricardogj08
/
cursos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Normalize CSS -->
    <link rel="stylesheet" href="https://unpkg.com/normalize.css/normalize.css">
    <!-- Estilos personalizados -->
    <link rel="stylesheet" href="css/styles.css">
    <!-- Jam Icons -->
    <link rel="stylesheet" href="https://unpkg.com/jam-icons/css/jam.min.css">
    <title>Inicio | EDSoft</title>
</head>
<body>
    <!-- Cabecera (Logo y barra de navegación) -->
    <header class="main-header">
        <div class="content-wrapper">
            <a href="index.html">
                <img src="images/logo.svg" alt="EDSoft">
            </a>
            <span id="open-menu-button" class="jam jam-menu"></span>
            <nav id="main-menu" class="main-menu">
                <span id="close-menu-button" class="jam jam-close"></span>
                <ul>
                    <li><a href="index.html">Inicio</a></li>
                    <li><a href="nosotros.html">¿Quiénes somos?</a></li>
                    <li><a href="proyectos.html">Proyectos</a></li>
                    <li><a href="contacto.html">Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <!-- Banner principal -->
        <section class="section-container main-banner">
            <div class="content-wrapper content">
                <div class="container">
                    <h1 class="title">Bienvenidos a EDSoft</h1>
                    <p class="subtitle">¿Necesitas asesoramiento urgente? Nosotros te ayudamos en la construcción de tu sitio web.</p>
                    <div>
                        <a href="contacto.html" class="button white">¡Escríbenos ya mismo!</a>
                    </div>
                </div>
                <div class="container">
                    <img src="images/computer.svg" alt="Computadora" class="image">
                </div>
            </div>
        </section>

        <!-- Servicios -->
        <section class="section-container services-section">
            <div class="content-wrapper">
                <h2>Nuestros servicios</h2>
                <div class="services-container">
                    <article class="service-item">
                        <span class="jam jam-phone"></span>
                        <h3>Servicio 1</h3>
                        <p>Diseñamos tu presencia en internet con apariencia profesional.</p>
                    </article>
                    <article class="service-item">
                        <span class="jam jam-computer"></span>
                        <h3>Servicio 2</h3>
                        <p>Diseñamos tu presencia en internet con apariencia profesional.</p>
                    </article>
                    <article class="service-item">
                        <span class="jam jam-keyboard"></span>
                        <h3>Servicio 3</h3>
                        <p>Diseñamos tu presencia en internet con apariencia profesional.</p>
                    </article>
                </div>
            </div>
        </section>

        <!-- Sobre nosotros -->
        <section class="section-container about-section">
            <div class="content-wrapper">
                <h2 class="title">Sobre nosotros</h2>
                <p>Este es el sitio web de nuestra agencia de desarrollo.</p>
                <a href="contacto.html" class="button white ghost">Contáctanos</a>
            </div>
            <img src="images/bg-section.jpg" alt="Alumnos estudiando" class="background">
        </section>

        <!-- Proyectos -->
        <section class="section-container last-projects">
            <div class="content-wrapper">
                <h2>Últimos proyectos</h2>
                <div class="projects-container">
                    <a href="" class="project-item">
                        <article>
                            <div>
                                <h3>Título del proyecto</h3>
                                <p>Descripción del proyecto</p>
                            </div>
                            <div class="image-container">
                                <img src="images/proyects/project-1.jpg" alt="Proyecto 1">
                            </div>
                        </article>
                    </a>
                    <a href="" class="project-item">
                        <article>
                            <div>
                                <h3>Título del proyecto</h3>
                                <p>Descripción del proyecto</p>
                            </div>
                            <div class="image-container">
                                <img src="images/proyects/project-2.jpg" alt="Proyecto 2">
                            </div>
                        </article>
                    </a>
                    <a href="" class="project-item">
                        <article>
                            <div>
                                <h3>Título del proyecto</h3>
                                <p>Descripción del proyecto</p>
                            </div>
                            <div class="image-container">
                                <img src="images/proyects/project-3.jpg" alt="Proyecto 3">
                            </div>
                        </article>
                    </a>
                    <a href="" class="project-item">
                        <article>
                            <div>
                                <h3>Título del proyecto</h3>
                                <p>Descripción del proyecto</p>
                            </div>
                            <div class="image-container">
                                <img src="images/proyects/project-4.jpg" alt="Proyecto 4">
                            </div>
                        </article>
                    </a>
                </div>
            </div>
        </section>

        <!-- Bolsa de trabajo -->
        <section class="work-with-us">
            <div class="content-wrapper">
                <h2 class="title">¿Quieres trabajar con nosotros?</h2>
                <p class="subtitle">
                    Es momento de convertir tu idea en algo real. Puedes contactarnos en nuestras redes sociales<br>
                    o enviando un correo a:
                </p>
                <a href="mailto:contacto@edsoft.com" class="button">contacto@edsoft.com</a>
                <div class="social-networks">
                    <a href="" target="_blank"><span class="jam jam-facebook"></span></a>
                    <a href="" target="_blank"><span class="jam jam-twitter"></span></a>
                    <a href="" target="_blank"><span class="jam jam-whatsapp"></span></a>
                    <a href="" target="_blank"><span class="jam jam-instagram"></span></a>
                </div>
            </div>
        </section>
    </main>

    <footer class="main-footer">
        <p><small>Todos los derechos reservados &copy; | EDSoft tech labs agency</small></p>
    </footer>

    <script src="js/menu.js"></script>
</body>
</html>