https://github.com/thomaswillix/web-page
little webpage I did last year, nothing complex
https://github.com/thomaswillix/web-page
Last synced: 2 months ago
JSON representation
little webpage I did last year, nothing complex
- Host: GitHub
- URL: https://github.com/thomaswillix/web-page
- Owner: thomaswillix
- Created: 2023-11-01T18:56:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-01T20:03:50.000Z (over 1 year ago)
- Last Synced: 2025-01-20T18:29:51.415Z (4 months ago)
- Language: HTML
- Size: 9.24 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Página WEB Generaciones de Consolas
## Página de Inicio (index.html):
Esta página presenta un \
, un \
, y un \
.
El \ se identifica con su id \#timeline y en él se encuentran diferentes links a las dos páginas que he incluido en esta. Estos links están a modo de imágenes y cada imagen representa a la consola más importante de dicha generación.
### CSS:
\#timeline: he puesto el display como “inline” para que las imágenes aparezcan una al lado de la otra.
\
, \
: he añadido un padding de 10% por simple estética.
\![]()
: apliqué un margin-left para que se separen un poco las imágenes y no estén pegadas a la izquierda y una width del 10% para que el tamaño de las imágenes se vea igualado en todas.
## Primera Generación (firstgen.html):
> Implementé una \ en esta página para que la distribución del título, las imágenes, el texto y las listas se me hagan más fáciles.
Dentro de la tabla:
Al \
le he puesto un colspan de 2 para que ocupe el 100% de la tabla y así será más fácil de modificar su posicionamiento más tarde con CSS.
En el primer \ puse dos \’s, dentro del primero de ellos describí un \
con id \#atari, en él puse la primera imagen con una etiqueta de style en la que describí su width al 35%. Lo hice de esta manera porque no la conseguí seleccionar con el selector de clases del header.
El segundo de los dos \’s tiene otro \
en el que solo hay un gif a modo de ejemplo de lo que era el juego del que estoy hablando. Puse una etiqueta de style en la que el width lo establecí al 60%.
A continuación viene el siguiente \ en el que solo hay un \, pero, que posee un colspan de 2 como el del \.
Para acabar con la tabla, en el último \ tiene dos \’s, hay una lista en cada uno y cada una de ellas tiene su padding-left ajustado para un correcto posicionamiento.
Y para acabar con la página simplemente añadí los tres links internos que tengo asociados a imágenes que funcionan a modo de navegación entre el sitio web, “página anterior, inicio y página siguiente”. Estos 3 links están contenidos en un \
llamado \#links y cada imagen de cada link tiene un id (\#paginaanterior, \#inicio, \#paginasiguiente).
### CSS:
Los \ tienen una width del 50% ya que hay 2 por row. El id \#text tiene un text-align: center por estética, el \
tiene un margen del 4% para posicionarse un poco más abajo y centrado que por defecto y un font-size: xx–large.
La id \#atari presenta un display: grid y place-items center para centrar la primera imagen.
## Quinta Generación (fifth.html):
> Al principio de la página puse un link interno al id \#grafico que aparecerá más tarde asociado al \
de la página.
Como en la anterior página, utilicé una \
para que sea más fácil distribuir y manipular los elementos.En el primer \ introduje los títulos como \’s, en el segundo imágenes y en el tercero texto.
Dentro del tercer \, el primer \ tiene primero una etiqueta \
que modifiqué con el atributo style para establecer el padding-bottom a unset y seguido de esta una \
El segundo \ tiene la misma estructura que el anterior y los últimos 2 solo poseen una etiqueta \ cada uno.
A continuación de la tabla puse un \
en el que hay un \ y un \ con name: grafico para ser referenciado en el principio de la página por el link interno, dentro de esta etiqueta de link hay una \![]()
con su style cambiado “width:40%”.
Para finalizar con la página, como en la anterior hay un div con los links externos de navegación.
### CSS:
\![]()
: width: 40% y margin-left: 30%
\
: color: white y width: 25%
\
y \
: padding del 5% para posicionarlo
\