From 4b136a0d02ae4f847246268bbb2b572400e08f37 Mon Sep 17 00:00:00 2001 From: ShiftedReality90 Date: Wed, 10 Feb 2021 23:37:15 +0000 Subject: [PATCH 1/2] Added changes to the challenge --- index.html | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++---- style.css | 89 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 174 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index ad6d70c..8989a19 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,105 @@ - Hello! + Semantic HTML Challenge - + -

Hi there!

+

Pete O'Connell's Sematic HTML Challenge

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -

- I'm your cool new webpage. Made with Glitch! -

+ + + + + + + + + + + + + + + +
A SUMMARY OF THE UK'S MOST FAMOUS PUNK BANDS
BAND YEAR FORMED NO. OF ALBUMS MOST FAMOUS SONG
Buzzcocks19769Ever Fallen in Love (With Someone You Shouldn't have)
The Clash19766London Calling
The Damned197610Smash it up
Sex Pistols19751Anarchy in the UK
Sham 69197613If The Kids Are United
Siouxsie and the Banshees197611HongKong Garden
Stiff Little Fingers197710Suspect Device
The Stanglers197417No More Heroes
Total Albums 77
+
+ + +
- + \ No newline at end of file diff --git a/style.css b/style.css index ea0844a..bb8b6ac 100644 --- a/style.css +++ b/style.css @@ -7,5 +7,92 @@ body { h1 { font-style: italic; - color: #373fff; + color: #103375fb; } + +table { + border: 2px solid #800080; + text-align: center; + table-layout: fixed; + border-collapse: collapse; + width: 100%; +} + +caption { + text-align: end; + padding: 10px; + font-family: "Rock Salt", cursive; + font-size: 1em; + caption-side: bottom; +} + +.header { + background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("assets/leopardskin.jpg"); + background-size: cover; + font-family: "Rock Salt", cursive; + font-size: 1em; + color: white; +} + +.footer { + background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("assets/leopardskin.jpg"); + background-size: cover; + font-family: "Rock Salt", cursive; + font-size: 1em; + color: white; +} + +.header td { + padding: 20px; + border: 3px solid #800080; +} + +.footer td { + padding: 20px; + border: 3px solid #800080; +} + +.text { + text-align: center; +} + +.total { + text-align: start; +} + +tbody { + font-family: 'Helvetica Neue', Helvetica, sans-serif; + text-align: centre; +} + +tbody tr { + background-image: url("./assets/noise.png"); +} + +tbody tr:nth-child(odd) { + background-color: #FF33CC; +} + +tbody tr:nth-child(even) { + background-color: #e495e4; +} + +.body td { + padding: 10px; +} + +thead tr td:nth-child(1) { + width: 30%; +} + +thead tr td:nth-child(2) { + width: 20%; +} + +thead tr td:nth-child(3) { + width: 20%; +} + +thead tr td:nth-child(4) { + width: 40%; +} \ No newline at end of file From f07cf7ba255bcf5d82a9ae5237c92ff51b9e0fcc Mon Sep 17 00:00:00 2001 From: ShiftedReality90 Date: Fri, 12 Feb 2021 11:05:54 +0000 Subject: [PATCH 2/2] Changes and tweaks --- index.html | 2 +- style.css | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 8989a19..eea25a3 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

Pete O'Connell's Sematic HTML Challenge

- + diff --git a/style.css b/style.css index bb8b6ac..bb6db3b 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,7 @@ body { font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif; - margin: 2em; + margin: auto; } h1 { @@ -27,15 +27,16 @@ caption { } .header { - background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("assets/leopardskin.jpg"); + background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("assets/leopardskin.jpg"); + Horrible leopard print yuck background-size: cover; font-family: "Rock Salt", cursive; font-size: 1em; - color: white; + color: #ffffff; } .footer { - background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("assets/leopardskin.jpg"); + background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url("assets/leopardskin.jpg"); background-size: cover; font-family: "Rock Salt", cursive; font-size: 1em; @@ -70,7 +71,7 @@ tbody tr { } tbody tr:nth-child(odd) { - background-color: #FF33CC; + background-color: #800080; } tbody tr:nth-child(even) {
A SUMMARY OF THE UK'S MOST FAMOUS PUNK BANDS A SUMMARY OF THE UK'S MOST FAMOUS PUNK BANDS