Inicio » Blog » HTML + CSS

1 septiembre, 2019

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

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

Ver video en

Suscríbete a nuestro canal en Youtube

Suscríbirse

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


Leido 26207 veces

Descarga el código fuente HTML + CSS

Recurso descargado 690 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Diseño de  una Página Web en HTML & CSS Diseño de una Página Web en HTML & CSS

Curso de Diseño de una Página Web en HTML & CSS

Descarga del código fuente

USD 0.00

Páginas Web desde Cero Páginas Web desde Cero

Curso Páginas Web desde cero

Descarga del código fuente

USD 100.00

Aprende más sobre HTML + CSS

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023