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

CSS

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

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

¿Quieres descargar el código fuente Diseño Web HTML + CSS para una tienda de zapatillas?
...por favor suscríbete gratuitamente para descargarlo

DESCARGAR

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

Whatsapp Messenger Facebook Twitter

Visitado 3162 veces | Publicado hace 1 año

Curso Flutter y Laravel Tienda Abarrotes con Delivery

Mira el temario del curso en el siguiente link
VER MÁS DETALLES DEL CURSO

Logo Codea App

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020