Tutustutaan flexboxin tehokkuuteen luomalla kauppakortti, jossa on tuotekuva, kuvaus ja hinta. Oletuksena kaikki elementit ovat pinottuna sarakkeeseen, yksi toisen alle. Tavoitteena on kuitenkin muuttaa tätä käyttäytymistä hyödyntämällä flexboxia.

## Tehtävä
Tarkastele seuraavaa HTML-rakennetta:
```html
<div class="shopping-card">
  <img src="link-to-image" alt="Analytics Machine" class="product-image" />
  <div class="product-info">
    <h3 class="product-title">Analytics Machine</h3>
    <p class="product-description">Bio Innovation</p>
    <div class="product-price">$10.00</div>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>
```
Tehtävänä on muokata CSS-tyylejä seuraavasti:
- Tunnista vanhemman elementti, joka sisältää sekä tuotekuvan (`img`-elementti, jolla on `product-image`-luokka) että tuotetiedot (`div`-elementti, jolla on `product-info`-luokka).
- Ota flexbox käyttöön tunnistetussa vanhemmassa elementissä (eli `div`, jolla on `shopping-card`-luokka).
- Kohdista kortin sisällöt pystysuunnassa keskelle.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0ic2hvcHBpbmctY2FyZCI+CiAgICAgIDxpbWcKICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYTVkNmVmNTAtY2JmNS00YTk1LTg5ZDQtNDc1YjcwNGNkODExL3NlY3Rpb24rNCtGbGV4Ym94L2FuYWx5dGljcyUyQm1hY2hpbmUucG5nIgogICAgICAgIGFsdD0iQW5hbHl0aWNzIE1hY2hpbmUiCiAgICAgICAgY2xhc3M9InByb2R1Y3QtaW1hZ2UiCiAgICAgIC8+CiAgICAgIDxkaXYgY2xhc3M9InByb2R1Y3QtaW5mbyI+CiAgICAgICAgPGgzIGNsYXNzPSJwcm9kdWN0LXRpdGxlIj5BbmFseXRpY3MgTWFjaGluZTwvaDM+CiAgICAgICAgPHAgY2xhc3M9InByb2R1Y3QtZGVzY3JpcHRpb24iPkJpbyBJbm5vdmF0aW9uPC9wPgogICAgICAgIDxkaXYgY2xhc3M9InByb2R1Y3QtcHJpY2UiPiQxMC4wMDwvZGl2PgogICAgICAgIDxidXR0b24gY2xhc3M9ImFkZC10by1jYXJ0Ij5BZGQgdG8gQ2FydDwvYnV0dG9uPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LnNob3BwaW5nLWNhcmQgewogIC8qIENoYW5nZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwogIGRpc3BsYXk6IF9fXzsKICBfX186IF9fXzsKICAvKiBDaGFuZ2UgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIG1heC13aWR0aDogZml0LWNvbnRlbnQ7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi5wcm9kdWN0LWltYWdlIHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBtYXJnaW4tcmlnaHQ6IDMwcHg7Cn0KCi5wcm9kdWN0LXRpdGxlIHsKICBmb250LXNpemU6IDEuNXJlbTsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LWRlc2NyaXB0aW9uIHsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LXByaWNlIHsKICBmb250LXdlaWdodDogYm9sZDsKICBmb250LXNpemU6IDEuMjVyZW07CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgouYWRkLXRvLWNhcnQgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgY3Vyc29yOiBwb2ludGVyOwp9

- Lisää `display: flex;` vanhemman elementin, jolla on luokka `shopping-card`, tyyliin.
- Oletusarvoinen flex-suunta on rivi (row), joten `flex-direction`-ominaisuuden arvoa ei tarvitse muuttaa.
- Kohdistaaksesi kohteet pystysuunnassa keskelle, käytä `align-items: center;`.

LnNob3BwaW5nLWNhcmQgewogIC8qIENoYW5nZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAvKiBDaGFuZ2UgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIG1heC13aWR0aDogZml0LWNvbnRlbnQ7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi5wcm9kdWN0LWltYWdlIHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBtYXJnaW4tcmlnaHQ6IDMwcHg7Cn0KCi5wcm9kdWN0LXRpdGxlIHsKICBmb250LXNpemU6IDEuNXJlbTsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LWRlc2NyaXB0aW9uIHsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LXByaWNlIHsKICBmb250LXdlaWdodDogYm9sZDsKICBmb250LXNpemU6IDEuMjVyZW07CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgouYWRkLXRvLWNhcnQgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgY3Vyc29yOiBwb2ludGVyOwp9

Hallitse CSS:n (Cascading Style Sheets) perusteet, tyylikieli, joka muuttaa verkkosivujen ulkoasun ja tunnelman. Tutustu keskeisiin käsitteisiin, kuten tekstityyleihin, väreihin, välistyksiin, laatikkomalliin, Flexboxiin ja koristeellisiin tehosteisiin. Kehitä taidot luoda visuaalisesti houkuttelevia ja selkeästi jäsenneltyjä verkkosivuja. Sopii erinomaisesti aloittelijoille, jotka haluavat vahvan perustan CSS:stä.

Tutustu CSS:n perusteisiin, sen liittämiseen HTML:ään ja HTML-elementtien muotoiluun selektoreiden avulla. Perehdy keskeisiin käsitteisiin, kuten tekstin väreihin, käyttäjän toimintaan reagoiviin pseudoluokkiin ja CSS-muuttujiin.

Opi, kuinka tekstiä muotoillaan ja asetellaan verkkosivuilla. Tutustu mukautettujen fonttien käyttöön ja erilaisiin fonttiominaisuuksiin tekstin ulkoasun parantamiseksi.

Opi laatikkomallin perusteet, jotka määrittelevät elementtien asettelun ja välistyksen verkkosivulla. Tutustu käsitteisiin kuten laatikon koko, tilan lisääminen elementteihin, lohkotason ja rivinsisäisten elementtien käsittely sekä rakenteellisten ja toiminnallisten pseudoluokkien hyödyntäminen edistyneessä tyylittelyssä.

Tutustu Flexboxiin, tehokkaaseen CSS-asettelumenetelmään elementtien järjestämiseksi riveihin ja sarakkeisiin. Opi hallitsemaan elementtien suuntaa, kohdistusta ja välistystä vaaka- ja pystysuunnassa sekä mukauttamaan yksittäisiä flex-elementtejä tarkkoja asetteluja varten.

Opi parantamaan verkkosivujesi visuaalista ilmettä CSS:n avulla. Tutustu taustavärien ja -kuvien lisäämiseen, kuvien tyylittelyyn, koristeellisten pseudoelementtien käyttöön sekä varjojen lisäämiseen vaikuttavien suunnittelujen luomiseksi.

Haaste: Sovella Flexbox-käsitteitä

Tehtävä

Awesome!

Haaste: Sovella Flexbox-käsitteitä

Tehtävä