web-component-tutorial/index.html at main · mustafasavul/web-component-tutorial · 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
<!DOCTYPE html>
<html lang="en">

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

    <style>
        h3 {
            color: blue;
        }
    </style>
</head>

<body>
    <h3>Movie Application</h3>

    <movie-card title="Spider Man" poster="https://picsum.photos/id/237/200/300">
        The capability to implement wirelessly leads to the capacity to enable perfectly leads to the capacity to
        synthesize interactively. What does the commonly-accepted buzzword 'long-term' really mean? Without efficient,
        transparent bloatware, you will lack architectures. Our functionality is unparalleled, but our power to

        <p slot="year">2001</p>
        <p slot="type">Movie</p>
    </movie-card>

    <movie-card title="Spider Woman" poster="https://picsum.photos/id/235/200/300">
        Our functionality is unparalleled, but our power to syndicate. Imagine a combination of IIS and J2EE. If you
        incentivize dynamically, you may also disintermediate perfectly. Without interfaces, you will lack
        affiliate-based compliance. Quick: do you have a plan to become proactive.
    </movie-card>

    <movie-card title="Spider Others" poster="https://picsum.photos/id/238/200/300">
        dynamically, you may have to exploit macro-magnetically than to streamline magnetically than to revolutionize
        transparently. A company that can streamline elegantly will (at some undefined point of time in the future) be
        able to engineer easily. We believe we know that it is better to e-enable intuitively than to morph intuitively.
    </movie-card>

    <script defer src="MovieCard.js"></script>
</body>

</html>