"404"
Bootstrap 4.1.1 Snippet by irbees2008

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<main>
<div class="container">
<div class="row">
<div class="col-md-6 align-self-center">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 800 600">
<g>
<defs>
<clipPath id="GlassClip">
<path
d="M380.857,346.164c-1.247,4.651-4.668,8.421-9.196,10.06c-9.332,3.377-26.2,7.817-42.301,3.5
s-28.485-16.599-34.877-24.192c-3.101-3.684-4.177-8.66-2.93-13.311l7.453-27.798c0.756-2.82,3.181-4.868,6.088-5.13
c6.755-0.61,20.546-0.608,41.785,5.087s33.181,12.591,38.725,16.498c2.387,1.682,3.461,4.668,2.705,7.488L380.857,346.164z" />
</clipPath>
<clipPath id="cordClip">
<rect width="800" height="600" />
</clipPath>
</defs>
<g id="planet">
<circle fill="none" stroke="#0E0620" stroke-width="3" stroke-miterlimit="10" cx="572.859" cy="108.803"
r="90.788" />
<circle id="craterBig" fill="none" stroke="#0E0620" stroke-width="3" stroke-miterlimit="10" cx="548.891"
cy="62.319" r="13.074" />
<circle id="craterSmall" fill="none" stroke="#0E0620" stroke-width="3" stroke-miterlimit="10" cx="591.743"
cy="158.918" r="7.989" />
<path id="ring" fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round"
stroke-miterlimit="10" d="
M476.562,101.461c-30.404,2.164-49.691,4.221-49.691,8.007c0,6.853,63.166,12.408,141.085,12.408s141.085-5.555,141.085-12.408
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans');
:root {
--blue: #0e0620;
--white: #fff;
--green: #2ccf6d;
}
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
font-family:"Nunito Sans";
color: var(--blue);
font-size: 1em;
}
button {
font-family:"Nunito Sans";
}
ul {
list-style-type: none;
padding-inline-start: 35px;
}
svg {
width: 100%;
visibility: hidden;
}
h1 {
font-size: 7.5em;
margin: 15px 0px;
font-weight:bold;
}
h2 {
font-weight:bold;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
gsap.set("svg", { visibility: "visible" });
gsap.to("#headStripe", {
y: 0.5,
rotation: 1,
yoyo: true,
repeat: -1,
ease: "sine.inOut",
duration: 1
});
gsap.to("#spaceman", {
y: 0.5,
rotation: 1,
yoyo: true,
repeat: -1,
ease: "sine.inOut",
duration: 1
});
gsap.to("#craterSmall", {
x: -3,
yoyo: true,
repeat: -1,
duration: 1,
ease: "sine.inOut"
});
gsap.to("#craterBig", {
x: 3,
yoyo: true,
repeat: -1,
duration: 1,
ease: "sine.inOut"
});
gsap.to("#planet", {
rotation: -2,
yoyo: true,
repeat: -1,
duration: 1,
ease: "sine.inOut",
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit

Questions / Comments: