Esploriamo la potenza di flexbox creando una scheda prodotto con un'immagine, una descrizione e il prezzo. Per impostazione predefinita, tutti gli elementi sono impilati in una colonna, uno sotto l'altro. Tuttavia, l'obiettivo è modificare questo comportamento utilizzando flexbox.

## Attività
Considera la seguente struttura HTML:
```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>
```
L'attività consiste nel modificare il CSS per ottenere quanto segue:
- Identificare l'elemento genitore che contiene sia l'immagine del prodotto (tag `img` con la classe `product-image`) sia le informazioni del prodotto (tag `div` con la classe `product-info`).
- Applicare flexbox all'elemento genitore identificato (il tag `div` con la classe `shopping-card`).
- Centrare verticalmente gli elementi all'interno della shopping card.

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

LnNob3BwaW5nLWNhcmQgewogIC8qIENoYW5nZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwogIGRpc3BsYXk6IF9fXzsKICBfX186IF9fXzsKICAvKiBDaGFuZ2UgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIG1heC13aWR0aDogZml0LWNvbnRlbnQ7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi5wcm9kdWN0LWltYWdlIHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBtYXJnaW4tcmlnaHQ6IDMwcHg7Cn0KCi5wcm9kdWN0LXRpdGxlIHsKICBmb250LXNpemU6IDEuNXJlbTsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LWRlc2NyaXB0aW9uIHsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LXByaWNlIHsKICBmb250LXdlaWdodDogYm9sZDsKICBmb250LXNpemU6IDEuMjVyZW07CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgouYWRkLXRvLWNhcnQgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgY3Vyc29yOiBwb2ludGVyOwp9

- Applicare `display: flex;` all'elemento genitore con la classe `shopping-card`.
- La direzione predefinita di flex è row, quindi non è necessario modificare il valore della proprietà `flex-direction`.
- Per centrare gli elementi verticalmente, utilizzare `align-items: center;`.

LnNob3BwaW5nLWNhcmQgewogIC8qIENoYW5nZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAvKiBDaGFuZ2UgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIG1heC13aWR0aDogZml0LWNvbnRlbnQ7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi5wcm9kdWN0LWltYWdlIHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBtYXJnaW4tcmlnaHQ6IDMwcHg7Cn0KCi5wcm9kdWN0LXRpdGxlIHsKICBmb250LXNpemU6IDEuNXJlbTsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LWRlc2NyaXB0aW9uIHsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LXByaWNlIHsKICBmb250LXdlaWdodDogYm9sZDsKICBmb250LXNpemU6IDEuMjVyZW07CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgouYWRkLXRvLWNhcnQgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgY3Vyc29yOiBwb2ludGVyOwp9

Apprendi le nozioni fondamentali di CSS (Cascading Style Sheets), il linguaggio di stile che trasforma l'aspetto e la presentazione delle pagine web. Esplora concetti chiave come stili del testo, colori, spaziatura, box model, Flexbox ed effetti decorativi. Sviluppa le competenze necessarie per creare pagine web visivamente accattivanti e ben strutturate. Ideale per principianti che desiderano costruire una solida base in CSS.

Scopri cosa è CSS, come collegarlo a HTML e come stilizzare gli elementi HTML utilizzando i selettori. Esplora concetti fondamentali come i colori del testo, le pseudo-classi di azione utente e le variabili in CSS.

Scopri come formattare e stilizzare il testo nelle tue pagine web. Impara ad applicare font personalizzati ed esplora le diverse proprietà dei font per migliorare l'aspetto del testo.

Apprendere i fondamenti del modello a scatola, che definisce il layout e la spaziatura degli elementi in una pagina web. Esplorare concetti come dimensionamento delle scatole, aggiunta di spazio agli elementi, lavoro con elementi a livello di blocco e inline, e utilizzo di pseudo-classi strutturali e funzionali per una stilizzazione avanzata.

Scopri Flexbox, un potente metodo di layout CSS per disporre gli elementi in righe e colonne. Impara a controllare la direzione, l'allineamento e la spaziatura degli elementi orizzontalmente e verticalmente, oltre a personalizzare i singoli elementi flex per layout precisi.

Scopri come migliorare l'aspetto visivo delle tue pagine web con CSS. Esplora tecniche per applicare colori e immagini di sfondo, stilizzare le immagini, utilizzare pseudo-elementi decorativi e aggiungere ombre per creare design accattivanti.

Sfida: Applicare i Concetti di Flexbox

Attività

Awesome!

Sfida: Applicare i Concetti di Flexbox

Attività