JiMare
commented
1 year ago ahoj, to je naopak skvělé, že si na tom dáváš záležet a dále to ladíš :) jak na to koukám, tak mi to přijde dost slušně provedené, jen na tabletové verzi se ty menší obrázky nepřizpůsobují, jak by měly - jinde je to ok, a chybí tmavý overlay - vrstva přes obrázek, která zlepší čitelnost bílých textů.. v kódu:
- pevní věc: nevím jak to máš nastavené v editoru, ale pravděpodobně by to mělo také nějak zvýrazňovat, pokud vidíš něco jako toto:
tak ty vlnovité podtržené věci jsou chybové věci, když na to najedeš, tak dostaneš chybovou hlášku:
flex: wrap není nic, neni to validní hodnota pro atribut flex -> to cos chtěla asi napsat je flex-wrap: wrap; když si nejsi jistá jak se co píše, tak je úplně v pořádku googlit (taky si vše z hlavy nepamatuju)
- no za druhé na mobilní verzi flex vubec nepotřebujeme, chceme mít všechny obrázky pod sebou a protože to jsou divy s pozadím tak to jsou blokové prvky a ty v defaultu pod sebou jsou... flex budeme potřebovat až pozdeji v @media
- divím se že to takto funguje - background-image: url(images/burger.jpg); by se měl psát ale s uvozovkami v závorce -> background-image: url('images/burger.jpg');
- v návodu máte uvedené rozměry obrázků tak nevím proč místo 200px máš u hlavního receptu 300px
- když to tak dám odlítne mi text "burger" do dalšího obrázku, protože ho pozicuješ absolutně což asi nevadí, ale jak jsem už mnohokrát zminovala nepozicuješ ho od spoda, ale odshora, kdybys ho pozicovala od spoda je to mnohem stabilnější a z obrázku by neutekl -> aha tak ty navic používáš margin-top místo pouhého top, toto nekombinuj prosím, bud napozicuj absolutně pořádne jak se to má dělat, nebo ješčtě mužeš zase použít flex na ty texty, dát jim direction column a justify between a roztáhnou se proti sobě na konce obrázku :)
- nastavení bacground máš fajn, ale zase se zbytečně opakuješ, můžeš ty společné věci nastavit třídě .recept, kterou mají všichni a zvlášt nastavit jen konkretní obrázky :)
- ten overlay bys mohla udělat takhle: background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('images/burger.jpg');
- líbí se mi žes dala media na konec,. takto mi to přijde skvěle přehledné
- na tabletové verzi už flex potřebujeme a bude dobré zapnout wrap, ale na třídě recepty, halvní burger muže zustat tak jak je
- zase se nedržíš návodu a nastavuješ jiné výšky obrázků
- bude potřeba hlavnímu obrázku nastavit 100% šířku -> flex-basis: 100%;
- malým receptům pak šířku 50% a protože teda chceš dělat ty rámečky s gap tak se dá použít calc(50% - 1px) (hodnota gapu)
- tak už se i všechny ty obrázky dobře přizpůsobují
- na pc verzi dobře zapínáš ten flex na třídě .doporucujeme, tady už to potřebujeme dát vše vedle sebe
- nemusíš zmiňovat flex-direction: row; to je defaultní nastavení
- background-size: cover; background-position: center; nemusíš znova nastavovat, to už nastavené je z kodu pro mobilní verzi
- poradila sis gridem, což je ok, flexem by to taky ale šlo :)
- font-size: 2vw; tyto jednotky jsem u nastavení písma nikdy neviděla, relativní jednotky se používají buď rem nebo em tak to je asi v kostce je toho dost, ale myslím, že si se s tím celkově vypořádala dobře a zbytek doladíš :) kdyby ses neopakovala bkod by byl přehlednější
Ahojky, dnes jsem nahrála novou verzi úkolu. Sama jsem si našla pár chyb během práce na úkolu 06 a hodnocení úkolu 04. Aktuálně se nejvíce věnuji úkolu 06. Ale pokud mi zbývá čas vracím se ještě sem a ladím, protože jsem si všimla, že si mi tento úkol zatím neopravovala. :)