Skip to content

Commit 05a77da

Browse files
soyrubiosoyrubio
committed
Initial commit
0 parents  commit 05a77da

File tree

98 files changed

+28440
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+28440
-0
lines changed

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# lukasrajnoha.github.io
2+
My personal page

‎assets/header.css

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/header.css.map

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/header.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
2+
3+
#header {
4+
padding-top:3rem;
5+
position:absolute;
6+
width:100vw;
7+
font-family: 'Bebas Neue', cursive;
8+
font-size:14px;
9+
10+
.nav-item:hover, .active {
11+
border-bottom:1px solid red;
12+
}
13+
}

‎assets/style.css

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/style.css.map

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/style.scss

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
2+
3+
@import url('https://fonts.googleapis.com/css2?family=Notable&display=swap');
4+
5+
body {
6+
background:#e9fff9;
7+
}
8+
9+
#header {
10+
padding-top:3rem;
11+
position:absolute;
12+
width:100vw;
13+
font-family: 'Bebas Neue', cursive;
14+
font-size:1.2rem;
15+
16+
.nav-item:hover, .active {
17+
border-bottom:1px solid red;
18+
}
19+
}
20+
21+
#main-body {
22+
height:100vh;
23+
.container-fluid {
24+
height: 100%;
25+
}
26+
.text-container {
27+
height:100%;
28+
font-family: 'Notable', sans-serif;
29+
display:flex;
30+
align-items:center;
31+
justify-content: center;
32+
h1 {
33+
animation:welcome-animation 1s ease-out;
34+
35+
font-size: 5rem;
36+
color: #D64045;
37+
text-shadow: 7px 3px 0 #467599, 14px 7px 0 #9ED8DB;
38+
}
39+
}
40+
}
41+
42+
.alternating-shapes, .still-shapes {
43+
position: absolute;
44+
* {
45+
position:relative;
46+
}
47+
}
48+
49+
.triangle-bottom-left {
50+
width: 0;
51+
height: 0;
52+
border-bottom: 100px solid #D64045;
53+
border-right: 100px solid transparent;
54+
55+
top:77vh;
56+
left: 12vw;
57+
}
58+
59+
.diagonal-line {
60+
width:20px;
61+
height:100px;
62+
background: red;
63+
transform: skew(45deg);
64+
}
65+
66+
@keyframes welcome-animation {
67+
0% {
68+
text-shadow: 0px 0px 0 #467599, 0px 0px 0 #9ED8DB;
69+
}
70+
100% {
71+
text-shadow: 7px 3px 0 #467599, 14px 7px 0 #9ED8DB;
72+
}
73+
}
74+

‎index.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html><head>
3+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5+
<title>Lukas</title>
6+
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
8+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
10+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
11+
<link href="assets/style.css" rel="stylesheet">
12+
<link href="assets/header.css" rel="stylesheet">
13+
14+
15+
</head>
16+
<body data-gr-c-s-loaded="true">
17+
<section id="main">
18+
19+
20+
<section id="header">
21+
<div class="container">
22+
<nav class="navbar navbar-expand-lg navbar-light">
23+
<a class="navbar-brand" href="#">LR</a>
24+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
25+
<span class="navbar-toggler-icon"></span>
26+
</button>
27+
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
28+
<div class="navbar-nav ml-auto">
29+
<a class="nav-item nav-link pl-4 mr-2 active" href="#">INDEX <span class="sr-only">(current)</span></a>
30+
<a class="nav-item nav-link pl-4 mr-2" href="rain/index.html">RAIN</a>
31+
<a class="nav-item nav-link pl-4 mr-2" href="sudoku/index.html">SUDOKU</a>
32+
33+
</div>
34+
</div>
35+
</nav>
36+
</div>
37+
</section>
38+
39+
<section id="main-body">
40+
<div class="container-fluid">
41+
<div class="text-container text-center">
42+
<h1>LOREM IPSUM</h1>
43+
</div>
44+
</div>
45+
</section>
46+
47+
48+
</section>
49+
50+
51+
52+
</body></html>

‎index.md

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html><head>
3+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5+
<title>Lukas</title>
6+
7+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
8+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
10+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
11+
<link href="assets/index/style.css" rel="stylesheet">
12+
13+
</head>
14+
<body data-gr-c-s-loaded="true">
15+
<section id="main">
16+
17+
18+
<section id="header">
19+
<div class="container">
20+
<nav class="navbar navbar-expand-lg navbar-light">
21+
<a class="navbar-brand" href="#">&lt;3</a>
22+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
23+
<span class="navbar-toggler-icon"></span>
24+
</button>
25+
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
26+
<div class="navbar-nav ml-auto">
27+
<a class="nav-item nav-link pl-4 mr-2 active" href="#">WELCOME <span class="sr-only">(current)</span></a>
28+
<a class="nav-item nav-link pl-4 mr-2" href="rain.html">RAIN</a>
29+
30+
</div>
31+
</div>
32+
</nav>
33+
</div>
34+
</section>
35+
36+
<section id="main-body">
37+
<div class="container-fluid">
38+
<div class="text-container text-center">
39+
<h1>WELCOME</h1>
40+
</div>
41+
</div>
42+
</section>
43+
44+
45+
</section>
46+
47+
48+
49+
50+
</body></html>

