Skip to content

Instantly share code, notes, and snippets.

@adhamajid

adhamajid/index.html

Created October 7, 2022 17:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save adhamajid/79d91b8b9a0758390982072038f0f3f2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adhamajid/79d91b8b9a0758390982072038f0f3f2 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Woman Wearing Hijab
Raw
index.html
<div class="veil-1"></div>
<div class="veil-2"></div>
<div class="veil-3"></div>
<div class="veil-4"></div>
<div class="veil-5"></div>
<div class="veil-6"></div>
<div class="veil-7"></div>
<div class="veil-8"></div>
<div class="veil-9"></div>
<div class="veil-10"></div>
<div class="veil-11"></div>
<div class="veil-12"></div>
<div class="veil-13"></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="face-6"></div>
<div class="face-7"></div>
<div class="eyebrow-left-1"></div>
<div class="eyebrow-left-2"></div>
<div class="eye-left-1"></div>
<div class="eye-left-2"></div>
<div class="eye-left-3"></div>
<div class="eyebrow-right-1"></div>
<div class="eyebrow-right-2"></div>
<div class="eye-right-1"></div>
<div class="eye-right-2"></div>
<div class="eye-right-3"></div>
<div class="nose-1"></div>
<div class="nose-2"></div>
<div class="nose-3"></div>
<div class="nose-4"></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>
Raw
script.js
// design source
// https://dribbble.com/shots/5950905-Veil-Logo
Raw
style.scss
// colors
$bg-color: #fff;
$dark-color: #000;
html,
body {
width: 100%;
height: 100%;
background: $bg-color;
overflow: hidden;
* {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
box-sizing: border-box;
&::before,
&::after {
content: "";
position: absolute;
}
}
}
.veil {
&-1 {
width: 43vmin;
height: 40vmin;
background: $dark-color;
top: 15vmin;
left: -7vmin;
transform: rotate(58deg);
border-radius: 0 0 0 30vmin;
&::before {
width: 25vmin;
height: 40vmin;
background: $bg-color;
top: -2vmin;
left: 24.8vmin;
transform: rotate(16deg);
border-radius: 0 0 0 20vmin;
}
}
&-2 {
width: 20vmin;
height: 25vmin;
background: $dark-color;
top: 33.8vmin;
left: 4vmin;
transform: rotate(81deg);
border-radius: 0 0 0 20vmin;
&::before {
width: 15vmin;
height: 31vmin;
background: $bg-color;
top: -7vmin;
left: 10.5vmin;
transform: rotate(-30deg);
}
&::after {
width: 20vmin;
height: 35vmin;
background: $dark-color;
top: -16.5vmin;
left: -21.7vmin;
transform: rotate(78deg);
border-radius: 20vmin 0 0 0;
}
}
&-3 {
width: 30vmin;
height: 26vmin;
background: $dark-color;
top: -38vmin;
left: 6.1vmin;
transform: rotate(77deg);
border-radius: 18vmin 0 0 28vmin;
&::before {
width: 30vmin;
height: 16vmin;
background: $dark-color;
top: -3vmin;
left: 1.2vmin;
transform: rotate(11deg);
border-radius: 20vmin 20vmin 0 0;
}
&::after {
width: 27vmin;
height: 23vmin;
background: $dark-color;
top: -3vmin;
left: 3vmin;
transform: rotate(11deg);
border-radius: 18vmin 0 28vmin 5vmin;
}
}
&-4 {
width: 20vmin;
height: 12vmin;
background: $bg-color;
top: -33.8vmin;
left: -10.2vmin;
transform: rotate(59deg);
border-radius: 14vmin 0 0 30vmin;
&::before {
width: 12vmin;
height: 6vmin;
background: $bg-color;
top: 6.6vmin;
left: 8.2vmin;
border-radius: 0 0 0 5vmin;
}
}
&-5 {
width: 8vmin;
height: 2vmin;
background: $bg-color;
top: -60vmin;
left: -12.2vmin;
transform: rotate(120deg);
&::before {
width: 5vmin;
height: 2vmin;
background: $bg-color;
top: -0.5vmin;
left: -0.2vmin;
transform: rotate(12deg);
}
}
&-6 {
width: 20vmin;
height: 11vmin;
background: $dark-color;
top: -31.5vmin;
left: -8.6vmin;
transform: rotate(54deg);
border-radius: 70% 0 0 1000%;
&::before {
width: 12vmin;
height: 10vmin;
background: $dark-color;
top: 3.2vmin;
left: 6.2vmin;
transform: rotate(-3deg);
border-radius: 0 0 0 10vmin;
}
&::after {
width: 10vmin;
height: 14vmin;
background: $dark-color;
top: -0.5vmin;
left: 7vmin;
transform: rotate(-55deg);
border-radius: 0 0 0 50%;
}
}
&-7 {
width: 20vmin;
height: 2.5vmin;
background: $dark-color;
top: -38.8vmin;
left: 1vmin;
transform: rotate(48deg);
border-radius: 2vmin 0 0 0;
&::before {
width: 6vmin;
height: 1vmin;
background: $dark-color;
top: -0.7vmin;
transform: rotate(-2deg);
}
&::after {
width: 5vmin;
height: 5vmin;
background: $dark-color;
top: 11vmin;
left: 14vmin;
}
}
&-8 {
width: 29vmin;
height: 12vmin;
background: $bg-color;
top: -30vmin;
left: 22vmin;
transform: rotate(75deg);
border-radius: 0 100% 0 0;
&::before {
width: 16vmin;
height: 10vmin;
background: $dark-color;
top: 1.6vmin;
left: 11.4vmin;
transform: rotate(-3deg) skewX(30deg);
border-radius: 0 100% 0 0;
}
&::after {
width: 12vmin;
height: 10vmin;
background: $dark-color;
left: 4vmin;
transform: rotate(-26deg) skewX(20deg);
border-radius: 0 100% 0 0;
}
}
&-9 {
width: 17.5vmin;
height: 12vmin;
background: $dark-color;
top: -45.5vmin;
left: 14.2vmin;
transform: rotate(58deg);
border-radius: 0 100% 0 0;
&::before {
width: 1.5vmin;
height: 4.2vmin;
background: $dark-color;
top: -3.5vmin;
left: 4.1vmin;
transform: rotate(15deg);
}
&::after {
width: 8vmin;
height: 3.5vmin;
background: $dark-color;
top: -3.4vmin;
left: 4vmin;
transform: rotate(-5deg);
}
}
&-10 {
width: 7.5vmin;
height: 2vmin;
background: $dark-color;
top: -50vmin;
left: 27.2vmin;
transform: rotate(59deg);
&::before {
width: 7vmin;
height: 1.5vmin;
background: $dark-color;
top: 1vmin;
left: 3.5vmin;
transform: skewY(10deg);
}
&::after {
width: 5vmin;
height: 1.5vmin;
background: $dark-color;
top: 1.85vmin;
left: 7.5vmin;
transform: skewY(10deg) rotate(10deg);
}
}
&-11 {
width: 13vmin;
height: 5vmin;
background: $dark-color;
top: -20vmin;
left: 22.5vmin;
transform: rotate(66deg) skewX(-10deg);
border-top: 0.4vmin solid $bg-color;
border-radius: 0 100% 0 0;
&::before {
width: 2.5vmin;
height: 1.5vmin;
background: $dark-color;
top: -1.8vmin;
left: -0.2vmin;
transform: rotate(-10deg);
}
&::after {
width: 2.5vmin;
height: 1.5vmin;
background: $dark-color;
top: 3.1vmin;
left: 11vmin;
transform: rotate(10deg);
}
}
&-12 {
width: 12.5vmin;
height: 10vmin;
background: $dark-color;
top: 1.4vmin;
left: 3.9vmin;
transform: rotate(41deg);
border-bottom: 0.4vmin solid $bg-color;
border-radius: 50%;
&::before {
width: 1.5vmin;
height: 1.5vmin;
background: $dark-color;
top: 6.5vmin;
left: -0.7vmin;
}
&::after {
width: 1vmin;
height: 1.7vmin;
background: $dark-color;
top: 5.4vmin;
left: 11.8vmin;
transform: rotate(25deg);
}
}
&-13 {
width: 9vmin;
height: 4vmin;
background: transparent;
top: 9.7vmin;
left: 9vmin;
transform: rotate(-12deg) skewX(5deg);
border-bottom: 0.4vmin solid $bg-color;
border-radius: 50%;
}
}
.face {
&-1 {
width: 2.7vmin;
height: 5vmin;
background: $bg-color;
top: -47.6vmin;
left: -8.2vmin;
border-radius: 1vmin 5vmin 0 0;
&::before {
width: 2.7vmin;
height: 4.8vmin;
background: $bg-color;
top: 0.15vmin;
left: -1.6vmin;
transform: rotate(-5deg);
border-radius: 100% 0.3vmin 0 0;
}
}
&-2 {
width: 6.5vmin;
height: 4vmin;
background: $dark-color;
top: -44.1vmin;
left: -8.6vmin;
transform: rotate(-25deg);
border-radius: 35%;
&::before {
width: 6.5vmin;
height: 4vmin;
background: $bg-color;
top: 0.5vmin;
border-radius: 28%;
}
&::after {
width: 1vmin;
height: 4vmin;
background: $dark-color;
left: 6.1vmin;
transform: rotate(-10deg);
}
}
&-3 {
width: 4vmin;
height: 6.4vmin;
background: $bg-color;
top: -38.2vmin;
left: -11.7vmin;
transform: rotate(3deg);
border-radius: 30% 0 0 0;
&::before {
width: 8vmin;
height: 25vmin;
background: $bg-color;
left: 7.1vmin;
transform: rotate(-37deg);
}
&::after {
width: 2vmin;
height: 22vmin;
background: $dark-color;
left: 14vmin;
transform: rotate(-32deg);
}
}
&-4 {
width: 1vmin;
height: 14vmin;
background: $dark-color;
top: -13.4vmin;
left: 16.2vmin;
transform: rotate(-26deg);
&::before {
width: 7vmin;
height: 4vmin;
background: $dark-color;
top: 12vmin;
left: -6.5vmin;
border-radius: 5vmin 0 0 0;
}
&::after {
width: 5vmin;
height: 3vmin;
background: $bg-color;
top: 10.3vmin;
left: -4.9vmin;
transform: rotate(-17deg) skewX(-16deg);
border-radius: 0 0 1.2vmin 1vmin;
}
}
&-5 {
width: 3vmin;
height: 2vmin;
background: $bg-color;
top: 2.4vmin;
left: 10.4vmin;
transform: rotate(-26deg);
border-radius: 0 0 0.1vmin 0;
&::before {
width: 7vmin;
height: 5vmin;
background: $bg-color;
top: -2.9vmin;
left: -5.1vmin;
border-radius: 0 0 1.9vmin 3.4vmin;
}
&::after {
width: 6vmin;
height: 8vmin;
background: $bg-color;
top: -8vmin;
left: -5.1vmin;
border-radius: 0 0 0 2vmin;
}
}
&-6 {
width: 3vmin;
height: 1.5vmin;
background: $bg-color;
top: -31.2vmin;
left: -12.9vmin;
transform: skewX(7deg);
border-radius: 0.3vmin 0 0 0;
&::before {
width: 3vmin;
height: 3.5vmin;
background: $bg-color;
top: 1vmin;
left: 0.2vmin;
transform: rotate(-7deg) skewX(4deg);
border-radius: 0.3vmin 0 0 0;
}
&::after {
width: 6.5vmin;
height: 10vmin;
background: $bg-color;
top: 2.5vmin;
left: 0.5vmin;
border-radius: 0 0 0 2.9vmin;
}
}
&-7 {
width: 10vmin;
height: 14.5vmin;
background: $bg-color;
top: -15.6vmin;
left: -3.5vmin;
transform: rotate(-20deg);
border-radius: 45%;
&::before {
width: 4vmin;
height: 2vmin;
background: $dark-color;
top: 18vmin;
left: 13vmin;
}
&::after {
width: 2vmin;
height: 1vmin;
background: $dark-color;
top: 18.9vmin;
left: 9vmin;
transform: rotate(-15deg);
}
}
}
.eyebrow-left {
&-1 {
width: 4vmin;
height: 1.5vmin;
background: $dark-color;
top: -30.4vmin;
left: -13vmin;
transform: rotate(10deg);
border-radius: 0 100% 0 0;
&::before {
width: 1.7vmin;
height: 0.8vmin;
background: $bg-color;
top: 0.6vmin;
left: 2.4vmin;
border-radius: 0 100% 0 0;
}
&::after {
width: 3.4vmin;
height: 1.2vmin;
background: $dark-color;
top: 0.25vmin;
left: 0.2vmin;
transform: skewX(30deg);
border-radius: 0 100% 0 0;
}
}
&-2 {
z-index: 2;
width: 2.2vmin;
height: 0.75vmin;
background: $bg-color;
top: -29.6vmin;
left: -13.5vmin;
transform: rotate(10deg) skewX(15deg);
border-radius: 0 100% 0 0;
&::before {
width: 1.2vmin;
height: 0.5vmin;
background: $dark-color;
border-radius: 0 100% 0 0;
}
&::after {
width: 1.4vmin;
height: 0.5vmin;
background: $bg-color;
top: 0.1vmin;
left: -0.08vmin;
transform: rotate(-10deg);
border-radius: 0 100% 0 0;
}
}
}
.eye-left {
&-1 {
width: 3.5vmin;
height: 1.5vmin;
background: transparent;
top: -25.2vmin;
left: -9.5vmin;
transform: rotate(35deg);
border-top: 0.1vmin solid $dark-color;
border-radius: 50%;
&::before {
width: 4.3vmin;
height: 1.7vmin;
background: $dark-color;
top: 0.5vmin;
left: -0.6vmin;
transform: rotate(-20deg);
border-radius: 0 1.5vmin 0 0;
}
&::after {
width: 0.9vmin;
height: 0.8vmin;
background: $bg-color;
top: 1vmin;
left: -0.9vmin;
transform: rotate(35deg) skewX(-10deg);
}
}
&-2 {
width: 2.8vmin;
height: 0.8vmin;
background: $bg-color;
top: -23.2vmin;
left: -10.2vmin;
transform: rotate(20deg);
border-radius: 0 1.5vmin 1vmin 2.5vmin;
&::before {
width: 1.6vmin;
height: 1vmin;
background: $bg-color;
top: -0.4vmin;
left: 0.14vmin;
transform: rotate(-20deg);
border-radius: 0 0 0 1vmin;
}
&::after {
width: 1vmin;
height: 1.3vmin;
background: $dark-color;
top: -0.7vmin;
left: 1vmin;
transform: rotate(-20deg);
border-radius: 50% 0 0 50%;
}
}
&-3 {
width: 1vmin;
height: 0.5vmin;
background: $dark-color;
top: -23.2vmin;
left: -8.1vmin;
&::before {
width: 0.5vmin;
height: 1vmin;
background: $bg-color;
top: 0.5vmin;
left: 1.05vmin;
transform: rotate(42deg);
border-radius: 0 100% 0 0;
}
}
}
.eyebrow-right {
&-1 {
width: 4.3vmin;
height: 1.9vmin;
background: $dark-color;
top: -30.8vmin;
left: 2.8vmin;
border-radius: 100% 0 0 0;
&::before {
width: 1.7vmin;
height: 0.8vmin;
background: $bg-color;
top: 0.9vmin;
left: -0.2vmin;
transform: rotate(-10deg);
border-radius: 100% 0 0 0;
}
&::after {
width: 4.3vmin;
height: 1.65vmin;
background: $dark-color;
top: 0.2vmin;
left: 0.4vmin;
transform: skewX(-15deg) rotate(0deg);
border-radius: 100% 0 0 0;
}
}
&-2 {
z-index: 2;
width: 1.5vmin;
height: 0.7vmin;
background: $bg-color;
top: -29.6vmin;
left: 2.1vmin;
border-radius: 100% 0 0 0;
&::before {
width: 1.3vmin;
height: 0.75vmin;
background: $dark-color;
left: 0.3vmin;
transform: skewX(-5deg);
border-radius: 100% 0 0 0;
}
&::after {
width: 3vmin;
height: 0.75vmin;
background: $bg-color;
top: 0.05vmin;
transform: skewX(30deg) rotate(-1deg);
border-radius: 100% 0 0 0;
}
}
}
.eye-right {
&-1 {
width: 4vmin;
height: 2vmin;
background: transparent;
top: -25.8vmin;
left: 6.1vmin;
border-radius: 50%;
border-top: 0.1vmin solid $dark-color;
&::before {
width: 4vmin;
height: 1.9vmin;
background: $dark-color;
top: 0.4vmin;
transform: rotate(-7deg);
border-radius: 50%;
}
&::after {
width: 1.2vmin;
height: 0.9vmin;
background: $bg-color;
top: 1.4vmin;
left: 0.5vmin;
transform: rotate(-10deg);
border-radius: 50%;
}
}
&-2 {
z-index: 2;
width: 1.3vmin;
height: 1.28vmin;
background: $bg-color;
top: -24.2vmin;
left: 4.7vmin;
transform: rotate(-16deg) skewX(15deg);
border-radius: 0.8vmin 0 0 0;
&::before {
width: 1.1vmin;
height: 1.55vmin;
background: $dark-color;
top: -0.1vmin;
left: 1.1vmin;
transform: skewX(-10deg);
border-radius: 50%;
}
}
&-3 {
z-index: 2;
width: 1vmin;
height: 0.6vmin;
background: $dark-color;
top: -23.7vmin;
left: 2.25vmin;
transform: rotate(-45deg);
border-radius: 100%;
&::before {
width: 0.6vmin;
height: 0.4vmin;
background: $dark-color;
top: -0.1vmin;
left: 0.55vmin;
transform: rotate(-15deg);
}
&::after {
width: 0.3vmin;
height: 0.3vmin;
background: $dark-color;
top: 0.4vmin;
left: 0.6vmin;
transform: rotate(35deg);
}
}
}
.nose {
&-1 {
width: 5vmin;
height: 2vmin;
background: transparent;
top: -23vmin;
left: -7.7vmin;
transform: rotate(78deg);
border-top: 0.19vmin solid $dark-color;
border-radius: 50%;
&::before {
width: 3.5vmin;
height: 1vmin;
background: transparent;
top: 0.72vmin;
left: 3.5vmin;
transform: rotate(28deg);
border-top: 0.19vmin solid $dark-color;
border-radius: 0.25vmin 0 0 0;
}
&::after {
width: 2.8vmin;
height: 1vmin;
background: transparent;
top: 0.5vmin;
left: 6.9vmin;
transform: rotate(-14deg);
border-bottom: 0.19vmin solid $dark-color;
border-radius: 50%;
}
}
&-2 {
width: 1.7vmin;
height: 1.7vmin;
background: transparent;
top: -12.4vmin;
left: -7.2vmin;
transform: rotate(68deg);
border-bottom: 0.19vmin solid $dark-color;
border-radius: 50%;
}
&-3 {
width: 0.5vmin;
height: 1.75vmin;
background: $dark-color;
top: -10.5vmin;
left: -1.4vmin;
transform: rotate(78deg);
border-radius: 100% 0 0 0;
&::before {
width: 0.5vmin;
height: 1.5vmin;
background: $bg-color;
top: 0.5vmin;
left: -0.2vmin;
transform: rotate(-10deg);
}
&::after {
width: 0.6vmin;
height: 1.4vmin;
background: $bg-color;
top: 0.5vmin;
left: 0.4vmin;
transform: rotate(-10deg);
border-radius: 50%;
}
}
&-4 {
width: 2vmin;
height: 2vmin;
background: transparent;
top: -12.2vmin;
left: 2vmin;
transform: rotate(73deg);
border-top: 0.19vmin solid $dark-color;
border-radius: 40%;
&::before {
width: 2.2vmin;
height: 1vmin;
background: transparent;
left: -0.9vmin;
transform: rotate(-25deg);
border-top: 0.18vmin solid $dark-color;
border-radius: 0.3vmin 0.3vmin 0 0;
}
&::after {
width: 1.8vmin;
height: 1vmin;
background: transparent;
top: -0.3vmin;
left: 0.6vmin;
transform: rotate(-12deg);
border-top: 0.18vmin solid $dark-color;
border-radius: 0.1vmin 0.1vmin 0 0;
}
}
}
.mouth {
&-1 {
width: 0.4vmin;
height: 0.1vmin;
background: transparent;
top: -6.2vmin;
left: -5.3vmin;
transform: rotate(-5deg);
&::before {
width: 0.6vmin;
height: 0.1vmin;
background: $dark-color;
top: 0.1vmin;
left: 0.2vmin;
transform: rotate(30deg);
border-radius: 0.5vmin 0 0 0;
}
&::after {
width: 1.2vmin;
height: 0.1vmin;
background: $dark-color;
top: 0.2vmin;
left: 1.3vmin;
transform: rotate(-10deg);
border-radius: 50%;
}
}
&-2 {
width: 2.4vmin;
height: 0.1vmin;
background: $dark-color;
top: -6vmin;
left: 1.5vmin;
transform: rotate(8deg);
border-radius: 50%;
&::before {
width: 3vmin;
height: 2vmin;
background: $dark-color;
top: 1vmin;
left: -2vmin;
transform: rotate(3deg);
border-radius: 0 0 0 2vmin;
}
}
&-3 {
width: 3.5vmin;
height: 2.1vmin;
background: $dark-color;
top: -2.3vmin;
left: 2.9vmin;
transform: rotate(-4deg);
border-radius: 0 0 2vmin 0.4vmin;
&::before {
width: 1.1vmin;
height: 0.8vmin;
background: $dark-color;
top: -0.2vmin;
left: 3.2vmin;
border-radius: 0 0 1vmin 0;
}
&::after {
width: 1.3vmin;
height: 0.9vmin;
background: $bg-color;
left: 0.1vmin;
border-radius: 0 0 0.3vmin 0.3vmin;
}
}
&-4 {
width: 1.1vmin;
height: 1vmin;
background: $bg-color;
top: -3.4vmin;
left: -1.5vmin;
transform: skewY(10deg);
border-radius: 0 0 0.2vmin 0.3vmin;
&::before {
width: 0.5vmin;
height: 0.6vmin;
background: $bg-color;
left: -0.5vmin;
border-radius: 0 0 0 0.3vmin;
transform: skewY(15deg);
}
&::after {
width: 1.1vmin;
height: 0.8vmin;
background: $bg-color;
top: -0.5vmin;
left: 2.2vmin;
transform: skewY(-15deg);
border-radius: 0 0 1vmin 0.4vmin;
}
}
&-5 {
width: 0.9vmin;
height: 0.6vmin;
background: $bg-color;
top: -4.5vmin;
left: 4.8vmin;
transform: rotate(-5deg);
border-radius: 0 0 1.2vmin 0.4vmin;
&::before {
width: 2.2vmin;
height: 0.8vmin;
background: $dark-color;
top: 1.6vmin;
left: -2.6vmin;
border-radius: 50%;
}
&::after {
width: 1.6vmin;
height: 0.5vmin;
background: $bg-color;
top: 0.3vmin;
left: 1vmin;
transform: rotate(-45deg);
}
}
&-6 {
width: 2.8vmin;
height: 1.1vmin;
background: $bg-color;
top: -1.1vmin;
left: -0.2vmin;
transform: rotate(-5deg);
border-radius: 0 0 0.8vmin 2.8vmin;
&::before {
width: 2.4vmin;
height: 1.2vmin;
background: $bg-color;
top: -0.35vmin;
left: 2.2vmin;
transform: rotate(-20deg);
border-radius: 0 0 2.8vmin 1.3vmin;
}
&::after {
width: 1.5vmin;
height: 0.6vmin;
background: $bg-color;
left: 3.5vmin;
transform: rotate(-30deg);
}
}
&-7 {
width: 5.2vmin;
height: 1vmin;
background: transparent;
top: -5.3vmin;
left: 0.2vmin;
border-bottom: 0.1vmin solid $dark-color;
border-radius: 50%;
&::before {
width: 0.6vmin;
height: 0.4vmin;
background: $bg-color;
top: 0.5vmin;
left: 4.9vmin;
transform: rotate(-15deg);
border-radius: 0 0 50% 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment