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.