Skip to content

Commit

Permalink
(CI) format code
Browse files Browse the repository at this point in the history
  • Loading branch information
Zero to Mastery committed Oct 14, 2023
1 parent f121501 commit 4f0cd63
Show file tree
Hide file tree
Showing 8 changed files with 1,070 additions and 933 deletions.
36 changes: 18 additions & 18 deletions Art/Ankit0049/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
</head>
<body>
<div class="cat">
<div class="ear ear--left"></div>
<div class="ear ear--right"></div>
<div class="face">
<div class="eye eye--left">
<div class="eye-pupil"></div>
</div>
<div class="eye eye--right">
<div class="eye-pupil"></div>
</div>
<div class="muzzle"></div>
<div class="ear ear--left"></div>
<div class="ear ear--right"></div>
<div class="face">
<div class="eye eye--left">
<div class="eye-pupil"></div>
</div>
<div class="eye eye--right">
<div class="eye-pupil"></div>
</div>
<div class="muzzle"></div>
</div>
</body>
</html>
</div>
</body>
</html>
236 changes: 130 additions & 106 deletions Art/Ankit0049/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,196 +1,220 @@
/* Variables */
:root {
--color-black: #161616;
--color-white: #fff;
--size: 170px; /* (Fully responsive) */
}

--color-black: #161616;
--color-white: #fff;
--size: 170px; /* (Fully responsive) */
}

/* General page styling */
html {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-black);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-black);
}

/* Cat */
.cat {
position: relative;
height: var(--size);
width: calc(var(--size) * 1.13);
position: relative;
height: var(--size);
width: calc(var(--size) * 1.13);
}

/* Ears */
.ear {
position: absolute;
top: -30%;
height: 60%;
width: 25%;
background: var(--color-white);
position: absolute;
top: -30%;
height: 60%;
width: 25%;
background: var(--color-white);
}

.ear::before,
.ear::after {
content: '';
position: absolute;
bottom: 24%;
height: 10%;
width: 5%;
border-radius: 50%;
background: var(--color-black);
content: '';
position: absolute;
bottom: 24%;
height: 10%;
width: 5%;
border-radius: 50%;
background: var(--color-black);
}

.ear::after {
transform-origin: 50% 100%;
transform-origin: 50% 100%;
}

.ear--left {
left: -7%;
border-radius: 70% 30% 0% 0% / 100% 100% 0% 0%;
transform: rotate(-15deg);
left: -7%;
border-radius: 70% 30% 0% 0% / 100% 100% 0% 0%;
transform: rotate(-15deg);
}

.ear--left::before,
.ear--left::after {
right: 10%;
right: 10%;
}

.ear--left::after {
transform: rotate(-45deg);
transform: rotate(-45deg);
}

.ear--right {
right: -7%;
border-radius: 30% 70% 0% 0% / 100% 100% 0% 0%;
transform: rotate(15deg);
right: -7%;
border-radius: 30% 70% 0% 0% / 100% 100% 0% 0%;
transform: rotate(15deg);
}

.ear--right::before,
.ear--right::after {
left: 10%;
left: 10%;
}

.ear--right::after {
transform: rotate(45deg);
transform: rotate(45deg);
}

/* Face */
.face {
position: absolute;
height: 100%;
width: 100%;
background: var(--color-black);
border-radius: 50%;
position: absolute;
height: 100%;
width: 100%;
background: var(--color-black);
border-radius: 50%;
}

/* Eyes */
.eye {
position: absolute;
top: 35%;
height: 30%;
width: 31%;
background: var(--color-white);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position: absolute;
top: 35%;
height: 30%;
width: 31%;
background: var(--color-white);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.eye::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
border-radius: 0 0 50% 50% / 0 0 40% 40%;
background: var(--color-black);
animation: blink 4s infinite ease-in;
content: '';
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
border-radius: 0 0 50% 50% / 0 0 40% 40%;
background: var(--color-black);
animation: blink 4s infinite ease-in;
}

@keyframes blink {
0% { height: 0; }
90% { height: 0; }
92.5% { height: 100%; }
95% { height: 0; }
97.5% { height: 100%; }
100% { height: 0; }
0% {
height: 0;
}
90% {
height: 0;
}
92.5% {
height: 100%;
}
95% {
height: 0;
}
97.5% {
height: 100%;
}
100% {
height: 0;
}
}

.eye::before {
content: '';
position: absolute;
top: 60%;
height: 10%;
width: 15%;
background: var(--color-white);
border-radius: 50%;
content: '';
position: absolute;
top: 60%;
height: 10%;
width: 15%;
background: var(--color-white);
border-radius: 50%;
}

.eye--left {
left: 0;
left: 0;
}

.eye--left::before {
right: -5%;
right: -5%;
}

.eye--right {
right: 0;
right: 0;
}

.eye--right::before {
left: -5%;
left: -5%;
}

/* Pupils */
.eye-pupil {
position: absolute;
top: 25%;
height: 50%;
width: 20%;
background: var(--color-black);
border-radius: 50%;
animation: look-around 4s infinite;
position: absolute;
top: 25%;
height: 50%;
width: 20%;
background: var(--color-black);
border-radius: 50%;
animation: look-around 4s infinite;
}

@keyframes look-around {
0% { transform: translate(0) }
5% { transform: translate(50%, -25%) }
10% { transform: translate(50%, -25%) }
15% { transform: translate(-100%, -25%) }
20% { transform: translate(-100%, -25%) }
25% { transform: translate(0, 0) }
100% { transform: translate(0, 0) }
0% {
transform: translate(0);
}
5% {
transform: translate(50%, -25%);
}
10% {
transform: translate(50%, -25%);
}
15% {
transform: translate(-100%, -25%);
}
20% {
transform: translate(-100%, -25%);
}
25% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 0);
}
}

.eye--left .eye-pupil {
right: 30%;
right: 30%;
}

.eye--right .eye-pupil {
left: 30%;
left: 30%;
}

.eye-pupil::after {
content: '';
position: absolute;
top: 30%;
right: -5%;
height: 20%;
width: 35%;
border-radius: 50%;
background: var(--color-white);
content: '';
position: absolute;
top: 30%;
right: -5%;
height: 20%;
width: 35%;
border-radius: 50%;
background: var(--color-white);
}

/* Muzzle */
.muzzle {
position: absolute;
top: 60%;
left: 50%;
height: 6%;
width: 10%;
background: var(--color-white);
transform: translateX(-50%);
border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
position: absolute;
top: 60%;
left: 50%;
height: 6%;
width: 10%;
background: var(--color-white);
transform: translateX(-50%);
border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
}

Loading

0 comments on commit 4f0cd63

Please sign in to comment.