Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sergeiown/beetrooteducationlesson14

Positioning and Transformation
https://github.com/sergeiown/beetrooteducationlesson14

css3 figma html5 layout positioning transformation

Last synced: about 1 month ago
JSON representation

Positioning and Transformation

Awesome Lists containing this project

README

        

# BeetRootEducation

_LMS Beetroot Academy progress_

### TASKS

**Required:**

- Make a page [Documentation.](https://www.figma.com/file/FP2fHfIElPk4J42DYQGuMw/position-transform)

The page header should be fixed to the top
The sidebar should stick to the top when scrolling (position sticky)
The pattern (background image) should also stay in place (sticky) when scrolling this section

**Extra:**

- Make a page [Who's using?](https://www.figma.com/file/FP2fHfIElPk4J42DYQGuMw/position-transform)

When hovering the card, the effect of turning it over and changing the gray side to black with the logo color changing should occur - [as in the post](https://www.w3schools.com/howto/howto_css_flip_card.asp)

![image](https://user-images.githubusercontent.com/112722061/222780959-63fac559-ab33-497b-8721-3f7a14b20b93.png)
![image](https://user-images.githubusercontent.com/112722061/222781080-7aab5b9f-02e5-4aad-80e3-a622875cfc2f.png)
![image](https://user-images.githubusercontent.com/112722061/222781275-f1c7d158-84b1-4eab-ad78-b079354d93dd.png)