## Uppgift
Skapa ett engagerande produktkort för elektronik till en webbutik, där varje kort innehåller en bild, ett namn och ett pris. Uppgiften är att öka den visuella attraktionskraften genom att använda följande animationer:
1. **Skalning av bild**: Använd `increaseImageSize` keyframes-regeln för att lägga till en skalningseffekt på **bild-elementet**, så att det blir 20% större. Slutresultatet ska vara `scale(1.2)`.
2. **Rotering av pris**: Implementera `rotatePrice` keyframes-regeln för att lägga till en roteringseffekt på **pris-elementet**, så att det roterar ett helt varv. Slutresultatet ska vara `rotate(360deg)`.

Använd de fördefinierade keyframes-reglerna.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDx1bCBjbGFzcz0ibGlzdCI+CiAgICAgICAgPGxpIGNsYXNzPSJpdGVtIj4KICAgICAgICAgIDxpbWcKICAgICAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvYWR2YW5jZWQrY3NzK3RlY2huaXF1ZXMvdHJhbnNmb3JtYXRpb25zK3NlY3Rpb24vdHJhbnNmb3JtYXRpb24rY2hhbGxlbmdlMS1jb21wdXRlci5wbmciCiAgICAgICAgICAgIGFsdD0iY29tcHV0ZXIiCiAgICAgICAgICAgIHdpZHRoPSIzMDBweCIKICAgICAgICAgICAgY2xhc3M9Iml0ZW0taW1hZ2UiCiAgICAgICAgICAvPgogICAgICAgICAgPHAgY2xhc3M9Iml0ZW0tZGVzY3JpcHRpb24iPkNvbXB1dGVyPC9wPgogICAgICAgICAgPHNwYW4gY2xhc3M9Iml0ZW0tcHJpY2UiPiQxNi45OTwvc3Bhbj4KICAgICAgICA8L2xpPgogICAgICAgIDxsaSBjbGFzcz0iaXRlbSI+CiAgICAgICAgICA8aW1nCiAgICAgICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL2FkdmFuY2VkK2Nzcyt0ZWNobmlxdWVzL3RyYW5zZm9ybWF0aW9ucytzZWN0aW9uL3RyYW5zZm9ybWF0aW9uK2NoYWxsZW5nZTEtbGFwdG9wLnBuZyIKICAgICAgICAgICAgYWx0PSJsYXB0b3AiCiAgICAgICAgICAgIHdpZHRoPSIzMDBweCIKICAgICAgICAgICAgY2xhc3M9Iml0ZW0taW1hZ2UiCiAgICAgICAgICAvPgogICAgICAgICAgPHAgY2xhc3M9Iml0ZW0tZGVzY3JpcHRpb24iPkxhcHRvcDwvcD4KICAgICAgICAgIDxzcGFuIGNsYXNzPSJpdGVtLXByaWNlIj4kMTIuNTk8L3NwYW4+CiAgICAgICAgPC9saT4KICAgICAgICA8bGkgY2xhc3M9Iml0ZW0iPgogICAgICAgICAgPGltZwogICAgICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvZGUtMS9hZHZhbmNlZCtjc3MrdGVjaG5pcXVlcy90cmFuc2Zvcm1hdGlvbnMrc2VjdGlvbi90cmFuc2Zvcm1hdGlvbitjaGFsbGVuZ2UxLXNtYXJ0cGhvbmUucG5nIgogICAgICAgICAgICBhbHQ9InNtYXJ0cGhvbmUiCiAgICAgICAgICAgIHdpZHRoPSIzMDBweCIKICAgICAgICAgICAgY2xhc3M9Iml0ZW0taW1hZ2UiCiAgICAgICAgICAvPgogICAgICAgICAgPHAgY2xhc3M9Iml0ZW0tZGVzY3JpcHRpb24iPlNtYXJ0cGhvbmU8L3A+CiAgICAgICAgICA8c3BhbiBjbGFzcz0iaXRlbS1wcmljZSI+JDguNDk8L3NwYW4+CiAgICAgICAgPC9saT4KICAgICAgPC91bD4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

