HTML
<div class="helmet">
<div class="helmet__glass">
<div class="violet"></div>
<div class="indigo"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
<div class="orange"></div>
<div class="red"></div>
</div>
<div class="helmet__ear left"></div>
<div class="helmet__ear right"></div>
</div>
<div class="shape-cross left-1"></div>
<div class="shape-cross left-2"></div>
<div class="shape-cross right-1"></div>
<div class="shape-cross right-2"></div>
<div class="shape-heart left"></div>
<div class="shape-heart right"></div>
<div class="shape-triangle left-1"></div>
<div class="shape-triangle left-2"></div>
<div class="shape-triangle right-1"></div>
<div class="shape-triangle right-2"></div>
<div class="shape-square left"></div>
<div class="shape-square right-1"></div>
<div class="shape-square right-2"></div>
<div class="shape-circle left-1"></div>
<div class="shape-circle left-2"></div>
<div class="shape-circle right"></div>
SCSS
$color-black: #000000;
$color-grey: #AEA0C1;
$color-white: #FDFDFD;
$color-violet: #BC48FF;
$color-indigo: #7136F2;
$color-blue: #0086FF;
$color-green: #47F48D;
$color-yellow: #EDF236;
$color-orange: #FF7F00;
$color-red: #FF5F5F;
$bg-color-blue: lighten($color-blue, 15%);
$bg-color-yellow: lighten($color-yellow, 5%);
$one-seventh: 100%/7;
*, *:before, *:after {
box-sizing: border-box;
}
@media (max-width: 640px) {
body { font-size: 12px; }
}
@media (max-width: 1024px) {
body { font-size: 16px; }
}
@media (max-width: 1280px) {
body { font-size: 21px; }
}
@media (min-width: 1280px) {
body { font-size: 24px; }
}
body {
background: -webkit-linear-gradient($bg-color-blue 65%, $bg-color-yellow 65%);
height: 100vh;
margin: 0;
padding: 0;
&:before {
z-index: -1;
position: absolute;
content: '';
width: 20vw;
height: 6em;
top: calc(65vh - 3em);
left: 0;
border-radius: 50%;
background: $bg-color-blue;
box-shadow: 40vw 0 0 0 $bg-color-blue, 80vw 0 0 0 $bg-color-blue;
}
&:after {
z-index: -2;
position: absolute;
content: '';
width: 20vw;
height: 6em;
top: calc(65vh - 3em);
left: 20vw;
border-radius: 50% 50%;
background: $bg-color-yellow;
box-shadow: 40vw 0 0 0 $bg-color-yellow;
}
}
.helmet {
position: absolute;
top: calc(50% - 9em);
left: calc(50% - 7em);
width: 14em;
height: 20em;
border: 0.4em solid $color-black;
background: linear-gradient($color-white, $color-white 20%, $color-grey 20%, $color-grey 75%, transparent 75%), linear-gradient(65deg, $color-grey, $color-grey 15%, transparent 15%) , linear-gradient(-65deg, $color-grey, $color-grey 15%, $color-white 15%);
border-radius: 50% 50% 35% 35% / 35% 35% 45% 45%;
}
.helmet__ear{
position: absolute;
top: 5em;
width: 2.5em;
height: 9em;
border: 0.4em solid $color-black;
z-index: -1;
border-radius: 35% 35% 55% 55% / 30% 30% 15% 15%;
&.left {
left: -1.25em;
transform: rotate(-4deg);
background: linear-gradient(160deg, $color-grey, $color-grey 15%, transparent 15%), radial-gradient(ellipse at 45% 100%, $color-grey 55%, $color-white 55%);
}
&.right {
right: -1.25em;
transform: rotate(4deg);
background: linear-gradient(200deg, $color-grey, $color-grey 15%, transparent 15%), radial-gradient(ellipse at 55% 100%, $color-grey 55%, $color-white 55%);
}
}
.helmet__glass {
position: absolute;
left: calc(50% - 6em);
top: -0.1em;
width: 12em;
height: 16.5em;
border: 0.5em solid $color-black;
border-top-width: 1em;
background: $color-black;
border-radius: 50% 50% 40% 40% / 40% 40% 20% 20%;
overflow: hidden;
> div {
position: absolute;
width: 16em;
left: -2em;
height: $one-seventh;
border: 0.2em solid $color-black;
border-radius: 3em;
opacity: 0.9;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.violet {
top: 0;
background: $color-violet;
}
.indigo {
top: $one-seventh;
background: $color-indigo;
}
.blue {
top: 2* $one-seventh;
background: $color-blue;
}
.green {
top: 3* $one-seventh;
background: $color-green;
}
.yellow {
top: 4 * $one-seventh;
background: $color-yellow;
}
.orange {
top: 5 * $one-seventh;
background: $color-orange;
}
.red {
top: 6 * $one-seventh;
background: $color-red;
}
}
.shape-cross {
position: absolute;
width: 0.2em;
height: 1.2em;
border-radius: 0.1em;
left: calc(50% - 0.5em);
top: calc(65% - 7em);
&:before {
position: absolute;
content: '';
width: 1.2em;
height: 0.2em;
border-radius: 0.1em;
top: calc(50% - 0.1em);
left: calc(50% - 0.6em);
background: inherit;
}
&.left-1 {
background: $color-green;
margin-left: -10em;
margin-top: -5em;
transform: scale(0.8) rotate(45deg);
}
&.left-2 {
background: $color-blue;
margin-left: -11em;
margin-top: 1em;
}
&.right-1 {
background: $color-white;
margin-left: 9em;
margin-top: -5em;
transform: scale(1.2);
}
&.right-2 {
margin-left: 10em;
margin-top: 3em;
background: $color-green;
transform: scale(0.8);
}
}
.shape-square {
position: absolute;
width: 1em;
height: 1em;
left: calc(50% - 0.5em);
top: calc(65% - 8em);
&.left {
background: $color-white;
margin-left: -13em;
transform: scale(0.8) rotate(45deg);
}
&.right-1 {
margin-left: 10em;
background: $color-green;
transform: rotate(35deg);
}
&.right-2 {
margin-left: 11.5em;
margin-top: 5em;
background: rgba($color-blue, 0.7);
transform: rotate(25deg);
}
}
.shape-triangle {
position: absolute;
border-left: 0.4em solid transparent;
border-right: 0.4em solid transparent;
border-bottom : 0.8em solid red;
left: calc(50% - 0.4em);
top: calc(65% - 9em);
&.left-1 {
margin-left: -9em;
border-bottom-color: $color-green;
transform: rotate(-35deg);
}
&.left-2 {
margin-left: -9em;
transform: rotate(-35deg) scale(0.75);
border-bottom-color: $bg-color-blue;
}
&.right-1 {
margin-left: 12em;
margin-top: 3em;
border-bottom-color: $color-yellow;
transform: rotate(-35deg) scale(1.5);
}
&.right-2 {
margin-left: 12em;
margin-top: 3em;
transform: rotate(-35deg) scale(1.25);
border-bottom-color: $bg-color-blue;
}
}
.shape-circle {
position: absolute;
width: 1em;
height: 1em;
border-radius: 50%;
left: calc(50% - 0.5em);
top: calc(65% - 5em);
&.left-1 {
background: $color-green;
margin-left: -13em;
margin-top: 1em;
transform: scale(0.6);
}
&.left-2 {
background: transparent;
border: 0.1em solid $color-white;
margin-left: -9em;
}
&.right {
margin-left: 9em;
margin-top: -1em;
background: rgba($color-blue, 0.7);
}
}
.shape-heart {
position: absolute;
left: calc(50% - 0.5em);
top: calc(65% - 5em);
width: 3.5em;
height: 3.5em;
&:before, &:after {
position: absolute;
content: '';
left: calc(50% - 1em);
top: calc(50% - 1.5em);
background: red;
width: 2em;
height: 3em;
border-radius: 1.5em 1.5em 0 0;
}
&:before {
transform: translate(1em) rotate(-45deg);
transform-origin: 0 100%;
}
&:after {
transform: translate(-1em) rotate(45deg);
transform-origin :100% 100%;
}
&.left {
margin-left: -12em;
margin-top: -6em;
transform: scale(0.6);
&:before, &:after{
background: rgba($color-blue, 0.95);
}
}
&.right {
margin-left: 12em;
transform: scale(0.3) rotate(15deg);
&:before, &:after{
background: $color-white;
}
}
}
