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>
  
−
<img src="61dG-OjpZuL.jpeg">
+
<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;
 +
  margin: auto;
 +
  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 {
 +
  top: 65%;
 +
  left: 15%;
 +
  background: pink;
 +
  width: 15%;
 +
  height: 10%;
 +
  border-radius: 50%;
 +
}
 +
 
 +
.blush-left {
 +
  top: 65%;
 +
  left: 70%;
 +
  background: pink;
 +
  width: 15%;
 +
  height: 10%;
 +
  border-radius: 50%;
 +
}
 +
 
 +
.beak-top {
 +
  top: 60%;
 +
  left: 40%;
 +
  background: var(--penguin-beak, orange);
 +
  width: 20%;
 +
  height: 10%;
 +
  border-radius: 50%;
 +
}
 +
 
 +
.beak-bottom {
 +
  top: 65%;
 +
  left: 42%;
 +
  background: var(--penguin-beak, orange);
 +
  width: 16%;
 +
  height: 10%;
 +
  border-radius: 50%;
 +
}
 +
 
 +
body {
 +
  background:#c6faf1;
 +
}
 +
 
 +
.penguin * {
 +
  position: absolute;
 +
}
 +
</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:12, 22 February 2022

YB30's Wiki

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

1


Favorite Animal: Pangolin

<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;
 margin: auto;
 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 { 

 top: 65%;
 left: 15%;
 background: pink;
 width: 15%;
 height: 10%;
 border-radius: 50%;

}

.blush-left { 

 top: 65%;
 left: 70%;
 background: pink;
 width: 15%;
 height: 10%;
 border-radius: 50%;

}

.beak-top { 

 top: 60%;
 left: 40%;
 background: var(--penguin-beak, orange);
 width: 20%;
 height: 10%;
 border-radius: 50%;

}

.beak-bottom { 

 top: 65%;
 left: 42%;
 background: var(--penguin-beak, orange);
 width: 16%;
 height: 10%;
 border-radius: 50%;

}

body { 

 background:#c6faf1;

}

.penguin * { 

 position: absolute;

} </style>


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