Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/monsara/burger-and-3d-cube
3d Cube card with video and toggle hamburger components
https://github.com/monsara/burger-and-3d-cube
csss gulp html javascript responsive-layout svg
Last synced: 11 days ago
JSON representation
3d Cube card with video and toggle hamburger components
- Host: GitHub
- URL: https://github.com/monsara/burger-and-3d-cube
- Owner: monsara
- License: mit
- Created: 2021-08-15T21:05:05.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-08-18T00:14:44.000Z (over 3 years ago)
- Last Synced: 2024-07-24T21:12:36.034Z (4 months ago)
- Topics: csss, gulp, html, javascript, responsive-layout, svg
- Language: JavaScript
- Homepage: https://monsara.github.io/burger-and-3d-cube/
- Size: 38.5 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 3d Cube card with video and toggle hamburger components
Responsive 3d cube card layout with video. Toggle menu hamburger.
GitHup Page: https://monsara.github.io/burger-and-3d-cube/
Task:
1. Reproduce the "burger" button on the oggo.ch site (not the whole menu, just the button):
- The 3 bars which change length when the mouse is hovered
- Which turn into a cross on click
- And which return to the initial state with one more click
Only use CSS / Vanilla JS, no image or SVG
2. Display a square in the center of the screen, the height of which is 50% of the height of the screen.
- This square must be filled with some image
- On click, it turns over with a 3D effect (180 degree rotation)
- And on the other side of the square appears a video clip that runs in a loop
Both cases must work cross-browser and cross-device.
Provide source files not minified
## Browser Support
New browsers
## Used techniques
### HTML/CSS
- Valid, semantic, cross-browser layout
- Responsive web design
- CSS Flexbox
- BEM methodology
- Sass
### JavaScript features
- Toggle hamburger
- Play video on back side of cube when it is hovered
- Mute video on click mute button
## Instruments
- Git
- Npm
- Node.js
- Gulp
- VS Code
## Developing
### Run site locally
Before using the Gulp Starter Kit, make sure that Gulp and Node.js are installed
on your computer
To build the site on your PC, run the following commands in the terminal:
- Clone the repository on your computer
```shell
git clone https://github.com/monsara/burger-and-3d-cube.git
```
- Go to the project folder
```shell
cd burger-and-3d-cube
```
- Install dependencies
```shell
npm install
```
- Run the build project
```shell
npm start
```
- In the browser tab go to [http://localhost:1234](http://localhost:1234)