dead-by-daylight/streaming.html at main · josipcodes/dead-by-daylight · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Meta -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Josip Potnar">
    <meta name="description"
        content="Website introducing most common or basic elements of the game 'Dead by Daylight' to newer gamers">
    <meta name="keywords" content="game, gaming, behaviour, dead by daylight, online multiplayer, steam, xbox, ps5">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Links -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&family=Roboto:wght@100;900&display=swap"
        rel="stylesheet">
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Tab title -->
    <title>Dead by Daylight</title>
</head>

<body>

    <!-- Header -->
    <header id="header">
        <img src="assets/images/dbd-logo-header.webp" alt="Dead by daylight logo">
        <div>
            <h1 class="uppercase-title">
                Dead by Daylight
            </h1>
            <h2>
                How not to lose your head - beginners' guide
            </h2>
        </div>
    </header>

    <!-- Website navigation -->
    <nav>
        <a href="index.html" aria-label="home, button, opens in the same window">
            <i class="fa-solid fa-house"></i>
            <span class="link-description">
                Home
            </span>
        </a>
        <a href="characters.html" aria-label="characters, button, opens in the same window">
            <i class="fa-solid fa-person"></i>
            <span class="link-description">
                Characters
            </span>
        </a>
        <a href="glossary.html" aria-label="glossary, button, opens in the same window">
            <i class="fa-solid fa-book"></i>
            <span class="link-description">
                Glossary
            </span>
        </a>
        <a href="streaming.html" class="active" aria-label="streaming, button, opens in the same window">
            <i class="fa-brands fa-youtube"></i>
            <span class="link-description">
                Streaming
            </span>
        </a>
        <a href="subscribe.html" aria-label="subscribe, button, opens in the same window">
            <i class="fa-solid fa-envelope"></i>
            <span class="link-description">
                Subscribe
            </span>
        </a>
    </nav>

    <!-- Main body -->
    <section class="article-spacing" aria-label="Main part of the page, includes youtube videos of the features streamers">
        <article>
            <h2 class="title">
                Streamers
            </h2>
            <p><img src="assets/images/quote-sign.webp" class="quote-sign"
                    alt="quote sign resembling Entity's claws">Watching streamers is one of the best ways to learn about
                the game's intricacies. We have compiled a list of some of the best, most interesting and fun
                content-creators for you to choose from.
                <br>
                <br>
                The learning curve is different for everyone and a lot can depends on the size of your screen, type of
                your keyboard and the quality of your headset, but don't worry, as the most important part is still -
                you.
            </p>
            <h3 class="subtitle">
                SpookyLoopz
            </h3>
            <div class="iframe-flex-container">
                <iframe src="https://www.youtube-nocookie.com/embed/VCVd1AJ9hBA" title="YouTube video player"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen aria-label="Youtube video by SpookyLoopz"></iframe>
                <iframe src="https://www.youtube-nocookie.com/embed/v4r0Bn0VVmE" title="YouTube video player"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen aria-label="Youtube video by SpookyLoopz"></iframe>
            </div>
            <h3 class="subtitle">
                Otzdarva
            </h3>
            <div class="iframe-flex-container">
                <iframe src="https://www.youtube-nocookie.com/embed/N8AOG-shJng" title="YouTube video player"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen aria-label="Youtube video by Otzdarva"></iframe>
                <iframe src="https://www.youtube-nocookie.com/embed/-boRYS6jrRc" title="YouTube video player"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen aria-label="Youtube video by Otzdarva"></iframe>
            </div>
            <h3 class="subtitle">
                Ayrun
            </h3>
            <div class="iframe-flex-container">
                <iframe src="https://www.youtube-nocookie.com/embed/GAoaaDFIAzc" title="YouTube video player"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen aria-label="Youtube video by Ayrun"></iframe>
                <iframe src="https://www.youtube-nocookie.com/embed/8lyVCprUeVc" title="YouTube video player"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen aria-label="Youtube video by Ayrun"></iframe>
            </div>
            <h3 class="subtitle">
                Vulpixia
            </h3>
            <div class="iframe-flex-container">
                <iframe src="https://www.youtube-nocookie.com/embed/LpmZGMsTNLc" title="YouTube video player"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen aria-label="Youtube video by Vulpixia"></iframe>
                <iframe src="https://www.youtube-nocookie.com/embed/edkJ4eZYreI" title="YouTube video player"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen aria-label="Youtube video by Vulpixia"></iframe>
            </div>
        </article>
        <div class="bottom-navigation">
            <a href="#header" aria-label="link">
                Back to Top
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <h2 class="uppercase-title">
            Visit the official pages of Dead by Daylight
        </h2>
        <table>
            <tr>
                <th>
                    <a href="https://deadbydaylight.com/" target="_blank"
                        aria-label="Dead By Daylight website, opens in a new tab">
                        <span class="link-description">
                            Dead By Daylight website
                        </span>
                    </a>
                </th>
                <th>
                    <a href="https://twitter.com/DeadByBHVR" target="_blank"
                        aria-label="Dead By Daylight Twitter account, opens in a new tab">
                        <span class="link-description">
                            Twitter page
                        </span>
                    </a>
                </th>
                <th>
                    <a href="https://www.youtube.com/channel/UCaSgsFdGbwjfdawl3rOXiwQ" target="_blank"
                        aria-label="Dead By Daylight Youtube account, opens in a new tab">
                        <span class="link-description">
                            Youtube account
                        </span>
                    </a>
                </th>
            </tr>
            <tr>
                <td>
                    <a href="https://deadbydaylight.com/" target="_blank"
                        aria-label="Dead By Daylight website, opens in a new tab" rel="external">
                        <img src="assets/images/dbd-logo.webp" alt="Dead By Daylight logo" class="footer-image-compensate">
                        </a>
                </td>
                <td>
                    <a href="https://twitter.com/DeadByBHVR" target="_blank"
                        aria-label="Dead By Daylight Twitter account, opens in a new tab" rel="external">
                        <img src="assets/images/twitter-logo.webp" alt="Twitter logo" class="footer-image">
                        </a>
                </td>
                <td>
                    <a href="https://www.youtube.com/channel/UCaSgsFdGbwjfdawl3rOXiwQ" target="_blank"
                        aria-label="Dead By Daylight Youtube account, opens in a new tab" rel="external">
                        <img src="assets/images/youtube-logo.webp" alt="Youtube play-button" class="footer-image">
                    </a>
                </td>
            </tr>
        </table>
        <p id="footer-disclaimer">
            Website created for educational purposes only as part of course with Code Institute.
        </p>
    </footer>
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/75e939ab45.js" crossorigin="anonymous"></script>
</body>

</html>