Skip to content

Instantly share code, notes, and snippets.

@MyCool-DJ

MyCool-DJ/index.html

Created January 27, 2023 07:42
Show Gist options
  • Save MyCool-DJ/c5847bb72f63deabd9f0bce5bf900561 to your computer and use it in GitHub Desktop.
Save MyCool-DJ/c5847bb72f63deabd9f0bce5bf900561 to your computer and use it in GitHub Desktop.
Download ZIP
Xbox One Controller
Raw
index.html
<div id="controller">
<div class="top_left"></div>
<div class="top_right"></div>
<div class="top_shape"></div>
<div class="corners">
<div class="right"></div>
</div>
<div class="logo">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 746 746">
<defs>
<style>
.a {
fill: url(#a);
}
.b {
fill: url(#b);
}
.c {
fill: url(#c);
}
.d {
fill: url(#d);
}
.e {
fill: url(#e);
}
.f {
fill: url(#f);
}
</style>
<radialGradient id="a" cx="373" cy="373" r="373" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#4d4d4d" />
<stop offset="1" />
</radialGradient>
<linearGradient id="b" x1="60.97" y1="336.01" x2="685.97" y2="336.01" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" />
<stop offset="0.87" stop-color="#fff" />
</linearGradient>
<linearGradient id="c" x1="60.47" y1="417.76" x2="289.47" y2="417.76" xlink:href="#b" />
<linearGradient id="d" x1="495.93" y1="458.63" x2="590.14" y2="407.31" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" />
<stop offset="1" stop-color="#fff" />
</linearGradient>
<linearGradient id="e" x1="269.47" y1="210.6" x2="306.24" y2="166.18" xlink:href="#b" />
<linearGradient id="f" x1="471.09" y1="210.68" x2="415.94" y2="163.96" xlink:href="#d" />
</defs>
<title>Untitled-3</title>
<circle class="a" cx="373" cy="373" r="373" />
<polygon class="b" points="685.97 558.25 374.97 352.74 373.47 353.73 373.47 353.24 371.97 352.25 60.97 557.75 289.97 277.75 130.48 113.78 371.38 221.06 373.47 220.15 373.47 220.63 375.56 221.56 616.46 114.27 456.97 278.25 685.97 558.25" />
<polygon class="c" points="289.47 277.75 289.47 406.76 60.47 557.75 289.47 277.75" />
<polyline class="d" points="685.47 557.75 456.47 277.75 456.47 406.59" />
<polyline class="e" points="130.47 113.75 373.47 349.75 373.47 221.75" />
<polyline class="f" points="375.47 221.75 616.47 113.75 375.47 349.75" />
</svg>
</div>
<div class="main_logo_cont">
<div class="middle"></div>
</div>
<div class="bumpers">
</div>
<div class="buttons_joysticks">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="button_dpad">
<div class="inner">
<div class="up_down"></div>
<div class="left_right"></div>
</div>
</div>
<div class="buttons_middle">
<div class="view">
<div class="rect"></div>
<div class="rect"></div>
</div>
<div class="menu"></div>
</div>
<div class="buttons_letters">
<div class="btn-y">
<div class="shadow"></div>
<div class="y">Y</div>
</div>
<div class="btn-x">
<div class="shadow"></div>
<div class="x">X</div>
</div>
<div class="btn-a">
<div class="shadow"></div>
<div class="a">A</div>
</div>
<div class="btn-b">
<div class="shadow"></div>
<div class="b">B</div>
</div>
</div>
<div class="over_bottom"></div>
<div class="bottom"></div>
<div class="bottom_middle"></div>
</div>
Raw
style.scss
$t: transparent;
$bk: #FF4C4D;
$white:#fff;
@mixin for-phone-only {
@media (max-width: 599px) {
@content;
}
}
@mixin for-tablet-portrait-up {
@media (min-width: 600px) {
@content;
}
}
@mixin for-tablet-landscape-up {
@media (min-width: 900px) {
@content;
}
}
@mixin for-desktop-up {
@media (min-width: 1200px) {
@content;
}
}
@mixin for-big-desktop-up {
@media (min-width: 1800px) {
@content;
}
}
*{
box-sizing: border-box;
}
body{
@include for-phone-only {
font-size: 6px;
}
font-family: "Mukta", sans-serif;
font-size: 10px;
background:
$bk,
;
background-repeat: no-repeat;
background-position: 50% 4%;
}
#controller {
width: 68em;
height: 45em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background:
// BUTTONS
// RIGHT
rgba(pink,.0)
// $cbk
;
background-repeat: no-repeat;
&:after{
content: '';
position: absolute;
width: 100%;
height: 100%;
background:
// TOP MIDDLE
linear-gradient(
rgba($white,1) 45%, rgba($white,1) 41%
)
50% 8% / 40% 8em,
linear-gradient(
rgba($bk,1) 45%, rgba($bk,1) 41%
)
0% 0% / 100% 10em,
linear-gradient(
to bottom,
rgba(#a9a9a9,.3), rgba($white,1)
)
50% 6.5% / 40% 2em,
linear-gradient(
rgba($bk,1) 45%, rgba($bk,1) 41%
)
13.2% 0% / 100% 2.2em,
// TOP LEFT
radial-gradient(
93% 98% at 50% 100%,
rgba(#fff,1) 50%,
rgba($t,.0) 52%
)
28% 1% / 6.5em 5em,
// BOTTOM PINK LINE
linear-gradient(
rgba($bk,1) 45%, rgba($bk,1) 41%
)
13.2% 100% / 100% 1.1em,
// // END BOTTOM
// RIGHT
radial-gradient(
93% 98% at 0% 20%,
rgba(#EFEFEF,.0) 50%,
rgba($bk,1) 52%
)
110% 125% / 15em 22em,
// HAS SHADOW
linear-gradient(
-107deg,
rgba($bk,.5) 45%, rgba(#333,.2) 45%,
rgba(#333, 0) 50%
)
100% 79.5% / 13em 45em,
linear-gradient(
-107deg,
rgba($bk,1) 45%,
rgba(#EFEFEF,.0) 41%
)
100% 79.5% / 13em 45em,
// LEFT
radial-gradient(
93% 98% at 100% 20%,
rgba($t,.0) 50%,
rgba($bk,1) 52%
)
-10% 125% / 15em 22em,
// HAS SHADOW
linear-gradient(
107deg,
rgba($bk,.5) 45%, rgba(#333,.2) 45%,
rgba(#333, 0) 50%
)
0% 79.5% / 13em 45em,
linear-gradient(
107deg,
rgba($bk,1) 45%, rgba($t,.0) 41%
)
0% 79.5% / 13em 45em,
rgba($white,1)
;
background-repeat: no-repeat;
}
}
.top_left{
width: 13em;
height: 13em;
position: absolute;
top: 7%;
left: 29%;
border-radius: 50%;
transform: translate(-50%,0) rotate(-23deg);
background:
radial-gradient(
93% 98% at 50% 100%,
rgba($t,0) 50%,
rgba(#fff,.5) 52%
)
28% 1% / 15em 5em,
;
background-repeat: no-repeat;
z-index: 2;
&:after{
content: "";
width: 19em;
height: 13.5em;
position: absolute;
top: -4%;
left: 32%;
border-radius: 50%;
transform: translate(-50%,0) rotate(-8deg);
background:
radial-gradient(
rgba($white,1) 42%, $t 80%) 28% 4% / 22em 10em,
radial-gradient($t 3%,rgba(#a9a9a9,.8) 42%, $t 80%) 28% 1% / 100% 7em,
$white
;
background-repeat: no-repeat;
}
}
.top_right{
width: 10em;
height: 10em;
position: absolute;
top: 7.5%;
left: 75%;
border-radius: 50%;
border: 2px solid orange;
// transform-origin: top left;
transform: translate(-50%,0) rotate(23deg);
background:
radial-gradient(
93% 98% at 50% 100%,
rgba($t,0) 50%,
rgba(#fff,.5) 52%
)
28% 1% / 15em 5em,
;
background-repeat: no-repeat;
z-index: 2;
&:after{
content: "";
width: 15em;
height: 11em;
position: absolute;
top: -4%;
left: 38%;
border-radius: 50%;
transform: translate(-50%,0) rotate(-10deg);
background:
radial-gradient(
rgba($white,1) 42%, $t 80%) 28% 4% / 22em 10em,
radial-gradient($t 3%,rgba(#a9a9a9,.8) 42%, $t 80%) 28% 1% / 17em 7em,
$white
;
background-repeat: no-repeat;
}
&:before{
content: "";
width: 19em;
height: 13.5em;
position: absolute;
top: -4%;
left: 40%;
border-radius: 50%;
transform: translate(-50%,0) rotate(-10deg);
background:
radial-gradient(
rgba($white,1) 42%, $t 80%) 28% 4% / 22em 10em,
radial-gradient($t 3%,rgba(#a9a9a9,.8) 42%, $t 80%) 28% 1% / 17em 7em,
$white
;
background-repeat: no-repeat;
}
}
.top_shape{
z-index: 3;
width: 14em;
height: 6.4em;
position: absolute;
top: 6.2%;
left: 49.5%;
border-radius: 20px;
transform: translate(-50%,0);
background:
linear-gradient(to bottom,
rgba($white,1) 4%, $t 13%
),
rgba($white,1),
rgba(#f5f5f5,1);
background-repeat: no-repeat;
&:after{
content: '';
width: 8em;
height: 6.4em;
position: absolute;
top: 3%;
left: 15.5%;
border-radius: 20px;
transform: translate(-50%,0) skew(40deg);
background:
linear-gradient(to right,
rgba(#A9A9A9,.2) 4%, $t 13%,
#f5f5f5
),
rgba(#f5f5f5,1),
;
background-repeat: no-repeat;
}
&:before{
content: '';
width: 8em;
height: 6.4em;
position: absolute;
top: 3%;
left: 84%;
border-radius: 20px;
transform: translate(-50%,0) skew(-40deg);
background:
linear-gradient(to left,
rgba(#A9A9A9,.2) 4%, $t 13%,
#f5f5f5
),
rgba(#f5f5f5,1),
;
background-repeat: no-repeat;
}
}
.over_bottom{
z-index: 2;
width: 27em;
height: 14.5em;
position: absolute;
top: 85.5%;
left: 50%;
transform: translate(-50%,-50%);
background: rgba(#B9B9B9,1);
border-radius: 20px;
background-repeat: no-repeat;
&:after{
content: '';
width: 20em;
height: 14.5em;
position: absolute;
top: -.3%;
left: 91%;
transform: translate(-50%,0%) skew(40deg);
background:
linear-gradient(to left,
#A9A9A9 1%, $t 3%
),
rgba(#B9B9B9,1);
border-radius: 20px;
background-repeat: no-repeat;
}
&:before{
content: '';
width: 20em;
height: 14.5em;
position: absolute;
top: -.3%;
left: 10%;
transform: translate(-50%,0%) skew(-40deg);
background:
linear-gradient(to right,
#A9A9A9 1%, $t 3%
),
rgba(#B9B9B9,1);
border-radius: 20px;
background-repeat: no-repeat;
}
}
.bottom{
z-index: 2;
width: 28em;
height: 13em;
position: absolute;
top: 85.5%;
left: 50%;
transform: translate(-50%,-50%);
background: $bk;
border-radius: 20px;
background-repeat: no-repeat;
&:after{
content: '';
width: 15em;
height: 13em;
position: absolute;
top: 0%;
left: 92%;
transform: translate(-50%,0%) skew(40deg);
background: $bk;
border-radius: 20px;
background-repeat: no-repeat;
}
&:before{
content: '';
width: 15em;
height: 13em;
position: absolute;
top: 0%;
left: 8.5%;
transform: translate(-50%,0%) skew(-40deg);
background: $bk;
border-radius: 20px;
background-repeat: no-repeat;
}
}
.buttons_letters{
width: 15em;
height: 15em;
position: absolute;
top: 11%;
left: 62.5%;
background-repeat: no-repeat;
z-index: 3;
.btn-y{
position: absolute;
width: 4em;
height: 4em;
border:1px solid #333;
background:
radial-gradient(
93% 98% at 100% 20%,
rgba(#F7F7F7,.3) 50%,
rgba($bk,0) 52%
)
110% 125% / 100% 100%,
#333;
background-repeat: no-repeat;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
top: 10%;
left: 39%;
.shadow{
position: absolute;
width: 4em;
height: 4em;
background: gray;
z-index:-1;
border-radius: 50%;
top: .2em;
left: -.2em;
}
.y{
// top: 7%;
// left: 43%;
position: absolute;
font-size: 4em;
color: #FDE51F;
}
}
.btn-x{
border:1px solid #333;
position: absolute;
width: 4em;
height: 4em;
background:
radial-gradient(
93% 98% at 113% 20%,
rgba(#F7F7F7,.3) 50%,
rgba($bk,0) 52%
)
130% 125% / 100% 100%,
#333;
background-repeat: no-repeat;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
top: 37%;
left: 10%;
.shadow{
position: absolute;
width: 4em;
height: 4em;
background: gray;
z-index:-1;
border-radius: 50%;
top: .2em;
left: -.2em;
}
.x{
// top: 7%;
// left: 43%;
position: absolute;
font-size: 4em;
color: #1AA4EE;
}
}
.btn-a{
position: absolute;
width: 4em;
height: 4em;
border:1px solid #333;
background:
radial-gradient(
93% 98% at 100% 10%,
rgba(#F7F7F7,.3) 50%,
rgba($bk,0) 52%
)
110% 125% / 100% 100%,
#333;
background-repeat: no-repeat;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
top: 66%;
left: 39%;
.shadow{
position: absolute;
width: 4em;
height: 4em;
background: gray;
z-index:-1;
border-radius: 50%;
top: .2em;
left: -.2em;
}
.a{
// top: 7%;
// left: 43%;
position: absolute;
font-size: 4em;
color: #99CA63;
}
}
.btn-b{
position: absolute;
width: 4em;
height: 4em;
border:1px solid #333;
background:
radial-gradient(
93% 98% at 80% 20%,
rgba(#F7F7F7,.3) 50%,
rgba($bk,0) 52%
)
110% 125% / 100% 100%,
#333;
background-repeat: no-repeat;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
top: 37%;
left: 67%;
.shadow{
position: absolute;
width: 4em;
height: 4em;
background: gray;
z-index:-1;
border-radius: 50%;
top: .2em;
left: -.2em;
}
.b{
// top: 7%;
// left: 43%;
position: absolute;
font-size: 4em;
color: #E52A27;
}
}
}
.buttons_joysticks{
z-index: 3;
width: 50em;
height: 24em;
position: absolute;
top: 42%;
left: 50%;
transform:translate(-50%,-50%);
background-repeat: no-repeat;
.left{
width: 9em;
height: 9em;
position: absolute;
top: 4.5%;
left: 8.2%;
border-radius: 50%;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#eee,.2) 30%,
rgba(#252525,1) ,
rgba(#eee,.2) 50%,
rgba($bk,0) 51%
)
50% 50% / 6.8em 6.8em,
radial-gradient(
100% 100% at 50% 50%,
rgba(#252525,1) 50%,
rgba($bk,0) 51%
)
50% 50% / 7.8em 7.8em,
rgba(#fff,.4);
background-repeat: no-repeat;
box-shadow:
0px 0px 15px 10px rgba(0,0,0,0.2),
;
&:after{
content: '';
width: 5.7em;
height: 5.7em;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#333,.7) 30%,
rgba(#252525,1) ,
rgba(#eee,.2) 50%,
rgba($bk,0) 51%
)
50% 50% / 5.7em 5.7em,
conic-gradient(from 90deg, #909090, #333, #909090, #333, #909090),
radial-gradient(
100% 100% at 50% 50%,
rgba( #696969,1) 50%,
rgba($bk,.5) 51%
)
50% 50% / 7.5em 7.5em,
;
position: absolute;
}
}
.right{
width: 9em;
height: 9em;
position: absolute;
top: 44%;
left: 58%;
border-radius: 50%;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#eee,.2) 30%,
rgba(#252525,1) ,
rgba(#eee,.2) 50%,
rgba($bk,0) 51%
)
50% 50% / 6.8em 6.8em,
radial-gradient(
100% 100% at 50% 50%,
rgba(#252525,1) 50%,
rgba($bk,0) 51%
)
50% 50% / 7.8em 7.8em,
rgba(#fff,.4);
background-repeat: no-repeat;
box-shadow:
0px 0px 15px 10px rgba(0,0,0,0.2),
;
&:after{
content: '';
width: 5.7em;
height: 5.7em;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#333,.7) 30%,
rgba(#252525,1) ,
rgba(#eee,.2) 50%,
rgba($bk,0) 51%
)
50% 50% / 5.7em 5.7em,
conic-gradient(from 90deg, #909090, #333, #909090, #333, #909090),
radial-gradient(
100% 100% at 50% 50%,
rgba( #696969,1) 50%,
rgba($bk,.5) 51%
)
50% 50% / 7.5em 7.5em,
;
position: absolute;
}
}
}
.button_dpad{
z-index: 3;
width: 12em;
height: 12em;
position: absolute;
top: 51%;
left: 38%;
transform:translate(-50%,-50%);
display: flex;
justify-content: center;
align-items: center;
.inner{
position: relative;
width: 11.5em;
height: 11.5em;
border-radius: 50%;
background:
radial-gradient(
100% 100% at 50% 50%,
rgba(#fff,.1) 20%,
rgba( #E8E8E8,.9),
);
background-repeat: no-repeat;
.up_down{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 3.5em;
height: 9.7em;
background: rgba(#282828,1);
border-radius: 8px;
&:after{
content: '';
width: 2.8em;
border-radius: 8px;
height: 9em;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
background:
radial-gradient(
93% 98% at 100% 50%,
rgba(#d9d9d9,.051) 50%,
rgba(#d9d9d9,.08) 52%
)
-22% 125% / 3em 3em,
linear-gradient(
to right,
rgba(#fff,.45),
rgba(#242424,.00),
)
100% 0% / .1em 1em,
linear-gradient(
to right,
#989898 5%, rgba(#636363,.3) 6% ),
linear-gradient(
-120deg,
rgba($t,0) 45%,
rgba(#000,1) 41%
)
0% 5% / 1em 2.4em,
linear-gradient(
120deg,
rgba(#000,1) 45%,
rgba($t,0) 41%
)
0% 93% / 1em 2em,
linear-gradient(
rgba(#000,1) 45%,
rgba(#000,1) 41%
)
0% 50% / 1em 4em,
linear-gradient(
150deg,
rgba(#fff,.3),
rgba(#000,.3) ,
rgba(#333,.3) ,
rgba(#242424,.00),
)
190% 15% / 3em 3em,
;
background-repeat: no-repeat;
}
}
.left_right{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 9.7em;
height: 3.5em;
background:
linear-gradient(#333,#333) 60% 000% / 1.5em .22em,
linear-gradient(#313131,#313131) 60% 100% / 1.5em .4em,
linear-gradient(
to right,
#0A0A0A 50%, rgba(#585858,1)
)
;
background-repeat: no-repeat;
border-radius: 8px;
&:after{
content: '';
width: 9.2em;
border-radius: 8px;
height: 3em;
position: absolute;
border-left: 2px solid #333;
border-right: 3px solid #000;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
background:
linear-gradient(
rgba(#fff,.2),
rgba(#fff,.2))
70% 0% / .3em .2em,
linear-gradient(
rgba(#fff,.2),
rgba(#fff,.2))
100% 100% / 1.5em .2em,
linear-gradient(
rgba(#fff,.2),
rgba(#fff,.2))
21% 100% / 1.5em .2em,
linear-gradient(
to right,
rgba(#fff,.14),
rgba(#fff,.0),
)
100% 500% / 4.6em 3em,
linear-gradient(
to left,
rgba(#0A0A0A,.6),
rgba(#d9d9d9,.0),
)
100% 500% / 1em 3em,
linear-gradient(
to right,
rgba(#fff,.4) 10%,
rgba(#d9d9d9,.0),
)
0% 50% / 1em 3em,
linear-gradient(
-120deg,
rgba($t,0) 45%,
rgba(#000,1) 41%
)
0% 5% / 1em 2.4em,
linear-gradient(
120deg,
rgba(#000,1) 45%,
rgba($t,0) 41%
)
0% 93% / 1em 2em,
linear-gradient(
rgba(#000,1) 45%,
rgba(#000,1) 41%
)
0% 50% / 1em 4em,
;
background-repeat: no-repeat;
}
}
}
}
.buttons_middle{
.view{
z-index: 3;
width: 2.8em;
height: 2.8em;
background: rgba(red,.0);
border:1.3px solid black;
position:absolute;
top: 24.6%;
left: 40.9%;
border-radius: 50%;
box-shadow: -2px 4px 2px rgba(#000,.2);
.rect{
z-index: 3;
width: 1.3em;
height: .9em;
border:1.5px solid #000;
position:absolute;
top: 25%;
left: 23%;
&:nth-of-type(2){
width: 1.4em;
height: 1.4em;;
background: #fff;
border: none;
top: 35%;
left: 30%;
border-radius: 50%;
&:before{
width: 1em;
height: .6em;
border:1.5px solid #000; top: 10%;
left: 8%;
content: '';
position: absolute;
background: #fff;
}
}
}
}
.menu{
z-index: 3;
width: 2.8em;
height: 2.8em;
border:1.3px solid black;
position:absolute;
top: 24.6%;
left: 54.9%;
border-radius: 50%;
box-shadow: -2px 4px 2px rgba(#000,.2);
background:
linear-gradient(
to right,
rgba(#000,1),
rgba(#000,1),
)
50% 28% / 1.2em .2em,
linear-gradient(
to right,
rgba(#000,1),
rgba(#000,1),
)
50% 47% / 1.2em .2em,
linear-gradient(
to right,
rgba(#000,1),
rgba(#000,1),
)
50% 70% / 1.2em .2em,
;
background-repeat: no-repeat;
}
}
.bumpers_blockers_top{
position:absolute;
width: 61em;
top: 8%;
height: 15em;
left:50%;
transform: translate(-50%,-50%);
.left{
width: 20em;
height: 15em;
position:absolute;
transform-origin: bottom left;
transform: rotate(-17deg);
top: -3.6%;
left: 15%;
background:
radial-gradient(
120% 100% at 50% 100%,
// orange,
rgba(#333,1) 50%,
rgba($t,.0) 52%
)
100% 81% / 14em 10em,
radial-gradient(
120% 100% at 50% 100%,
// orange,
rgba(#333,1) 50%,
rgba($t,.0) 52%
)
0% 50% / 17em 10em,
;
background-repeat: no-repeat;
}
.right{
width: 20em;
height: 15em;
position:absolute;
transform-origin: bottom left;
transform: rotate(16deg);
// top: -5%;
top: -35.5%;
left: 58%;
background:
radial-gradient(
120% 112% at 50% 100%,
// orange,
rgba(#333,1) 50%,
rgba($t,.0) 52%
)
100% 70% / 14em 10em,
radial-gradient(
120% 100% at 50% 100%,
// orange,
rgba(#333,1) 50%,
rgba($t,.0) 52%
)
24% 44.5% / 16em 10em,
radial-gradient(
120% 100% at 50% 100%,
// orange,
rgba(#333,1) 50%,
rgba($t,.0) 52%
)
0% 50% / 17em 10em,
;
background-repeat: no-repeat;
}
.middle{
width: 18em;
height: 10em;
position:absolute;
top: 20%;
left:50%;
transform: translate(-50%,0);
background:
linear-gradient(
rgba(#333,1) 45%, rgba(#333,1) 41%
)
0% 33% / 18em 4em,
;
background-repeat: no-repeat;
}
}
.bumpers_blockers_bottom{
.left{
width: 20em;
height: 15em;
position:absolute;
transform-origin: bottom left;
transform: rotate(-17deg);
// top: -5%;
top: -3.6%;
left: 15%;
background:
radial-gradient(
120% 100% at 50% 100%,
// orange,
rgba($white,1) 50%,
rgba($t,.0) 52%
)
100% 75% / 13em 10em,
radial-gradient(
120% 100% at 50% 100%,
// orange,
rgba($white,1) 50%,
rgba($t,.0) 52%
)
24% 44.5% / 16em 10em,
radial-gradient(
120% 100% at 50% 100%,
// orange,
rgba($white,1) 50%,
rgba($t,.0) 52%
)
58% 44.5% / 13em 10em,
radial-gradient(
120% 100% at 50% 100%,
// orange,
rgba($white,1) 50%,
rgba($t,.0) 52%
)
0% 50% / 17em 10em,
;
background-repeat: no-repeat;
}
.right{
width: 20em;
height: 15em;
position:absolute;
transform-origin: bottom left;
transform: rotate(16deg);
// top: -5%;
top: -15.5%;
left: 58%;
background:
radial-gradient(
120% 100% at 50% 100%,
// orange,
rgba($white,1) 50%,
rgba($t,.0) 52%
)
100% 75% / 13em 10em,
radial-gradient(
120% 100% at 50% 100%,
// orange,
rgba(#fff,1) 50%,
rgba($t,.0) 52%
)
24% 44.5% / 16em 10em,
radial-gradient(
120% 100% at 50% 100%,
// orange,
rgba($white,1) 50%,
rgba($t,.0) 52%
)
58% 44.5% / 13em 10em,
radial-gradient(
120% 100% at 50% 100%,
// orange,
rgba($white,1) 50%,
rgba($t,.0) 52%
)
0% 50% / 17em 10em,
;
background-repeat: no-repeat;
}
.middle{
width: 18em;
height: 10em;
position:absolute;
top: 2%;
left:50%;
transform: translate(-50%,0);
background:
linear-gradient(
rgba($white,1) 45%, rgba($white,1) 41%
)
0% 33% / 18em 4em,
;
background-repeat: no-repeat;
}
}
.main_logo_cont{
width: 20em;
height: 8em;
position: absolute;
top:6%;
left: 35%;
transfrom: translate(-50%,-50%);
z-index:4;
.middle{
width: 14em;
height: 5em;
position: absolute;
top: 14%;
left: 85.6%;
transform: translate(-50%-50%);
background:
linear-gradient(
rgba($white,1) 60%, rgba(#333,.1)
)
58% 100% / 92% 2em,
rgba($white,.2)
;
background-repeat: no-repeat;
border-radius: 15px;
}
}
.logo{
width: 5em;
height: 5em;
position: absolute;
z-index:5;
left: 50%;
top:11.7%;
transform: translate(-50%,-50%);
border-radius: 50%;
background-repeat: no-repeat;
svg{
position: absolute;
top: 10%;
}
}
.bottom_middle{
width: 100%;
height: 8em;
position: absolute;
top: 106%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 4;
// border:1px solid green;
background:
linear-gradient(
to bottom,
rgba($bk,1), rgba($bk,1)
)
50% 6.5% / 100% 100%,
;
background-repeat: no-repeat;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment