LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}


.bun-top {
  position: relative;
  z-index: 6;
  display: block;
  width: 312px;
  height: 140px;
  margin-right: 200px;
  margin-bottom: -91px;
  margin-left: 200px;
  border-radius: 50% 50% 15% 15%;
  background-color: #f1db9b;
  background-image: -webkit-radial-gradient(circle farthest-corner at 77% 31%, #fcf7d7 2%, transparent 0), -webkit-radial-gradient(circle farthest-corner at 22% 28%, #fcf7d7 2%, transparent 0), -webkit-radial-gradient(circle farthest-corner at 45% 17%, #fcf7d7 2%, hsla(0, 0%, 100%, 0) 0), -webkit-radial-gradient(circle farthest-corner at 32% 11%, #fcf7d7 1%, hsla(0, 0%, 100%, 0) 2%), -webkit-radial-gradient(circle farthest-corner at 56% 7%, #fcf7d7 1%, hsla(0, 0%, 100%, 0) 2%), -webkit-radial-gradient(circle farthest-corner at 55% 24%, #fcf7d7 3%, hsla(0, 0%, 100%, 0) 0), -webkit-radial-gradient(circle farthest-corner at 67% 11%, #fcf7d7 2%, transparent 3%), -webkit-radial-gradient(circle farthest-corner at 50% -161%, rgba(150, 53, 8, .54), rgba(150, 53, 8, .59) 33%, rgba(150, 53, 8, .81) 66%, hsla(0, 0%, 100%, 0)), -webkit-radial-gradient(circle farthest-corner at 50% 50%, hsla(0, 0%, 100%, 0), rgba(178, 134, 8, .34) 62%, #b28608);
  background-image: radial-gradient(circle farthest-corner at 77% 31%, #fcf7d7 2%, transparent 0), radial-gradient(circle farthest-corner at 22% 28%, #fcf7d7 2%, transparent 0), radial-gradient(circle farthest-corner at 45% 17%, #fcf7d7 2%, hsla(0, 0%, 100%, 0) 0), radial-gradient(circle farthest-corner at 32% 11%, #fcf7d7 1%, hsla(0, 0%, 100%, 0) 2%), radial-gradient(circle farthest-corner at 56% 7%, #fcf7d7 1%, hsla(0, 0%, 100%, 0) 2%), radial-gradient(circle farthest-corner at 55% 24%, #fcf7d7 3%, hsla(0, 0%, 100%, 0) 0), radial-gradient(circle farthest-corner at 67% 11%, #fcf7d7 2%, transparent 3%), radial-gradient(circle farthest-corner at 50% -161%, rgba(150, 53, 8, .54), rgba(150, 53, 8, .59) 33%, rgba(150, 53, 8, .81) 66%, hsla(0, 0%, 100%, 0)), radial-gradient(circle farthest-corner at 50% 50%, hsla(0, 0%, 100%, 0), rgba(178, 134, 8, .34) 62%, #b28608);
  -webkit-transform: rotateX(-50deg) rotateY(0deg) rotateZ(0deg) translate(0px, 0px);
  transform: rotateX(-50deg) rotateY(0deg) rotateZ(0deg) translate(0px, 0px);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.burger-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-perspective: 1250px;
  perspective: 1250px;
}

.bun-bottom {
  position: relative;
  z-index: 1;
  display: block;
  width: 300px;
  height: 113px;
  margin-right: 200px;
  margin-left: 200px;
  border-radius: 20% 20% 50% 50%;
  background-color: #f1db9b;
  background-image: -webkit-radial-gradient(circle farthest-corner at 49% -192%, hsla(0, 0%, 100%, 0) 10%, rgba(150, 53, 8, .33) 78%, rgba(150, 53, 8, 0) 88%), -webkit-radial-gradient(circle farthest-corner at 50% 50%, hsla(0, 0%, 100%, 0), rgba(178, 134, 8, .34) 62%, #b28608);
  background-image: radial-gradient(circle farthest-corner at 49% -192%, hsla(0, 0%, 100%, 0) 10%, rgba(150, 53, 8, .33) 78%, rgba(150, 53, 8, 0) 88%), radial-gradient(circle farthest-corner at 50% 50%, hsla(0, 0%, 100%, 0), rgba(178, 134, 8, .34) 62%, #b28608);
  -webkit-transform: rotateX(-53deg) rotateY(0deg) rotateZ(0deg);
  transform: rotateX(-53deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.burger-meat {
  position: relative;
  z-index: 2;
  display: block;
  width: 317px;
  height: 111px;
  margin-right: 200px;
  margin-bottom: -68px;
  margin-left: 200px;
  border-radius: 38% 30% 35% 35%;
  background-color: #4e2c08;
  background-image: -webkit-repeating-linear-gradient(314deg, #341c03 11%, hsla(0, 0%, 100%, 0) 14%, rgba(52, 28, 3, .24) 37%, #341c03 39%), -webkit-linear-gradient(135deg, hsla(0, 0%, 100%, 0), rgba(53, 33, 12, .97) 32%, rgba(150, 53, 8, .05) 57%, #2e1a06 80%, #4e2c08);
  background-image: repeating-linear-gradient(136deg, #341c03 11%, hsla(0, 0%, 100%, 0) 14%, rgba(52, 28, 3, .24) 37%, #341c03 39%), linear-gradient(315deg, hsla(0, 0%, 100%, 0), rgba(53, 33, 12, .97) 32%, rgba(150, 53, 8, .05) 57%, #2e1a06 80%, #4e2c08);
  -webkit-transform: rotateX(-58deg) rotateY(0deg) rotateZ(0deg);
  transform: rotateX(-58deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.tomato {
  position: relative;
  z-index: 4;
  display: block;
  width: 317px;
  height: 94px;
  margin-right: 200px;
  margin-bottom: -164px;
  margin-left: 200px;
  border-radius: 38% 37% 45% 35%;
  background-color: #c13a0a;
  background-image: -webkit-radial-gradient(circle farthest-corner at 54% 185%, hsla(0, 0%, 100%, 0), hsla(52, 86%, 92%, .24) 41%, rgba(150, 53, 8, .05) 65%, #c1650a);
  background-image: radial-gradient(circle farthest-corner at 54% 185%, hsla(0, 0%, 100%, 0), hsla(52, 86%, 92%, .24) 41%, rgba(150, 53, 8, .05) 65%, #c1650a);
  -webkit-transform: rotateX(-58deg) rotateY(0deg) rotateZ(0deg);
  transform: rotateX(-58deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cheese {
  position: absolute;
  top: 9px;
  right: -14%;
  z-index: 3;
  display: block;
  width: 156px;
  height: 96px;
  margin-right: 200px;
  margin-left: 200px;
  border-bottom-right-radius: 21%;
  background-color: #ffcd40;
  background-image: none;
  -webkit-transform: skew(13deg, 16deg) rotate(17deg) rotateX(30deg) rotateY(0deg) rotateZ(0deg);
  transform: skew(13deg, 16deg) rotate(17deg) rotateX(30deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cheese2 {
  position: relative;
  left: -15%;
  z-index: 3;
  display: block;
  width: 98px;
  height: 103px;
  margin-right: 200px;
  margin-bottom: -46px;
  margin-left: 200px;
  border-bottom-right-radius: 9%;
  background-color: #ffcd40;
  background-image: none;
  -webkit-transform: skew(-49deg, -1deg) rotate(43deg) rotateX(-17deg) rotateY(0deg) rotateZ(0deg);
  transform: skew(-49deg, -1deg) rotate(43deg) rotateX(-17deg) rotateY(0deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.cheese-div {
  position: relative;
}

.lettuce {
  position: relative;
  z-index: 5;
  display: block;
  width: 327px;
  height: 115px;
  margin-right: 200px;
  margin-bottom: -111px;
  margin-left: 200px;
  border-radius: 38% 37% 45% 35%;
  background-image: -webkit-radial-gradient(circle closest-corner at 22% 66%, transparent 17%, rgba(84, 182, 19, .62) 28%, transparent 40%), -webkit-repeating-radial-gradient(circle farthest-corner at 32% -10%, transparent 10%, #53c10a 19%, transparent 25%, transparent 41%), -webkit-repeating-radial-gradient(circle closest-corner at 61% 134%, transparent, #53c10a 16%, transparent 29%, transparent 69%), -webkit-repeating-radial-gradient(circle farthest-side at 51% 38%, transparent 9%, #48a50a 18%, transparent 23%, transparent 48%), -webkit-repeating-radial-gradient(circle farthest-corner at 56% -10%, rgba(99, 141, 71, .08) 49%, #638d47 62%, #638d47 75%, transparent 82%);
  background-image: radial-gradient(circle closest-corner at 22% 66%, transparent 17%, rgba(84, 182, 19, .62) 28%, transparent 40%), repeating-radial-gradient(circle farthest-corner at 32% -10%, transparent 10%, #53c10a 19%, transparent 25%, transparent 41%), repeating-radial-gradient(circle closest-corner at 61% 134%, transparent, #53c10a 16%, transparent 29%, transparent 69%), repeating-radial-gradient(circle farthest-side at 51% 38%, transparent 9%, #48a50a 18%, transparent 23%, transparent 48%), repeating-radial-gradient(circle farthest-corner at 56% -10%, rgba(99, 141, 71, .08) 49%, #638d47 62%, #638d47 75%, transparent 82%);
  -webkit-transform: rotateX(-58deg) rotateY(0deg) rotateZ(0deg) skew(16deg, -9deg);
  transform: rotateX(-58deg) rotateY(0deg) rotateZ(0deg) skew(16deg, -9deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@media (max-width: 767px) {
  .bun-top {
    margin-right: 125px;
    margin-left: 125px;
  }
  .bun-bottom {
    margin-right: 125px;
    margin-left: 125px;
  }
  .burger-meat {
    margin-right: 125px;
    margin-left: 125px;
  }
  .tomato {
    margin-right: 125px;
    margin-left: 125px;
  }
  .lettice {
    margin-right: 125px;
    margin-left: 125px;
    -webkit-transform: rotateX(-58deg) rotateY(0deg) rotateZ(0deg) skew(16deg, -1deg);
    transform: rotateX(-58deg) rotateY(0deg) rotateZ(0deg) skew(16deg, -1deg);
  }
}

@media (max-width: 479px) {
  .bun-top {
    margin-right: auto;
    margin-left: auto;
  }
  .bun-bottom {
    margin-right: auto;
    margin-left: auto;
  }
  .burger-meat {
    margin-right: auto;
    margin-left: auto;
  }
  .tomato {
    margin-right: auto;
    margin-left: auto;
  }
  .lettice {
    margin-right: auto;
    margin-left: auto;
  }
}

Description

Wasn't sure if I will have a time for creating anything for this week :) But found a couple hours and made this little thing.
Term
Sat, 04/14/2018 - 20:45

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv