html-workshop/index.html at main · taltech-coding/html-workshop · 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html lang="et">

<head>
    <meta charset="UTF-8">    <!-- Tähestik, mida kasutame  -->
    <link rel="stylesheet" type="text/css" href="style.css"/> <!-- Ühendus CSS-i ja meie lehe vahel -->
    <title>Minu veebileht</title> <!-- Veebilehe pealkiri, mida näidatakse brauseri tab-is -->
</head>

<body>

<!-- Pealkiri, pilt ja väike kirjeldus -->

<div class="container" style="padding: 1em">
    <div id="textBox">
        <h1>Nimetus</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Curabitur eget lectus mi. Donec lorem magna,
            elementum ac dui in, posuere pharetra odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Curabitur eget lectus mi. Donec lorem magna, elementum ac dui in, posuere pharetra odio.</p>
    </div>
    <img id="photo" src="images/img.png">
</div>

<!-- Lõbusad faktid -->

<div class="container">
    <div class="card">
        <!-- Tee see osa ise! -->
        <img class="icon" src="images/question.png"/>
        <h1>Kas teadsid, et </h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a odio vel lorem congue
            facilisis.</p>
    </div>
    <div class="card">
        <!-- Tee see osa ise! -->
    </div>
    <div class="card">
        <!-- Tee see osa ise! -->
    </div>
</div>

<!-- Video -->

<div class="container" style="flex-flow: column">
    <iframe id="video" src="https://www.youtube.com/embed/WLT7TDGzXGU?si=z5_UTSHfVFkCDm6X" title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            allowfullscreen></iframe>
    <!-- max-width paneb ette piiri, et kui pikk võib tekst olla -->
    <p style="max-width: 55em">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a odio vel lorem congue
        facilisis. Praesent consequat leo arcu, in gravida erat fringilla in. Pellentesque dictum accumsan leo, in
        consectetur eros malesuada quis. Ut congue turpis eget interdum egestas. </p>
</div>

<!-- Lisainfo -->

<div>
    <h1>Lisainfo</h1>
    <div class="container">
        <!-- Tee see osa ise! -->
    </div>
</div>

</body>

</html>