Free Photos
WordPress Themes

Daft Punk

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; } } }
JAVASCRIPT
Expand for more options Login