<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Momciloo/pen/YEwzRQ" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">body {
background-color: #F2F2F2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100vw;
height: 100vh;
}
.u-fw {
width: 100%;
height: 100%;
}
.u-pr {
position: relative;
}
.window {
width: 336px;
height: 336px;
margin: auto;
border-radius: 50%;
border: 12px solid #fff;
-webkit-box-shadow: -2px 15px 54px 4px rgba(255, 100, 183, 0.7);
box-shadow: -2px 15px 54px 4px rgba(255, 100, 183, 0.7);
background: #0b101f;
background: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #0b101f), color-stop(22%, #301e37), to(#ff6cbd));
background: linear-gradient(to bottom, #0b101f 8%, #301e37 22%, #ff6cbd 100%);
overflow: hidden;
}
.window--inner {
position: absolute;
top: 0;
left: 0;
-webkit-animation: movegalaxy 10s ease infinite;
animation: movegalaxy 10s ease infinite;
}
.window--stars li {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
background-color: white;
}
.window--stars li:nth-child(1) {
opacity: 0.8;
-webkit-transform: translate(-101px, 48px);
transform: translate(-101px, 48px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(2) {
opacity: 0.34;
-webkit-transform: translate(-116px, -57px);
transform: translate(-116px, -57px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(3) {
opacity: 0.96;
-webkit-transform: translate(37px, 129px);
transform: translate(37px, 129px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(4) {
opacity: 0.22;
-webkit-transform: translate(-81px, -125px);
transform: translate(-81px, -125px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(5) {
opacity: 0.38;
-webkit-transform: translate(106px, -7px);
transform: translate(106px, -7px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(6) {
opacity: 0.54;
-webkit-transform: translate(-73px, -135px);
transform: translate(-73px, -135px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(7) {
opacity: 0.66;
-webkit-transform: translate(56px, 148px);
transform: translate(56px, 148px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(8) {
opacity: 0.03;
-webkit-transform: translate(88px, -4px);
transform: translate(88px, -4px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(9) {
opacity: 0.94;
-webkit-transform: translate(40px, -121px);
transform: translate(40px, -121px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(10) {
opacity: 0.06;
-webkit-transform: translate(83px, 82px);
transform: translate(83px, 82px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(11) {
opacity: 0.25;
-webkit-transform: translate(-125px, 88px);
transform: translate(-125px, 88px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(12) {
opacity: 0.28;
-webkit-transform: translate(-85px, 123px);
transform: translate(-85px, 123px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(13) {
opacity: 0.13;
-webkit-transform: translate(-146px, -6px);
transform: translate(-146px, -6px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(14) {
opacity: 0.62;
-webkit-transform: translate(-36px, -165px);
transform: translate(-36px, -165px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(15) {
opacity: 0.07;
-webkit-transform: translate(3px, -123px);
transform: translate(3px, -123px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(16) {
opacity: 0.15;
-webkit-transform: translate(65px, -34px);
transform: translate(65px, -34px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(17) {
opacity: 0.62;
-webkit-transform: translate(-80px, 8px);
transform: translate(-80px, 8px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(18) {
opacity: 0.02;
-webkit-transform: translate(-103px, 161px);
transform: translate(-103px, 161px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(19) {
opacity: 0.41;
-webkit-transform: translate(-164px, 21px);
transform: translate(-164px, 21px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(20) {
opacity: 0.5;
-webkit-transform: translate(104px, 141px);
transform: translate(104px, 141px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(21) {
opacity: 0.78;
-webkit-transform: translate(-49px, -117px);
transform: translate(-49px, -117px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(22) {
opacity: 0.87;
-webkit-transform: translate(141px, -151px);
transform: translate(141px, -151px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(23) {
opacity: 0.72;
-webkit-transform: translate(-23px, -52px);
transform: translate(-23px, -52px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(24) {
opacity: 0.88;
-webkit-transform: translate(-133px, -104px);
transform: translate(-133px, -104px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(25) {
opacity: 0.93;
-webkit-transform: translate(-10px, -141px);
transform: translate(-10px, -141px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(26) {
opacity: 0.18;
-webkit-transform: translate(-9px, 14px);
transform: translate(-9px, 14px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(27) {
opacity: 0.51;
-webkit-transform: translate(-104px, -91px);
transform: translate(-104px, -91px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(28) {
opacity: 0.91;
-webkit-transform: translate(-122px, 141px);
transform: translate(-122px, 141px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(29) {
opacity: 0.32;
-webkit-transform: translate(120px, 92px);
transform: translate(120px, 92px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(30) {
opacity: 0.09;
-webkit-transform: translate(-96px, 68px);
transform: translate(-96px, 68px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(31) {
opacity: 0.77;
-webkit-transform: translate(27px, 47px);
transform: translate(27px, 47px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(32) {
opacity: 0.89;
-webkit-transform: translate(103px, -60px);
transform: translate(103px, -60px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(33) {
opacity: 0.24;
-webkit-transform: translate(-93px, 112px);
transform: translate(-93px, 112px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(34) {
opacity: 0.26;
-webkit-transform: translate(57px, 12px);
transform: translate(57px, 12px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(35) {
opacity: 0.04;
-webkit-transform: translate(-83px, -81px);
transform: translate(-83px, -81px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(36) {
opacity: 0.78;
-webkit-transform: translate(116px, -101px);
transform: translate(116px, -101px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(37) {
opacity: 0.19;
-webkit-transform: translate(94px, 89px);
transform: translate(94px, 89px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(38) {
opacity: 0.17;
-webkit-transform: translate(39px, -82px);
transform: translate(39px, -82px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(39) {
opacity: 0.28;
-webkit-transform: translate(151px, 152px);
transform: translate(151px, 152px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(40) {
opacity: 0.62;
-webkit-transform: translate(-103px, -8px);
transform: translate(-103px, -8px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(41) {
opacity: 0.99;
-webkit-transform: translate(-139px, 124px);
transform: translate(-139px, 124px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(42) {
opacity: 0.67;
-webkit-transform: translate(142px, -46px);
transform: translate(142px, -46px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(43) {
opacity: 0.25;
-webkit-transform: translate(58px, -119px);
transform: translate(58px, -119px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(44) {
opacity: 0.88;
-webkit-transform: translate(-119px, -1px);
transform: translate(-119px, -1px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(45) {
opacity: 0.63;
-webkit-transform: translate(-25px, -72px);
transform: translate(-25px, -72px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(46) {
opacity: 0.54;
-webkit-transform: translate(-28px, 97px);
transform: translate(-28px, 97px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(47) {
opacity: 0.61;
-webkit-transform: translate(117px, -92px);
transform: translate(117px, -92px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(48) {
opacity: 0.64;
-webkit-transform: translate(58px, 69px);
transform: translate(58px, 69px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(49) {
opacity: 0.62;
-webkit-transform: translate(-91px, -56px);
transform: translate(-91px, -56px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(50) {
opacity: 0.24;
-webkit-transform: translate(-134px, -82px);
transform: translate(-134px, -82px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(51) {
opacity: 0.79;
-webkit-transform: translate(-50px, -116px);
transform: translate(-50px, -116px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(52) {
opacity: 0.5;
-webkit-transform: translate(-143px, -61px);
transform: translate(-143px, -61px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(53) {
opacity: 0.65;
-webkit-transform: translate(86px, 23px);
transform: translate(86px, 23px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(54) {
opacity: 0.75;
-webkit-transform: translate(-126px, 122px);
transform: translate(-126px, 122px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(55) {
opacity: 0.28;
-webkit-transform: translate(-112px, -10px);
transform: translate(-112px, -10px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(56) {
opacity: 0.61;
-webkit-transform: translate(131px, -1px);
transform: translate(131px, -1px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(57) {
opacity: 0.59;
-webkit-transform: translate(48px, -48px);
transform: translate(48px, -48px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(58) {
opacity: 0.51;
-webkit-transform: translate(120px, -139px);
transform: translate(120px, -139px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(59) {
opacity: 0.94;
-webkit-transform: translate(67px, -107px);
transform: translate(67px, -107px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(60) {
opacity: 0.69;
-webkit-transform: translate(-143px, 2px);
transform: translate(-143px, 2px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(61) {
opacity: 0.99;
-webkit-transform: translate(86px, -39px);
transform: translate(86px, -39px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(62) {
opacity: 0.61;
-webkit-transform: translate(16px, 85px);
transform: translate(16px, 85px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(63) {
opacity: 0.71;
-webkit-transform: translate(106px, 10px);
transform: translate(106px, 10px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(64) {
opacity: 0.71;
-webkit-transform: translate(-52px, -11px);
transform: translate(-52px, -11px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(65) {
opacity: 0.15;
-webkit-transform: translate(43px, 75px);
transform: translate(43px, 75px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(66) {
opacity: 0.88;
-webkit-transform: translate(43px, 148px);
transform: translate(43px, 148px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(67) {
opacity: 0.44;
-webkit-transform: translate(-165px, -132px);
transform: translate(-165px, -132px);
width: 3px;
height: 3px;
}
.window--stars li:nth-child(68) {
opacity: 0.16;
-webkit-transform: translate(8px, -27px);
transform: translate(8px, -27px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(69) {
opacity: 0.51;
-webkit-transform: translate(153px, -124px);
transform: translate(153px, -124px);
width: 2px;
height: 2px;
}
.window--stars li:nth-child(70) {
opacity: 0.83;
-webkit-transform: translate(116px, -153px);
transform: translate(116px, -153px);
width: 3px;
height: 3px;
}
.window--sun {
position: absolute;
top: 0;
left: 0;
-webkit-transform: translate(-55%, -15%);
transform: translate(-55%, -15%);
width: 168px;
height: 168px;
border-radius: 50%;
background-color: #F1F1CB;
-webkit-box-shadow: 0 0 0 16.8px rgba(241, 241, 203, 0.2), 0 0 0 33.6px rgba(241, 241, 203, 0.2), 0 0 0 50.4px rgba(241, 241, 203, 0.2), 0 0 0 67.2px rgba(241, 241, 203, 0.2);
box-shadow: 0 0 0 16.8px rgba(241, 241, 203, 0.2), 0 0 0 33.6px rgba(241, 241, 203, 0.2), 0 0 0 50.4px rgba(241, 241, 203, 0.2), 0 0 0 67.2px rgba(241, 241, 203, 0.2);
}
.window--planet1 {
width: 50.4px;
height: 50.4px;
top: 0;
right: 0;
-webkit-transform: translate(-100.8px, 42px);
transform: translate(-100.8px, 42px);
position: absolute;
border-radius: 50%;
background: linear-gradient(115deg, #509452 0%, #214a64 51%, rgba(41, 22, 53, 0.8) 100%);
}
.window--planet2 {
width: 92.4px;
height: 92.4px;
top: 0;
right: 0;
-webkit-transform: translate(8.4px, 117.6px);
transform: translate(8.4px, 117.6px);
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, #ccc742 0%, #df1738 51%, #9a3179 100%);
}
.window--planet3 {
width: 117.6px;
height: 117.6px;
top: 0;
right: 0;
-webkit-transform: translate(-114.24px, 201.6px);
transform: translate(-114.24px, 201.6px);
position: absolute;
border-radius: 50%;
background: linear-gradient(165deg, #e54ea4 0%, #1c0515 80%, #1c0515 100%);
}
.window--ring {
width: 151.2px;
height: 151.2px;
top: 0;
right: 0;
-webkit-transform: translate(-97.44px, 171.36px) rotateX(-105deg);
transform: translate(-97.44px, 171.36px) rotateX(-105deg);
position: absolute;
border-radius: 50%;
border-width: 13.44px 0 0 0;
opacity: .85;
border-color: pink;
border-style: solid;
}
.window--shootingstars {
position: absolute;
top: 0;
left: 0;
}
.window--shootingstars li {
width: 84px;
height: 2px;
border-radius: 50%;
display: block;
background-color: red;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 0%, white 67%);
}
.window--shootingstars li:nth-child(1) {
-webkit-transform: rotate(-39deg) translate(-140px, -40px);
transform: rotate(-39deg) translate(-140px, -40px);
opacity: .4;
}
.window--shootingstars li:nth-child(2) {
-webkit-transform: rotate(-39deg) translate(-220px, 8px);
transform: rotate(-39deg) translate(-220px, 8px);
}
.window--shootingstars li:nth-child(3) {
-webkit-transform: rotate(-39deg) translate(-70px, 100px);
transform: rotate(-39deg) translate(-70px, 100px);
opacity: .3;
}
@-webkit-keyframes movegalaxy {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(3%, 4%);
transform: translate(3%, 4%);
}
75% {
-webkit-transform: translate(2%, 1%);
transform: translate(2%, 1%);
}
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
}
@keyframes movegalaxy {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
50% {
-webkit-transform: translate(3%, 4%);
transform: translate(3%, 4%);
}
75% {
-webkit-transform: translate(2%, 1%);
transform: translate(2%, 1%);
}
100% {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
}
</style></head><body>
<div class="window u-pr">
<div class="window--inner u-fw">
<div class="window--container u-fw u-pr">
<ul class="window--stars u-fw u-pr">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="window--sun"></div>
<div class="window--planet1"></div>
<div class="window--planet2"></div>
<div class="window--planet3"></div>
<div class="window--ring"></div>
<ul class="window--shootingstars u-fw">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body></html>
