Art of Problem Solving

User:Yb30: Difference between revisions

Yb30 (talk | contribs)
No edit summary
Yb30 (talk | contribs)
No edit summary
Line 8: Line 8:
<h1 style=”border:1px solid blue”>Favorite Animal: Pangolin</h1>
<h1 style=”border:1px solid blue”>Favorite Animal: Pangolin</h1>


<style>
.penguin {


  /* Only change code below this line */
  --penguin-skin: gray;
  --penguin-belly: white;
  --penguin-beak: orange;
  /* Only change code above this line */


  position: relative;
<math>bk: rgb(10,10,10);
  margin: auto;
</math>bkT: rgba(10,10,10,0);
  display: block;
  margin-top: 5%;
  width: 300px;
  height: 300px;
}
 
.penguin-top {
  top: 10%;
  left: 25%;
  background: var(--penguin-skin, gray);
  width: 50%;
  height: 45%;
  border-radius: 70% 70% 60% 60%;
}
 
.penguin-bottom {
  top: 40%;
  left: 23.5%;
  background: var(--penguin-skin, gray);
  width: 53%;
  height: 45%;
  border-radius: 70% 70% 100% 100%;
}
 
.right-hand {
  top: 0%;
  left: -5%;
  background: var(--penguin-skin, gray);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 120% 30%;
  transform: rotate(45deg);
  z-index: -1;
}
 
.left-hand {
  top: 0%;
  left: 75%;
  background: var(--penguin-skin, gray);
  width: 30%;
  height: 60%;
  border-radius: 30% 30% 30% 120%;
  transform: rotate(-45deg);
  z-index: -1;
}
 
.right-cheek {
  top: 15%;
  left: 35%;
  background: var(--penguin-belly, white);
  width: 60%;
  height: 70%;
  border-radius: 70% 70% 60% 60%;
}
 
.left-cheek {
  top: 15%;
  left: 5%;
  background: var(--penguin-belly, white);
  width: 60%;
  height: 70%;
  border-radius: 70% 70% 60% 60%;
}
 
.belly {
  top: 60%;
  left: 2.5%;
  background: var(--penguin-belly, white);
  width: 95%;
  height: 100%;
  border-radius: 120% 120% 100% 100%;
}
 
.right-feet {
  top: 85%;
  left: 60%;
  background: var(--penguin-beak, orange);
  width: 15%;
  height: 30%;
  border-radius: 50% 50% 50% 50%;
  transform: rotate(-80deg);
  z-index: -2222;
}
 
.left-feet {
  top: 85%;
  left: 25%;
  background: var(--penguin-beak, orange);
  width: 15%;
  height: 30%;
  border-radius: 50% 50% 50% 50%;
  transform: rotate(80deg);
  z-index: -2222;
}
 
.right-eye {
  top: 45%;
  left: 60%;
  background: black;
  width: 15%;
  height: 17%;
  border-radius: 50%;
}
 
.left-eye {
  top: 45%;
  left: 25%;
  background: black;
  width: 15%;
  height: 17%;
  border-radius: 50%;
}
 
.sparkle {
  top: 25%;
  left: 15%;
  background: white;
  width: 35%;
  height: 35%;
  border-radius: 50%;
}


.blush-right {
<math>dg: rgb(50,50,50);
  top: 65%;
</math>dgT: rgba(50,50,50,0);
  left: 15%;
  background: pink;
  width: 15%;
  height: 10%;
  border-radius: 50%;
}


.blush-left {
<math>g: rgb(70,70,70);
  top: 65%;
</math>gT: rgba(70,70,70,0);
  left: 70%;
  background: pink;
  width: 15%;
  height: 10%;
  border-radius: 50%;
}


.beak-top {
<math>lg: rgb(120,120,120);
  top: 60%;
</math>lgT: rgba(120,120,120,0);
  left: 40%;
  background: var(--penguin-beak, orange);
  width: 20%;
  height: 10%;
  border-radius: 50%;
}


.beak-bottom {
<math>bl: rgb(20,20,120);
  top: 65%;
</math>blT: rgba(20,20,120,0);
  left: 42%;
  background: var(--penguin-beak, orange);
  width: 16%;
  height: 10%;
  border-radius: 50%;
}


body {
<math>p: rgb(25,20,25);
  background:#c6faf1;
</math>pT: rgba(25,20,25,0);
}


