Skip to content

Project title #980

Open
Open
Project title#980
Labels
hacktoberfesthacktoberfest-accepted

Description

@giovannibazan101-afk
giovannibazan101-afk
opened on Mar 19, 2026

Project title
(Write project title over here)

Project Description
(Describe the project over here)

Stack:
[

<title>Servi Pro</title> 
<style>
    /* Estilos Generales */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Inter', sans-serif;
    }

    body {
        background-color: #f7f9fc;
        color: #333;
    }

    /* Barra de Navegación */
    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 5%;
        background-color: #ffffff;
        border-bottom: 1px solid #eaeaea;
    }

    .logo {
        font-size: 20px;
        font-weight: 700;
        color: #0d6efd;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .logo i {
        font-size: 24px;
    }

    nav {
        display: flex;
        gap: 30px;
    }

    nav a {
        text-decoration: none;
        color: #555;
        font-weight: 500;
        font-size: 15px;
    }

    .ayuda {
        text-decoration: none;
        color: #2b7a0b;
        font-weight: 600;
        font-size: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Sección Principal */
    main {
        padding: 50px 5%;
        max-width: 1200px;
        margin: 0 auto;
    }

    .encabezado-seccion {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 30px;
    }

    .titulo-seccion h1 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #1a1a1a;
    }

    .titulo-seccion p {
        font-size: 15px;
        color: #666;
    }

    .btn-ver-todos {
        background-color: #ffffff;
        border: 1px solid #ddd;
        padding: 10px 20px;
        border-radius: 20px;
        font-weight: 600;
        color: #333;
        cursor: pointer;
        transition: 0.2s;
    }

    .btn-ver-todos:hover {
        background-color: #f0f0f0;
    }

    /* Grilla de Tarjetas */
    .grilla-servicios {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 20px;
    }

    /* Modificación para que la tarjeta sea un enlace (etiqueta <a>) */
    .tarjeta {
        background-color: #ffffff;
        padding: 24px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        transition: transform 0.2s, box-shadow 0.2s;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 12px;
        text-decoration: none; /* Quita el subrayado del enlace */
        color: inherit; /* Mantiene el color original del texto */
    }

    .tarjeta:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    }

    .icono-tarjeta {
        width: 40px;
        height: 40px;
        background-color: #eaf2ff;
        color: #0d6efd;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
    }

    .contenido-tarjeta h3 {
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 6px;
    }

    .contenido-tarjeta p {
        font-size: 14px;
        color: #777;
        line-height: 1.4;
    }

    .cabecera-tarjeta {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 5px;
    }

    /* Responsividad básica */
    @media (max-width: 768px) {
        header {
            flex-direction: column;
            gap: 15px;
        }
        .encabezado-seccion {
            flex-direction: column;
            gap: 15px;
        }
    }
</style>

<header>
    <div class="logo">
        <i class="fa-solid fa-house-chimney"></i> Servi Pro
    </div>
    <nav>
        <a href="#">Inicio</a>
        <a href="#">Explorar Servicios</a>
    </nav>
    <a href="https://wa.me/595976307394?text=Hola%20Servi%20Pro!%20Tengo%20una%20consulta%20general." target="_blank" class="ayuda">
        <i class="fa-brands fa-whatsapp"></i> Ayuda
    </a>
</header>

