Clipboard landing page

---

Deseamos que este proyecto despierte el genio frontend que llevas dentro.

Siempre procuramos crear un código coherente, limpio y ordenado, que facilite su compresión y lectura.

🎨Desafio

🌐Solucion

📁Código

👋¿Conversamos?

---

Estructura del proyecto

Puedes crear una carpeta en el disco c:\workspace\clipboard-landing-page para almacenar este proyecto.

---

Setup

---

Código HTML

    <main>
        <section class="hero__section section dflex">
            <picture class="picture">
                <source media="(min-width: 1080px)" srcset="../images/bg-header-desktop.png">
                <source media="(min-width: 375px)" srcset="../images/bg-header-mobile.png">
                <img src="images/bg-header-desktop.png" alt="Default Image" class="picture--img">
            </picture>
            <img src="images/logo.svg" alt="logo">
            <h1 class="hero__title">A history of everything you copy</h1>
            <p class="hero__text">Clipboard allows you to track and organize everything you
                copy. Instantly access your clipboard on all your devices.</p>
            <div class="button">
                <a href="#" class="btn btn--green">Download for iOS</a>
                <a href="#" class="btn btn--purple">Download for Mac</a>
            </div>
        </section>

        <section class="keeptrack__section section">
            <h2 class="keeptrack__title">Keep track of your snippets</h2>
            <p class="keeptrack__text">Clipboard instantly stores any item you copy in the cloud,
                meaning you can access your snippets immediately on all your
                devices. Our Mac and iOS apps will help you organize everything.</p>
            <div class="feature">
                <div class="feature__img">
                    <img src="images/image-computer.png" alt="Computer" class="feature__img--computer">
                </div>
                <div class="feature__list dflex">
                    <div>
                        <h3 class="feature__list--title">Quick Search</h3>
                        <p>Easily search your snippets by content, category, web address, application, and more.</p>
                    </div>
                    <div>
                        <h3 class="feature__list--title">iCloud Sync</h3>
                        <p>Instantly saves and syncs snippets across all your devices.</p>
                    </div>
                    <div>
                        <h3 class="feature__list--title">Complete History</h3>
                        <p>Retrieve any snippets from the first moment you started using the app.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="access__section section">
            <h2 class="access__title">Access Clipboard anywhere</h2>
            <p class="access__text">Whether you’re on the go, or at your computer, you can access all your Clipboard
                snippets in a few simple clicks.</p>
            <div class="feature__img">
                <img src="images/image-devices.png" alt="Devices" class="feature__img--devices">
            </div>
        </section>

        <section class="supercharge__section section">
            <h2 class="supercharge--title">Supercharge your workflow</h2>
            <p class="supercharge--text">We’ve got the tools to boost your productivity.</p>
            <div class="supercharge__options dflex">
                <div class="options__feature">
                    <img src="images/icon-blacklist.svg" alt="Blacklist Icon" class="options__feature--icon">
                    <h3 class="option__feature--title">Create blacklists</h3>
                    <p>Ensure sensitive information never makes its way to your clipboard by excluding certain sources.
                    </p>
                </div>
                <div class="options__feature">
                    <img src="images/icon-text.svg" alt="Text Icon" class="options__feature--icon">
                    <h3 class="option__feature--title">Plain text snippets</h3>
                    <p>Remove unwanted formatting from copied text for a consistent look.</p>
                </div>
                <div class="options__feature">
                    <img src="images/icon-preview.svg" alt="Preview Icon" class="options__feature--icon">
                    <h3 class="option__feature--title">Sneak preview</h3>
                    <p>Quick preview of all snippets on your Clipboard for easy access.</p>
                </div>
            </div>
            <div class="supercharge__brands dflex">
                <div class="brand__list">
                    <img src="images/logo-google.png" alt="Google Logo">
                </div>
                <div class="brand__list">
                    <img src="images/logo-ibm.png" alt="IBM Logo">
                </div>
                <div class="brand__list">
                    <img src="images/logo-microsoft.png" alt="Microsoft Logo">
                </div>
                <div class="brand__list">
                    <img src="images/logo-hp.png" alt="HP Logo">
                </div>
                <div class="brand__list">
                    <img src="images/logo-vector-graphics.png" alt="Vector Graphics Logo">
                </div>
            </div>
        </section>

        <section class="clipboard__section section">
            <h2 class="clipboard__section--title">Clipboard for iOS and Mac OS</h2>
            <p class="clipboard__section--text">Available for free on the App Store. Download for Mac or iOS, sync with iCloud and you’re ready to start
                adding to your clipboard.</p>
            <div class="button">
                <a href="#" class="btn btn--green">Download for iOS</a>
                <a href="#" class="btn btn--purple">Download for Mac</a>
            </div>
        </section>

        <footer class="footer section dflex">
            <div class="logo">
                <img src="images/logo.svg" alt="logo" class="logo--company">
            </div>
            <div class="nav dflex">
                <ul class="nav__list">
                    <li><a href="#">FAQs</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
                <ul class="nav__list">
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Press Kit</a></li>
                </ul>
                <ul class="nav__list">
                    <li><a href="#">Install Guide</a></li>
                    <li><a href="#" style="visibility: hidden;">a</a></li>
                </ul>
            </div>
            <div class="social dflex">
                <ul class="social__link">
                    <a href="#">
                        <img src="images/icon-facebook.svg" alt="Facebook Icon">
                    </a>
                </ul>
                <ul class="social__link">
                    <a href="#">
                        <img src="images/icon-twitter.svg" alt="Twitter Icon">
                    </a>
                </ul>
                <ul class="social__link">
                    <a href="#">
                        <img src="images/icon-instagram.svg" alt="Instagram Icon" class="instagram--icon">
                    </a>
                </ul>
            </div>
        </footer>
    </main>

