A Pen by Aubrey Northam

Thumbnail
This awesome code was written by aenortham, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright aenortham ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Aubrey Northam</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <a id="servicios"></a>
    <a id="galeria"></a>
    <a id="contacto"></a>
    <header class="nav">
        <nav>
            <ul>
                <li><a href="#servicios"> Servicios </a> </li>
                <li><a href="#galeria"> Galeria </a> </li>
                <li><a href="#contacto">Contacta  nos </a> </li>
            </ul>
        </nav>
    </header>

    <section id="main">
        <article class="panel" id="servicios">
            <h1> Nuestros Servicios</h1>
        </article>

        <article class="panel" id="galeria">
            <h1> Mustra de nuestro trabajos</h1>
        </article>

        <article class="panel" id="contacto">
            <h1> Pongamonos en contacto</h1>
        </article>
    </section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/aenortham/a-pen-by-aubrey-northam-vJByev */
html,body {
        width: 100%;
        height: 100%;
        position: relative; 
}
body {
    overflow: hidden;
}

header {
    background: #fff; 
    position: fixed; 
    left: 0; top: 0; 
    width:100%;
    height: 3.5rem;
    z-index: 10; 
}

nav {
    width: 100%;
    padding-top: 0.5rem;
}

nav ul {
    list-style: none;
    width: inherit; 
    margin: 0; 
}


ul li:nth-child( 3n + 1), #main .panel:nth-child( 3n + 1) {
    background: blue;
}

ul li:nth-child( 3n + 2), #main .panel:nth-child( 3n + 2) {
    background: pink;
}

ul li:nth-child( 3n + 3), #main .panel:nth-child( 3n + 3) {
    background: green;
}

ul li {
    display: inline-block; 
    margin: 0 8px;
    margin: 0 0.5rem;
    padding: 5px 8px;
    padding: 0.3rem 0.5rem;
    border-radius: 2px; 
    line-height: 1.5;
}

ul li a {
    color: #fff;
    text-decoration: none;
}

.panel {
    width: 100%;
    height: 500px;
    z-index:0; 
    -webkit-transform: translateZ( 0 );
    transform: translateZ( 0 );
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    

}

.panel h1 {
    font-family: sans-serif;
    font-size: 64px;
    font-size: 4rem;
    color: #fff;
    position:relative;
    line-height: 200px;
    top: 33%;
    text-align: center;
    margin: 0;
}

/*
 *Scrolling
 */

a[ id= "servicios" ]:target ~ #main article.panel {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

a[ id= "galeria" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -100% );
    transform: translateY( -100% );
}
a[ id= "contacto" ]:target ~ #main article.panel {
    -webkit-transform: translateY( -200% );
    transform: translateY( -200% );
}

Comments