https://github.com/jdegand/nintendo

Frontend Practice Challenge - Nintendo
https://github.com/jdegand/nintendo

frontend-practice

Last synced: 7 months ago
JSON representation

Frontend Practice Challenge - Nintendo

• Host: GitHub
• URL: https://github.com/jdegand/nintendo
• Owner: jdegand
• License: mit
• Created: 2021-11-01T20:17:05.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-11-02T20:58:58.000Z (over 4 years ago)
• Last Synced: 2025-01-22T09:13:11.386Z (over 1 year ago)
• Topics: frontend-practice
• Language: HTML
• Homepage: https://jdegand.github.io/nintendo/
• Size: 638 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
Nintendo




   Solution for a challenge from  Frontendpractice.com.





  


    

      Github Pages

    

     | 

    

      Frontend Practice    

    

  



## Table of Contents

- [Overview](#overview)

  - [Built With](#built-with)

- [Features](#features)

- [Useful Resources](#useful-resources)

## Overview

![](nintendo-desktop.png)

![](nintendo-desktop-search-panel.png)

![](nintendo-desktop-nav-open.png)

![](nintendo-mobile.png)

![](nintendo-mobile-sidepanel.png)

![](nintendo-mobile-sidepanel-faq-open.png)

### Built With

- Grid 

- Flex

## Features

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

- [x] User story: Recreate the layout

- [x] User story: Try creating the image lightbox gallery & the search bar's dropdown panel.

- [ ] User story: If animations are your jam, recreate the effect seen when hovering the hearts on this page.

## Useful Resources

- [Nintendo](https://www.nintendo.com/games/detail/stardew-valley-switch/)

- [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) - dl tag

- [W3 Schools](https://www.w3schools.com/howto/howto_js_accordion.asp) - Accordion

- [W3 Schools](https://www.w3schools.com/howto/howto_js_lightbox.asp) - Lightbox

- [Free Code Camp](https://www.freecodecamp.org/news/how-to-use-avif-images-on-your-website/) - avif images

- [Codepen](https://codepen.io/chofsho/pen/OrqpGy) - SVG hover

- [YouTube](https://www.youtube.com/watch?v=9i3dWkncvZA) - CSS movement path

- [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path) - CSS Motion Path

- [Stack Overflow](https://stackoverflow.com/questions/23440364/what-does-d-mean-in-svg-path) - d of a svg