.penguin * {
.iphone {
   position: absolute;
  background:
    /* camera */
    radial-gradient(1em 1em at 6.25em 2.5em, <math>bl 0.2em, </math>g 0.21em, <math>g 49%, </math>gT 50%),
    /* speaker */
    radial-gradient(200% 100% at 100% 50%, <math>g 49%, </math>gT 50%) calc(50% + 0.125em - 2em - 0.25em) 2em / 0.5em 1em,
    radial-gradient(200% 100% at 0% 50%, <math>g 49%, </math>gT 50%) calc(50% + 0.125em + 2em + 0.25em) 2em / 0.5em 1em,
    linear-gradient(<math>g, </math>g) calc(50% + 0.125em) 2em / 4em 1em,
    /* screen */
    linear-gradient(<math>p, </math>p) calc(50% + 0.125em) 5em / 17.25em 30em,
    /* home button */
    radial-gradient(200% 200% at 100% 100%, <math>lgT 0.3em, </math>lg 0.35em, <math>lg 0.48em, </math>lgT 0.5em) calc(50% + 0.125em - 0.5em) 36.5em / 0.5em 0.5em,
    radial-gradient(200% 200% at 0% 100%, <math>lgT 0.3em, </math>lg 0.35em, <math>lg 0.48em, </math>lgT 0.5em) calc(50% + 0.125em + 0.5em) 36.5em / 0.5em 0.5em,
    radial-gradient(200% 200% at 100% 0%, <math>lgT 0.3em, </math>lg 0.35em, <math>lg 0.48em, </math>lgT 0.5em) calc(50% + 0.125em - 0.5em) 37.5em / 0.5em 0.5em,
    radial-gradient(200% 200% at 0% 0%, <math>lgT 0.3em, </math>lg 0.35em, <math>lg 0.48em, </math>lgT 0.5em) calc(50% + 0.125em + 0.5em) 37.5em / 0.5em 0.5em,
   
    linear-gradient(<math>lg 0.15em, </math>lgT 0.2em, <math>lgT 1.35em, </math>lg 1.35em) calc(50% + 0.125em) 36.5em / 0.5em 1.5em,
    linear-gradient(90deg,<math>lg 0.15em, </math>lgT 0.2em, <math>lgT 1.3em, </math>lg 1.35em) calc(50% + 0.125em) 37em / 1.5em 0.5em,
    radial-gradient(3em 3em at calc(50% + 0.125em) 37.25em, <math>bkT 1.25em, </math>bk 1.3em, <math>bk 49%, </math>bkT 50%),
    /* volume buttons */
    linear-gradient(<math>lgT 5em, </math>lg 5em, <math>lg 7.5em, </math>lgT 7.5em, <math>lgT 9.5em, </math>lg 9.5em, <math>lg 11em, </math>lgT 11em, <math>lgT 13em, </math>lg 13em, <math>lg 14.5em, </math>lgT 14.5em) 0 0 / 0.3em 100%,
    /* corners */
    radial-gradient(200% 200% at 100% 100%, <math>dg 1.45em, </math>lg 1.5em, <math>lg 50%, </math>lgT 51%) 0.25em 0 / 2em 2em,
    radial-gradient(200% 200% at 0% 100%, <math>dg 1.45em, </math>lg 1.5em, <math>lg 50%, </math>lgT 51%) 18em 0 / 2em 2em,
    radial-gradient(200% 200% at 100% 0%, <math>dg 1.45em, </math>lg 1.5em, <math>lg 50%, </math>lgT 51%) 0.25em 38em / 2em 2em,
    radial-gradient(200% 200% at 0% 0%, <math>dg 1.45em, </math>lg 1.5em, <math>lg 50%, </math>lgT 51%) 18em 38em / 2em 2em,
    /* body */
    linear-gradient(<math>lg 0.5em, </math>dg 0.55em, <math>dg 39.5em, </math>lg 39.55em) 2.25em 0 / 15.75em 40em,
    linear-gradient(90deg, <math>lg 0.5em, </math>dg 0.55em, <math>dg 19.175em, </math>lg 19.25em) 0.25em 2em / 19.75em 36em
    ;
 
  background-repeat: no-repeat;
  font-size: 10px;
  //outline: 1px solid #aaa;
  width: 20em;
   height: 40em;
}
}
</style>
<div class="penguin">
<div class="penguin-bottom">
  <div class="right-hand"></div>
  <div class="left-hand"></div>
  <div class="right-feet"></div>
  <div class="left-feet"></div>
</div>
<div class="penguin-top">
  <div class="right-cheek"></div>
  <div class="left-cheek"></div>
  <div class="belly"></div>
  <div class="right-eye">
    <div class="sparkle"></div>
  </div>
  <div class="left-eye">
    <div class="sparkle"></div>
  </div>
  <div class="blush-right"></div>
  <div class="blush-left"></div>
  <div class="beak-top"></div>
  <div class="beak-bottom"></div>
</div>
</div>


</center>
</center>

Revision as of 10:14, 22 February 2022

YB30's Wiki

Change the user count if you have visited this page for your first time.

1


Favorite Animal: Pangolin