<main>
    <div class="encabezado-seccion">
        <div class="titulo-seccion">
            <h1>Servicios más pedidos</h1>
            <p>Elegí una categoría y pedí presupuesto o reserva por WhatsApp.</p>
        </div>
        <button class="btn-ver-todos">Ver todos</button>
    </div>

    <div class="grilla-servicios">
        <a href="https://wa.me/595976307394?text=Hola%20Servi%20Pro!%20Quisiera%20consultar%20y%20reservar%20el%20servicio%20de%20Cerrajer%C3%ADa." target="_blank" class="tarjeta">
            <div class="cabecera-tarjeta">
                <div class="icono-tarjeta"><i class="fa-solid fa-key"></i></div>
                <h3>Cerrajería</h3>
            </div>
            <div class="contenido-tarjeta">
                <p>Apertura de puertas y cerraduras 24hs.</p>
            </div>
        </a>

        <a href="https://wa.me/595976307394?text=Hola%20Servi%20Pro!%20Quisiera%20consultar%20y%20reservar%20el%20servicio%20de%20Plomer%C3%ADa." target="_blank" class="tarjeta">
            <div class="cabecera-tarjeta">
                <div class="icono-tarjeta"><i class="fa-solid fa-droplet"></i></div>
                <h3>Plomería</h3>
            </div>
            <div class="contenido-tarjeta">
                <p>Reparación de fugas, cañerías y grifería.</p>
            </div>
        </a>

        <a href="https://wa.me/595976307394?text=Hola%20Servi%20Pro!%20Quisiera%20consultar%20y%20reservar%20el%20servicio%20de%20Electricista." target="_blank" class="tarjeta">
            <div class="cabecera-tarjeta">
                <div class="icono-tarjeta"><i class="fa-solid fa-bolt"></i></div>
                <h3>Electricista</h3>
            </div>
            <div class="contenido-tarjeta">
                <p>Instalaciones eléctricas y reparaciones.</p>
            </div>
        </a>

        <a href="https://wa.me/595976307394?text=Hola%20Servi%20Pro!%20Quisiera%20consultar%20y%20reservar%20el%20servicio%20de%20Destapaciones." target="_blank" class="tarjeta">
            <div class="cabecera-tarjeta">
                <div class="icono-tarjeta"><i class="fa-solid fa-screwdriver-wrench"></i></div>
                <h3>Destapaciones</h3>
            </div>
            <div class="contenido-tarjeta">
                <p>Destranque de cañerías y pozos ciegos.</p>
            </div>
        </a>

        <a href="https://wa.me/595991254105?text=Hola%20Servi%20Pro!%20Quisiera%20consultar%20y%20reservar%20el%20servicio%20de%20Aire%20Acondicionado." target="_blank" class="tarjeta">
            <div class="cabecera-tarjeta">
                <div class="icono-tarjeta"><i class="fa-regular fa-snowflake"></i></div>
                <h3>Aire Acondicionado</h3>
            </div>
            <div class="contenido-tarjeta">
                <p>Instalación, mantenimiento y carga de gas.</p>
            </div>
        </a>

        <a href="https://wa.me/595976307394?text=Hola%20Servi%20Pro!%20Quisiera%20consultar%20y%20reservar%20el%20servicio%20de%20Termocalef%C3%B3n." target="_blank" class="tarjeta">
            <div class="cabecera-tarjeta">
                <div class="icono-tarjeta"><i class="fa-solid fa-wrench"></i></div>
                <h3>Termocalefón</h3>
            </div>
            <div class="contenido-tarjeta">
                <p>Reparación e instalación de termotanques.</p>
            </div>
        </a>

        <a href="https://wa.me/595976307394?text=Hola%20Servi%20Pro!%20Quisiera%20consultar%20y%20reservar%20el%20servicio%20de%20Fumigaci%C3%B3n." target="_blank" class="tarjeta">
            <div class="cabecera-tarjeta">
                <div class="icono-tarjeta"><i class="fa-solid fa-bug"></i></div>
                <h3>Fumigación</h3>
            </div>
            <div class="contenido-tarjeta">
                <p>Control de plagas: cucarachas, termitas, ratas.</p>
            </div>
        </a>

        <a href="https://wa.me/595976307394?text=Hola%20Servi%20Pro!%20Quisiera%20consultar%20y%20reservar%20el%20servicio%20de%20Mudanzas%20y%20Fletes." target="_blank" class="tarjeta">
            <div class="cabecera-tarjeta">
                <div class="icono-tarjeta"><i class="fa-solid fa-truck"></i></div>
                <h3>Mudanzas y Fletes</h3>
            </div>
            <div class="contenido-tarjeta">
                <p>Transporte de carga y mudanzas residenciales.</p>
            </div>
        </a>

        <a href="https://wa.me/595976307394?text=Hola%20Servi%20Pro!%20Quisiera%20consultar%20y%20reservar%20el%20servicio%20de%20Aberturas%20y%20Portones." target="_blank" class="tarjeta">
            <div class="cabecera-tarjeta">
                <div class="icono-tarjeta"><i class="fa-solid fa-door-open"></i></div>
                <h3>Aberturas y Portones</h3>
            </div>
            <div class="contenido-tarjeta">
                <p>Reparación de portones eléctricos y aberturas.</p>
            </div>
        </a>

        <a href="https://wa.me/595976307394?text=Hola%20Servi%20Pro!%20Quisiera%20consultar%20y%20reservar%20el%20servicio%20de%20Energ%C3%ADa%20Solar." target="_blank" class="tarjeta">
            <div class="cabecera-tarjeta">
                <div class="icono-tarjeta"><i class="fa-regular fa-sun"></i></div>
                <h3>Energía Solar</h3>
            </div>
            <div class="contenido-tarjeta">
                <p>Paneles solares y termotanques solares.</p>
            </div>
        </a>

        <a href="https://wa.me/595976307394?text=Hola%20Servi%20Pro!%20Quisiera%20consultar%20y%20reservar%20el%20servicio%20de%20Remodelaciones." target="_blank" class="tarjeta">
            <div class="cabecera-tarjeta">
                <div class="icono-tarjeta"><i class="fa-solid fa-trowel-bricks"></i></div>
                <h3>Remodelaciones</h3>
            </div>
            <div class="contenido-tarjeta">
                <p>Albañilería, pintura y refacciones generales.</p>
            </div>
        </a>

    </div>
</main>
] Html [/* Estilos para el Modal */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); z-index: 1000; justify-content: center; align-items: center; }

.modal-content {
background: white;
padding: 30px;
border-radius: 20px;
width: 90%;
max-width: 500px;
position: relative;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
animation: slideUp 0.3s ease-out;
}

@Keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}

.close-modal {
position: absolute;
top: 20px;
right: 20px;
font-size: 20px;
cursor: pointer;
color: #999;
}

/* Estilos del Formulario */
.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 5px;
color: #444;
}

.form-group input, .form-group select, .form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 10px;
font-size: 15px;
outline: none;
transition: border-color 0.2s;
}

.form-group input:focus {
border-color: #0d6efd;
}

.btn-enviar {
width: 100%;
background-color: #25d366; /* Color WhatsApp */
color: white;
padding: 14px;
border: none;
border-radius: 10px;
font-weight: 700;
font-size: 16px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 10px;
}

.btn-enviar:hover {
background-color: #128c7e;
} ] CSS
[ ] JavaScript

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    hacktoberfesthacktoberfest-accepted

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions