Proyectos de diseño web responsivo - Construye una página portafolio personal

Español HTML-CSS
1

Buenas tardes, estoy terminando mi proyecto de portafolio personal, pero tengo problemas con el último item, referente a que #navbar siempre debe estar en la parte superior del viewport, aparentenemente lo tengo bien implementado, pero no entiendo por qué no pasa la validación.

Tu código hasta el momento

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/593851c739.js" crossorigin="anonymous"></script>
    <title>portafolio bromasombra</title>
</head>

<body>
    <header>
        <div class="logo">
            <h2><span class="accent">&lt</span>bromasombra<span class="accent">/&gt</span></h2>
        </div>
        <nav id="navbar">
            <ul>
                <li class="nav-li"><a href="#welcome-section">sobre mí</a></li>
                <li class="nav-li"><a href="#projects">trabajos</a></li>
                <li class="nav-li"><a href="#contacto">contacto</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="welcome-section">
            <div id="welcome-section-container">
                <h1>me llamo <span class="accent">hernán</span></h1>
                <p>web developer en progreso</p>
            </div>
        </section>
        <section id="projects">
            <div id="projects-title">
                <h2><span class="accent">proyectos</span></h2>
                <p>algunos de mis trabajos</p>
            </div>

            <div id="projects-container">
                <div class="project-tile">
                    <a href="https://codepen.io/Hern-n-Fernandez/pen/eYPqZbo">
                        <img src="https://images2.imgbox.com/58/43/xJmpLEfn_o.jpeg" alt="preview formulario"
                            width="400px">
                        <p>formulario</p>
                    </a>
                </div>
                <div class="project-tile">
                    <a href="https://codepen.io/Hern-n-Fernandez/pen/yLRmOZG">
                        <img src="https://images2.imgbox.com/ba/6c/Nw9vfwJo_o.jpeg" alt="preview página de homenaje"
                            width="400px">
                        <p>homenaje</p>
                    </a>
                </div>
                <div class="project-tile">
                    <a href="https://codepen.io/Hern-n-Fernandez/pen/PoyMNLJ">
                        <img src="https://images2.imgbox.com/e5/82/z2LtRn0P_o.jpeg" alt="preview documentación técnica">
                        <p>documentación técnica</p>
                    </a>
                </div>
                <div class="project-tile">
                    <a href="https://codepen.io/Hern-n-Fernandez/pen/wvYVGOy">
                        <img src="https://images2.imgbox.com/dd/dd/v1PePxTG_o.jpeg" alt="preview landing page">
                        <p>landing page</p>
                    </a>
                </div>
            </div>
        </section>
        <section id="contacto">
            <div id="contacto-container">
                <h2>trabajemos <span class="accent">juntos</span></h2>
                <ul id="contacto-list">
                    <li><a href="https://www.facebook.com/profile.php?id=100088094538223" id="profile-link" target="_blank"><i
                                class="fab fa-facebook-square"></i>
                            <p>facebook</p>
                        </a></li>
                    <li><a href="https://www.linkedin.com/in/herferlopez/"><i class="fab fa-linkedin"></i>
                            <p>linkedIn</p>
                        </a></li>
                    <li><a href="https://github.com/bromasombra"><i class="fab fa-github-square"></i>
                            <p>github</p>
                        </a></li>
                    <li><a href="mailto:herferlopez@gmail.com"><i class="fas fa-envelope-square"></i>
                            <p>escríbeme</p>
                        </a></li>
                    <li><a href="tel:+56948699004"><i class="fas fa-phone-square"></i>
                            <p>llámame</p>
                        </a></li>
                </ul>
            </div>
        </section>
    </main>
    <footer>
        <div class="footer-container">
            <p>&copy; <span class="accent">bromasombra</span> 2023 - todos los derechos reservados. </p>
        </div>
    </footer>
</body>

</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --accentColor: #df3f09;
}

html {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

body {
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    width: 100%;
    overflow: auto;
    font-size: 62.5%;
    background: linear-gradient(45deg,
            rgb(94, 94, 94),
            rgb(28, 28, 28));
    position: relative;
    z-index: 1;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #272727;
    position: fixed;
    top: 0;
    width: 100vw;
    padding: 2em;
    z-index: 5;
    height: 72px;
}


#navbar>ul {
    display: flex;
    flex-direction: row;
    list-style: none;
}

