https://github.com/marocena26/landing-page
Responsive - Layout sample of how a multilanguage landing page would look like | 🐈⬛ | Technologies used: HTML 5, Sass, TypeScript, Angular.
https://github.com/marocena26/landing-page
angular bootstrap html5 primeng sass typescript
Last synced: 7 months ago
JSON representation
Responsive - Layout sample of how a multilanguage landing page would look like | 🐈⬛ | Technologies used: HTML 5, Sass, TypeScript, Angular.
- Host: GitHub
- URL: https://github.com/marocena26/landing-page
- Owner: marocena26
- Created: 2024-03-08T12:48:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-20T07:47:28.000Z (over 1 year ago)
- Last Synced: 2025-01-17T17:16:01.184Z (9 months ago)
- Topics: angular, bootstrap, html5, primeng, sass, typescript
- Language: TypeScript
- Homepage: https://landing-purrfect-match.netlify.app/
- Size: 3.68 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Landing Page - Purrfect Match 🐈⬛
Welcome!👏🏻 In this repository you can find the files generated in the creation of the **Landing Page - Purrfect Match**
The main objective of this exercise is to create a **responsive landing page** from scratch where you can **practice and play with Angular, typescript and different design tools**.
> **NOTE:** Direct link to the project by clicking on the following **[link](https://landing-purrfect-match.netlify.app/)** 👈🏻
## 📄 Description
If you currently don't have a cat and you are thinking about letting one into your life, this space is perfect for you. In Purrfect Match we present a **simple web, intuitive and adapted to any type of device**(mobile, tablet and PC) so you can take a look at it anytime, anywhere. Based on our **own design**, the website will allow you to know some of the many benefits of having a cat as a life companion.
This project **employs `ngx-translate` for content internationalization**, enabling **dynamic translation** of the user interface (ES-EN). It also makes use of **Angular's reactive forms for efficient form management**, facilitating **data validation and user interaction** with the application in an intuitive and robust way.
It also uses **Jasmine and Karma for unit and integration testing**, ensuring the **quality and reliability of the code**.
## 🛠️ Tools
The following tools have been used when solving the project:
- **HTML**
- **CSS/Sass**
- Variables, mixins and functions
- Flexbox and Box model
- Media queries
- **Component library**
- PrimeNg
- PrimeFLex
- PrimeIcon
- Bootstrap
- **TypeScript**
- **Angular**
- Interfaces
- Modules
- Components
- Imports
- Injections
- Services
- Reactive Forms
- Directives - ngIf and ngFor
- **GIT version control**
- **Testing**: Jasmine y Karma
- **JSON**: To change the language (ES - EN)
- **Design**
- Canva
- Excalidraw
## 💾 Steps to follow to use this project on your computer:
> **NOTE:** This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.
**First** of all, in order to have the repository on your computer:
1. Click on the top right corner > **Fork**.
2. It will ask you to choose which GitHub user you want to fork it to. **Choose your user**.
3. **Go to github.com/your-user/name-of-project**, **clone it** and do whatever you want, you can rename the repo, change the code, redeploy it to GitHub Pages...
4. **Finally** and for everything to work properly, **you must disable GitHub Pages and re-enable** it so that GitHub generates the new URL correctly.
Once you have **done the fork**:
1. Open it in your code editor.
2. Open a terminal and **install the local dependencies** by executing in the command terminal. Here are the ones I used to start my project:
```bash
npm install or yarn
npm install or yarn add primeng
npm install or yarn add primeicons
npm install or yarn add primeflex
npm install or yarn add @ngx-translate/core @ngx-translate/http-loader
```
The project has to be **started** every time we start programming, to do this we will execute the **command**:
```bash
npm or yarn start
```
After running `npm/yarn start` we can start editing all the files inside the src/ folder and program comfortably 💫
## 🌻 Credits & Feedback
Designed & Developed By **[Elena Arocena](https://github.com/marocena26)**
Any input is most welcome. Thank you very much!