https://github.com/lupemorales/eco-store

landing page
https://github.com/lupemorales/eco-store

sass-mixins

Last synced: 15 days ago
JSON representation

landing page

• Host: GitHub
• URL: https://github.com/lupemorales/eco-store
• Owner: lupeMorales
• License: mit
• Created: 2023-06-07T09:59:45.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-13T13:08:12.000Z (about 1 year ago)
• Last Synced: 2024-12-19T00:40:29.758Z (15 days ago)
• Topics: sass-mixins
• Language: HTML
• Homepage: https://lupemorales.github.io/eco-store/
• Size: 15.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# eco-store  |      Demo  | 

Eco-store is a landing page for a catalog of health care and home decoration products.

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Useful resources](#useful-resources)

- [Contact](#contact)

## Overview

### The challenge

Use Sass to create the web page with several sessions of own styles following the design given through [Figma](https://www.figma.com/file/Em1aDiIHmqozHpUAjsYhT7/Eco-Store-Mockups-(Copy)?type=design&node-id=43-2185&t=C4wzlaOCCJExAuCe-0)

- Structure a style sheet.

- Use mixins to reuse already defined styles.

- Responsive design.

- Horizontal scroll.

### Screenshot

![Desktop ](./assets/desktop.png)

![Mobile ](./assets/mobile.png)

## My process

### Built with

- Semantic HTML5 markup

- Sass 

- Mixin

- Flexbox

- CSS Grid

- Mobile-first workflow

### What I learned

I've learned how powerful using "mixin" is and how much it helps to reuse code and keep it cleaner.

### Useful resources

- [Sass documentation](https://sass-lang.com/documentation/) 

- [How to install Sass](https://www.youtube.com/watch?v=MCbdP3E2f7s&list=PLPP5LxJ4T3ifn0VdPY_glEIJaH6B6o4fh&index=1) 

## Contact

- Website - [My portfolio web](https://lupemorales.github.io/portfolio/)

- Linkedin - [@LupeMorales](https://www.linkedin.com/in/lupe-morales/)

**Have fun coding!** 🚀