Skip to content

Commit 8615462

Browse files
MagnificRogueMagnificRogue
committed
Rewrite!
0 parents  commit 8615462

File tree

6 files changed

+331
-0
lines changed

6 files changed

+331
-0
lines changed

‎DustynPortrait.jpg‎

10.2 KB
Loading

‎css/font-awesome-4.7.min.css‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/small-screen.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
img.circular {
2+
border-radius: 50%;
3+
}
4+
5+
.title-container {
6+
text-align: center;
7+
font-family: "Arial";
8+
font-size: 1.25em;
9+
}
10+
11+
#check { display: none; }
12+
13+
.plate {
14+
position: absolute;
15+
width: 75px;
16+
height: 75px;
17+
border-radius: 50%;
18+
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);
19+
}
20+
21+
img.centered {
22+
width:300px;
23+
height:300px;
24+
display: block;
25+
margin: 0 auto;
26+
}
27+
28+
a:hover, a:visited, a:link, a:active
29+
{
30+
text-decoration: none;
31+
}
32+
33+
.container {
34+
text-align: center;
35+
margin-left: -75px;
36+
}
37+
38+
.plate i {
39+
line-height: 75px;
40+
color: #333;
41+
}
42+
43+
.plate:hover i { color: #111; }
44+
45+
.plate:nth-of-type(1) {
46+
margin-top: 25px;
47+
background-color: rgba(109, 231, 200, 0.3);
48+
}
49+
50+
.plate:nth-of-type(2) {
51+
margin-top:125px;
52+
background-color: rgba(243, 156, 80, 0.1);
53+
}
54+
55+
.plate:nth-of-type(3) {
56+
margin-top:225px;
57+
background-color: rgba(247, 80, 173, 0.1);
58+
}
59+
60+
.plate:nth-of-type(4) {
61+
margin-top:325px;
62+
background-color: rgba(80, 128, 136, 0.5);
63+
}
64+
65+
.plate:nth-of-type(5) {
66+
margin-top:425px;
67+
background-color: rgba(191, 95, 80, 0.9);
68+
}
69+
70+
.plate:nth-of-type(6) {
71+
margin-top:525px;
72+
background-color: rgba(101, 128, 216, 0.7);
73+
margin-bottom: 50px;
74+
}

‎css/style.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
img.circular {
2+
border-radius: 50%;
3+
}
4+
5+
.title-container {
6+
position:absolute;
7+
width: 400px;
8+
left: 50%;
9+
top: 50%;
10+
margin-left: -200px;
11+
margin-top: -300px;
12+
font-family: "Arial";
13+
font-size: 1.25em;
14+
}
15+
16+
17+
18+
19+
#check { display: none; }
20+
21+
.plate {
22+
position: absolute;
23+
width: 75px;
24+
height: 75px;
25+
border-radius: 50%;
26+
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);
27+
}
28+
29+
img.centered {
30+
position:fixed;
31+
width: 300px;
32+
height: 300px;
33+
left: 50%;
34+
top: 50%;
35+
margin-left: -150px;
36+
margin-top: -150px;
37+
}
38+
39+
.circling{
40+
-webkit-animation: spin-left 8s linear infinite;
41+
animation: spin-right 8s linear infinite;
42+
}
43+
44+
.circling-fast {
45+
-webkit-animation: spin-left 2s linear infinite;
46+
animation: spin-right 2s linear infinite;
47+
}
48+
49+
50+
@-webkit-keyframes spin-right {
51+
100% {
52+
-webkit-transform: rotate(360deg);
53+
-moz-transform: rotate(360deg);
54+
-ms-transform: rotate(360deg);
55+
-o-transform: rotate(360deg);
56+
transform: rotate(360deg);
57+
}
58+
}
59+
60+
61+
i.adjusted-height {
62+
margin-top: 7px;
63+
}
64+
65+
66+
.main,
67+
.container {
68+
margin: auto;
69+
position: fixed;
70+
top: 0;
71+
right: 0;
72+
bottom: 0;
73+
left: 0;
74+
width: 200px;
75+
height: 200px;
76+
border-radius: 50%;
77+
}
78+
79+
.main {
80+
cursor: pointer;
81+
z-index: 50;
82+
}
83+
84+
.container { z-index: 10; }
85+
86+
.plate {
87+
margin: auto;
88+
position: absolute;
89+
top: 0;
90+
right: 0;
91+
bottom: 0;
92+
left: 0;
93+
width: 75px;
94+
height: 75px;
95+
opacity: 0;
96+
border-radius: 50%;
97+
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);
98+
-webkit-transition: all 0.4s ease-in;
99+
-moz-transition: all 0.4s ease-in;
100+
transition: all 0.4s ease-in;
101+
}
102+
103+
.plate i {
104+
width: 100%;
105+
line-height: 60px;
106+
text-align: center;
107+
color: #333;
108+
}
109+
110+
.plate:hover i { color: #111; }
111+
112+
.plate:nth-of-type(1) {
113+
background-color: rgba(109, 231, 200, 0.3);
114+
-webkit-transition-delay: 0s;
115+
-moz-transition-delay: 0s;
116+
transition-delay: 0s;
117+
}
118+
119+
.plate:nth-of-type(2) {
120+
background-color: rgba(243, 156, 80, 0.1);
121+
-webkit-transition-delay: 0.1s;
122+
-moz-transition-delay: 0.1s;
123+
transition-delay: 0.1s;
124+
}
125+
126+
.plate:nth-of-type(3) {
127+
background-color: rgba(247, 80, 173, 0.1);
128+
-webkit-transition-delay: 0.2s;
129+
-moz-transition-delay: 0.2s;
130+
transition-delay: 0.2s;
131+
}
132+
133+
.plate:nth-of-type(4) {
134+
background-color: rgba(80, 128, 136, 0.5);
135+
-webkit-transition-delay: 0.3s;
136+
-moz-transition-delay: 0.3s;
137+
transition-delay: 0.3s;
138+
}
139+
140+
.plate:nth-of-type(5) {
141+
background-color: rgba(191, 95, 80, 0.9);
142+
-webkit-transition-delay: 0.4s;
143+
-moz-transition-delay: 0.4s;
144+
transition-delay: 0.4s;
145+
}
146+
147+
.plate:nth-of-type(6) {
148+
background-color: rgba(101, 128, 216, 0.7);
149+
-webkit-transition-delay: 0.5s;
150+
-moz-transition-delay: 0.5s;
151+
transition-delay: 0.5s;
152+
}
153+
154+
#check:checked ~ .main + .container .plate { opacity: 1; }
155+
#check:checked ~ .main + .container .plate:nth-of-type(1) {right:-200%; top: -0%; } /*first plate, 0pi*/
156+
#check:checked ~ .main + .container .plate:nth-of-type(2) {right:-100%; top: -173.2%; } /*second plate, pi/3*/
157+
#check:checked ~ .main + .container .plate:nth-of-type(3) {left:-100%; top: -173.2%; } /*third plate, 2pi/3*/
158+
#check:checked ~ .main + .container .plate:nth-of-type(4) {left:-200%; top: -0%; } /*fourth plate, 4pi/3*/
159+
#check:checked ~ .main + .container .plate:nth-of-type(5) {left:-100%; bottom: -173.2%; } /*fifth plate, 4pi/3*/
160+
#check:checked ~ .main + .container .plate:nth-of-type(6) {right:-100%; bottom: -173.2%; } /*sixth plate, 4pi/3*/
161+

‎favicon.ico‎

1.12 KB
Binary file not shown.

‎index.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="css/font-awesome-4.7.min.css"/>
4+
<link rel="stylesheet" media="screen and (min-width: 500px) and (min-height:520px)" href="css/style.css"/>
5+
<link rel="stylesheet" media="screen and (max-width: 499px) , screen and (max-height:519px)" href="css/small-screen.css">
6+
</head>
7+
<body>
8+
9+
<div class="title-container">
10+
<h1 class="title"> Dustyn Jam<span id="secret">e</span>s Tubbs </h1>
11+
</div>
12+
13+
14+
<input id="check" type="checkbox">
15+
<label class="main" for="check">
16+
<div class="title">
17+
<img src="DustynPortrait.jpg" id="portrait" class="centered circular" alt="A portrait of Dustyn Tubbs"></img>
18+
</div>
19+
</label>
20+
21+
<div class="container" id="container">
22+
<a class="plate" href="https://twitter.com/DustynTubbs">
23+
<i class="fa fa-3x fa-twitter adjusted-height" aria-hidden="true"></i>
24+
</a>
25+
<a class="plate" href="https://www.linkedin.com/in/dustyntubbs/">
26+
<i class="fa fa-3x fa-linkedin adjusted-height" aria-hidden="true"></i>
27+
</a>
28+
<a class="plate" href="https://www.facebook.com/dustyn.tubbs">
29+
<i class="fa fa-3x fa-facebook adjusted-height" aria-hidden="true"></i>
30+
</a>
31+
<a class="plate" href="https://github.com/MagnificRogue">
32+
<i class="fa fa-3x fa-github adjusted-height" aria-hidden="true"></i>
33+
</a>
34+
<a class="plate" href="https://dustyntubbs.blogspot.com/">
35+
<i class="fa fa-3x fa-rss adjusted-height" aria-hidden="true"></i>
36+
</a>
37+
<a class="plate" href="mailto:[email protected]">
38+
<i class="fa fa-3x fa-envelope-o adjusted-height" aria-hidden="true"></i>
39+
</a>
40+
</div>
41+
42+
</body>
43+
44+
<script>
45+
window.onload = function() {
46+
// forgive me CSS guru's, I am weak
47+
48+
// expand the plates if the page wasn't cached
49+
var firstPlate = document.getElementsByClassName('plate')[0];
50+
var currentOpacity = window.getComputedStyle(firstPlate, null).opacity;
51+
if( currentOpacity == 0){
52+
document.getElementById('check').click();
53+
}
54+
55+
56+
57+
//a fun secret
58+
var spinning = false;
59+
60+
document.getElementById('secret').addEventListener('click', function(){
61+
if (spinning) {
62+
63+
var elements = document.getElementsByClassName('plate');
64+
65+
for(var i=0; i < elements.length; i++) {
66+
elements[i].classList.remove('circling-fast');
67+
}
68+
69+
document.getElementById('portrait').classList.remove('circling-fast');
70+
document.getElementById('container').classList.remove('circling');
71+
72+
spinning = false;
73+
74+
} else {
75+
76+
var elements = document.getElementsByClassName('plate');
77+
78+
for(var i=0; i < elements.length; i++) {
79+
elements[i].className += " circling-fast";
80+
}
81+
82+
document.getElementById('portrait').className += " circling-fast";
83+
document.getElementById('container').className += " circling";
84+
spinning = true;
85+
86+
}
87+
});
88+
89+
}
90+
</script>
91+
92+
</html>

0 commit comments

Comments
 (0)