https://github.com/dkevlas/harrypotterclone
Clon interactivo y responsive de una web inspirada en Harry Potter, desarrollado con Angular, SCSS y TypeScript.
https://github.com/dkevlas/harrypotterclone
angular frontend-web html-css-javascript responsive-design responsive-web-design
Last synced: 4 months ago
JSON representation
Clon interactivo y responsive de una web inspirada en Harry Potter, desarrollado con Angular, SCSS y TypeScript.
- Host: GitHub
- URL: https://github.com/dkevlas/harrypotterclone
- Owner: dkevlas
- Created: 2024-10-21T21:15:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-03T17:47:19.000Z (over 1 year ago)
- Last Synced: 2025-11-19T06:17:16.033Z (7 months ago)
- Topics: angular, frontend-web, html-css-javascript, responsive-design, responsive-web-design
- Language: TypeScript
- Homepage: https://dkevlas.github.io/harry-potter/
- Size: 260 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Harry Potter 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 arry Potter. He desarrollado una versión responsive e interactiva. Utilizando SCSS y TypeScript en Angular, He desarrollado una versión responsive e interactiva, donde no solo he replicado el diseño, sino que también he creado acciones para esos botones, aportando así una nueva dimensión al proyecto. El objetivo fue no solo replicar la estética original, sino también ofrecer una experiencia más inmersiva y funcional.
## Comparación de Diseños
- **[Diseño Original](https://my-design-imitations.s3.us-east-2.amazonaws.com/design-04-Harry-Potter/original.webp)**
### Imitaciones por Tipo de Pantalla
1. **Mobile-Sreen**
- **[iPhone XR/XS Max](https://my-design-imitations.s3.us-east-2.amazonaws.com/design-04-Harry-Potter/small.jpg)**
- Resolución: 414x1941
3. **Tablet-Screen**
- **[iPad Pro (12.9-inch)](https://my-design-imitations.s3.us-east-2.amazonaws.com/design-04-Harry-Potter/medium.jpg)**
- Resolución: 1026x1475
4. **Desktop-Screen**
- **[Laptop Standard](https://my-design-imitations.s3.us-east-2.amazonaws.com/design-04-Harry-Potter/large.jpg)**
- Resolución: 1440x1622
### 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/HarryPotterClone.git
```
2. **Navegar** al directorio del proyecto:
```bash
cd HarryPotterClone
```
3. **Instalar las dependencias** Asegúrate de tener Node.js y npm instalados. Luego ejecuta:
```bash
npm install
```
4. **Iniciar** el servidor:
```
ng serve
```