search

MLH-Fellowship / prep-project-22.JUL.PREP.1

MLH Prep Project for Pod 22.JUL.PREP.1
https://prep-22-jul-prep-1-project.netlify.app/
MIT License
2 stars 16 forks source link

Added a background video which changes based on the weather, did some styling changes. #19

Closed pabloescoder closed 1 year ago

pabloescoder commented 1 year ago

This PR is for solving issue #7

We added a background video which plays based on the current weather condition of the location entered. The video is responsive and works for both desktop and laptop layouts. We also did a few styling as well as responsiveness changes. The videos are up to 5-7 MB max in size per video so that loading them won't be an issue even for someone having a poor internet connection.

Some weather conditions which we covered are Clear (Day & Night), Rain (Day & Night), Thunderstorm (Day & Night), Cloudy (Day & Night), Haze, Squall, Drizzle, Fog, Mist, Snow, Smoke, Dust, Ash, Sand, Tornado.

Attaching some demo videos showing the changes we made below for a few weather conditions.

Thunderstorm (Night) https://user-images.githubusercontent.com/51107639/180421433-fd4a5069-8de9-434a-8360-d4b0a7244534.mp4

Thunderstorm (Day) https://user-images.githubusercontent.com/51107639/180421523-663e4955-7185-428f-a1c9-04ea3e7f696e.mp4

Clear (Day) https://user-images.githubusercontent.com/51107639/180421585-ccbde49e-8bcb-4ec9-b449-7270d2e02273.mp4

Clear (Night) https://user-images.githubusercontent.com/51107639/180421661-033c314a-738f-4313-973f-237db32e732e.mp4

Cloudy (Night) https://user-images.githubusercontent.com/51107639/180421756-ed2e553a-8101-4a95-8777-ae0cd0bd9755.mp4

Rainy (Day) https://user-images.githubusercontent.com/51107639/180421828-a79e7afe-1a23-4a25-a343-dc0b7e24024f.mp4

Snow https://user-images.githubusercontent.com/51107639/180421913-8244af04-d9f1-4b5a-bc2d-e25a3197fd79.mp4

Windy https://user-images.githubusercontent.com/51107639/180421938-c098a8c6-6e1f-4af6-9f87-4cbc5baf478f.mp4

Fog https://user-images.githubusercontent.com/51107639/180421999-afd11c20-a71e-4d57-ad1b-8db18a5e88e3.mp4

netlify[bot] commented 1 year ago

Deploy Preview for prep-22-jul-prep-1-project ready!

Name Link
Latest commit 1bfe7bee75d1a249cd2e72bf83f77e2bf30083d4
Latest deploy log https://app.netlify.com/sites/prep-22-jul-prep-1-project/deploys/62da7e10187dc600084c2d74
Deploy Preview https://deploy-preview-19--prep-22-jul-prep-1-project.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.