Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sergeiown/beetrooteducationlesson09extra
Weather forecast
https://github.com/sergeiown/beetrooteducationlesson09extra
css3 figma forecast html5
Last synced: about 1 month ago
JSON representation
Weather forecast
- Host: GitHub
- URL: https://github.com/sergeiown/beetrooteducationlesson09extra
- Owner: sergeiown
- Created: 2022-10-28T15:58:25.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-10T08:56:31.000Z (almost 2 years ago)
- Last Synced: 2024-11-11T03:36:10.342Z (3 months ago)
- Topics: css3, figma, forecast, html5
- Language: CSS
- Homepage: https://sergeiown.github.io/BeetRootEducationLesson09extra/
- Size: 266 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BeetRootEducation
_LMS Beetroot Academy progress_
### TASK
Using different values of the display property and indents, make a "Weather Forecast" layout. The link to the layout in Figma is [here.](https://www.figma.com/file/jOwCkDn0vbTi5e7AXa4dCk/Weather-Fortcast)
**Requirements:**
- Cities are a list
- DO NOT USE FLOAT FLEX GRID!
- To place cities in the "grid" use display: inline-block;
- The width of each item should be a percentage (for example: width: 50%)
- For the effect of changing transparency, use :hover and opacity
- Icons - [link](https://erikflowers.github.io/weather-icons/)
- For smooth animations, use CSS code: `*{transition: all .1s ease-in;}`![image](https://user-images.githubusercontent.com/112722061/222791258-200843aa-d697-4dd5-91fa-d08bad0daa0b.png)