Diseño Web HTML + CSS para una tienda de zapatillas

Diseño Web HTML y CSS para una Tienda de Zapatillas Portada

VIDEO Diseño Web HTML y CSS para una Tienda de Zapatillas Portada

Desarrollo de una página web en CSS y HTML aplicando un menú de navegación centrado con un logo en el medio, animación con keyframes y fondo gradientes


Diseño Web HTML + CSS para una tienda de zapatillas

Diseño Web HTML y CSS para una Tienda de Zapatillas Portada

Desarrollo de una página web en CSS y HTML para la portada del sitio web de una tienda de zapatos o zapatillas.

Usamos la librería Bootstrap en su presentacion CSS para agilizar el proceso de maquetación.

  1. Diseño de un menu de navegación centrado con un logo en el medio
  2. Animación de Imágenes con Keyframesen CSS
  3. Uso de fondos gradientes radiales en CSS

CÓDIGO HTML DEL MENU DE NAVEGACIÓN

Presenta un menu horizontal con dos secciones: una en la parte derecho y otra en a parte izquierda haciendo espacio para que se pueda insertar el logo en el  medio

<nav class="navbar navbar-expand-lg navbar-dark bg-light mt-n5">
                        <a class="navbar-brand" href="#"></a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                          <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNav">
                          <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                              <a class="nav-link" href="#">HOME <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="#">ZAPATILLAS</a>
                            </li>                           
                          </ul>
                          <ul class="navbar-nav ml-auto">
                                <li class="nav-item">
                                  <a class="nav-link" href="#">GALERIA</a>
                                </li>
                                <li class="nav-item">
                                  <a class="nav-link" href="#">CONTACTO</a>
                                </li>                           
                              </ul>
                        </div>
                </nav>

CÓDIGO CSS DE LA ANIMACIÓN DE LA IMAGEN

El código permite dotar de una animación  lenta en EaseInOut de 4 segundos en el eje Y es decir verticalmente la imagen tendrá un ligero movimiento

.zapatilla{
    animation: zapatilla_animacion ease-in-out infinite 4s;
}
@keyframes zapatilla_animacion{
    0%{ transform: translateY(-10%)}
    50%{ transform: translateY(0%)}
    100%{ transform: translateY(-10%)}
}

CÓDIGO CSS DEL BACKGROUND RADIAL

Con es código CSS podemos agregar un fondo degradado radial a nuestro página web.

body{
    background: radial-gradient(at top, #E02F39,#520004);
}

y así es como ser vería:

Diseño Web Tienda de Zapatilla

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Diseño Web HTML + CSS para una tienda de zapatillas?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 150 veces | Publicado hace 2 semanas

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019