Skip to content

Instantly share code, notes, and snippets.

@DanielBabcock

DanielBabcock/index.html

Created December 12, 2018 18:21
Show Gist options
  • Save DanielBabcock/35acba799010eb8c867b7d5f35afb88a to your computer and use it in GitHub Desktop.
Save DanielBabcock/35acba799010eb8c867b7d5f35afb88a to your computer and use it in GitHub Desktop.
Download ZIP
penguin-pure-css
Raw
index.html
<body>
<!-- Begin Image -->
<!-- Invisible Box-->
<div class="box">
<!-- Circular Head-->
<div class="head">
<!-- Circular Head Copy -->
<div class="head-copy"></div>
<div class="inner-face-left"></div>
<div class="inner-face-right"></div>
<!-- Left Eye ~ Black -->
<div class="eye-left"></div>
<!-- Right Eye ~ Black -->
<div class="eye-right"> </div>
<!-- Beak ~ Orange -->
<div class="beak"></div>
<!-- End Head -->
</div>
<!-- Start Body -->
<div>
<!-- Body Black -->
<div class="lowerBody">
<!-- Body Copy Black -->
<div class="lowerBodyCopy"></div>
<!-- Belly oblong White -->
<div class="belly"></div>
<!-- Wings Wave Triangle Black-->
<div class="wings">
<!-- Right Fin -->
<div class="wing-right"></div>
<!-- Left Fin -->
<div class="wing-left"></div>
</div>
<!-- Feet Oblong Orange-->
<div class="feet">
<!-- Right Foot -->
<div class="foot-right"></div>
<!-- Left Foot -->
<div class="foot-left"></div>
</div>
</div>
</div>
<!-- End Body -->
<!-- End Invisible Box -->
</div>
</body>
Raw
style.css
body{
background: #25A9FC;
}
.box{
position: relative;
margin: auto;
display: block;
margin-top: 8%;
width: 600px;
height: 420px;
background: none;
}
.head{
position: absolute;
top:16.5%;
left: 25%;
width: 50%;
height: 67%;
background: #FFF;
border-radius: 50%;
}
.head-copy{
width: 100%;
height: 100%;
position: absolute;
background: #FFF;
border-radius: 50%;
z-index: 2;
}
.eye-left{
position: absolute;
background: black;
width: 10%;
height: 10%;
top: 25%;
left: 21%;
border-radius: 50%;
z-index: 3;
}
.eye-right{
position: absolute;
background: black;
width: 10%;
height: 10%;
top: 25%;
right: 21%;
border-radius: 50%;
z-index: 3;
}
.beak{
position: absolute;
background: orange;
width: 25%;
height: 42.5%;
left: 37%;
top: 30%;
border-radius: 10%;
z-index: 4;
-webkit-clip-path: polygon(50% 38%, 100% 50%, 51% 72%, 0% 50%);
clip-path: polygon(50% 38%, 100% 50%, 51% 72%, 0% 50%);
}
.lowerBody{
position: absolute;
top:45%;
left: 25%;
width: 50%;
height: 75%;
background: black;
border-radius: 50% 50% 70% 70%;
}
/* .lowerBodyCopy{
width: 60%;
height: 60%;
top: 30%;
left: 19%;
position: absolute;
background: #FFF;
border-radius: 50%;
z-index: 2;
} */
.belly{
width: 60%;
height: 60%;
top: 30%;
left: 19%;
position: absolute;
background: #FFF;
border-radius: 50%;
z-index: 2;
}
.wings{}
.wing-left{
position: absolute;
width: 40%;
height: 40%;
left: -20%;
top: 30%;
background: black;
border-radius: 50%;
z-index: 9;
-webkit-clip-path: polygon(84% 34%, 83% 71%, 45% 65%, 22% 48%, 17% 37%, 52% 37%);
clip-path: polygon(84% 34%, 83% 71%, 45% 65%, 22% 48%, 17% 37%, 52% 37%);
}
.wing-right{
position: absolute;
width: 40%;
height: 40%;
right: -20%;
top: 30%;
background: black;
border-radius: 50%;
z-index: 9;
-webkit-clip-path: polygon(18% 35%, 18% 35%, 18% 77%, 18% 77%, 59% 71%, 59% 71%, 82% 51%, 82% 51%, 89% 37%, 50% 40%, 50% 40%);
clip-path: polygon(18% 35%, 18% 35%, 18% 77%, 18% 77%, 59% 71%, 59% 71%, 82% 51%, 82% 51%, 89% 37%, 50% 40%, 50% 40%);
}
.feet{}
.foot-left{
position: absolute;
width: 20%;
height: 10%;
left: 20%;
top: 90%;
background: orange;
border-radius: 50%;
z-index: 1;
}
.foot-right{
position: absolute;
width: 20%;
height: 10%;
right: 20%;
top: 90%;
background: orange;
border-radius: 50%;
z-index: 1;
}
@media all and (max-width: 600px) {
.box{
position: relative;
margin: auto;
display: block;
margin-top: 2%;
width: 400px;
height: 280px;
background: none;
}
}
/*
.hair-left{
position: absolute;
top: -8%;
left: 30%;
width: 20%;
height: 20%;
background: #A6BECF;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
} */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment