diff --git a/assets/css/main.css b/assets/css/main.css index 57e82c8..4abd1af 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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; diff --git a/assets/css/variables.css b/assets/css/variables.css index d2a4e7b..1c9e108 100644 --- a/assets/css/variables.css +++ b/assets/css/variables.css @@ -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; diff --git a/index.html b/index.html index 4eb48e2..1b3e522 100644 --- a/index.html +++ b/index.html @@ -51,7 +51,87 @@
-
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+