Skip to content

Instantly share code, notes, and snippets.

@larizzatg

larizzatg/index.html

Created July 4, 2017 23:55
Show Gist options
  • Save larizzatg/87e7ed315c16914197492031e5226a2a to your computer and use it in GitHub Desktop.
Save larizzatg/87e7ed315c16914197492031e5226a2a to your computer and use it in GitHub Desktop.
Download ZIP
Koala #dailycssimages
Raw
index.html
<body>
<!-- Begin Image -->
<!-- Invisible Box-->
<div class="box">
<!-- Circular Head-->
<div class="head">
<!-- Circular Head Copy -->
<div class="head-copy"></div>
<!-- Left Ear ~ Light Gray-->
<div class="ear-left">
<!-- Inner ear ~ Dark Gray -->
<div class="inner-ear"></div>
</div>
<!-- Right Ear ~ Light Gray-->
<div class="ear-right">
<!-- Inner Ear ~ Dark Gray-->
<div class="inner-ear"></div>
</div>
<!-- Left Outer Eye ~ White -->
<div class="eye-left">
<!-- Pupil ~ Black -->
<div class="pupil">
</div>
</div>
<!-- Right Outer Eye ~ White -->
<div class="eye-right">
<!-- Pupil ~ Black -->
<div class="pupil">
</div>
</div>
<!-- Nose ~ Brown -->
<div class="nose">
</div>
<!-- Hair ~ Light Gray -->
<div class="hair-left"></div>
<div class="hair-right"></div>
<!-- End Head -->
</div>
<!-- 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: #A6BECF;
border-radius: 50%;
}
.head-copy{
width: 100%;
height: 100%;
position: absolute;
background: #A6BECF;
border-radius: 50%;
z-index: 2;
}
.ear-left{
position: absolute;
width: 60%;
height: 65%;
left: -20%;
top: 5%;
background: #A6BECF;
border-radius: 50%;
z-index: 1;
}
.ear-right{
position: absolute;
width: 60%;
height: 65%;
right: -20%;
top: 5%;
background: #A6BECF;
border-radius: 50%;
z-index: 1;
}
.inner-ear{
position: absolute;
border-radius: 50%;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background: #819CAF;
}
.eye-left {
position: absolute;
background:white;
width: 30%;
height: 33%;
top: 25%;
left: 21%;
border-radius: 50%;
z-index: 3;
}
.eye-right {
position: absolute;
background:white;
width: 30%;
height: 33%;
top: 25%;
right: 28%;
border-radius: 50%;
z-index: 3;
}
.pupil {
position: absolute;
background: black;
width: 30%;
height: 30%;
border-radius: 50%;
top: 35%;
left: 35%;
}
.nose {
position: absolute;
background: orange;
width: 20%;
height: 40%;
border-radius: 15px;
top: 40%;
left: 36%;
z-index: 2;
}
.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%);
}
.hair-right {
position: absolute;
top: -4%;
left: 48%;
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