StoneFree

Integrantes	Rol	Link a los Gtihub
Kevin Garcia	Full-stack	Contacto
David Isaí Soto	Full-stack	Contacto
Oscar Lara	Full-stack	Contacto
Andrea Gómez	Full-stack	Contacto
Carlos Joaquín Castañeda	Full-stack	Contacto

Cuidado y preservación de especies marinas

Diagrama de la página web

classDiagram
HomePage --|> Información
HomePage --|> Acuamigos
Información --|> AprendeMas
Información --|> Consejos
Información --|> Videos
class Información
Información : 3 secciones
class AprendeMas
AprendeMas : +Ballena Azul
AprendeMas : +Delfín
AprendeMas : +Peces
AprendeMas : +León Marino
AprendeMas : +Tortuga Marina
AprendeMas : +Caballito de Mar
AprendeMas : +Vaquita Marina
AprendeMas : +InfoGeneral()
AprendeMas : +Localización()
class Consejos
Consejos : 6 consejos 
Consejos : para cuidado y
Consejos : preservación de
Consejos : especies marinas
class Videos
Videos : Temas de 
Videos : contaminación 
Videos : y cuidado 
Videos : de mares
Acuamigos : SeleccionaAmigo
class Acuamigos
Acuamigos : +Tortuga Marina
Acuamigos : +Tiburón
Acuamigos : +Coral
Acuamigos : +Estado()
Acuamigos : +Reino()
Acuamigos : +Clase()
Acuamigos : +Familia()
Acuamigos : +Genero()

Loading

Vistas de la página web

Homepage

Pestaña de Acuamigos

Al seleccionar alguna de las imágenes, se muestra la información correspondiente, por ejemplo:

Pestaña de Información

En la sección "Aprende más sobre algunos animales", al dar click en alguna de las imágenes, se es redireccionado a otro sitio web con la información correspondiente al animal, a continuación se muestra un ejemplo:

Para la pestaña de acuamigos, la idea original era crear un inicio de sesión y una página tipo tamagochi para que el niño pudiera sentir una cercanía con una especia marina, se hizo la prueba de inicio de sesión sin embargo por falta de tiempo no se puedo incluir en el resultado final, este es nuestro diseño original:

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.