Examen 2 - Street Fighter App

Introducción

Este proyecto es una página web para fans del viodeojuego Street Fighters. El sitio ofrece información relacionado con el juego, incluyendo un formulario.

Objetivos

Con la realización de esta actividad, se pretende demostrar los conocimientos de HTML y CSS vistos en la Lenguajes de Marcas y Sistemas de Gestión.

Requerimiento 1

Realizar, mediante el uso de las etiquetas HTML y CSS vistas en clase, el diseño de la siguiente web:

• La página web, tiene un título de nivel 1 con el siguiente mensaje: “To live is to fight, to fight is to live!” en el que, a través de CSS, se le ha dado las siguientes características: tipografía “Street”, color: crimson, tamaño de la letra de 46px y además, está centrado al centro de la web.
• La tabla de los personajes tiene la siguiente estructura y tamaño:
  • Anchura de 600px y Altura de 800px
  • Un tamaño de borde de 10px, tipo outset y color RGB (237, 175, 5).
  • Se le ha aplicado un redondeado en los bordes de 10px
  • El color de fondo es negro (black)
  • Se ha alienado al centro de la web.
  • Se le ha aplicado la imagen de fondo “fondocabecera.jpg”, de tal manera que ocupe el tamaño del contenedor de la tabla, y al texto de dentro, un tamaño de 40px y color whitesmoke.
  • Para que tenga esa sensación de contraste entre la imagen y texto, se le ha aplicado a esta celda la propiedad opacity: 0.5;

El diseño de las celdas (tr y td), son de las siguientes medidas y características:

• Tamaño de 40px de anchura y 45px de altura.
• Tipo de letra: Street
• Bordes: 2px solid grey;
• Redondeados 10px
• Tamaño de la letra de 18px en negrita
• Color: darkorange centradas al medio.
• Las imágenes, ya están tratadas y ajustadas para que queden correctamente en la tabla, por lo que no se tienen/deben de cambiar.

Recordar, que se debe de insertar una imagen de fondo para toda la web que se llama fondo2.jpg, y la tipografía “Street” facilitada en los recursos, que deberá de ir en una carpeta llamada Font. Añadir un favicon a la web (arcade.png) y nombre de la pestaña “StreetFighter-UNIR”

Requerimiento 2

Debajo de la taba, crear un formulario con las siguientes características:

• Texto del Título: Formulario de Inscripción para jugar a Street Figther
• Características: Título de segundo nivel, tipografía Street, color crimson, tamaño 28px y centrado al medio.
• Características Generales del Formulario:
  • Formulario: tamaño de 600px de anchura y 1100px de altura.
  • Border: 10px outset rgb(237, 175, 5)
  • Color: blanco
  • Bordes redondeados 10px
  • Color de fondo: negro (black)
  • Alineado al centro
  • Tamaño de la tipografía: 16px
  • Tipo de letra: Verdana.
• Los legends, tiene una tipografía Street, tamaño 14px y color rgb(237, 175, 5).
• El textarea, tiene una anchura de 560px
• Los botones tienen las siguientes características:
  • Border: 1px solid crimson
  • Color de Fondo: crimson
  • Tipografía: Street
  • Tamaño: 18px
  • Color: Blanco (White)
  • Tamaño: 200px de ancho y 50px de alto
  • Redondeado 5px
  • Separados del margen izquierdo: 65px
  • Separados del margen inferior (bottom): 10px

Requerimiento 3

Subir la web a un repositorio de Github Pages (servidor web) con el fin de poder tener acceso a la misma desde cualquier tipo de dispositivo con conexión a internet. El repositorio puede tener el nombre que se desee.

Mira la aplicación online aquí.

Características

• Página principal con elemento interactivo que lleva usuarios a páginas secundarias
• Página secundaria con formulario para que el usuario pueda participar de un juego temático enviando sus datos a un correo
• Página secundaria con tabla periódica con personajes e imágenes de la serie

Technologies

• CSS
• HTML

Autora

Tanimara Elias Santos

Versión

1.0.0