Skip to content

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

License

Notifications You must be signed in to change notification settings

marocena26/prueba-de-maquetacion

Repository files navigation

Prueba de maquetación

👩🏻‍💻 Author

Mª Elena Arocena López: @marocena26

🚀 Introduction

In this repository you can find the files generated for the Front selection process for Create'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

📝 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:
npm install

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

npm start

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published