Ayushparikh-code/Web-dev-mini-projects

Project title

Aberta

#980 aberto em 19 de mar. de 2026

Ver no GitHubGuia do colaborador
 (0 comentário) (0 reação) (0 responsável)HTML (1.669 forks)auto 404
hacktoberfesthacktoberfest-accepted

Métricas do repositório

Stars
 (4.487 estrelas)
Métricas de merge de PR
 (Métricas PR pendentes)

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

Guia do colaborador

Direção de pesquisa
Inspecione as diretrizes de contribuição e a estrutura de pastas do repositório, depois adicione o código HTML/CSS fornecido como uma nova pasta de projeto com um README.
Pilha de tecnologia
htmlcss
Domain
frontend
Tipo Issue
Funcionalidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
1
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Menos de 1 hora
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Recente
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Pouco claro
Prerequisites
GitHTMLCSS
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
65