From 5b97fe3f8334165e73ead6c167ced0609edca3e6 Mon Sep 17 00:00:00 2001 From: OlushoreOdude <108965036+OlushoreOdude@users.noreply.github.com> Date: Thu, 23 Mar 2023 20:59:47 +0000 Subject: [PATCH] added html and css --- Form-Controls/index.html | 114 ++++++++++++++++++++++++++++++--------- Form-Controls/styles.css | 60 +++++++++++++++++++++ 2 files changed, 148 insertions(+), 26 deletions(-) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..31c59ec1 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,90 @@ - - - - My form exercise - - - - - -
-

Product Pick

-
-
-
- - -
- -
- - - - \ No newline at end of file + + + + My form exercise + + + + + +
+

Product Pick

+
+
+
+ +
+
+
+
+
+ +
+ +
+ +
+
+ +
+
+ Pick you colour: +
+ + + + + + + + +
+
+
+ +
+
+ + +
+ +
+
+
+
+ + +
+ + +
+
+ + + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..fd80982f 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,60 @@ +html { + font-family: sans-serif; + margin: 0 auto; +} +header { + margin-top: 2rem; + color: beige; +} +body { + background-color: #2d05f6; + width: 70%; + margin: 0 auto; +} +form { + background-color: #f9f8fd; + border: 3px solid #0fe92c; + border-radius: 2rem; + max-width: 75vw; +} +div { + padding: 1rem; +} +.form { + display: flex; + flex-direction: column; + align-items: center; +} +input { + background-color: rgb(196, 255, 233); + color: #0d0d0e; + border-radius: 2rem; + width: 50vw; + height: 1.5rem; +} + +input[type="radio"] { + appearance: none; + display: inline-block; + width: 1rem; + height: 1rem; + padding: 6px; + background-color: #aeacb5; + border-radius: 50%; +} + +input[type="radio"]:checked { + background-color: rgba(239, 22, 22, 0.93); +} +.button { + background-color: rgba(239, 77, 17, 0.93); + border-radius: 2rem; + color: white; + cursor: pointer; + padding: 1rem; + text-align: center; +} + +.button:hover { + background-color: red; +}