$bk: rgb(10,10,10);$bkT: rgba(10,10,10,0);

$dg: rgb(50,50,50);$dgT: rgba(50,50,50,0);

$g: rgb(70,70,70);$gT: rgba(70,70,70,0);

$lg: rgb(120,120,120);$lgT: rgba(120,120,120,0);

$bl: rgb(20,20,120);$blT: rgba(20,20,120,0);

$p: rgb(25,20,25);$pT: rgba(25,20,25,0);

.iphone {

 background:
   /* camera */
   radial-gradient(1em 1em at 6.25em 2.5em, $bl 0.2em,$g 0.21em, $g 49%,$ (Error compiling LaTeX. Unknown error_msg)gT 50%),
   /* speaker */
   radial-gradient(200% 100% at 100% 50%, $g 49%,$ (Error compiling LaTeX. Unknown error_msg)gT 50%) calc(50% + 0.125em - 2em - 0.25em) 2em / 0.5em 1em,
   radial-gradient(200% 100% at 0% 50%, $g 49%,$ (Error compiling LaTeX. Unknown error_msg)gT 50%) calc(50% + 0.125em + 2em + 0.25em) 2em / 0.5em 1em,
   linear-gradient($g,$g) calc(50% + 0.125em) 2em / 4em 1em,
   /* screen */
   linear-gradient($p,$p) calc(50% + 0.125em) 5em / 17.25em 30em,
   /* home button */
   radial-gradient(200% 200% at 100% 100%, $lgT 0.3em,$lg 0.35em, $lg 0.48em,$lgT 0.5em) calc(50% + 0.125em - 0.5em) 36.5em / 0.5em 0.5em,
   radial-gradient(200% 200% at 0% 100%, $lgT 0.3em,$lg 0.35em, $lg 0.48em,$lgT 0.5em) calc(50% + 0.125em + 0.5em) 36.5em / 0.5em 0.5em,
   radial-gradient(200% 200% at 100% 0%, $lgT 0.3em,$lg 0.35em, $lg 0.48em,$lgT 0.5em) calc(50% + 0.125em - 0.5em) 37.5em / 0.5em 0.5em,
   radial-gradient(200% 200% at 0% 0%, $lgT 0.3em,$lg 0.35em, $lg 0.48em,$lgT 0.5em) calc(50% + 0.125em + 0.5em) 37.5em / 0.5em 0.5em,
   
   linear-gradient($lg 0.15em,$lgT 0.2em, $lgT 1.35em,$lg 1.35em) calc(50% + 0.125em) 36.5em / 0.5em 1.5em,
   linear-gradient(90deg,$lg 0.15em,$lgT 0.2em, $lgT 1.3em,$lg 1.35em) calc(50% + 0.125em) 37em / 1.5em 0.5em,
   radial-gradient(3em 3em at calc(50% + 0.125em) 37.25em, $bkT 1.25em,$bk 1.3em, $bk 49%,$ (Error compiling LaTeX. Unknown error_msg)bkT 50%),
   /* volume buttons */
   linear-gradient($lgT 5em,$lg 5em, $lg 7.5em,$lgT 7.5em, $lgT 9.5em,$lg 9.5em, $lg 11em,$lgT 11em, $lgT 13em,$lg 13em, $lg 14.5em,$lgT 14.5em) 0 0 / 0.3em 100%,
   /* corners */
   radial-gradient(200% 200% at 100% 100%, $dg 1.45em,$lg 1.5em, $lg 50%,$ (Error compiling LaTeX. Unknown error_msg)lgT 51%) 0.25em 0 / 2em 2em,
   radial-gradient(200% 200% at 0% 100%, $dg 1.45em,$lg 1.5em, $lg 50%,$ (Error compiling LaTeX. Unknown error_msg)lgT 51%) 18em 0 / 2em 2em,
   radial-gradient(200% 200% at 100% 0%, $dg 1.45em,$lg 1.5em, $lg 50%,$ (Error compiling LaTeX. Unknown error_msg)lgT 51%) 0.25em 38em / 2em 2em,
   radial-gradient(200% 200% at 0% 0%, $dg 1.45em,$lg 1.5em, $lg 50%,$ (Error compiling LaTeX. Unknown error_msg)lgT 51%) 18em 38em / 2em 2em,
   /* body */
   linear-gradient($lg 0.5em,$dg 0.55em, $dg 39.5em,$lg 39.55em) 2.25em 0 / 15.75em 40em,
   linear-gradient(90deg, $lg 0.5em,$dg 0.55em, $dg 19.175em,$lg 19.25em) 0.25em 2em / 19.75em 36em
   ;
 
 background-repeat: no-repeat;
 font-size: 10px;
 //outline: 1px solid #aaa;
 width: 20em;
 height: 40em;

}