---

Código CSS

/* Fuente */
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap');


* {
    /* Primario */
    --strong-cyan: hsl(171, 66%, 44%);
    --light-blue: hsl(233, 100%, 69%);

    /* Neutral */
    --dark-grayish-blue: hsl(210, 10%, 33%);
    --grayish-blue: hsl(201, 11%, 66%);
}

body {
    font-size: 18px;
    font-family: 'Bai Jamjuree', sans-serif;
    font-weight: 400;
    color: var(--grayish-blue);
}


/* ============================= */
/* ***** Estilos Generales ***** */
/* ============================= */
.dflex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.section {
    padding: 20px;
    text-align: center;
}

.btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 12px 30px;
    border-radius: 50px;
    text-align: center;
}

h1,
h2,
h3 {
    color: var(--dark-grayish-blue);
    font-weight: 600;
}

p {
    line-height: 26px;
}

a {
    text-decoration: none;
    color: var(--dark-grayish-blue);
}

ul,
li {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ================================ */
/* ***** Estilos Seccion Hero ***** */
/* ================================ */
.hero__section {
    height: 100vh;
    flex-direction: column;
    gap: 20px;
}

.picture {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -999;
}

.picture,
source {
    width: 100%;
}

.hero__title {
    font-size: 34px;
}

.hero__text {
    margin-top: -20px;
}

.button {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.btn--green {
    background-color: var(--strong-cyan);
}

.btn--purple {
    background-color: var(--light-blue);
}


/* ===================================== */
/* ***** Estilos Seccion Keeptrack ***** */
/* ===================================== */
.keeptrack__title {
    font-size: 30px;
}

.feature__img {
    padding: 60px 0;
}

.feature__img--computer {
    width: 100%;
    height: 100%;
}

.feature__list {
    flex-direction: column;
    gap: 40px;
}

.feature__list--title {
    font-size: 26px;
}


/* ============================================ */
/* ***** Estilos Seccion Access Clipboard ***** */
/* ============================================ */
.access__section {
    padding-top: 100px;
}

.access__title {
    font-size: 30px;
}

.feature__img--devices {
    width: 100%;
    height: 100%;
}


/* ======================================= */
/* ***** Estilos Seccion Supercharge ***** */
/* ======================================= */
.supercharge__options,
.supercharge__brands {
    flex-direction: column;
    gap: 60px;
}

.supercharge__options {
    padding: 80px 0;
}

.supercharge__brands {
    padding: 40px 0;
}

/* ===================================== */
/* ***** Estilos Seccion Clipboard ***** */
/* ===================================== */
.clipboard__section {
    padding-bottom: 100px;
}

.clipboard__section--title {
    padding: 0 20px;
}

.clipboard__section--text {
    line-height: 28px;
    padding: 10px 0 30px;
}


/* ================================== */
/* ***** Estilos Seccion Footer ***** */
/* ================================== */
.footer {
    flex-direction: column;
    gap: 40px;
    background-color: hsla(201, 11%, 66%, 0.2);
    padding-bottom: 60px;
}

.logo {
    padding: 20px 0;
    width: 100px;
    height: 100px;
    margin: auto;
}

.logo--company {
    width: 100%;
}

.nav,
.nav__list {
    flex-direction: column;
}

.nav__list li {
    line-height: 60px;
}

.social {
    gap: 40px;
}


/* ================================= */
/* ***** Diseño Web Responsivo ***** */
/* ================================= */
@media screen and (min-width: 1080px) {

    /* Seccion Hero */
    .picture--img {
        width: 100%;
    }

    .hero__text {
        width: 650px;
        line-height: 30px;
    }

    .button {
        flex-direction: row;
    }

    /* Estados boton */
    .btn--green:hover {
        transition: ease-out .3s;
        background-color: hsla(171, 66%, 44%, .7);
        box-shadow: 1px 1px 3px hsla(171, 66%, 44%, .8);
    }

    .btn--purple:hover {
        transition: ease-out .3s;
        background-color: hsla(233, 100%, 69%, .7);
        box-shadow: 1px 1px 3px hsla(233, 100%, 69%, .8);
    }

    /* Seccion Keeptrack */
    .keeptrack__text,
    .access__text {
        width: 700px;
        margin: auto;
    }

    .feature {
        display: flex;
        justify-content: space-between;
    }

    .feature__img--computer {
        display: inline-block;
        margin-left: -150px;
    }

    .feature__list {
        width: 400px;
        text-align: left;
    }

    /* Seccion Access */
    .feature__img {
        width: 800px;
        margin: auto;
    }

    /* Seccion Supercharge */
    .supercharge__options,
    .supercharge__brands,
    .footer {
        flex-direction: row;
    }

    .supercharge__brands {
        justify-content: space-between;
    }


    /* Footer */
    .footer {
        display: grid;
        grid-template-columns: 20% 40% 30%;
    }

    .nav {
        flex-direction: row;
        justify-content: space-between;
    }

    .nav__list {
        text-align: left;
    }


    /* Estilos scrollbar */
    ::-webkit-scrollbar {
        width: 1rem;
        height: 1rem;
        background: #f5f5f5;
        box-shadow: inset 0 0 .3125rem rgba(#49636d, .3)
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(30deg, #38a2bf .11%, #26bba4 94.8%);
        border-radius: 100vw;
        transform: ease .3s
    }

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(30deg, #2488a4 .11%, #1da591 94.8%);
        transform: ease .3s
    }

}

---

Archivos adicionales

Normalize.css hace que los navegadores representen todos los elementos de manera más consistente y en línea con los estándares modernos. Se dirige con precisión solo a los estilos que necesitan normalizarse.

Es un archivo CSS que resetea los estilos predeterminados que cada navegador añade a un documento HTML.

Markdown herramienta de conversión de texto plano a HTML.

Es un tipo de archivo que usamos para documentar el código del proyecto readme.md.

---

Conclusión

¡La práctica hace al maestro!

Deseo y te animo a seguir programando, codificando y estudiando para convertirte en un desarrollador web frontend altamente competitivo.

Este proyecto es original de Frontend Mentor.

Si tienes algo en mente, no dudes en escribirme, casi siempre respondo de inmediato.

¡Feliz aprendizaje!👋