LearnCSS/index.html at main · LimpanGH/LearnCSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE HTML>
<HTML>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Chas Tut</title>
        <link rel="stylesheet" href="./test.css">
    </head>
    <body>

        <!--<h1 id="heading-1">Hej världen, make me pretty 😃!</h>
        <p class="red">The quick brown fox jumps over the lazy dog.</p> -->

        <!-- <section>
            <h2>Rubrik 1</h2>
            <p>Mening 1</p>
            <p>Mening 2</p>
            <article>
                <h2>Rubrik 2</h2>
                <p>Mening 3</p>
                <p>Mening 4</p>
            </article>
        </section> -->

    <h2>
        Ingredienser för recept:
        <em lang="sv-SE">Fransk Kyckling</em>
    </h2>
    <p>Visa <a href="https://www.ica.se/recept/fransk/kyckling/" alt="Länk till recept med fransk kyckling">receptbilder</a></p>
    <ul>
        <li data-vegetable data-quantity="1kg">Tomater</li>       <!-- När vi skriver ett attribut med data- framför så kan vi döpa attributet till precis vad vi vill, användbart när vi sedan ska hitta våra custom-attribut med JavaScript -->
        <li data-vegetable data-quantity="3">Lök</li>
        <li data-vegetable="not spicy like chili" data-quantity="3">Vitlöksklyftor</li>
        <li data-vegetable data-quantity="100gr">Gräslök</li>
        <li data-meat data-quantity="2kg">Kyckling</li>
        <li data-meat data-quantity="optional 150gr">Baconbitar</li>
        <li data-vegetable data-quantity="optional 2msk">Olivolja</li>
        <li data-vegetable="liquid" data-quantity="25cl">Vitt vin (halvtorrt)</li>
    </ul>

    </body>
</HTML>


    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">