<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>MeowBox::Happy-Csser</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="cat">
<div class="ear"></div>
<div class="ear"></div>
<div class="eye"></div>
<div class="eye"></div>
<div class="nose"></div>
<div class="mouth"></div>
<div class="leftfur"></div>
<div class="rightfur"></div>
</div>
</body>
</html>
/*Downloaded from https://www.codeseek.co/yuanyu/meowboxhappy-csser-wpPgzX */
html, body {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.cat {
height: 50vmin;
width: 50vmin;
position: relative;
box-sizing: border-box;
padding: 0;
}
.cat .leftfur {
position: absolute;
top: 75%;
left: -40%;
display: block;
height: 1.6666666667vmin;
width: 16.6666666667vmin;
background-color: #2B4244;
}
.cat .leftfur::after, .cat .leftfur::before {
position: absolute;
right: 0;
content: '';
display: block;
height: 1.6666666667vmin;
width: 12.5vmin;
background-color: #2B4244;
}
.cat .leftfur::after {
top: 5vmin;
}
.cat .leftfur::before {
top: -5vmin;
}
.cat .rightfur {
position: absolute;
top: 75%;
right: -40%;
content: '';
display: block;
height: 1.6666666667vmin;
width: 16.6666666667vmin;
background-color: #2B4244;
}
.cat .rightfur::after, .cat .rightfur::before {
position: absolute;
left: 0;
content: '';
display: block;
height: 1.6666666667vmin;
width: 12.5vmin;
background-color: #2B4244;
}
.cat .rightfur::after {
top: 5vmin;
}
.cat .rightfur::before {
top: -5vmin;
}
.cat .ear {
position: absolute;
top: 5.3571428571vmin;
height: 28.9285714286vmin;
width: 25vmin;
background-color: #2B4244;
box-sizing: border-box;
border: 0;
margin: 0;
padding: 0;
}
.cat .ear:nth-child(1) {
border-top-left-radius: 20%;
-webkit-transform: skewy(30deg);
transform: skewy(30deg);
}
.cat .ear:nth-child(2) {
left: 25vmin;
border-top-right-radius: 20%;
-webkit-transform: skewy(-30deg);
transform: skewy(-30deg);
}
.cat .eye {
position: absolute;
top: 19.8214285714vmin;
height: 28.7142857143vmin;
width: 25vmin;
background-color: #CACCCE;
box-sizing: border-box;
}
.cat .eye:nth-child(3) {
right: 0;
border-bottom-right-radius: 100%;
-webkit-transform: skewy(30deg);
transform: skewy(30deg);
}
.cat .eye:nth-child(4) {
left: 0;
background-color: #fff;
-webkit-transform: skewy(-30deg);
transform: skewy(-30deg);
}
.cat .nose {
position: absolute;
top: 38.5714285714vmin;
left: 25vmin;
background-color: #2B4244;
}
.cat .nose::before {
position: absolute;
content: '';
height: 4.2857142857vmin;
width: 4.2857142857vmin;
display: block;
background-color: #2B4244;
-webkit-transform: skewy(30deg);
transform: skewy(30deg);
}
.cat .nose::after {
position: absolute;
content: '';
height: 4.2857142857vmin;
width: 4.2857142857vmin;
display: block;
background-color: #2B4244;
-webkit-transform: translatex(-4.2857142857vmin) skewy(-30deg);
transform: translatex(-4.2857142857vmin) skewy(-30deg);
}
.cat .mouth {
position: absolute;
top: 34.2857142857vmin;
height: 28.7142857143vmin;
width: 50vmin;
box-sizing: border-box;
border: 0;
margin: 0;
padding: 0;
}
.cat .mouth::before {
position: absolute;
content: '';
height: 21.4285714286vmin;
width: 25vmin;
display: block;
background-color: #F47C29;
-webkit-transform: skewy(30deg);
transform: skewy(30deg);
}
.cat .mouth::after {
position: absolute;
content: '';
right: 0;
height: 21.4285714286vmin;
width: 25vmin;
display: block;
background-color: #EF4D2A;
-webkit-transform: skewy(-30deg);
transform: skewy(-30deg);
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Normalize
