Untitled
unknown
css
a year ago
1.7 kB
5
Indexable
html, body { margin: 0; padding: 0; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; } .header__wrapper { display: flex; justify-content: center; align-items: center; height: 70px; margin: auto; } .menu__item { margin-right: 10px; color: black; text-decoration: none; } .menu__item:last-of-type { margin-right: 0; } .transform { background-color: #000; color: #fff; } .transform__wrapper { width: 490px; margin: auto; padding: 50px 0; } .title { margin: 0; line-height: 56px; font-size: 54px; } .subtitle { line-height: 19px; font-size: 14px; margin-top: 35px; margin-bottom: 55px; max-width: 385px; } .demo { display: flex; flex-wrap: wrap; justify-content: center; } .demo__item { background-color: #202020; width: 240px; height: 240px; margin-right: 10px; margin-top: 10px; display: flex; position: relative; } .demo__icon { margin: auto; } .demo__item:nth-of-type(2n) { margin-right: 0; } .demo__item:first-of-type, .demo__item:nth-of-type(2) { margin-top: 0; } .demo__item:hover { background-color: #02B341; } .demo__item-title { font-size: 24px; position: absolute; bottom: 15px; left: 15px; margin: 0; } .demo__item_type_translate:hover .demo__icon { transform: translate(10px, 0); } .demo__item_type_rotate:hover .demo__icon { transform: rotate(360deg); } .demo__item_type_scale:hover .demo__icon { transform: scale(1.2); } .demo__item_type_skew:hover .demo__icon { transform: skew(20deg, 0); } .demo__item_type_translate .demo__icon { transition: transform .4s ease-out; } .demo__item_type_rotate .demo__icon { transition: transform 1.5s ease-out; }
Editor is loading...
Leave a Comment