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

git clone https://github.com/monsara/burger-and-3d-cube.git

• Go to the project folder

cd burger-and-3d-cube

• Install dependencies

npm install

• Run the build project

npm start

• In the browser tab go to http://localhost:1234