.nav-li a {
    text-decoration: none;
    font-size: 2em;
    height: 100%;
    margin: 1em;
    padding: 1em;
    color: #fff;
    transition: .3s;
}

.nav-li a:hover {
    color: var(--accentColor);
}

.logo {
    font-family: 'Cutive Mono', monospace;
    font-size: 2em;
    color: #fff;
    cursor: default;
}

.accent {
    color: var(--accentColor);
}

main {
    top: 72px;
}

#welcome-section {
    height: 800px;
    width: 100vw;
    display: grid;
    place-items: center;
    scroll-margin-top: 72px;
    background-color: rgba(38, 38, 38, 0.1);

}

#welcome-section-container {
    color: #fff;
    width: 600px;
    text-align: center;
}

#welcome-section-container>h2 {
    font-size: 6em;
}

#welcome-section-container>p {
    font-size: 3em;
}

@keyframes dotsAnimation {
    0% {
        content: "";
    }

    50% {
        content: "|";
    }
}

#swelcome-section-container>p::after {
    position: absolute;
    content: "";
    animation: dotsAnimation 2s infinite;
}

#projects {
    height: 750px;
    width: 100vw;
    margin: auto;
    scroll-margin-top: 72px;
    background-color: rgba(255, 255, 255, .1);
}

#projects-title {
    text-align: center;
}

#projects-title>h2 {
    font-size: 6em;
}

#projects-title>p {
    font-size: 3em;
    color: #fff;
}

#projects-container {
    width: 90vw;
    height: 500px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: auto;
}

.project-tile {
    width: 250px;
    height: 300px;
    position: relative;
    cursor: pointer;
    border: 2px solid var(--accentColor);
    padding: 1em;
}

.project-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .2s;
    pointer-events: auto;
}

img {
    filter: grayscale(1);
}

.project-tile p {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2em;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s;
}

.project-tile a {
    border-radius: inherit;
}

.project-tile:hover {
    transform: scale(108%);
}

.project-tile img:hover {
    filter: brightness(30%);
}

.project-tile:hover p {
    opacity: 1;
}

#contacto {
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#contacto-container {
    text-align: center;
    width: 100%;
    margin: auto;
}

#contacto-container h2 {
    font-size: 6em;
    color: #fff;
}

#contacto-list {
    display: flex;
    list-style: none;
    justify-content: center;
}

#contacto-list a {
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-decoration: none;
    padding: 1em;
    font-size: 3em;
    color: white;
    transition: .2s;
}

#contacto-list i {
    margin-right: .5em;
    color: var(--accentColor);
}

#contacto-list a:hover {
    transform: scale(105%);
}

footer {
    height: 72px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #272727;
}

.footer-container {
    padding: 1em;
    font-size: 2em;
    color: #fff;
}

@media only screen and (max-width: 768px) {
    header {
        flex-direction: column;
        height: max-content;
        width: 100%;
        align-items: center;
    }

    header h2 {
        padding-bottom: 20px;
    }

    .nav-li a {
        text-decoration: none;
        font-size: 2em;
        height: 100%;
        margin: 1em;
        padding: 1em;
        color: #fff;
        transition: .3s;
    }

    #contacto-list {
        display: flex;
        flex-direction: column;
        list-style: none;

    }

    #contacto-list a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-decoration: none;
        padding: 1em;
        font-size: 3em;
        color: white;
        transition: .2s;
    }

    footer {
        height: 72px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #272727;
    }

    #trabajos-container {
        width: 90vw;
        height: 400px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        margin: auto;
        gap: 20px
    }

    #trabajos-title {
        text-align: center;
        padding-bottom: 20px;
    }

    .trabajo {
        width: 200px;
        height: 200px;
        position: relative;
        cursor: pointer;
        border: 2px solid var(--accentColor);
        padding: 1em;
    }

}

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36

Challenge: Proyectos de diseño web responsivo - Construye una página portafolio personal

Enlaza al desafío:

2

Hola @herferlopez , bienvenido al foro!

Para obtener la validación prueba con aplicar las propiedades de position y top al selector #navbar.

Puede que tengas que realizar algunos cambios para que el aspecto del navbar no se vea desordenada con esa modificación.

Nos comentas como te fue, te felicito por el buen diseño del proyecto. Saludos!

1 Like
3

Hola Diego!

Muchas gracias por la respuesta, pude resolverlo y obtener la certificación!

Saludos!