Skip to content

Instantly share code, notes, and snippets.

@francissimo

francissimo/index.html

Created June 7, 2022 21:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save francissimo/00e92da4eda03ebd69b0661c68581143 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save francissimo/00e92da4eda03ebd69b0661c68581143 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Fashion Woman
Raw
index.html
<div class="hat-1"></div>
<div class="hat-2"></div>
<div class="hat-3"></div>
<div class="hat-4"></div>
<div class="hat-5"></div>
<div class="ear"></div>
<div class="earring"></div>
<div class="face-1"></div>
<div class="face-2"></div>
<div class="face-3"></div>
<div class="face-4"></div>
<div class="face-5"></div>
<div class="shirt"></div>
<div class="eyebrow-1"></div>
<div class="eyebrow-2"></div>
<div class="eye">
<div class="eye-inner-1"></div>
<div class="eye-inner-2"></div>
<div class="eye-inner-3"></div>
<div class="eye-inner-4"></div>
</div>
<div class="eye eye-left">
<div class="eye-inner-1"></div>
<div class="eye-inner-2"></div>
<div class="eye-inner-3"></div>
<div class="eye-inner-4"></div>
</div>
<div class="nose"></div>
<div class="nose nose-right"></div>
<div class="mouth-1"></div>
<div class="mouth-2"></div>
<div class="mouth-3"></div>
<div class="mouth-4"></div>
<div class="mouth-5"></div>
<div class="mouth-6"></div>
<div class="mouth-7"></div>
<div class="mouth-8"></div>
Raw
script.js
// design source
// https://www.behance.net/gallery/113097137/Fashion-woman-in-style-Pop-art
// speed code video
// https://twitter.com/asyrafhussin4/status/1529347326321434625
Raw
style.scss
// colors
$white-color: #fff;
$black-color: #000;
$red-color: #ee1c25;
$yellow-color: #fcb041;
$yellow-dark-color: #f7941d;
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
background: linear-gradient(90deg, $white-color 50%, $black-color 50%);
* {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
box-sizing: border-box;
&:before,
&:after {
content: "";
position: absolute;
}
}
}
.hat {
&-1 {
width: 40vmin;
height: 40vmin;
background: $black-color;
top: -70vmin;
left: -5.5vmin;
transform: rotate(-15deg);
border-radius: 15vmin 0 0 20%;
&::before {
width: 25vmin;
height: 8.5vmin;
background: $black-color;
top: 30.4vmin;
left: -9.7vmin;
transform: rotate(-16deg) skewX(55deg);
border-radius: 0 0 0 6vmin;
}
}
&-2 {
width: 14.2vmin;
height: 10vmin;
background: $red-color;
top: -60.1vmin;
left: 60.7vmin;
transform: rotate(-14deg);
border-radius: 0 100% 100% 0 / 100% 15% 85% 0;
&::before {
width: 5vmin;
height: 1vmin;
background: $black-color;
top: 0.1vmin;
left: 11vmin;
transform: rotate(25deg);
}
&::after {
width: 5vmin;
height: 1vmin;
background: $black-color;
top: 0.5vmin;
left: 11.8vmin;
transform: rotate(50deg);
}
}
&-3 {
width: 7vmin;
height: 14vmin;
background: $black-color;
top: -58vmin;
left: 45.5vmin;
transform: rotate(-16deg);
border-radius: 0 100% 0 0;
&::before {
width: 12vmin;
height: 5vmin;
background: $black-color;
top: 8.5vmin;
left: 6vmin;
transform: rotate(-15deg);
}
&::after {
width: 8vmin;
height: 4vmin;
background: $black-color;
top: 7.2vmin;
left: 11.5vmin;
transform: rotate(-20deg);
}
}
&-4 {
width: 8vmin;
height: 4vmin;
background: $black-color;
top: -64.5vmin;
left: 74vmin;
transform: rotate(-42deg);
&::before {
width: 4vmin;
height: 2vmin;
background: $black-color;
top: -0.2vmin;
left: 3vmin;
transform: rotate(-10deg);
}
}
&-5 {
z-index: 2;
width: 15vmin;
height: 10vmin;
background: $black-color;
top: -45vmin;
left: -17.5vmin;
transform: rotate(-38deg);
}
}
.ear {
width: 2vmin;
height: 10vmin;
background: $white-color;
top: -34vmin;
left: 43.5vmin;
transform: rotate(10deg);
border-radius: 1vmin 1.5vmin 0 0;
&::before {
width: 3.3vmin;
height: 9vmin;
background: $white-color;
top: 4.5vmin;
left: -1.2vmin;
transform: rotate(3deg);
border-radius: 40%;
}
&::after {
width: 3vmin;
height: 10vmin;
background: $white-color;
top: 2vmin;
left: -2vmin;
}
}
.earring {
width: 3.8vmin;
height: 3.8vmin;
background: $yellow-dark-color;
top: -17.8vmin;
left: 41.1vmin;
border-radius: 50%;
overflow: hidden;
&::before {
width: 4.2vmin;
height: 4.2vmin;
background: $yellow-color;
top: -0.5vmin;
left: 1vmin;
border-radius: 50%;
}
}
.face {
&-1 {
width: 15vmin;
height: 6vmin;
background: $white-color;
top: -51vmin;
left: 22vmin;
transform: rotate(-24deg);
border-radius: 3vmin 0 0.5vmin 0;
&::before {
width: 5vmin;
height: 10vmin;
background: $white-color;
top: 4.3vmin;
left: 8.5vmin;
transform: rotate(20deg);
border-radius: 0 0.5vmin 0 0;
}
&::after {
width: 2vmin;
height: 3.5vmin;
background: $black-color;
top: 11vmin;
left: 12.5vmin;
transform: rotate(20deg);
border-radius: 0 0 100% 0;
}
}
&-2 {
width: 8vmin;
height: 13.4vmin;
background: $white-color;
top: -9.6vmin;
left: 27.3vmin;
transform: rotate(8deg);
border-radius: 0 0 4.8vmin 0;
&::before {
width: 15vmin;
height: 8vmin;
background: $white-color;
top: -7vmin;
left: -7.4vmin;
transform: rotate(6deg);
}
&::after {
width: 10vmin;
height: 8vmin;
background: $white-color;
top: -13vmin;
left: -6vmin;
}
}
&-3 {
width: 12vmin;
height: 5vmin;
background: $white-color;
top: -42.8vmin;
left: 4vmin;
transform: rotate(-30deg);
&::before {
width: 10vmin;
height: 2vmin;
background: $black-color;
top: -1.6vmin;
left: -2vmin;
transform: rotate(-6deg);
}
&::after {
width: 10vmin;
height: 3vmin;
background: $white-color;
top: 1.4vmin;
left: -9vmin;
transform: rotate(-9deg);
}
}
&-4 {
width: 4vmin;
height: 3vmin;
background: $white-color;
top: -23.8vmin;
left: -24vmin;
transform: rotate(-32deg);
&::before {
width: 20vmin;
height: 20vmin;
background: $white-color;
top: 1vmin;
left: 3vmin;
}
&::after {
width: 30vmin;
height: 8.7vmin;
background: $white-color;
top: 26.6vmin;
left: -8vmin;
transform: rotate(-10deg);
border-radius: 50%;
}
}
&-5 {
width: 20vmin;
height: 12vmin;
background: $white-color;
top: 12vmin;
left: 9vmin;
transform: rotate(-40deg);
&::before {
width: 2vmin;
height: 5.7vmin;
background: $black-color;
top: 9vmin;
left: 21.7vmin;
transform: rotate(19deg);
border-radius: 21%;
}
&::after {
width: 5vmin;
height: 5vmin;
background: $black-color;
top: 10vmin;
left: 23vmin;
transform: rotate(10deg);
}
}
}
.shirt {
width: 10vmin;
height: 14vmin;
background: $white-color;
top: 55.5vmin;
left: -5vmin;
transform: rotate(-21deg);
&::before {
width: 25vmin;
height: 35vmin;
background: $black-color;
top: 9.5vmin;
left: -2.9vmin;
transform: rotate(10deg);
border-radius: 12vmin 0 0 0;
}
&::after {
width: 5vmin;
height: 2vmin;
background: $black-color;
top: 9vmin;
left: 8vmin;
transform: rotate(-15deg);
}
}
.eyebrow {
&-1 {
width: 12vmin;
height: 7vmin;
background: $black-color;
top: -47.5vmin;
left: 21.5vmin;
transform: rotate(-23deg) skewX(-4deg);
border-radius: 1vmin 5vmin 2vmin 80%;
&::before {
width: 13.5vmin;
height: 6vmin;
background: $black-color;
top: -0.5vmin;
left: -2.6vmin;
transform: rotate(0deg) skewX(4deg);
border-radius: 50%;
}
&::after {
width: 7vmin;
height: 10vmin;
background: $white-color;
top: 0.6vmin;
left: -3.2vmin;
transform: rotate(-35deg);
}
}
&-2 {
width: 9vmin;
height: 7vmin;
background: $white-color;
top: -46.8vmin;
left: 24.9vmin;
transform: rotate(-15deg);
border-radius: 5vmin 9vmin 5vmin 80%;
&::before {
width: 9.5vmin;
height: 4vmin;
background: $white-color;
top: 0.1vmin;
left: -3vmin;
transform: rotate(-10deg);
border-radius: 50%;
}
&::after {
width: 1vmin;
height: 1.6vmin;
background: $black-color;
top: -0.3vmin;
left: -2.6vmin;
transform: rotate(-40deg);
border-radius: 50%;
}
}
}
.eye {
width: 11.9vmin;
height: 5.2vmin;
background: $black-color;
top: -40.7vmin;
left: 19vmin;
transform: rotate(1deg);
border-radius: 100%;
&::before {
width: 14vmin;
height: 5vmin;
background: $white-color;
top: -0.5vmin;
left: -0.7vmin;
transform: rotate(-7deg);
border-radius: 100%;
}
&::after {
width: 3vmin;
height: 3vmin;
background: $white-color;
top: 1.4vmin;
left: 10vmin;
transform: rotate(35deg);
}
&-inner {
&-1 {
z-index: 2;
width: 6vmin;
height: 2.75vmin;
background: $black-color;
top: -1.9vmin;
left: -2.5vmin;
transform: rotate(-16deg) skewX(-40deg);
border-radius: 10vmin 10vmin 0 0;
&::before {
width: 4vmin;
height: 3.1vmin;
background: $black-color;
top: -0.2vmin;
left: 4vmin;
transform: rotate(-3.5deg) skewX(40deg);
border-radius: 0 100% 0 0;
}
&::after {
width: 3vmin;
height: 1vmin;
background: $black-color;
top: 2.35vmin;
left: 8vmin;
transform: rotate(22deg);
border-radius: 20% 10% 0 0;
}
}
&-2 {
z-index: 2;
width: 0.8vmin;
height: 2.7vmin;
background: $black-color;
top: -0.4vmin;
left: 9.5vmin;
transform: rotate(35deg);
border-radius: 100%;
&::before {
width: 2.2vmin;
height: 1.5vmin;
background: $black-color;
top: 1.4vmin;
left: -1.9vmin;
}
}
&-3 {
z-index: 2;
width: 2vmin;
height: 1vmin;
background: $white-color;
top: 0.8vmin;
left: -5.1vmin;
transform: rotate(-20deg) skewX(-45deg);
border-radius: 100% 0 0 0;
&::before {
width: 0.8vmin;
height: 3.2vmin;
background: $white-color;
top: 0.6vmin;
left: 7.4vmin;
transform: rotate(-15deg) skewX(40deg);
border-radius: 0 100% 0 0.4vmin;
}
}
&-4 {
z-index: 2;
width: 4.2vmin;
height: 4.2vmin;
background: $black-color;
top: 0.2vmin;
left: -0.5vmin;
border-radius: 50%;
&::before {
width: 0.9vmin;
height: 0.9vmin;
background: $white-color;
top: 1.75vmin;
left: 3vmin;
border-radius: 50%;
}
&::after {
width: 1.1vmin;
height: 1.1vmin;
background: $white-color;
top: 2.9vmin;
left: -0.1vmin;
border-radius: 50%;
}
}
}
&-left {
top: -41.1vmin;
left: -16.8vmin;
transform: scaleX(-1) rotate(-3deg);
}
}
.nose {
width: 2.5vmin;
height: 1.3vmin;
background: $black-color;
top: -20.9vmin;
left: -3.9vmin;
transform: rotate(35deg);
border-radius: 1.6vmin 100% 100% 0.4vmin;
&::before {
width: 1.7vmin;
height: 1.3vmin;
background: $white-color;
left: 1.3vmin;
border-radius: 50%;
}
&::after {
width: 0.5vmin;
height: 1.5vmin;
background: $white-color;
top: 0.5vmin;
left: 1.5vmin;
transform: rotate(40deg);
}
&-right {
top: -20.7vmin;
left: 2.7vmin;
transform: scaleX(-1) rotate(35deg);
&::after {
top: 0.4vmin;
}
}
}
.mouth {
&-1 {
width: 4.5vmin;
height: 6vmin;
background: $red-color;
top: -2.6vmin;
left: 5vmin;
transform: skewX(-10deg) rotate(19deg);
border-radius: 0 0 100% 0;
&::before {
width: 4vmin;
height: 2vmin;
background: $red-color;
top: -1.4vmin;
left: -2.5vmin;
transform: skewX(5deg);
border-radius: 1.8vmin 40% 0 0;
}
&::after {
width: 4vmin;
height: 2vmin;
background: $red-color;
top: -0.7vmin;
left: 0.2vmin;
transform: rotate(19deg);
}
}
&-2 {
width: 4.5vmin;
height: 5.8vmin;
background: $red-color;
top: -2.5vmin;
left: -5vmin;
transform: skewX(10deg) rotate(-19deg);
border-radius: 0 0 0 100%;
&::before {
width: 4vmin;
height: 2vmin;
background: $red-color;
top: -1.6vmin;
left: 3vmin;
transform: skewX(5deg);
border-radius: 60% 1.8vmin 0 0;
}
&::after {
width: 4vmin;
height: 2vmin;
background: $red-color;
top: -0.7vmin;
left: 0.2vmin;
transform: rotate(-19deg);
}
}
&-3 {
width: 4vmin;
height: 5vmin;
background: $red-color;
top: -5.5vmin;
&::before {
width: 2vmin;
height: 1vmin;
background: $red-color;
top: -0.9vmin;
left: 1.2vmin;
transform: rotate(-5deg);
}
&::after {
width: 0.8vmin;
height: 0.7vmin;
background: $white-color;
top: -1.5vmin;
left: 1.6vmin;
border-radius: 50%;
}
}
&-4 {
width: 8.2vmin;
height: 2.5vmin;
background: $black-color;
top: -6.5vmin;
left: -0.1vmin;
border-radius: 1vmin;
overflow: hidden;
&::before {
width: 7vmin;
height: 4vmin;
background: $white-color;
top: -2.5vmin;
left: 0.9vmin;
transform: rotate(-5deg);
border-radius: 50%;
}
&::after {
width: 7.5vmin;
height: 4vmin;
background: $red-color;
top: -3.75vmin;
left: 0.8vmin;
transform: rotate(-8deg);
border-radius: 50%;
}
}
&-5 {
z-index: 2;
width: 1.4vmin;
height: 4.9vmin;
background: $red-color;
top: -8vmin;
left: -7vmin;
transform: rotate(55deg);
border-radius: 50%;
&::before {
width: 1.4vmin;
height: 4.9vmin;
background: $red-color;
top: -5.7vmin;
left: 4vmin;
transform: rotate(-114deg);
border-radius: 50%;
}
}
&-6 {
width: 2vmin;
height: 1vmin;
background: $red-color;
top: -3.7vmin;
left: 1.4vmin;
border-radius: 2vmin 0 0 0;
&::before {
width: 2vmin;
height: 1vmin;
background: $red-color;
left: -1.6vmin;
border-radius: 0 2vmin 0 0;
}
}
&-7 {
width: 2.5vmin;
height: 0.8vmin;
background: $red-color;
top: -4.3vmin;
left: 5.7vmin;
transform: rotate(-10deg);
&::before {
width: 2.5vmin;
height: 0.8vmin;
background: $red-color;
top: -1vmin;
left: -5.7vmin;
transform: rotate(20deg);
}
}
&-8 {
width: 2.4vmin;
height: 0.7vmin;
background: $black-color;
top: -5.3vmin;
left: 5.6vmin;
transform: rotate(-5deg);
border-radius: 100%;
&::before {
width: 2.4vmin;
height: 0.7vmin;
background: $black-color;
top: -0.5vmin;
left: -5.7vmin;
transform: rotate(15deg);
border-radius: 100%;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment