HTML & CSS
OPGAVER TIL HTML & CSS – DNA STRING
Opgave 10
Opgave 10 – Del 1
Først skal vi igennem disse trin for at skabe vores lotus blade
- Lav en ny pen i codepen.io
- Start med at skrive således i din HTML boks:
OBS!!! Dette er en meget lang opgave, men meget skal kopieres.
Opgave 10 – Del 2
Nu skal vi ned i CSS’en og lave styling på body, dna og dna1.
Opgave 10 – Del 3
Nu går vi op i HTML’en igen. Vi skal nu kopiere noget at koden vi skrev før (se billedet – alt dette skal kopieres) og sætte det ind nedenunder. Husk at sætte nye tal på så ingen id’er er ens.
DET ER KUN ID TALLENE DU SKAL ÆNDRE!
Fortsæt id rækken skriv derfor under dna-left: dna1-string2 og dna1-ball2
og under dna-right skriv id navne: dna1-string3 og dna1-ball3
For at lave hele DNA snoren skal du sætte dette ind til du når tallet 69.
Opgave 10 – Del 4
Nu skal vi lave klassen til dna-string og dens keyframes:
Opgave 10 – Del 5
Vi bliver i CSS’en, nu skal vi beskrive dna1-ball og dens keyframes
Opgave 10 – Del 6
Nu skal vi så style id’erne for hver af de LIGE(tal) strings og balls. Ved string3 og ball3 sæt delay til 0.2s og fortsæt denne stigning på string4 og ball4 til 0.3s
Lad kun farven(hue-rotate) ændre med 10deg så dvs skriv 40deg på string3 og ball3. Ellers så lad dine farve ændringer max ændre med 15deg forskel fra forrige til næste sæt.
Når du når til 360 start da forfra med 30deg på den næste og derefter max 15deg forskel.
Bemærk at string og ball er par og derfor skal de have de samme værdier på
Opgave 10 – Del 7
Vi fortsætter med at style klasserne og deres keyframes for modsat dna række i CSS’en.
Opgave 10 – Del 8
Vi bliver i CSS’en. Nu skal vi så style klassen for boldene og deres keyframes på den modsatte række.
Opgave 10 – Del 9
Nu mangler vi bare at lave farverne på alle de ULIGE id’er. Her skal du bruge samme flow som på de lige i’er for at have ens farver på rækkerne.
