Creare un Sito Html/CSS Modulare #3 – Cards e Banner
By Andrea Marchetti
@marchetti_design
Continuiamo a costruire il nostro sito Web Modulare con la sintassi BEM, oggi realizziamo il modulo delle Cards e il Banner.
Nella prossima lezione concludiamo la home e realizziamo le pagine interne:
http://www.marchettidesign.net/2016/10/creare-un-sito-htmlcss-modulare-4-pagine-interne-e-footer/
Scarica il codice della struttura realizzata qui: http://bit.ly/marchetti-design-community
1) Cards
Per realizzare il modulo cards utilizzeremo un paio di spemolici ma efficaci tecniche CSS. Le card occuperanno in modalità desktop un terzo della larghezza del container. la card singola sarà composta da immagine, titolo e descrizione. In modalità smartphone le card verranno linearizzate, ovvero impilate una sotto l’altra,
2) Banner
Il banner sarà full-width occuperà quindi l’intera larghezza disponibile. In modalità desktop avrà immagine a sinistra e testo a destra. nel banner utilizzeremo in modo diverso alcune tecniche CSS molto potenti utilizzate nel modulo della cover. L’immagine verrà ridimensionata correttamente su qualsiasi risoluzione, il testo del banner sarà allineato verticalmente su qualsiasi risoluzione. L’altezza del banner sarà percentuale.
Se ti è piaciuto il video iscriviti al nuovo canale YouTube 😉
https://www.youtube.com/channel/UCWT3E1a00seSxCo3amg16AQ
Stay Tuned!
Potrebbero interessarti:
Ciao Andrea grazie per quanto ci stai donando, complimenti! Volevo esporti tre problemi che ho avuto nella realizzazione di queste parti:
1) nella realizzazione delle cards, avrei l’esigenza di centrare le tre cards perfettamente; se vai al min 6:20 si vede che lo spazio a dx è maggiore di quello a sx
2) nella realizzazione del banner invece il problema che ho riscontrato è legato al fatto che se inserisco una immagine da file e non da unsplash non so dove definire la dimensione dell’immagine di background con il risultato che se inserisco del testo l’immagine appare (per lo spazio occupato dal testo) altrimenti no
3) con un logo un po più grande vorrei allineare in basso il menu e non riesco a farlo
Se vorrai aiutarmi e darmi indicazioni su come risolvere queste problematiche, ti ringrazio in anticipo
Buona Giornata
selene
Ciao!
Ho un problema.. tutto ok il responsive va e il resto pure.
L’unica cosa è che mi rimane il testo di prova di lato alle ‘cards’.
Ho messo il clearfix, e il float left ma testo resta li.
Secondo te dove ho sbagliato???
Ciao
-Matteo
Ciao Matteo,
scarica il codice della struttura e confrontalo con quello creato da te 😉