ESL Overlay közvetítésekhez
Fibinger Ádám
2019-10-08 b805b45731b3aa9c345b82d18d47978a1fffe14d
commit | author | age
b805b4 1 <!DOCTYPE html>
2 <html>
3 <head>
4     <meta charset="UTF-8">
5     <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
6     <link rel="stylesheet" href="/assets/operators-color.css">
7     <style type="text/css">
8         html *, body * {
9             margin: 0;
10             padding: 0;
11             color: white;
12         }
13
14         body {
15             width: 1920px;
16             height: 1080px;
17 /*            background-image: url("assets/test.png");
18             background-repeat: no-repeat;*/
19         }
20
21         #stripe {
22             position: fixed;
23             top: 2px;
24             left: 0;
25             width: 100%;
26             background: transparent url("assets/stripe.png") no-repeat;
27             height: 58px;
28             text-align: center;
29         }
30
31         #stripe * {
32             display: inline-block;
33         }
34
35         #stripe .team {
36             margin-top: 2px;
37             position: inherit;
38             width: 420px;
39             overflow: hidden;
40         }
41
42         #stripe .team .name {
43             color: white;
44             font-size: 34px;
45             font-family: 'Oswald', sans-serif;
46         }
47
48         #stripe .team.orange {
49             left: 270px;
50         }
51         #stripe .ban {
52
53         }
54         .operator {
55             background-repeat: no-repeat;
56             background-size: cover;
57             width: 60px;
58             height: 60px;
59         }
60         #stripe .team.blue {
61             left: 1070px;
62         }
63
64         #stripe .logo {
65             display: inline-block;
66         }
67         #stripe .info {
68             position: inherit;
69             top: 0;
70             width: 220px;
71             height: 58px;
72         }
73         #stripe .info.left {
74             left: 0;
75             text-align: left;
76         }
77         #stripe .info.right {
78             left: 1700px;
79             text-align: right;
80         }
81         #stripe .operator {
82             width: 60px;
83             height: 60px;
84             border: 1px solid red;
85             display: inline-block;
86         }
87     </style>
88 </head>
89 <body>
90 <div id="stripe">
91     <span class="info left">Info left</span>
92     <span class="team orange">
93         <span class="name">ÁRVÍZTŰRŐ ASDF asd csapat</span>
94     </span>
95     <span class="ban orange">
96             <span class="operator jackal"></span>
97             <span class="operator mira"></span>
98     </span>
99     <span class="logo"></span>
100     <span class="ban blue">
101             <span class="operator montagne"></span>
102             <span class="operator goyo"></span>
103     </span>
104     <span class="team blue">
105         <span class="name">ÁRVÍZTŰRŐ ASDF asd csapat</span>
106     </span>
107     <span class="info right">Info right</span>
108 </div>
109 </body>
110 </html>