https://github.com/jdegand/deplace-maison

Frontend Practice Challenge - Deplace Maison
https://github.com/jdegand/deplace-maison

frontend-practice

Last synced: 4 months ago
JSON representation

Frontend Practice Challenge - Deplace Maison

• Host: GitHub
• URL: https://github.com/jdegand/deplace-maison
• Owner: jdegand
• License: mit
• Created: 2021-11-03T21:01:16.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-10-03T20:45:36.000Z (almost 2 years ago)
• Last Synced: 2025-03-15T20:13:15.387Z (over 1 year ago)
• Topics: frontend-practice
• Language: HTML
• Homepage: https://jdegand.github.io/deplace-maison/
• Size: 806 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
Deplace Maison




   Solution for a challenge from  Frontendpractice.com.





  


    

      Github Pages

    

     | 

    

      Frontend Practice

    

  



## Table of Contents

- [Overview](#overview)

  - [Built With](#built-with)

- [Features](#features)

- [Improvements](#improvements)

- [Useful Resources](#useful-resources)

## Overview

![Desktop](screenshots/deplace-desktop.png)

![Desktop Ink Mode](screenshots/deplace-desktop-ink.png)

![Mobile](screenshots/deplace-mobile.png)

![Mobile Panel](screenshots/deplace-mobile-panel.png)

### Built With

- Semantic HTML5 Markup

- CSS custom properties

- Grid

- Flex

- Mobile-First Design

## Features

The [challenge](https://www.frontendpractice.com/project/deplace-maison) was to build an application to complete the following user stories:

- [x] User story: Recreate the layout

- [x] User story: Create the animated gooey cursor and have it blend with other colors.

- [x] User story: Try build the alternating testimonials at the bottom of the page.

## Improvements

- Need to work on animations

- Using a picture element in a card of the slider creates many problems

## Useful Resources

- [Deplace Maison](https://www.deplacemaison.com/#)

- [Image Color Picker](https://imagecolorpicker.com/)

- [Unicode Table](https://www.unicodetable.com)

- [YouTube](https://www.youtube.com/watch?v=KHGc7eZyxKY) - Draggable Slider Tutorial

- [YouTube](https://www.youtube.com/watch?v=5iqdUk4R_2g) - Draggable Slider Tutorial

- [YouTube](https://www.youtube.com/watch?v=IEbaqI7F8vM) - Draggable Slider Tutorial

- [YouTube](https://www.youtube.com/watch?v=LPBGK1gqXoU) - Slider Tutorial Updated

- [Codepen](https://codepen.io/lokesh/pen/YzzKzva) - Gooey Cursor

- [Codepen](https://codepen.io/kellyex/pen/KKwwdYg) - Js draggable slider

- [Github](https://github.com/florentmolle/draggable-touch-slider/blob/main/slider%20draggable/script.js) - Slider Tutorial Touch implementation

- [CSS Script](https://www.cssscript.com/basic-draggable-slider/) - Basic Draggable Slider

- [W3 Schools](https://www.w3schools.com/howto/howto_js_scroll_to_top.asp) - Scroll to top

- [UX Planet](https://uxplanet.org/using-loading-animation-on-websites-and-apps-examples-and-snippets-to-use-cab0097be9f1) - Loading animations

- [Stack Overflow](https://stackoverflow.com/questions/28648019/changing-text-after-regular-interval) - Change text on interval

- [Stack Overflow](https://stackoverflow.com/questions/46182318/setinterval-to-add-class-then-remove-class-for-same-amount-of-time#:~:text=All%20you%20need%20to%20do,clearTimeout()%20or%20clearInterval()%20.) - setInterval & classList toggle

- [CSS Tricks](https://css-tricks.com/multi-line-padded-text/) - Multi-line padded text