knights/some-eyes-see-you
knights
/
some-eyes-see-you
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: create eye components and add colour

This commit is contained in:
E.L. Guerrero 2024-06-30 02:25:56 -04:00
parent 8ab83a68ea
commit 2670f860f8
Signed by: knights
GPG Key ID: 6201533059C29A0F
3 changed files with 192 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
assets/css/main.css
View File

@ -60,7 +60,6 @@ https://codepen.io/creme/pen/rdjXav
width: 190px;
height: 80px;
border-radius: 50%;
background: var(--lightBlue);
overflow: hidden;
transition: 700ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
}
@ -76,9 +75,117 @@ https://codepen.io/creme/pen/rdjXav
width: 45px;
height: 45px;
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);
}
.eye .iris.rose::before {
background: var(--rose);
}
.eye .iris.darkBlue::before {
background: var(--darkBlue);
}
.eye .iris:hover,
.eye .iris:focus {
cursor: pointer;

6
assets/css/variables.css
View File

@ -11,7 +11,7 @@ html {
--black: #393144;
--beige: #F2EEE9;
--white: #DEE7E8;
--lightBlue: #85C2FF;
--lightBlue: #85C1FF;
--darkBlue: #313879;
--blue: #1D9AF1;
--navy: #025AA0;
@ -22,8 +22,8 @@ html {
--red: #DF2934;
--mint: #33C69B;
--lightGreen: #AAE26B;
--green: #0F9583;
--tan: #B3A792;
--green: #27BF68;
--tan: #A5A39D;
--nude: #FEC7BA;
--rose: #FF6B94;
--orange: #FE6004;

82
index.html
View File

@ -51,7 +51,87 @@
<body>
<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>