summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMatthew Lemon <y@yulqen.org>2024-03-22 11:19:15 +0000
committerMatthew Lemon <y@yulqen.org>2024-03-22 11:19:15 +0000
commit85f2b54a2985cf0f56a052b8cb37f1b0c3954e02 (patch)
treea031f1975219cdc396b2dad19e92c3fc28401f52
parentc0d0e2e4daeb1a4165034b2c351226a3f592f5a5 (diff)
Adds rainbow header
-rw-r--r--index.html3
-rw-r--r--style.css48
2 files changed, 47 insertions, 4 deletions
diff --git a/index.html b/index.html
index 11e3773..3de7865 100644
--- a/index.html
+++ b/index.html
@@ -41,7 +41,6 @@
<div class="cell">
<h2>Paper based resources</h2>
- <hr class="divider">
<div class="inner-grid_1">
<div>
<img src="img/Springthings.jpg" alt=""/>
@@ -68,7 +67,6 @@
<div class="cell">
<h2>Hand sewn resources</h2>
- <hr class="divider">
<div class="inner-grid_1">
<div>
<img src="img/TVHC Resources.jpg" alt=""/>
@@ -95,7 +93,6 @@
<div class="cell">
<h2>Collaged resources</h2>
- <hr class="divider">
<div class="inner-grid_1">
<div>
<img src="img/RhinoRockHyraxRr.jpg" alt=""/>
diff --git a/style.css b/style.css
index 20bc1aa..1542f88 100644
--- a/style.css
+++ b/style.css
@@ -24,8 +24,54 @@ h1 {
}
h2 {
- color: #4e8273;
+ /* color: #4e8273; */
+ color: white;
font-size: 1.8rem;
+ margin-right: 20px;
+ padding-left: 10px;
+ background-size: 100% 50px;
+ background-repeat: no-repeat;
+ border-bottom: 10px solid #E4E5E7;
+ overflow: auto;
+ background-image: -webkit-linear-gradient(left,
+ hsl(210, 30%, 20%), hsl(210, 30%, 20%) 25%, /* #34495e */
+ hsl(280, 30%, 40%) 25%, hsl(280, 30%, 40%) 35%, /* #9b59b6 */
+ hsl(210, 50%, 40%) 35%, hsl(210, 50%, 40%) 45%, /* #3498db */
+ hsl(120, 40%, 35%) 45%, hsl(120, 40%, 35%) 55%, /* #62cb31 */
+ hsl(44, 80%, 40%) 55%, hsl(44, 80%, 40%) 65%, /* #ffb606 */
+ hsl(30, 80%, 40%) 65%, hsl(30, 80%, 40%) 75%, /* #e67e22 */
+ hsl(0, 50%, 40%) 85%, hsl(0, 50%, 40%) 85%, /* #e74c3c */
+ hsl(5, 50%, 35%) 85%, hsl(5, 50%, 35%) 100%); /* #c0392b */
+
+ background-image: -moz-linear-gradient(left,
+ hsl(210, 30%, 20%), hsl(210, 30%, 20%) 25%, /* #34495e */
+ hsl(280, 30%, 40%) 25%, hsl(280, 30%, 40%) 35%, /* #9b59b6 */
+ hsl(210, 50%, 40%) 35%, hsl(210, 50%, 40%) 45%, /* #3498db */
+ hsl(120, 40%, 35%) 45%, hsl(120, 40%, 35%) 55%, /* #62cb31 */
+ hsl(44, 80%, 40%) 55%, hsl(44, 80%, 40%) 65%, /* #ffb606 */
+ hsl(30, 80%, 40%) 65%, hsl(30, 80%, 40%) 75%, /* #e67e22 */
+ hsl(0, 50%, 40%) 85%, hsl(0, 50%, 40%) 85%, /* #e74c3c */
+ hsl(5, 50%, 35%) 85%, hsl(5, 50%, 35%) 100%); /* #c0392b */
+
+ background-image: -ms-linear-gradient(left,
+ hsl(210, 30%, 20%), hsl(210, 30%, 20%) 25%, /* #34495e */
+ hsl(280, 30%, 40%) 25%, hsl(280, 30%, 40%) 35%, /* #9b59b6 */
+ hsl(210, 50%, 40%) 35%, hsl(210, 50%, 40%) 45%, /* #3498db */
+ hsl(120, 40%, 35%) 45%, hsl(120, 40%, 35%) 55%, /* #62cb31 */
+ hsl(44, 80%, 40%) 55%, hsl(44, 80%, 40%) 65%, /* #ffb606 */
+ hsl(30, 80%, 40%) 65%, hsl(30, 80%, 40%) 75%, /* #e67e22 */
+ hsl(0, 50%, 40%) 85%, hsl(0, 50%, 40%) 85%, /* #e74c3c */
+ hsl(5, 50%, 35%) 85%, hsl(5, 50%, 35%) 100%); /* #c0392b */
+
+ background-image: linear-gradient(to right,
+ hsl(210, 100%, 20%), hsl(210, 30%, 20%) 25%, /* #34495e */
+ hsl(280, 30%, 40%) 25%, hsl(280, 30%, 40%) 35%, /* #9b59b6 */
+ hsl(210, 50%, 40%) 35%, hsl(210, 50%, 40%) 45%, /* #3498db */
+ hsl(120, 40%, 35%) 45%, hsl(120, 40%, 35%) 55%, /* #62cb31 */
+ hsl(44, 80%, 40%) 55%, hsl(44, 80%, 40%) 65%, /* #ffb606 */
+ hsl(30, 80%, 40%) 65%, hsl(30, 80%, 40%) 75%, /* #e67e22 */
+ hsl(0, 50%, 40%) 85%, hsl(0, 50%, 40%) 85%, /* #e74c3c */
+ hsl(5, 50%, 35%) 85%, hsl(5, 50%, 35%) 100%); /* #c0392b */
}
.container {