diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..35ece5f4 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..71f539ab --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.vscode +.history diff --git a/Form-Controls/.DS_Store b/Form-Controls/.DS_Store new file mode 100644 index 00000000..1e36111f Binary files /dev/null and b/Form-Controls/.DS_Store differ diff --git a/Form-Controls/files/cyf_brand.png b/Form-Controls/files/cyf_brand.png new file mode 100644 index 00000000..f9f87608 Binary files /dev/null and b/Form-Controls/files/cyf_brand.png differ diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..08f88023 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,68 @@ - + + + My form exercise - - +

Product Pick

- - -

+ +

+ + \ No newline at end of file diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..2dd71cf4 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,111 @@ +:root { + --paper:#FFF; + --ink:#000; + --grey: grey; + --color-dark-beige:#E6DACD; + --color-light-beige:#F4ECE6; + --color-blue:#0150FD; + --heading-font: 'Poppins', sans-serif; + --body-font: 'Quicksand', sans-serif; +} + +body { + margin: 0; +} + +header { + background: var(--paper); + text-align: center; +} + +h1 { + font-family: var(--heading-font); + margin: 0; + padding: 1.2rem; +} + +section { + background: var(--color-dark-beige); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.section__container { + display: flex; + justify-content: center; + margin: 4rem 0; + width: max(60%, 320px); + background: var(--paper); + box-shadow: -15px 15px 15px var(--grey); +} + +form { + width: max(80%, 260px); + padding-top: 3rem; + display: flex; + flex-direction: column; + row-gap: 4rem; +} + +form input { + border: transparent; + border-bottom: 2px solid; + height: 40px; +} + +form select { + height: 40px; +} + +form label { + font-family: var(--heading-font); +} + +.form__btn { + text-align: center; + margin: 1rem 0; +} + +.form__wrapper { + display: flex; + flex-direction: column; + row-gap: 1rem; +} + +.contact__btn { + height: 2rem; + width: 8rem; + border-radius: 20px; + cursor: pointer; + border: none; + background: var(--color-blue); + color: var(--paper); +} + +.contact__btn:hover { + background: var(--paper) ; + color: var(--ink); + border: 1px solid var(--color-blue); + transition: 0.4s ease 0s; +} + +.footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 3rem; + height: 150px; + border-top: #b2b2b2 solid 1px; + row-gap: 1rem; + text-align: center; +} + +.footer__img { + max-width: 10%; + max-height: 320px; + object-fit: cover; + +} \ No newline at end of file