🛠️ Project: Recreate Instagram frontpage directly from original site, with mobile version. Using:
HTML
CSS
Sass SCSS- Media Queries
- Flexbox
Javascript
In this challenge, the task was to recreate the Instagram login page layout. The reference proposed had a static mobile photo, but today I checked and saw the live Instagram's page and now it also has some image's fading animations with 3 photos alternating. For the responsivity, these mobile photos are supposed to get hidden when on a viewport smaller than 875 pixels.
I wrote from scratch all Html, CSS and Javascript (without any video reference).
In CSS, along with Sass, I'm using colors variables, viewport breakpoints, REM sizes, CSS reset, media queries, flexbox and pure CSS animation.
Plus: added Sass to the project, to help me on some css settings. Also, I decided to add the password toggle functionality as a plus to the original task, to actually show or hide the password, followed by its respective Label as well. Also, the original mobile version from Instagram didn't handle very well those much smaller viewport sizes, so as another addition, I added some mobile responsivity further than the original one.
Desktop and Mobile Navigation
