From f883283308b659625d65f6539bf5eaa007085e45 Mon Sep 17 00:00:00 2001 From: conor Date: Sun, 17 Oct 2021 22:43:06 +0100 Subject: [PATCH] Set up basic dropdown exercise --- animation/02-drop-down/README.md | 7 +++ animation/02-drop-down/index.html | 22 +++++++ animation/02-drop-down/solution/solution.css | 58 +++++++++++++++++++ animation/02-drop-down/solution/solution.html | 22 +++++++ animation/02-drop-down/style.css | 41 +++++++++++++ animation/03-pop-up/README.md | 7 +++ animation/03-pop-up/index.html | 13 +++++ animation/03-pop-up/solution/solution.css | 0 animation/03-pop-up/solution/solution.html | 13 +++++ animation/03-pop-up/style.css | 0 10 files changed, 183 insertions(+) create mode 100644 animation/02-drop-down/README.md create mode 100644 animation/02-drop-down/index.html create mode 100644 animation/02-drop-down/solution/solution.css create mode 100644 animation/02-drop-down/solution/solution.html create mode 100644 animation/02-drop-down/style.css create mode 100644 animation/03-pop-up/README.md create mode 100644 animation/03-pop-up/index.html create mode 100644 animation/03-pop-up/solution/solution.css create mode 100644 animation/03-pop-up/solution/solution.html create mode 100644 animation/03-pop-up/style.css diff --git a/animation/02-drop-down/README.md b/animation/02-drop-down/README.md new file mode 100644 index 0000000..54d3e68 --- /dev/null +++ b/animation/02-drop-down/README.md @@ -0,0 +1,7 @@ +# Dropdown + +## Desired Outcome + +![outcome](./desired-outcome.gif) + +### Self Check diff --git a/animation/02-drop-down/index.html b/animation/02-drop-down/index.html new file mode 100644 index 0000000..a812e22 --- /dev/null +++ b/animation/02-drop-down/index.html @@ -0,0 +1,22 @@ + + + + + + + Dropdown + + + +
+
+ +
+ Link 1 + Link 2 + Link 3 +
+
+
+ + diff --git a/animation/02-drop-down/solution/solution.css b/animation/02-drop-down/solution/solution.css new file mode 100644 index 0000000..349b53e --- /dev/null +++ b/animation/02-drop-down/solution/solution.css @@ -0,0 +1,58 @@ +body { + margin: 0; +} + +.dropdown-container { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.dropdown-menu { + position: relative; + display: inline-block; +} + +.dropdown-button { + background-color: rgb(108, 238, 255); + padding: 16px; + font-size: 16px; + border: none; +} + +.dropdown-content { + visibility: hidden; + position: absolute; + left: -25%; + background-color: rgb(189, 188, 188); + width: 160px; + display: flex; + flex-direction: column; + /* max-height: 0; */ + /* transition: max-height 0.25s ease-out; */ +} + +a { + font-family: Arial, Helvetica, sans-serif; + color: black; + padding: 12px 16px; + text-decoration: none; + text-align: center; +} + +.dropdown-menu:hover .dropdown-content { + visibility: visible; + /* max-height: 500px; + transition: max-height 0.25s ease-out; */ +} + +.dropdown-menu:hover .dropdown-button { + cursor: pointer; + background-color: rgb(59, 232, 255); +} + +.dropdown-content a:hover { + background-color: #ddd; +} diff --git a/animation/02-drop-down/solution/solution.html b/animation/02-drop-down/solution/solution.html new file mode 100644 index 0000000..53b9d89 --- /dev/null +++ b/animation/02-drop-down/solution/solution.html @@ -0,0 +1,22 @@ + + + + + + + Dropdown + + + +
+
+ +
+ Link 1 + Link 2 + Link 3 +
+
+
+ + diff --git a/animation/02-drop-down/style.css b/animation/02-drop-down/style.css new file mode 100644 index 0000000..3200457 --- /dev/null +++ b/animation/02-drop-down/style.css @@ -0,0 +1,41 @@ +body { + margin: 0; +} + +.dropdown-container { + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.dropdown-menu { + position: relative; + display: inline-block; +} + +.dropdown-button { + background-color: rgb(108, 238, 255); + padding: 16px; + font-size: 16px; + border: none; +} + +.dropdown-content { + visibility: hidden; + position: absolute; + left: -25%; + background-color: rgb(189, 188, 188); + width: 160px; + display: flex; + flex-direction: column; +} + +a { + font-family: Arial, Helvetica, sans-serif; + color: black; + padding: 12px 16px; + text-decoration: none; + text-align: center; +} diff --git a/animation/03-pop-up/README.md b/animation/03-pop-up/README.md new file mode 100644 index 0000000..30e5365 --- /dev/null +++ b/animation/03-pop-up/README.md @@ -0,0 +1,7 @@ +# Popup + +## Desired Outcome + +![outcome](./desired-outcome.gif) + +### Self Check diff --git a/animation/03-pop-up/index.html b/animation/03-pop-up/index.html new file mode 100644 index 0000000..1651eae --- /dev/null +++ b/animation/03-pop-up/index.html @@ -0,0 +1,13 @@ + + + + + + + Popup + + + + + + diff --git a/animation/03-pop-up/solution/solution.css b/animation/03-pop-up/solution/solution.css new file mode 100644 index 0000000..e69de29 diff --git a/animation/03-pop-up/solution/solution.html b/animation/03-pop-up/solution/solution.html new file mode 100644 index 0000000..1651eae --- /dev/null +++ b/animation/03-pop-up/solution/solution.html @@ -0,0 +1,13 @@ + + + + + + + Popup + + + + + + diff --git a/animation/03-pop-up/style.css b/animation/03-pop-up/style.css new file mode 100644 index 0000000..e69de29