feat: create eye components and add colour
This commit is contained in:
parent
8ab83a68ea
commit
2670f860f8
|
@ -60,7 +60,6 @@ https://codepen.io/creme/pen/rdjXav
|
||||||
width: 190px;
|
width: 190px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--lightBlue);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: 700ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
|
transition: 700ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
|
||||||
}
|
}
|
||||||
|
@ -76,9 +75,117 @@ https://codepen.io/creme/pen/rdjXav
|
||||||
width: 45px;
|
width: 45px;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.lightBlue {
|
||||||
|
background: var(--lightBlue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.green {
|
||||||
|
background: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.black {
|
||||||
|
background: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.navy {
|
||||||
|
background: var(--navy);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.green {
|
||||||
|
background: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.lightGreen {
|
||||||
|
background: var(--lightGreen);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.orange {
|
||||||
|
background: var(--orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.purple {
|
||||||
|
background: var(--purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.pink {
|
||||||
|
background: var(--pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.red {
|
||||||
|
background: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.tan {
|
||||||
|
background: var(--tan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.yellow {
|
||||||
|
background: var(--yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.nude {
|
||||||
|
background: var(--nude);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.blue {
|
||||||
|
background: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.green::before {
|
||||||
|
background: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.black::before {
|
||||||
|
background: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.yellow::before {
|
||||||
|
background: var(--yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.tan::before {
|
||||||
|
background: var(--tan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.white::before {
|
||||||
|
background: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.red::before {
|
||||||
|
background: var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.pink::before {
|
||||||
|
background: var(--pink);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.purple::before {
|
||||||
|
background: var(--purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.lightBlue::before {
|
||||||
|
background: var(--lightBlue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.mint::before {
|
||||||
|
background: var(--mint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.indigo::before {
|
||||||
background: var(--indigo);
|
background: var(--indigo);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.eye .iris.rose::before {
|
||||||
|
background: var(--rose);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eye .iris.darkBlue::before {
|
||||||
|
background: var(--darkBlue);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.eye .iris:hover,
|
.eye .iris:hover,
|
||||||
.eye .iris:focus {
|
.eye .iris:focus {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -11,7 +11,7 @@ html {
|
||||||
--black: #393144;
|
--black: #393144;
|
||||||
--beige: #F2EEE9;
|
--beige: #F2EEE9;
|
||||||
--white: #DEE7E8;
|
--white: #DEE7E8;
|
||||||
--lightBlue: #85C2FF;
|
--lightBlue: #85C1FF;
|
||||||
--darkBlue: #313879;
|
--darkBlue: #313879;
|
||||||
--blue: #1D9AF1;
|
--blue: #1D9AF1;
|
||||||
--navy: #025AA0;
|
--navy: #025AA0;
|
||||||
|
@ -22,8 +22,8 @@ html {
|
||||||
--red: #DF2934;
|
--red: #DF2934;
|
||||||
--mint: #33C69B;
|
--mint: #33C69B;
|
||||||
--lightGreen: #AAE26B;
|
--lightGreen: #AAE26B;
|
||||||
--green: #0F9583;
|
--green: #27BF68;
|
||||||
--tan: #B3A792;
|
--tan: #A5A39D;
|
||||||
--nude: #FEC7BA;
|
--nude: #FEC7BA;
|
||||||
--rose: #FF6B94;
|
--rose: #FF6B94;
|
||||||
--orange: #FE6004;
|
--orange: #FE6004;
|
||||||
|
|
82
index.html
82
index.html
|
@ -51,7 +51,87 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="eye">
|
<div class="eye">
|
||||||
<div class="iris">
|
<div class="iris lightBlue indigo">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris pink purple">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris red pink">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris green black">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris black mint">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris yellow tan">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris navy white">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris red lightBlue">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris tan red">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris nude red">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris blue yellow">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris pink darkBlue">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris lightGreen green">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris orange black">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris purple lightBlue">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris purple mint">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eye">
|
||||||
|
<div class="iris yellow rose">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue