No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Creando una aplicaci贸n sencilla en html

6/13
Recursos

Aportes 19

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Hola, les comparto mi repositorio de una p谩gina que hice para este proyecto, la puedan usar con la pr谩ctica! https://github.com/mancillajonathan

Si quieren dise帽ar sus propias p谩ginas les recomiendo el Curso de Dise帽o de Interfaces

Aqu铆 les deje un menu para le que lo quiera usar

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Curso SPA</title>
  </head>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .menu {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      justify-items: center;
    }
    .menu--item {
      cursor: pointer;
    }
    .menu--item:hover {
      color: limegreen;
      text-decoration: underline;
    }
  </style>
  <body>
    <header class="menu">
      <div class="menu--item" onclick="">
        <p>Home</p>
      </div>
      <div class="menu--item" onclick="">
        <p>Contact</p>
      </div>
      <div class="menu--item" onclick="">
        <p>About me</p>
      </div>
    </header>
  </body>
</html>

![](

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cliente para nuestro SPA Router</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">

</head>
<body>
    <header>
        <ul class="nav-list">
            <li class="nav-list-item"><button>Home</button></li>
            <li class="nav-list-item"><button>Contacto</button></li>
            <li class="nav-list-item"><button>About me</button></li>
        </ul>
    </header>
    <div class="container-data">
        <img src="img/persona.png" alt="">
    </div>
    <footer class="footer">
        <div class="footer-container">
            By: Darynka Tapia
        </div>
        
    </footer>
</body>
</html>

estilos.css

/*https://colorhunt.co/palette/174976*/
*{
    margin: 0;
    padding: 0;
}
ul, li {
    list-style: none;
}

.nav-list{
    padding: 20px 0;
    background-color: #424874;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 10vh;
}

.nav-list button{
    font-family: 'Patrick Hand', cursive;
    font-size: 40px;
    color: #f4eeff;
    border: none;
    background: transparent;
}

.nav-list-item{
    border-bottom: solid 2px #a6b1e1 ;
}

.container-data{
    height: 65vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 37px 0;
}
.container-data img{
    height: 65vh;
    object-fit: contain;
}

.footer{
    position: absolute;
    background-color: #a6b1e1;
    bottom: 0;
    width: 100%;
    height: 50px;
}

.footer-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: inherit;
    font-family: 'Patrick Hand', cursive;
    font-size: 20px;
}


鈥淭e lo advierto, va a estar feo鈥 jajaja

mi proyecto de google

A煤n no es responsive, les dejo mi repositorio donde podr谩n ver la estructura.
Repositorio: https://github.com/RLCHuncp/BurgerLu-router-js

Para aquellos que deseen este codigo base para practicar, aqui esta: Repositorio del codigo, aqui!

Jajaja鈥 Va a estar feo.

鈥淰a a estar feo, te lo advierto de una vez鈥 jajaja

Un header y un section b谩sico. Contiene una animaci贸n de transform scale por cada elemento del men煤.
OJO: Los links no tienen un valor de href y tiene un atributo onclick sin usar para futuras clases.

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Router for SPA with JS Vanilla</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .menu-list {
      height: 100px;
      background-color: #162447;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .links {
      color: white;
      text-decoration: none;
      transition: 100ms;
    }

    .links:active {
      transform: scale(0.9);
    }

    .list-item {
      list-style: none;
    }

    .content {
      margin-top: 50px;
      text-align: center;
    }
  </style>
</head>

<body>
  <header>
    <nav>
      <ul class="menu-list">
        <a href="" class="links" onclick="">
          <li class="list-item">
            <h3>HOME</h3>
          </li>
        </a>
        <a href="" class="links" onclick="">
          <li class="list-item">
            <h3>CONTACT</h3>
          </li>
        </a>
        <a href="" class="links" onclick="">
          <li class="list-item">
            <h3>ABOUT</h3>
          </li>
        </a>
      </ul>
    </nav>
  </header>
  <section>
    <div class="content">
      <h1>Welcome to the SPA Router Course at JavaScript Vanilla</h1>
    </div>
  </section>
</body>

</html>

"Te lo advierto, va a estar feo"
Al menos es sensato 馃槄

Que bien, yo estoy trabajando en mi portafolio y en proyectos para a帽adir a este. Esto me viene super bien 馃槂

Bien

Hice una plantilla sencilla:

Si alguno la quiere usar dejo el repositorio:
https://github.com/JuanesGalvis/Router-SPA

Incre铆ble

Recurden siempre usar HTML semantico, asi quedaria la estructura.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Router SPA</title>
</head>
<body>
  <header>
    <ul>
      <li><button>Home</button></li>
      <li><button>Contacto</button></li>
      <li><button>About Me</button></li>
    </ul>
  </header>
  <main>
    <h1>Hola Estudiante! Estas en el Home.</h1>
  </main>
</body>
</html>

Mi implementaci贸n, algo corto y sencillo.

Despu茅s de llevar ya un tiempo con profes que trabajan en Linux y Mac ver un curso con Ricardo en Windows se me hace raro jejejeje

f