Lml0ZW06aG92ZXIgLml0ZW0taW1hZ2UgewogIGFuaW1hdGlvbjogaW5jcmVhc2VJbWFnZVNpemUgNTAwbXMgbGluZWFyIGZvcndhcmRzOwp9CgpAa2V5ZnJhbWVzIGluY3JlYXNlSW1hZ2VTaXplIHsKICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGJlbG93IHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KICAwJSB7CiAgICB0cmFuc2Zvcm06IF9fXzsKICB9CiAgNTAlIHsKICAgIHRyYW5zZm9ybTogX19fOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogX19fOwogIH0KICAvKiAtLS0tLS0tLS0tLS0tLS0gTWFrZSBjaGFuZ2VzIGFib3ZlIHRoaXMgbGluZSAtLS0tLS0tLS0tLS0tLS0gKi8KfQoKLml0ZW06aG92ZXIgLml0ZW0tcHJpY2UgewogIGFuaW1hdGlvbjogcm90YXRlUHJpY2UgMjAwMG1zIGxpbmVhciBmb3J3YXJkczsKfQoKQGtleWZyYW1lcyByb3RhdGVQcmljZSB7CiAgLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBiZWxvdyB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCiAgMCUgewogICAgdHJhbnNmb3JtOiBfX187CiAgfQogIDUwJSB7CiAgICB0cmFuc2Zvcm06IF9fXzsKICB9CiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IF9fXzsKICB9CiAgLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBhYm92ZSB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCn0KCi8qIE5vdCB0aGUgY3VycmVudCBmb2N1cyAqLwoqIHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94Owp9Cgp1bCB7CiAgcGFkZGluZy1sZWZ0OiAwOwogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKICBsaXN0LXN0eWxlOiBub25lOwp9CgpwIHsKICBtYXJnaW4tdG9wOiAwOwogIG1hcmdpbi1ib3R0b206IDA7Cn0KCi5jb250YWluZXIgewogIG1hcmdpbjogMCBhdXRvOwogIHdpZHRoOiA2MDBweDsKICBib3JkZXItcmFkaXVzOiA1cHg7Cn0KCi5saXN0IHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwp9CgouaXRlbSB7CiAgYm9yZGVyOiAycHggc29saWQgI2ViNDU1ZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMmIzNDY3OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgcGFkZGluZzogMjBweCAxMHB4OwogIHdpZHRoOiAxODBweDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKfQoKLml0ZW06bm90KDpsYXN0LWNoaWxkKSB7CiAgbWFyZ2luLXJpZ2h0OiAxMHB4Owp9CgouaXRlbS1pbWFnZSB7CiAgd2lkdGg6IDE2MHB4Owp9CgouaXRlbS1kZXNjcmlwdGlvbiB7CiAgbWFyZ2luLXRvcDogMzBweDsKICBmb250LXNpemU6IDE4cHg7CiAgY29sb3I6ICNmY2ZmZTc7Cn0KCi5pdGVtLXByaWNlIHsKICBtYXJnaW4tdG9wOiAxMHB4OwogIGNvbG9yOiAjYmFkN2U5Owp9

1. För skalningsanimationen:
   - I början (0%-punkten), använd `scale(1)` för att behålla ursprunglig storlek;
   - Vid mitten (50%-punkten), öka storleken till `scale(1.1)`;
   - I slutet (100%-punkten), öka storleken till `scale(1.2)`.
2. För rotationsanimationen:
   - I början (0%-punkten), behåll rotationsvinkeln vid `rotate(0deg)`;
   - Vid mitten (50%-punkten), rotera halvvägs till `rotate(180deg)`;
   - I slutet (100%-punkten), slutför rotationen med `rotate(360deg)`.

