Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dkevlas/gameofthonesclone
Recreación de una web inspirada en Game Of Thrones, usando Angular, TypeScript y SCSS. Incluye diseño responsive e interacción dinámica
https://github.com/dkevlas/gameofthonesclone
angular angular-cli angular18 html-css-javascript responsive-web-design sass typescript web
Last synced: about 1 month ago
JSON representation
Recreación de una web inspirada en Game Of Thrones, usando Angular, TypeScript y SCSS. Incluye diseño responsive e interacción dinámica
- Host: GitHub
- URL: https://github.com/dkevlas/gameofthonesclone
- Owner: dkevlas
- Created: 2024-10-09T19:53:23.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-07T01:53:10.000Z (2 months ago)
- Last Synced: 2024-12-07T03:09:42.999Z (about 1 month ago)
- Topics: angular, angular-cli, angular18, html-css-javascript, responsive-web-design, sass, typescript, web
- Language: TypeScript
- Homepage: https://dkevlas.github.io/got-web/
- Size: 228 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Game of Thrones Web Clone
### Imitación y/o Mejora de un Diseño Web
Este proyecto es una recreación de una web inspirada en una imagen de Game of Thrones encontrada en Pinterest. El diseño original era solo para escritorio, pero he expandido el proyecto para hacerlo **responsive**, agregando **interacción y lógica** utilizando SCSS, Typescript y Angular.
## Comparación de Diseños
- **[Diseño Original](https://my-design-imitations.s3.us-east-2.amazonaws.com/design-03-Game-Of-Thrones/Design-Original.jpg)**
### Imitaciones por Tipo de Pantalla
1. **Mobile-Large**
- **[iPhone XR/XS Max](https://my-design-imitations.s3.us-east-2.amazonaws.com/design-03-Game-Of-Thrones/Mobile-Large.webp)**
- Resolución: 414x1941
2. **Mobile-Medium**
- **[Galaxy S9/Note 8/S8](https://my-design-imitations.s3.us-east-2.amazonaws.com/design-03-Game-Of-Thrones/Mobile-Medium.webp)**
- Resolución: 349x2186
3. **Tablet-Large**
- **[iPad Pro (12.9-inch)](https://my-design-imitations.s3.us-east-2.amazonaws.com/design-03-Game-Of-Thrones/Tablet-Large.webp)**
- Resolución: 1026x1475
4. **Laptop-Standard**
- **[Laptop Standard](https://my-design-imitations.s3.us-east-2.amazonaws.com/design-03-Game-Of-Thrones/Laptop-Standard.webp)**
- Resolución: 1440x1622
5. **Desktop-Wide**
- **[Large Screen](https://my-design-imitations.s3.us-east-2.amazonaws.com/design-03-Game-Of-Thrones/Desktop-Wide.webp)**
- Resolución: 691x1334
6. **Laptop-Personal**
- **[Personal Laptop](https://my-design-imitations.s3.us-east-2.amazonaws.com/design-03-Game-Of-Thrones/Laptop-Personal.webp)**
- Resolución: 1366x1608
### Mejoras realizadas:
- Adaptado para **celulares**, **tablets**, y otras resoluciones.
## Código del Proyecto
1. **Clonar el repositorio** usando Git:
```bash
git clone https://github.com/dkevlas/GameOfThonesClone.git
```
2. **Navegar** al directorio del proyecto:
```bash
cd GameOfThonesClone
```
3. **Instalar las dependencias** Asegúrate de tener Node.js y npm instalados. Luego ejecuta:
```bash
npm install
```
4. **Iniciar** el servidor:
```
ng serve
```