From 55463071d6da4e7d8d3eec2ef007b1801746e0e5 Mon Sep 17 00:00:00 2001 From: Nathan King Date: Mon, 16 Jan 2023 11:46:56 +0000 Subject: [PATCH 1/2] add talking duck css, step 2 --- 02-talking-duck/index.html | 14 +++--- 02-talking-duck/style.css | 97 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 104 insertions(+), 7 deletions(-) diff --git a/02-talking-duck/index.html b/02-talking-duck/index.html index ef761e5..a7e473e 100644 --- a/02-talking-duck/index.html +++ b/02-talking-duck/index.html @@ -25,7 +25,7 @@ Talking Duck -
+
Logo Coding Week @@ -37,20 +37,20 @@ -
+
-
- - +
+ +
-
+
Static Duck Animated Duck
@@ -58,4 +58,4 @@
- + \ No newline at end of file diff --git a/02-talking-duck/style.css b/02-talking-duck/style.css index e69de29..063ff2a 100644 --- a/02-talking-duck/style.css +++ b/02-talking-duck/style.css @@ -0,0 +1,97 @@ +/* Custom properties */ +:root { + --font: Roboto, sans-serif; + --pink: #f71469; +} + +/* CSS Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Generic Rules */ +html { + height: 100%; + font-family: var(--font); + color: white; + background-image: linear-gradient(to top, var(--pink) -40%, #3535ec 85%); + background-attachment: fixed; +} + +img { + max-width: 100%; +} + +/* Container */ +.container { + display: grid; + width: 90vw; + padding: 16px; + margin: 0 auto; +} + +/* Logo */ +header img { + width: 56px; + height: auto; + margin-bottom: 32px; +} + +/* Text box */ +textarea { + border: none; + resize: none; + width: 100%; + height: 120px; + border-radius: 16px; + font-size: 20px; + padding: 24px; + font-family: var(--font); + margin-bottom: 32px; +} + +textarea:focus-within { + outline: 1px auto var(--pink); +} + +/* Controls */ +.controls { + display: grid; + grid-gap: 10px; + grid-template-columns: 1fr 4fr; +} + +/* Play button */ +button { + border: none; + border-radius: 8px; + width: 64px; + height: 56px; + background-color: var(--pink); +} + +button:disabled { + opacity: 0.6; + background-color: #dedede; +} + +button img { + vertical-align: middle; +} + +/* Audio controls */ +.pitch-controls { + margin-bottom: 32px; +} + +label { + display: block; + margin-bottom: 12px; +} + +#pitch-range { + width: 100%; + accent-color: white; +} From 592c8a38b1a9487494d860bc6dde33c3c1fd94e7 Mon Sep 17 00:00:00 2001 From: Nathan King Date: Mon, 16 Jan 2023 11:48:00 +0000 Subject: [PATCH 2/2] update styles --- 02-talking-duck/style.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/02-talking-duck/style.css b/02-talking-duck/style.css index 063ff2a..6be225a 100644 --- a/02-talking-duck/style.css +++ b/02-talking-duck/style.css @@ -72,11 +72,6 @@ button { background-color: var(--pink); } -button:disabled { - opacity: 0.6; - background-color: #dedede; -} - button img { vertical-align: middle; }