https://github.com/marocena26/prueba-de-maquetacion

Layout of a website according to a design given by Create. Responsive web 📱. Technologies used: HTML 5, CSS, Sass and animations.
https://github.com/marocena26/prueba-de-maquetacion

css-animations css-flexbox css-grid html5 sass sass-mixins

Last synced: 17 days ago
JSON representation

Layout of a website according to a design given by Create. Responsive web 📱. Technologies used: HTML 5, CSS, Sass and animations.

• Host: GitHub
• URL: https://github.com/marocena26/prueba-de-maquetacion
• Owner: marocena26
• License: mit
• Created: 2023-01-22T14:26:26.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-23T18:19:04.000Z (almost 2 years ago)
• Last Synced: 2024-10-31T09:27:57.655Z (2 months ago)
• Topics: css-animations, css-flexbox, css-grid, html5, sass, sass-mixins
• Language: SCSS
• Homepage: https://marocena26.github.io/prueba-de-maquetacion/
• Size: 211 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Prueba de maquetación

## 👩🏻‍💻 Author 

Mª Elena Arocena López: [@marocena26](https://github.com/marocena26)

## 🚀 Introduction

In this repository you can find the files generated for the Front selection process for [Create](https://www.create-store.com/es/)'s.

The main objective is to develop a website according to a given design. This web application must have a **responsive design** that allows it to adapt to different devices.

> **NOTE:** Direct link to the project by clicking on the following **[link](https://marocena26.github.io/prueba-de-maquetacion/)**

## 📝 Requirements

With a **layout design** as the starter point, the exercise consists on developing a web-site using the following **elements**:

- **Sass**

- **Flexbox and CSS Grid**

- **Media queries**

- **Interactions with the user**

The following **requirements** have to be respected:

- The **layout** consists of **logo + menu + body** with an **aside on the right + footer**.

- The **font** used is **Arial**, but **if you want you can use one of Google Fonts**.

- **Logo**.

- The **`:hover`** state they should have when you hover the mouse over them. If you want you can **animate** the transition as you like.

- **Desktop** version (resolutions **higher than 1024px**).

- **Tablet** version (**between 500px and 1024px**).

- **Mobile** version (resolutions **lower than 500px**).

- **Use** the **BEM** methodology.

## 🛠️ Tools

The following tools have been used when solving the project:

- **HTML** (with partials for an easier lecture and project organization)

- **CSS/Sass**

- **Partials**

- **Variables, mixins and functions**

- **Flexbox**

- **CSS Grid**

- **Box model** (size, padding and margin)

- **Media queries**

- **Position**

- **Transition**

- **GIT version control**

## 💾 Steps to follow to use this project on your computer:

> **NOTE:**  You need to have **Node JS** installed to run this project.

1. **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...

2. **Finally** and for everything to work properly, **you must disable GitHub Pages and re-enable** it so that GitHub generates the new URL correctly.

3. Open it in your code editor.

4. 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

```

The project has to be **started** every time we start programming, to do this we will execute the **command**:

```bash

npm start

```

After running `npm start` we can start editing all the files inside the src/ folder and program comfortably 💫