https://github.com/teotimepacreau/sliding-menu-and-art-landingpage-day4-of-100daysofcode

Sliding menu and art landingpage built with Vanilla JS, CSS, HTML
https://github.com/teotimepacreau/sliding-menu-and-art-landingpage-day4-of-100daysofcode

100daysofcode art art-landingpage codingchallenge css css-grid css-transitions hmtl javascript navigation neoclassic neoclassicism painter painting pieter-gerardus-van-os slider slidingmenu vanilla-js

Last synced: 12 days ago
JSON representation

Sliding menu and art landingpage built with Vanilla JS, CSS, HTML

• Host: GitHub
• URL: https://github.com/teotimepacreau/sliding-menu-and-art-landingpage-day4-of-100daysofcode
• Owner: teotimepacreau
• Created: 2023-03-01T20:38:16.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-10T10:38:20.000Z (over 2 years ago)
• Last Synced: 2025-03-05T00:29:53.519Z (8 months ago)
• Topics: 100daysofcode, art, art-landingpage, codingchallenge, css, css-grid, css-transitions, hmtl, javascript, navigation, neoclassic, neoclassicism, painter, painting, pieter-gerardus-van-os, slider, slidingmenu, vanilla-js
• Language: CSS
• Homepage: https://teotimepacreau.github.io/Sliding-Menu-and-art-landingpage-Day4-of-100DaysOfCode/
• Size: 15.5 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Sliding Menu and art landingpage

![Sliding-Menu-Demo-and-art-landing-page](https://github.com/teotimepacreau/Sliding-Menu-and-art-landingpage-Day4-of-100DaysOfCode/blob/main/Sliding-menu.gif)

# Project goal

- grid template areas for the UI

- flexbox adaptive container for images

- position absolute and z-index for the menu slider

- opacity transition to create a natural landing effect for the menu

- Font-awesome icons toggle for nav

- Mouse follower with "Cuberto Mouse Follower" lib

- :hover and ::before to anim menu items

- responsive handle

- Vanilla JS class toggle with click listener

# 🛠️

HTML, CSS, Vanilla JavaScript

# Static capture

![Sliding-menu-and-art-landing-page-capture](https://github.com/teotimepacreau/Sliding-Menu-and-art-landingpage-Day4-of-100DaysOfCode/blob/main/Art-landing-page-and-slider-menu.png)