Skip to main content
  1. All Posts/

shoppy-ecommerce

eCommerce CSS

E-Commerce Alpha

It’s a website focused on a e-commerce template, this project was elaborated as a project of Alura
Latam and Oracle ONE.

v1 Alpha structure

INDEX

  • Menú con tres items, el primero es el logo de la tienda, segundo, un campo para buscar algún producto en la tienda, finalmente un botón para logearse.
  • Banner con texto sobre una imagen de fondo, este texto es para mostrar alguna promoción o evento en la página, además de este texto se añade un botón.
  • Como contenido, hay tres apartados que son 3 categorías principales. Cada apartado debe llevar un titulo, un botón para ver todos los productos de dicha categoría, además el producto con su nombre, precio y un boton para ver la información de el producto en cuestión.
  • El footer incluye el logo de la tienda más un apartado tipo menú que muestre las siguientes opciones:
    Nota: El footer es general para todas las páginas.
    ||
    |–|
    | Quienes somos |
    | Política de privacidad |
    | Programa de fidelidad |
    | Nuestras tiendas |
    | Quiero ser fanquiciado |
    | Anúncie aquí |
    | |
  • Además de esta parte en el mismo footer se añade un formulario para contactar a la empresa.
  • Finalmente, se añade el nombre del desarrollador.

LOGIN

  • El menu es el mismo que el index solo que sin el botón de login que tenía.
  • Como contenido tenemos un formulario con 2 input, uno para correo y otro para contraseña y su botón para iniciar sesión.

AGREGAR NUEVO PRODUCTO

  • En esta parte el menu solo incluye un logo y un botón con la leyenda ‘Menú Administrador’.
    -Como contenido es un formulario con 5 campos, con su botón de ‘Agregar producto’.
    ||
    |–|
    | URL de imagen |
    | Categoría |
    | Nombre del producto |
    | Precio del producto |
    | Descripción del producto |
    | |

TODOS LOS PRODUCTOS [PANEL]

  • El menú solo tiene el logo y el campo para buscar.
  • Como contenido tenemos un botón para agregar un nuevo producto y un título.
  • Se añaden todos los productos que existen dentro de la tienda, cada uno con la posibilidad de eliminarlos o editar su información, esto a traves de unos botones asignados a cada uno.

STYLE.CSS

  • La página es responsiva tanto para celulares, tablet’s y computadoras.