Untitled
2 months ago in Plain Text
<header>
<style>body {
background-color: #212121;
color: white;
}
.bg-dark-own {
background-color: #212121 !important;
}
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
transition: transform .2s; /* Animation */
}

.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */

display: flex;
align-items: center;
}
.card:hover {
transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
cursor: pointer;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 50px;
}

#title {
font-size: 7.9vh; !important;;
}
.loader-wrap{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background-color:#111;font:5em/1 Open Sans,Impact;text-transform:uppercase;}
.layout-light .loader-wrap{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;background-color:#fff;font:5em/1 Open Sans,Impact;text-transform:uppercase}
.loader-wrap svg{position:absolute;width:100%;height:100%}
.text{fill:none;stroke-width:3;stroke-linejoin:round;stroke-dasharray:70 330;stroke-dashoffset:0;-webkit-animation:stroke 6s infinite linear;animation:stroke 6s infinite linear}
.text{fill:none;stroke-width:3;stroke-linejoin:round;stroke-dasharray:70 330;stroke-dashoffset:0;-webkit-animation:stroke 6s infinite linear;animation:stroke 6s infinite linear}
.text:nth-child(5n+1){stroke:#f2385a;-webkit-animation-delay:-1.2s;animation-delay:-1.2s}
.text:nth-child(5n+2){stroke:#f5a503;-webkit-animation-delay:-2.4s;animation-delay:-2.4s}
.text:nth-child(5n+3){stroke:#e9f1df;-webkit-animation-delay:-3.6s;animation-delay:-3.6s}
.text:nth-child(5n+4){stroke:#56d9cd;-webkit-animation-delay:-4.8s;animation-delay:-4.8s}
.text:nth-child(5n+5){stroke:#3aa1bf;-webkit-animation-delay:-6s;animation-delay:-6s}
@-webkit-keyframes stroke{100%{stroke-dashoffset:-400}}@keyframes stroke{100%{stroke-dashoffset:-400}}*::-webkit-input-placeholder{color:#eeeff6}*:-moz-placeholder{color:#eeeff6;opacity:1}*::-moz-placeholder{color:#eeeff6;opacity:1}*:-ms-input-placeholder{color:#eeeff6}*::-ms-input-placeholder{color:#eeeff6}*::placeholder{color:#eeeff6}

.skillbar {
position: relative;
display: block;
width: 100%;
margin-bottom: 30px;
}

.skillbar-bar:before {
background: #eee;
content: "";
height: 3px;
position: absolute;
width: 100%;
z-index: -1;
}

.skillbar-bar {
height: 3px;
width: 0px;
background: #323232;
transition-property: width, background-color;
}

.skillbar-title {
color: #323232;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
}

.skill-bar-percent {
float: right;
display: inline-block;
color: #323232;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}

.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}</style></header><div id="loader-wrap" class="loader-wrap" style="display:block">
<svg viewBox="0 0 600 300" style="display: blok;">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="50%" dy=".35em">Jon Lara</text>
</symbol>
<use class="text" xlink:href="#s-text"></use>
<use class="text" xlink:href="#s-text"></use>
<use class="text" xlink:href="#s-text"></use>
<use class="text" xlink:href="#s-text"></use>
<use class="text" xlink:href="#s-text"></use>
</svg>
</div>
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