Ayushparikh-code/Web-dev-mini-projects

Project title

Open

#980 opened on Mar 19, 2026

View on GitHub
 (0 comments) (0 reactions) (0 assignees)HTML (1,669 forks)auto 404
hacktoberfesthacktoberfest-accepted

Repository metrics

Stars
 (4,487 stars)
PR merge metrics
 (PR metrics pending)

Description

Project title (Write project title over here)

Project Description (Describe the project over here)

Stack: [ 

<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>

.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

Contributor guide

Research direction
Inspect the repository's contribution guidelines and folder structure, then add the provided HTML/CSS code as a new project folder with a README.
Tech stack
htmlcss
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
1
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Unclear
Prerequisites
GitHTMLCSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65