<div class="space-label">
<div class="top">
<div class="ring"></div>
<div class="ring"></div>
<div class="ring"></div>
</div>
<div class="text">space</div>
<div class="bottom">
<div class="ring"></div>
<div class="ring"></div>
<div class="ring"></div>
</div>
</div>
$circleWidth: 170px;
body,
html {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/279756/bg-space.jpg);
background-size: cover;
height: 100%;
width: 100%;
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
}
* {
box-sizing: border-box;
}
.space-label {
width: ($circleWidth)*2;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.top,
.bottom {
height: 60px;
overflow: hidden;
position: relative;
width: $circleWidth;
margin: 0 auto;
.ring {
border-radius: 100%;
position: absolute;
width: $circleWidth;
height: $circleWidth;
border: 3px solid #fff;
border-width: 8px;
&:nth-child(2) {
border-width: 4px;
width: ($circleWidth)-16;
}
&:nth-child(3) {
border-width: 2px;
width: ($circleWidth)-31;
&:after {
content: '';
width: 18px;
position: absolute;
border-top: 1px solid #fff;
left: 50%;
margin-left: -9px;
}
&:before {
content: '';
width: 32px;
position: absolute;
border-top: 1px solid #fff;
margin-left: -16px;
left: 50%;
}
}
}
}
.top {
.ring {
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 10px;
left: 8px;
}
&:nth-child(3) {
top: 20px;
left: 16px;
&:after {
top: 17px;
}
&:before {
top: 22px;
}
}
}
}
.bottom {
.ring {
&:nth-child(1) {
bottom: 0;
left: 0;
}
&:nth-child(2) {
bottom: 10px;
left: 8px;
}
&:nth-child(3) {
bottom: 20px;
left: 16px;
&:after {
bottom: 17px;
}
&:before {
bottom: 22px;
}
}
}
}
.text {
text-align: center;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-size: 42px;
font-weight: 900;
color: #fff;
height: 55px;
vertical-align: middle;
display: table-cell;
width: ($circleWidth)*2;
position: relative;
left: 7px;
letter-spacing: 14px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.