Lml0ZW06aG92ZXIgLml0ZW0taW1hZ2UgewogIGFuaW1hdGlvbjogaW5jcmVhc2VJbWFnZVNpemUgNTAwbXMgbGluZWFyIGZvcndhcmRzOwp9CgpAa2V5ZnJhbWVzIGluY3JlYXNlSW1hZ2VTaXplIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHNjYWxlKDEpOwogIH0KICA1MCUgewogICAgdHJhbnNmb3JtOiBzY2FsZSgxLjEpOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogc2NhbGUoMS4yKTsKICB9Cn0KCi5pdGVtOmhvdmVyIC5pdGVtLXByaWNlIHsKICBhbmltYXRpb246IHJvdGF0ZVByaWNlIDIwMDBtcyBsaW5lYXIgZm9yd2FyZHM7Cn0KCkBrZXlmcmFtZXMgcm90YXRlUHJpY2UgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDApOwogIH0KICA1MCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTsKICB9CiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOwogIH0KfQoKLyogTm90IHRoZSBjdXJyZW50IGZvY3VzICovCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCnVsIHsKICBwYWRkaW5nLWxlZnQ6IDA7CiAgbWFyZ2luLXRvcDogMDsKICBtYXJnaW4tYm90dG9tOiAwOwogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KCnAgewogIG1hcmdpbi10b3A6IDA7CiAgbWFyZ2luLWJvdHRvbTogMDsKfQoKLmNvbnRhaW5lciB7CiAgbWFyZ2luOiAwIGF1dG87CiAgd2lkdGg6IDYwMHB4OwogIGJvcmRlci1yYWRpdXM6IDVweDsKfQoKLmxpc3QgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7Cn0KCi5pdGVtIHsKICBib3JkZXI6IDJweCBzb2xpZCAjZWI0NTVmOwogIGJhY2tncm91bmQtY29sb3I6ICMyYjM0Njc7CiAgYm9yZGVyLXJhZGl1czogMTBweDsKICBwYWRkaW5nOiAyMHB4IDEwcHg7CiAgd2lkdGg6IDE4MHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBhbGlnbi1pdGVtczogY2VudGVyOwp9CgouaXRlbTpub3QoOmxhc3QtY2hpbGQpIHsKICBtYXJnaW4tcmlnaHQ6IDEwcHg7Cn0KCi5pdGVtLWltYWdlIHsKICB3aWR0aDogMTYwcHg7Cn0KCi5pdGVtLWRlc2NyaXB0aW9uIHsKICBtYXJnaW4tdG9wOiAzMHB4OwogIGZvbnQtc2l6ZTogMThweDsKICBjb2xvcjogI2ZjZmZlNzsKfQoKLml0ZW0tcHJpY2UgewogIG1hcmdpbi10b3A6IDEwcHg7CiAgY29sb3I6ICNiYWQ3ZTk7Cn0=

Förbättra dina stilkunskaper genom att bemästra avancerade CSS-tekniker för modern webbdesign. Positionera och hantera element med precision med hjälp av avancerade positioneringsstrategier. Skapa mjuka övergångar och engagerande animationer för att förbättra användarupplevelsen. Transformera och manipulera element för dynamiska visuella effekter. Bygg responsiva designer som anpassar sig över olika enheter och effektivisera arbetsflödet med CSS-förprocessorer som Sass.

Utforska vad deltagare kan förvänta sig av denna kurs i avancerad HTML- och CSS-stilhantering. Vilka förkunskaper krävs innan kursstart? Vilka ämnen kommer att behandlas?

Positionera och hantera element på webbsidor. Lär dig om olika positioneringsegenskaper, upptäck hur staplingsordningen används för att kontrollera synligheten av överlappande element och hantera till sist innehåll som flödar över.

Utforska kraften i övergångar och lär dig hur du kan förbättra användarupplevelsen. Upptäck hur egenskaper kan animeras smidigt och gradvis för att skapa sömlösa tillståndsövergångar.

Lär dig om animation-egenskapen och hur den kan användas för att skapa dynamiska och engagerande designer. Upptäck hur du skapar komplexa animationer med hjälp av nyckelrutor och hur du styr animationen.

Utforska transformationsegenskapen, som möjliggör modifiering av utseende och position för element på en webbsida. Lär dig hur du skalar, roterar, skevar och translaterar element i två och tre dimensioner. Kombinera flera transformationer för att skapa mer komplexa effekter.

Principerna och teknikerna som används inom adaptiv/responsiv design syftar till att göra webbplatser och applikationer tillgängliga och visuellt tilltalande på olika enheter, skärmstorlekar och orienteringar.

Lär dig om förprocessorer i CSS och hur de kan hjälpa till att skriva mer effektiv och underhållbar kod. Förstå hur du använder förprocessorer för att förenkla arbetsflödet och generera renare CSS-kod.

Utmaning: Tillämpa Skalning och Rotation

Uppgift

Awesome!

Utmaning: Tillämpa Skalning och Rotation

Uppgift