diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..567df10e6 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,27 +1,62 @@ - - + + My form exercise - - + + + + + +

Product Pick

-
- - + +
+ + + +
+
+ + + +
+
+ + + +
+ +
+ + + +
+
diff --git a/Form-Controls/style.css b/Form-Controls/style.css new file mode 100644 index 000000000..715e5bd44 --- /dev/null +++ b/Form-Controls/style.css @@ -0,0 +1,96 @@ +* { + box-sizing: border-box; + margin: 0; +} + +:root { + /* font colours */ + --clr-font-base: #DCE1DE; + /* background colours */ + --clr-bg-base: #216869; + --clr-bg-accent1: #3B8C88; /* 20% lighter */ + --clr-bg-accent2: #55AFAF; /* 40% lighter */ + --clr-bg-accent3: #70D2D2; /* 60% lighter */ + --clr-bg-dark1: #1A5354; /* 40% darker */ +} + +input, +button, +select { + font: inherit; +} + +label { + text-transform: uppercase; + color: var(--clr-font-base); + font-weight: 500; +} + +input, select { + width: 100%; + height: 2rem; + background-color: var(--clr-bg-accent2); +} + +form button { + text-transform: uppercase; + background-color: var(--clr-bg-dark1); + color: var(--clr-font-base); + font-weight: 500; + margin-top: 1rem; + height: 2.5rem; + border: none; + border-radius: 5px; + grid-column: 1 / -1; + justify-self: center; + width: 100%; + + @media(width > 550px) { + width: 50%; + } +} + +form button:hover { + background-color: var(--clr-bg-accent1); +} + +form { + display: grid; + min-width: 350px; + gap: 1rem; + background-color: var(--clr-bg-base); + padding: 2rem; + border-radius: 10px; + + @media (width > 720px) { + grid-template-columns: 1fr 1fr; + + #submit-btn, header, footer { + align-items: center; + } + + } +} + +.form-group { + display: grid; + gap: 0.5em; +} + +body { + font-family: "Poppins", sans-serif; + font-style: normal; + background-color: var(--clr-bg-accent3); +} + +main, header, footer { + margin: auto; + width: 90%; + max-width: 750px; +} + +header h1, footer p { + text-align: center; + margin: 1.5rem; +} +