Blog

  • JS

    document.addEventListener(‘DOMContentLoaded’, () => {

        const prevButton = document.querySelector(‘.prev’);

        const nextButton = document.querySelector(‘.next’);

        const catalog = document.querySelector(‘.catalog’);

        const itemWidth = document.querySelector(‘.catalog-item’).offsetWidth + 20; // Agrega el margen en el cálculo

        const visibleItems = 3;

        let scrollAmount = 0;

        prevButton.addEventListener(‘click’, () => {

            scrollAmount -= itemWidth * visibleItems;

            scrollAmount = Math.max(scrollAmount, 0); // Asegura que no se desplace antes del inicio

            catalog.style.transform = `translateX(-${scrollAmount}px)`;

        });

        nextButton.addEventListener(‘click’, () => {

            const maxScrollAmount = catalog.scrollWidth – catalog.clientWidth;

            scrollAmount += itemWidth * visibleItems;

            scrollAmount = Math.min(scrollAmount, maxScrollAmount); // Asegura que no se desplace después del final

            catalog.style.transform = `translateX(-${scrollAmount}px)`;

        });

    });

  • CSS

    /* Estilos generales */

    body {

        font-family: Arial, sans-serif;

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }

    /* Barra de navegación */

    .navbar {

        background-color: white; /* Color de fondo blanco */

        display: flex;

        align-items: center;

        padding: 10px 20px;

        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera para un efecto visual */

    }

    .navbar-left {

        display: flex;

        align-items: center;

    }

    .logo {

        height: 120px; /* Ajusta la altura del logo */

        margin-right: 20px; /* Espacio entre el logo y los enlaces */

    }

    .nav-links {

        list-style: none;

        display: flex;

        margin: 0;

        padding: 0;

    }

    .nav-links li {

        margin-left: 45px; /* Espaciado entre los enlaces */

    }

    .nav-links a {

        text-decoration: none;

        color: rgb(56, 20, 90); /* Color de los enlaces */

        font-weight: bold;

        font-size: 18px;

        transition: color 0.3s ease;

    }

    .nav-links a:hover {

        color: rgb(200, 141, 255); /* Color de hover */

    }

    /* Sección con imagen de fondo y botón */

    .hero-section {

        background-image: url(‘img/fondoprincipal.png’);

        background-size: cover;

        background-position: center;

        height: 600px; /* Puedes ajustar la altura según sea necesario */

        display: flex;

        justify-content: center;

        align-items: center;

        position: relative;

    }

    .hero-content {

        position: absolute; /* Posiciona el contenido dentro de la sección */

        bottom: 100px; /* 20px desde el fondo */

        left: 100px;  /* 20px desde el borde izquierdo */

    }

    .info-button {

        background-color: rgba(208, 197, 219, 0.7); /* Color morado del botón */

        color: white;

        padding: 15px 30px;

        border: none;

        border-radius: 30px; /* Bordes redondeados */

        font-size: 18px;

        font-weight: bold;

        cursor: pointer;

        white-space: nowrap; /* Evita el salto de línea dentro del botón */

        transition: background-color 0.3s ease;

    }

    .info-button:hover {

        background-color: rgb(200, 141, 255); /* Cambio de color en hover */

    }

    /* Sección de piedras */

    .stones {

        text-align: center;

        padding: 50px 0;

        background-color: rgb(56, 20, 90); /* Fondo morado */

        background: linear-gradient(to bottom, rgb(56, 20, 90) 90%, white); /* Degradado de morado a blanco */

    }

    .stones h2 {

        color: white; /* Color del texto en blanco */

        font-size: 45px;

        margin: 0;

        padding-bottom: 20px;

    }

    /* Ajustes del carrusel */

    .catalog-container {

        display: flex;

        align-items: center;

        justify-content: center;

        position: relative;

        width: 100%;

        max-width: 1200px; /* Ancho máximo */

        margin: 0 auto;

        overflow: hidden; /* Oculta elementos fuera del viewport */

        padding-bottom: 150px; /* Espacio inferior */

    }

    .catalog {

        display: flex;

        transition: transform 0.5s ease-in-out; /* Animación suave */

    }

    .catalog-item {

        flex: 0 0 30%; /* 3 productos visibles a la vez */

        text-align: center;

        padding: 10px;

        margin: 0 17px; /* Espacio entre productos */

        box-sizing: border-box;

        background-color: white;

        border-radius: 0px;

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        border: 10px solid white; /* Efecto de foto instantánea */

    }

    .catalog-item img {

        width: 100%;

        height: auto;

        max-height: 300px;

        object-fit: cover;

        margin-bottom: 10px;

        border-bottom: 5px solid white; /* Borde blanco inferior */

    }

    .catalog-item h3 {

        font-size: 18px;

        color: rgb(56, 20, 90); /* Texto morado */

        margin: 0;

        padding-top: 5px;

        padding-bottom: 10px;

    }

    /* Estilos para botones de navegación */

    button {

        background-color: #333;

        color: white;

        border: none;

        padding: 10px;

        cursor: pointer;

        font-size: 24px;

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

        z-index: 1;

    }

    .prev {

        left: 0;

    }

    .next {

        right: 0;

    }

    button:hover {

        background-color: #f39c12;

    }

    /* Sección About Me */

    .aboutme {

        display: flex;

        background-color: white; /* Fondo blanco */

        padding: 50px 0;

        box-sizing: border-box;

    }

    .aboutme-left,

    .aboutme-right {

        flex: 1;

    }

    .aboutme-left {

        padding: 20px;

        display: flex;

        flex-direction: column;

        align-items: center;

    }

    .aboutme-image {

        width: 100%; /* Ajusta el tamaño según sea necesario */

        height: auto;

        max-width: 400px; /* Máximo tamaño para la imagen */

        margin-bottom: 20px;

    }

    .aboutme-text {

        text-align: justify; /* Justifica el texto */

        max-width: 600px; /* Limita el ancho del texto */

        line-height: 1.6; /* Ajusta la altura de la línea */

    }

    .aboutme-text h2 {

        font-size: 36px;

        color: rgb(56, 20, 90); /* Color morado para el título */

        margin: 0;

        padding-bottom: 10px;

    }

    .aboutme-text p {

        font-size: 18px;

        color: #333; /* Color del texto */

    }

    .aboutme-right {

        position: relative;

    }

    .aboutme-background-image {

        width: 100%;

        height: 100%;

        object-fit: cover; /* Asegura que la imagen cubra el área */

    }

    /* Sección de Imágenes */

    .gallery {

        display: flex;

        justify-content: space-between; /* Distribuye las imágenes */

        padding: 50px 20px;

        background-color: #ffffff; /* Fondo gris claro */

        box-sizing: border-box;

    }

    .gallery-item {

        flex: 1;

        margin: 0 10px; /* Espacio entre las imágenes */

        overflow: hidden; /* Asegura que la imagen no se desborde */

    }

    .gallery-item img {

        width: 100%;

        height: auto;

        display: block;

        object-fit: cover;

        border-radius: 8px; /* Bordes redondeados */

        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */

    }

    /* Estilos para el footer */

    .footer {

        background-color: rgb(56, 20, 90); /* Fondo morado */

        color: white;

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 20px;

        height: 200px;

        flex-wrap: wrap;

    }

    .footer-left {

        flex: 1;

    }

    .footer-nav {

        list-style: none;

        padding: 0;

    }

    .footer-nav li {

        margin-bottom: 30px;

    }

    .footer-nav a {

        color: white;

        text-decoration: none;

        font-weight: bold;

        transition: color 0.3s ease;

    }

    .footer-nav a:hover {

        color: rgb(200, 141, 255); /* Cambia de color al pasar el mouse */

    }

    .footer-center {

        flex: 1;

        text-align: center;

    }

    .footer-logo {

        height: 85px; /* Ajusta el tamaño del logo */

    }

    .footer-right {

        flex: 1;

        text-align: right;

    }

    .social-icon img {

        width: 30px;

        height: 30px;

        margin-left: 15px;

        transition: transform 0.3s ease;

    }

    .social-icon img:hover {

        transform: scale(1.2); /* Efecto de zoom */

    }

  • html

    <!DOCTYPE html>

    <html lang=”en”>

    <head>

        <meta charset=”UTF-8″>

        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

        <title>yoUnique Stone</title>

        <!– Vinculando correctamente el CSS –>

        <link rel=”stylesheet” href=”styles.css”>

        <link rel=”icon” href=”img/stamp.png” type=”image/png”>

    </head>

    <body>

        <!– Barra de navegación –>

        <nav class=”navbar”>

            <div class=”navbar-left”>

                <img src=”img/logo.png” alt=”Younique Stones Logo” class=”logo”>

                <ul class=”nav-links”>

                    <li><a href=”#stones”>STONES</a></li>

                    <li><a href=”#about”>ABOUT US</a></li>

                    <li><a href=”#contact”>CONTACT</a></li>

                </ul>

            </div>

        </nav>

        <!– Nueva sección con imagen de fondo y botón –>

        <section class=”hero-section”>

        <div class=”hero-content”>

            <button class=”info-button”>MORE INFO…</button>

        </div>

        </section>

        <!– Sección de piedras disponibles –>

        <section id=”stones” class=”stones”>

            <h2>STONES AVAILABLE</h2>

            <div class=”catalog-container”>

                <button class=”prev”>&#10094;</button>

                <div class=”catalog”>

                    <!– Cajas de contenido (20 piedras como ejemplo) –>

                    <div class=”catalog-item”>

                        <img src=”img/amatista.jpg” alt=”Amethyst”>

                        <h3>Amethyst</h3>

                    </div>

                    <div class=”catalog-item”>

                        <img src=”img/cuarzorosa.jpg” alt=”Rose Quartz”>

                        <h3>Rose Quartz</h3>

                    </div>

                    <div class=”catalog-item”>

                        <img src=”img/cuarzo.jpg” alt=”Quartz”>

                        <h3>Quartz</h3>

                    </div>

                    <div class=”catalog-item”>

                        <img src=”obsidian.jpg” alt=”Obsidian”>

                        <h3>Obsidian</h3>

                    </div>

                    <div class=”catalog-item”>

                        <img src=”jade.jpg” alt=”Jade”>

                        <h3>Jade</h3>

                    </div>

                    <div class=”catalog-item”>

                        <img src=”citrine.jpg” alt=”Citrine”>

                        <h3>Citrine</h3>

                    </div>

                    <div class=”catalog-item”>

                        <img src=”lapis-lazuli.jpg” alt=”Lapis Lazuli”>

                        <h3>Lapis Lazuli</h3>

                    </div>

                    <div class=”catalog-item”>

                        <img src=”tiger-eye.jpg” alt=”Tiger Eye”>

                        <h3>Tiger Eye</h3>

                    </div>

                    <div class=”catalog-item”>

                        <img src=”aventurine.jpg” alt=”Aventurine”>

                        <h3>Aventurine</h3>

                    </div>

                    <!– Añadir más elementos si es necesario –>

                </div>

                <button class=”next”>&#10095;</button>

            </div>

        </section>

        <!– Asegúrate de que el archivo script.js esté correctamente vinculado –>

        <script src=”scripts.js”></script>

        <!– Sección About Me –>

    <section id=”aboutme” class=”aboutme”>

        <div class=”aboutme-left”>

            <img src=”img/aboutme.png” alt=”About Me Image” class=”aboutme-image”>

            <div class=”aboutme-text”>

                <p>The “initiator” Peter Albarian has had an interest in finding and buying natural stones for many years. His initial focus was amber with fossilized insects encased inside, then he began to appreciate and collect unfinished raw stones of different

    types based on attraction and being moved. He had no plan or intent other than the joy of collecting and observing each piece, but over time he begin considering ways in which he might put them to some kind of use.

                </p>

                <p>During his travels, Peter began paying more attention to unique artisan jewelers’ work utilizing different items as their central focus. He saw some incredibly creative pieces, but the quality was not what he envisioned. Finding someone who created

    jewelry at a very high quality level, with the talent, inspiration and interest to be able to create what he envisioned became his hope. The connection and feeling was very different and special with one particular jeweler he came across on the town square

    of San Jose del Cabo, BCS Mexico. This man’s joy of life, importance of family and faith, incredible quality of handmade one of a kind jewelry, and his children learning from and following in his footsteps all attracted Peter to work with him. His name is

    Jesus Sanchez Icaza of Sanchez & Luna Fire Opal Designs. A few very enthusiastic conversations had Peter looking forward to returning with some stones for them all to work with.</p>

                <p>A few months later, Peter excitedly sat down with Jesus and two of his Son’s; Gabrial Alejandro Sanchez Luna and Fernando Sanchez Luna. The family had never before worked with rough natural stones like these and their excitement was palpable.

    Peter explained what he envisioned for each piece and they added their suggestions based on their experienced fine jewelry creation. Their first planning interaction lasted over 2 hours as they all wanted to make sure the resulting pieces would not disappoint.

    When the initial pendants were finished, the well-deserved pride exuded by the Sanchez family in being a part of this unlikely experiment was clear and real.</p>

                <p>Once Peter started wearing these initial pieces, the interest from strangers was immediate and constant. Questions asking for information about what the particular stones were, who designed and created pieces, and where they could buy them kept

    coming. Many shared with Peter the unique properties of the different stones which further intrigued him to learn and collect. Though he didn’t initially intended to create for more than himself, family and friends, the interest and power of the stones opened

    his thinking. Each time he went to San Jose del Cabo meant more very unique pieces being created. Expanding to creating with ancient Roman coins, artifacts, and baroque pearls began to happen. The Sanchez Family always willingly and enthusiastically sat down

    for the anticipated design discussions adding to the collection, and creativity grew.</p>

            </div>

        </div>

        <div class=”aboutme-right”>

            <img src=”img/peteraboutme.png” alt=”Right Side Image” class=”aboutme-background-image”>

        </div>

    </section>

    <!– Sección de Imágenes –>

    <section id=”gallery” class=”gallery”>

        <div class=”gallery-item”>

            <img src=”img/cruz.png” alt=”Imagen 1″>

        </div>

    </section>

        <!– Footer –>

    <footer class=”footer”>

        <div class=”footer-left”>

            <ul class=”footer-nav”>

                <li><a href=”#stones”>Stones</a></li>

                <li><a href=”#about”>About Us</a></li>

                <li><a href=”#contact”>Contact</a></li>

            </ul>

        </div>

        <div class=”footer-center”>

            <img src=”img/logofooter.png” alt=”Logo” class=”footer-logo”>

        </div>

        <div class=”footer-right”>

            <div class=”social-icon”>

                <a href=”https://facebook.com” target=”_blank”><img src=”img/fbicon.png” alt=”Facebook”></a>

                <a href=”https://instagram.com” target=”_blank”><img src=”img/igicon.png” alt=”Instagram”></a>

                <a href=”mailto:younique.stone@gmail.com” class=”email-link”><img src=”img/emicon.png” alt=””></a>

                <!– Agrega más íconos de redes sociales si es necesario –>

            </div>

        </div>

    </footer>

  • Hello world!

    Welcome to WordPress. This is your first post. Edit or delete it, then start writing!