iPhone 8+ Wireless Charging

HTML
<div class="charger"> <div class="iphone-8"> <div class="bazzel"> <div class="screen"> <div class="battery"></div> </div> </div> <div class="line"></div> <div class="header"> <div class="sensors"></div> </div> <div class="volume"></div> <div class="power"></div> <div class="home"></div> </div> <div class="wire"> </div> </div>
SCSS
// colors $bg-color: #333740; $iphone8-color: #DCC2AB; $iphone8-color-dark: darken($iphone8-color, 10%); $bazzel-color: #fff; $charger-color: #e6e7e9; $charger-inside-color: #cccacd; $charger-border-color: #DCC2AB; $charger-line-color: #a9aaae; $wire-shadow-color: #a7a6ab; $black-color: #000; $screen-color: #333230; $screen-border-color: #222; $battery-color: #4cda64; $header-color: #666; // sizes $body-padding: 1%; $iphone8-height: 698px; $iphone8-width: 336px; $iphone8-margin: -50px; $bazzel-height: 698px; $bazzel-width: 336px; $screen-height: 534px; $screen-width: 300px; $charger-height: 600px; $charger-width: 600px; $battery-height: 100px; $battery-width: 50px; $battery-charging-height: 48px; $battery-charging-width: 70px; $header-height: 36px; $header-width: 128px; $home-height: 46px; $home-width: 46px; $charging-animate: 9.2s; // mixin @mixin center{ display: flex; justify-content: center; } @mixin pseudo($position: absolute, $content: ""){ content: $content; position: $position; } @mixin reset{ *{ &, &::before, &::after { box-sizing: border-box; display: block; } } z-index: 1; position: relative; } @mixin wire($width, $height, $margin){ width: $width; height: $height; background: $charger-color; margin: $margin; box-shadow: inset 0px 5px 5px $wire-shadow-color, inset 0px -5px 5px $wire-shadow-color; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-top: 0.5px solid $black-color; border-bottom: 0.5px solid $black-color; } @mixin button($height, $width){ background: $iphone8-color-dark; height: $height; width: $width; } @mixin sensors($height, $width, $left, $top, $margin){ height: $height; width: $width; left: $left; top: $top; margin: $margin; } // keyframes @keyframes charging { from { width: 0px; } to { width: 98px; } } /*------------------------------------------------*/ body{ @include center; background: $bg-color; overflow-x: hidden; padding-top: $body-padding; } .charger{ @include center; width: $charger-height; height: $charger-height; background: $charger-color; border-radius: 50%; margin-top: 100px; position: absolute; border: 8px solid $charger-border-color; &::before{ @include pseudo; height: 400px; width: 400px; border-radius: 50%; border: 1px solid $charger-inside-color; margin-top: 100px; } &::after{ @include pseudo; height: 590px; width: 590px; border-radius: 50%; border: 1px solid $charger-line-color; margin-top: 1px; } .wire{ @include wire(15px, 45px, 280px 0 0 6px); position: absolute; left: 600px; &::after{ @include pseudo; @include wire(750px, 22.5px, 12px 0 0 15px); } } } .iphone-8 { @include reset; height: $iphone8-height; width: $iphone8-width; margin-top: $iphone8-margin; .bazzel { height: $bazzel-height; width: $bazzel-width; background: $bazzel-color; border-radius: 54px; box-shadow: inset 0 0 0 2px $iphone8-color-dark, inset 0 0 0 6px $iphone8-color; padding: 82px 18px; } .screen { @include center; height: $screen-height; width: $screen-width; background-color: $screen-color; background-position: center center; background-size: cover; border: 2px solid $screen-border-color; border-radius: 4px; position: relative; .battery{ width: $battery-height; height: $battery-width; margin-top: 80%; border: 1px solid white; // charging &::before{ height: 48px; width: 70px; @include pseudo; background: $battery-color; animation-duration: $charging-animate; animation-name: charging; animation-iteration-count: infinite; } &::after{ @include pseudo; height: 15px; width: 5px; background: white; margin-left: 100px; margin-top: 15px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } } } .line { &::after, &::before { @include pseudo; border: solid rgba(#333, .15); border-width: 0 6px; height: 5px; left: 0; width: 100%; z-index: 9; } &::after { top: 55px; } &::before { bottom: 55px; } } .header { height: $header-height; width: $header-width; left: 50%; margin-left: -64px; position: absolute; top: 26px; z-index: 199; &::after { @include pseudo; height: 5px; width: 60px; background: $header-color; border-radius: 2.5px; left: 50%; margin-left: -30px; margin-top: -2.5px; top: 50%; } } .sensors { &::after, &::before { @include pseudo; background: $header-color; border-radius: 50%; } &::after { @include sensors(8px, 8px, 50%, 0, -4px 0 0 -4px); } &::before { @include sensors(10px, 10px, 0, 50%, -5px 0 0 0); } } .volume { left: -2px; top: 82px; position: absolute; @include button(24px, 3px); &::after, &::before { left: 0; @include pseudo; @include button(45px, 3px); } &::after { top: 50px; } &::before { top: 106px; } } .power { right: -2px; top: 160px; position: absolute; @include button(80px, 3px); } .home { height: $home-height; width: $home-width; border-radius: 50%; margin-left: -23px; left: 50%; bottom: 20px; position: absolute; border: 2px solid $iphone8-color-dark; } }
JAVASCRIPT
Expand for more options Login