Haaste: Responsiiviset Asettelut Käytännössä
Tehtävä
Täydennä annettu HTML-rakenne lisäämällä puuttuvat Tailwind CSS -luokat annettujen asetteluvaatimusten mukaisesti.
- Säiliöllä tulee olla eri taukoarvot eri näyttöleveyksillä;
- Oletus:
p-4; sm-katkaisukohdassa:p-6;md-katkaisukohdassa:p-8;lg-katkaisukohdassa:p-10;xl-katkaisukohdassa:p-12.
- Oletus:
- Tekstillä tulee olla eri värit ja koot eri näyttöleveyksillä.
- Oletustekstikoko:
text-base, väri:text-gray-700; sm-katkaisukohdassa:text-lg, väri:text-gray-600;md-katkaisukohdassa:text-xl, väri:text-gray-500;lg-katkaisukohdassa:text-2xl, väri:text-gray-400;xl-katkaisukohdassa:text-3xl, väri:text-gray-300.
- Oletustekstikoko:
index.html
- Säiliölle käytä
p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12; - Tekstille käytä
text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl text-gray-700 sm:text-gray-600 md:text-gray-500 lg:text-gray-400 xl:text-gray-300.
index.html
Oliko kaikki selvää?
Kiitos palautteestasi!
Osio 5. Luku 2
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 3.57
Haaste: Responsiiviset Asettelut Käytännössä
Pyyhkäise näyttääksesi valikon
Tehtävä
Täydennä annettu HTML-rakenne lisäämällä puuttuvat Tailwind CSS -luokat annettujen asetteluvaatimusten mukaisesti.
- Säiliöllä tulee olla eri taukoarvot eri näyttöleveyksillä;
- Oletus:
p-4; sm-katkaisukohdassa:p-6;md-katkaisukohdassa:p-8;lg-katkaisukohdassa:p-10;xl-katkaisukohdassa:p-12.
- Oletus:
- Tekstillä tulee olla eri värit ja koot eri näyttöleveyksillä.
- Oletustekstikoko:
text-base, väri:text-gray-700; sm-katkaisukohdassa:text-lg, väri:text-gray-600;md-katkaisukohdassa:text-xl, väri:text-gray-500;lg-katkaisukohdassa:text-2xl, väri:text-gray-400;xl-katkaisukohdassa:text-3xl, väri:text-gray-300.
- Oletustekstikoko:
index.html
- Säiliölle käytä
p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12; - Tekstille käytä
text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl text-gray-700 sm:text-gray-600 md:text-gray-500 lg:text-gray-400 xl:text-gray-300.
index.html
Oliko kaikki selvää?
Kiitos palautteestasi!
Osio 5. Luku 2