‎rain/assets/rain.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
var dropletsCount = 0;
2+
3+
function addDroplets(count) {
4+
droplets = ""
5+
count = count / 3;
6+
levels = ['l1', 'l2', 'l3'];
7+
for (level = 0; level < 3; level++) {
8+
for (i = 0; i < count ; i++) {
9+
randomPosition = Math.floor((Math.random() * 99) + 1);
10+
animationDelay = Math.floor((Math.random() * 99) + 1);
11+
topOffset = Math.floor((Math.random() * 500))/30;
12+
const markup =
13+
`<div class="droplet droplet-${levels[level]}" style="top: ${-topOffset}vh; left:${randomPosition}vw;
14+
animation-delay:.${animationDelay}s;"></div>
15+
<div class="splash splash-${levels[level]}" style="top: ${95-topOffset}vh; left:${randomPosition-.5}vw;
16+
animation-delay:.${animationDelay}s;"></div>`;
17+
droplets += markup;
18+
dropletsCount++;
19+
}
20+
}
21+
$(".droplets").html(droplets);
22+
}
23+
24+
$( document ).ready(function() {
25+
addDroplets(300);
26+
console.log("added");
27+
});

‎rain/assets/style.css

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎rain/assets/style.css.map

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎rain/assets/style.scss

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
2+
@import url('https://fonts.googleapis.com/css2?family=Notable&display=swap');
3+
4+
body {
5+
background: #0F2027; /* fallback for old browsers */
6+
background: -webkit-linear-gradient(to bottom, #2C5364, #203A43, #0F2027); /* Chrome 10-25, Safari 5.1-6 */
7+
background: linear-gradient(to bottom, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
8+
9+
}
10+
11+
#header {
12+
* { color:white; }
13+
14+
.nav-item:hover, .active {
15+
border-bottom:1px solid white;
16+
}
17+
}
18+
19+
#main-body {
20+
height:100vh;
21+
.container-fluid {
22+
height: 100%;
23+
}
24+
.text-container {
25+
height:100%;
26+
font-family: 'Notable', sans-serif;
27+
display:flex;
28+
align-items:center;
29+
justify-content: center;
30+
h1 {
31+
font-size: 5rem;
32+
color: #F5E6E8;
33+
}
34+
}
35+
}
36+
37+
38+
@keyframes drop {
39+
0% {
40+
transform: translateY(0vh);
41+
opacity:1;
42+
}
43+
60% {
44+
opacity: 1;
45+
}
46+
70% {
47+
transform: translateY(95vh);
48+
opacity:0;
49+
}
50+
100% {
51+
opacity: 0;
52+
}
53+
}
54+
55+
.droplet {
56+
opacity:0;
57+
position:absolute;
58+
display:inline;
59+
width:2px;
60+
height:10px;
61+
background: red;
62+
border-radius: 2px;
63+
animation: drop .9s linear infinite;
64+
}
65+
66+
.droplet-l1 {
67+
width:1px;
68+
height:12px;
69+
animation-duration:1.4s;
70+
background: #5e503f;
71+
}
72+
73+
.droplet-l2 {
74+
width:1px;
75+
height:16px;
76+
animation-duration:1.1s;
77+
background: #c6ac8f;
78+
}
79+
.droplet-l3 {
80+
width:1px;
81+
height:20px;
82+
animation-duration:.9s;
83+
background: #eae0d5;
84+
}
85+
86+
@keyframes splash {
87+
0% {
88+
opacity: 0;
89+
transform: scale(0,0);
90+
}
91+
67% {
92+
opacity: 0;
93+
}
94+
68% {
95+
opacity: 1;
96+
transform: scale(0,0);
97+
}
98+
100% {
99+
transform: scale(1,1);
100+
opacity:0;
101+
}
102+
}
103+
104+
.splash {
105+
opacity:0;
106+
display:inline;
107+
position: absolute;
108+
top:95vh;
109+
width:20px;
110+
height:15px;
111+
border-top: 2px solid red;
112+
border-radius: 10px;
113+
animation: splash .9s linear infinite;
114+
right:5px;
115+
}
116+
117+
.splash-l1 {
118+
119+
animation-duration:1.4s;
120+
border-color: #5e503f;
121+
}
122+
123+
.splash-l2 {
124+
125+
animation-duration:1.1s;
126+
border-color: #c6ac8f;
127+
}
128+
.splash-l3 {
129+
130+
animation-duration:.9s;
131+
border-color: #eae0d5;
132+
}

0 commit comments

Comments
 (0)