Art of Problem Solving
AoPS Online
Math texts, online classes, and more
for students in grades 5-12.
Visit AoPS Online ‚
Books for Grades 5-12 Online Courses
Beast Academy
Engaging math books and online learning
for students ages 6-13.
Visit Beast Academy ‚
Books for Ages 6-13 Beast Academy Online
AoPS Academy
Small live classes for advanced math
and language arts learners in grades 2-12.
Visit AoPS Academy ‚
Find a Physical Campus Visit the Virtual Campus

Difference between revisions of "User:Yb30"
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 11: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;

}

Retrieved from "https://artofproblemsolving.com/wiki/index.php?title=User:Yb30&oldid=171846"