Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 3 vistas

    Trabajo Final

    Cargado por

    Natty Ramirez
    Trabajos finales

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Trabajo Final

    Cargado por

    Natty Ramirez
    3 vistas15 páginas
    Trabajos finales

    Título original

    Trabajo final

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Trabajos finales

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    3 vistas15 páginas

    Trabajo Final

    Cargado por

    Natty Ramirez
    Trabajos finales

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 15

    Introducción

    Natha Design es una plataforma en línea diseñada para


    ofrecer servicios de diseño gráfico y desarrollo web. La
    página está estructurada en varias secciones clave:
    1. Inicio: Presenta a la empresa y su enfoque creativo, junto
    con una imagen representativa de los valores de la marca.
    2. Servicios: Incluye una variedad de servicios, como diseño de páginas web,
    branding corporativo, y marketing digital, con una descripción detallada de cada
    uno.
    3. Portafolio: Muestra ejemplos de proyectos anteriores, permitiendo a los
    visitantes ver la calidad y versatilidad del trabajo realizado.
    4. Contacto: Ofrece medios para contactar a la empresa, incluyendo correo
    electrónico, número de teléfono y redes sociales.
    El sitio tiene un diseño moderno y responsivo, lo que garantiza una experiencia de
    usuario fluida en cualquier dispositivo. Es una herramienta ideal para empresas y
    emprendedores que buscan soluciones digitales innovadoras y personalizadas.

    MY VIDEO: https://youtu.be/v8992H-GQZo?si=SeUXH2sZTw2Xnydk
    Código HTML

    <!DOCTYPE html>
    <html lang="es">

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

    <body>
    <header>
    <div class="logo-container">
    <img src="imagen/5236f9b9-f369-4450-bf1c-2747440e31d2.jpeg"
    alt="Logo de Natha Design" class="logo">
    <h1>¡Bienvenido a Natha Design!</h1>
    </div>
    <p>Creatividad y precisión en cada proyecto.</p>
    <nav>
    <ul>
    <li><a href="javascript:void(0)"
    onclick="mostrarSeccion('inicio')">Inicio</a></li>
    <li><a href="javascript:void(0)"
    onclick="mostrarSeccion('servicios')">Servicios</a></li>
    <li><a href="javascript:void(0)"
    onclick="mostrarSeccion('portafolio')">Portafolio</a></li>
    <li><a href="javascript:void(0)"
    onclick="mostrarSeccion('contacto')">Contacto</a></li>
    </ul>
    </nav>
    </header>
    <main>
    <!-- Sección de Inicio -->
    <section id="inicio" class="seccion-activa">
    <h2>Sobre Nosotros</h2>
    <p>En Natha Design nos especializamos en transformar ideas en
    realidades visuales impactantes. Con un equipo creativo y apasionado,
    ofrecemos servicios de diseño gráfico, branding, desarrollo web y más.
    Nos enfocamos en la innovación y en satisfacer las necesidades
    específicas de cada cliente.</p>
    <img src="imagen/natha.jpeg" alt="Equipo trabajando en
    diseño" class="imagen-inicio">
    </section>

    <!-- Sección de Servicios -->


    <section id="servicios" class="seccion">
    <h2>Servicios</h2>

    <div class="servicio">
    <h3>Diseño Gráfico</h3>
    <p>Creación de materiales visuales impactantes y
    funcionales para tu marca.</p>
    <button class="ver-mas" onclick="mostrarDetalles('diseno-
    grafico')">Ver más</button>
    <div id="diseno-grafico" class="detalles-servicio">
    <p>El diseño gráfico es esencial para transmitir la
    identidad visual de tu marca. Trabajamos en la creación de logotipos,
    materiales publicitarios, y cualquier otro componente visual necesario
    para que tu empresa destaque.</p>
    </div>
    </div>

    <div class="servicio">
    <h3>Desarrollo Web</h3>
    <p>Diseño y desarrollo de sitios web modernos,
    funcionales y responsivos.</p>
    <button class="ver-mas"
    onclick="mostrarDetalles('desarrollo-web')">Ver más</button>
    <div id="desarrollo-web" class="detalles-servicio">
    <p>Desarrollamos sitios web adaptados a todos los
    dispositivos, con un diseño responsivo que garantiza una experiencia de
    usuario perfecta. Nos enfocamos en la usabilidad y en crear páginas web
    fáciles de navegar.</p>
    </div>
    </div>

    <div class="servicio">
    <h3>Branding</h3>
    <p>Desarrollamos la identidad visual de tu empresa para
    destacar en el mercado.</p>
    <button class="ver-mas"
    onclick="mostrarDetalles('branding')">Ver más</button>
    <div id="branding" class="detalles-servicio">
    <p>El branding es clave para crear una presencia
    sólida en el mercado. Diseñamos logotipos, paletas de colores y todo el
    sistema visual que representará tu marca ante tus clientes.</p>
    </div>
    </div>
    </section>

    <!-- Sección Portafolio -->


    <section id="portafolio" class="seccion">
    <h2>Portafolio</h2>
    <p>Conoce algunos de nuestros proyectos más destacados, donde
    combinamos creatividad y funcionalidad para ofrecer resultados
    excepcionales.</p>

    <!-- Proyecto 1: Branding para Start-Up -->


    <div class="proyecto">
    <img src="imagen/branding_startups_comunicacion_marca-
    800x450.jpg" alt="Branding para Start-Up" class="imagen-proyecto">
    <div class="descripcion-proyecto">
    <h3>Branding para Start-Up</h3>
    <p>Desarrollamos la identidad visual completa para
    una nueva start-up. Esto incluyó el diseño de logotipo, paleta de
    colores, tipografías y material promocional para eventos y marketing
    digital.</p>
    </div>
    </div>

    <!-- Proyecto 2: Diseño Web Corporativo -->


    <div class="proyecto">
    <img src="imagen/diseno-pagina-web-consulting.jpg"
    alt="Diseño Web Corporativo" class="imagen-proyecto">
    <div class="descripcion-proyecto">
    <h3>Diseño Web Corporativo</h3>
    <p>Este proyecto consistió en crear un diseño web
    moderno y funcional para una empresa de tecnología. Se trabajó en la
    experiencia de usuario (UX) y en un diseño responsivo que se adapta a
    diferentes dispositivos.</p>
    </div>
    </div>
    </section>

    <!-- Sección de Contacto -->


    <section id="contacto" class="seccion">
    <h2>Contacto</h2>
    <div class="info-contacto">
    <p><strong>Teléfono:</strong> 8293445806</p>
    <p><strong>Email:</strong> contacto@nathadesign.com</p>
    <p><strong>faceboock:</strong> natha Design</p>
    <p><strong>instagram:</strong> nathaDesign</p>
    </div>
    <div class="redes-sociales">
    <a href="https://www.instagram.com/nataprodesing/"
    target="_blank"></a>
    <a href="mailto:contacto@nathadesign.com"></a>

    </div>
    </section>
    </main>
    <footer>
    <p>&copy; 2024 Natha Design. Todos los derechos reservados.</p>
    </footer>

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

    </html>

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>Imagen Difuminada</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>

    CODIGO CSS
    /* Estilo General */
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
    }

    header {
    background-color: #ff69b4;
    color: white;
    padding: 20px;
    text-align: center;
    }

    header nav ul {
    list-style: none;
    padding: 0;
    }
    header nav ul li {
    display: inline;
    margin: 0 15px;
    }

    header nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    }

    /* Secciones */
    section {
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    max-width: 1200px;
    text-align: center;
    display: none; /* Ocultar por defecto */
    }

    .seccion-activa {
    display: block; /* Mostrar solo la sección activa */
    }

    /* Imagen en la sección de inicio */


    .imagen-inicio {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    /* Servicios */
    .servicio {
    margin-bottom: 25px;
    }

    .servicio h3 {
    font-size: 1.5rem;
    color: #ff69b4;
    }

    .servicio p {
    font-size: 1rem;
    color: #333;
    }

    .ver-mas {
    background-color: #ff69b4;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    }

    .ver-mas:hover {
    background-color: #ff4081;
    }

    /* Detalles de cada servicio (ocultos por defecto) */


    .detalles-servicio {
    display: none;
    margin-top: 15px;
    font-size: 1rem;
    color: #666;
    }

    /* Mostrar los detalles del servicio cuando se haga clic en "Ver más" */
    .detalles-servicio.activo {
    display: block;
    }

    /* Portafolio */
    .proyecto {
    margin-bottom: 20px;
    }

    .proyecto img {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .descripcion-proyecto {
    margin-top: 15px;
    }

    .descripcion-proyecto h3 {
    font-size: 1.5rem;
    color: #ff69b4;
    }

    .descripcion-proyecto p {
    font-size: 1rem;
    color: #333;
    }

    /* Contacto */
    .info-contacto p {
    font-size: 1.2rem;
    margin: 10px 0;
    }

    .redes-sociales {
    display: flex;
    justify-content: center;
    gap: 20px;
    }

    .redes-sociales a {
    color: #333;
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s, transform 0.3s;
    }

    .redes-sociales a:hover {
    color: #ff69b4;
    transform: scale(1.1);
    }
    /* Estilo general para el encabezado */
    header {
    background-color: #ff69b4;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    }

    /* Contenedor para el logo y el título */


    .logo-container {
    display: flex;
    align-items: center;
    }

    .logo {
    width: 40px; /* Logo más pequeño */
    height: auto;
    margin-right: 10px; /* Espaciado entre el logo y el título */
    }

    h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
    }

    /* Estilo para el texto debajo del título */


    header p {
    margin: 5px 0;
    font-size: 1.1rem;
    font-style: italic;
    }

    /* Estilo para el menú de navegación */


    header nav ul {
    list-style: none;
    padding: 0;
    }

    header nav ul li {
    display: inline;
    margin: 0 15px;
    }

    header nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    }

    header nav ul li a:hover {


    color: #f5f5f5;
    text-decoration: underline;
    }
    /* Estilo de la imagen de inicio */
    .imagen-inicio {
    width: 50%; /* Ajusta el tamaño de la imagen al 50% del ancho del
    contenedor */
    height: auto; /* Mantiene la proporción original de la imagen */
    display: block; /* Asegura que la imagen se alinee correctamente */
    margin: 20px auto; /* Centra la imagen en el contenedor */
    }
    /* Estilo general para el fondo */
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5; /* Fondo blanco por defecto */
    color: #333;
    }

    /* Sección específica donde se aplicará la imagen difuminada */


    .inicio-con-imagen {
    position: relative; /* Necesario para posicionar la capa de
    difuminado */
    background-color: white; /* Fondo blanco para la sección */
    padding: 50px 20px;
    text-align: center;
    }

    /* Imagen de fondo difuminada */


    .inicio-con-imagen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('imagen/Habilidades-Diseno-grafico.jpg'); /*
    Ruta de la imagen */
    background-size: cover;
    background-position: center;
    filter: blur(8px); /* Desenfoque para la imagen */
    z-index: -1; /* Coloca la imagen de fondo detrás del contenido */
    }

    /* Contenido de la sección */
    .inicio-con-imagen h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 20px;
    }

    .inicio-con-imagen p {
    font-size: 1.2rem;
    color: #555;
    }
    /* Estilo para el encabezado */
    header {
    position: relative; /* Necesario para aplicar el efecto */
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.8),
    rgba(255, 105, 180, 0.5)); /* Fondo rosado con gradiente */
    color: white;
    padding: 40px 20px;
    text-align: center;
    z-index: 1; /* Para que el texto esté encima */
    }

    /* Añadir difuminado al fondo del encabezado */


    header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('imagen/papeleria-espacio-fondo-rosa-
    creatividad-vista-superior-espacio-texto_350891-435.jpg'); /* Ruta de la
    imagen de fondo */
    background-size: cover;
    background-position: center;
    filter: blur(10px); /* Efecto de difuminado */
    z-index: -1; /* Colocar el efecto detrás del contenido */
    }

    /* Ajustar el texto del encabezado */


    header h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 11px;
    }

    header p {
    font-size: 1.4rem;
    margin: 0;
    }
    /* Estilo para la sección de Contacto */
    #contacto {
    position: relative; /* Necesario para colocar el fondo difuminado */
    padding: 40px 20px;
    color: rgb(218, 50, 162);
    text-align: center;
    }

    /* Añadir difuminado al fondo de la sección de contacto */


    #contacto::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('imagen/papeleria-espacio-fondo-rosa-
    creatividad-vista-superior-espacio-texto_350891-435.jpg'); /* Ruta de la
    imagen de fondo */
    background-size: cover;
    background-position: center;
    filter: blur(10px); /* Efecto de difuminado */
    z-index: -1; /* Para que la imagen esté detrás del contenido */
    }

    CODIGO SCRIP JS

    function mostrarSeccion(seccion) {
    // Ocultar todas las secciones
    let secciones = document.querySelectorAll('section');
    secciones.forEach(function (seccionElement) {
    seccionElement.classList.remove('seccion-activa');
    });

    // Mostrar la sección seleccionada


    document.getElementById(seccion).classList.add('seccion-activa');
    }

    function mostrarDetalles(servicio) {
    const detalles = document.getElementById(servicio);

    // Toggle para mostrar u ocultar los detalles del servicio


    detalles.classList.toggle('activo');
    }

    También podría gustarte