Skip to content

Instantly share code, notes, and snippets.

@CarlSetzer

CarlSetzer/Phineas-CSS-Project

Created January 11, 2021 05:41
Show Gist options
  • Save CarlSetzer/3be351c96f3dc65b9ce0cca075284c79 to your computer and use it in GitHub Desktop.
Save CarlSetzer/3be351c96f3dc65b9ce0cca075284c79 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Phineas-CSS-Project
<doctype! html>
<html lang="en">
<body>
<style>
.head {
position: absolute;
height: 10px;
width: 10px;
border-bottom-left-radius: 20px;
border-bottom: 200px solid #ecbcb4;
border-left: 160px solid transparent;
border-right: 160px solid transparent;
transform: rotate(150deg);
}
</style>
<div class="head"></div>
<style>
.eye {
position: absolute;
height: 70px;
width: 80px;
background: white;
border-radius: 50%;
border: 10px solid black;
transform: rotate(-30deg);
left: 100px;
top: -36px;
}
.eye::before {
content: "";
position: absolute;
height: 22px;
width: 26px;
border-radius: 50%;
background: #1d1b38;
top: 28px;
left: 10px;
transform: rotate(-10deg);
}
.eye:after {
content: "";
position: absolute;
height: 8px;
width: 10px;
border-radius: 50%;
background: #fff;
top: 35px;
left: 24px;
transform: rotate(-10deg);
box-shadow: 100px 36px 0 -1px #a1665e,
70px 36px 0 -1px #a1665e,
85px 50px 0 -1px #a1665e;
}
</style>
<div class="eye"></div>
<style>
.hair>div:nth-child(1) {
position: absolute;
background: transparent;
height: 30px;
width: 100px;
border-top: 20px solid red;
border-radius: 50px 40px 0 0;
bottom: 40px;
left: 180px;
transform: rotate(30deg);
}
</style>
<div class="hair">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment