-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
69 lines (67 loc) · 3.81 KB
/
test.html
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
<html>
<head>
<style>
body {
background: none;
color: white;
font-size: 2vw;
font-family: 'Nunito', sans-serif;
opacity: 0;
animation: fadein 0.2s;
animation-delay: 0.4s;
animation-fill-mode: forwards;
}
#body::-webkit-scrollbar {
display: none;
}
.fade-out {
animation: fadeout 0.2s;
animation-delay: 0s;
}
.light {
font-weight: 300;
}
.h1 {
font-size: 8vw;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.font.im/css?family=Nunito:300,300i,400,400i,700,700i" rel="stylesheet">
<script>
function FadeOut() {
document.getElementsByTagName("body")[0].classList.add("fade-out");
}
</script>
</head>
<body>
<div style="display: flex; width: 100%">
<div style="width: 50%;">
<div style="width: 100%">
<img src="TiraTachie-min.png" style="width: 150%; margin-left: -33%;"/>
</div>
</div>
<div style="width: 50%;">
<div style="padding: 4vw;">
<p class="h1 light" style="margin-top: 4vw; margin-bottom: 4vw;">Tira</p>
<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
frameborder="0"></iframe>
<p style="opacity: 0.7;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt nisi magna, eget ullamcorper ligula malesuada ut. Duis ac venenatis sem. Aliquam finibus dictum justo, sed accumsan diam pharetra non. Nullam tincidunt libero enim, sed vestibulum metus dapibus a. Quisque tristique turpis tincidunt nisl volutpat dictum. Proin rhoncus viverra pulvinar. Nulla auctor diam massa, eu volutpat mi ultrices id. Sed vulputate sapien leo, eget tincidunt ligula dictum at. Suspendisse potenti. Etiam diam felis, commodo vitae laoreet non, fermentum sed nulla. In vitae pharetra mauris. Donec vitae posuere leo, id bibendum elit. Aenean semper nisi vel dui tincidunt, vitae posuere elit lobortis.
</p>
<p style="opacity: 0.7;">
Morbi vestibulum lectus quam, ac pellentesque nibh ornare eget. Sed vel dolor placerat, aliquam ligula et, ultricies neque. Praesent vehicula purus nec lacus congue, rutrum tincidunt augue convallis. Donec et arcu urna. Suspendisse porta, tortor eu tempor dapibus, lectus sem tristique lorem, venenatis varius tellus odio suscipit tellus. Sed nibh odio, bibendum quis ornare at, sodales pulvinar libero. Ut tincidunt porttitor convallis. Duis iaculis risus lorem, vel egestas enim ullamcorper a. Praesent ac erat massa. Cras convallis condimentum venenatis. Praesent lobortis, justo non sagittis porta, eros ante consectetur ipsum, eu auctor erat magna eu eros. Donec mattis felis fringilla urna euismod lacinia. Sed ut felis eget est elementum facilisis. Nullam quis finibus dui. Sed in nibh vitae lectus euismod pretium pharetra id ante. Nulla a purus egestas, dictum odio sed, interdum ligula.
</p>
</div>
</div>
</div>
</body>
</html>