diff --git a/css/SpeedBeast.ttf b/css/SpeedBeast.ttf new file mode 100644 index 0000000..84263f8 Binary files /dev/null and b/css/SpeedBeast.ttf differ diff --git a/css/style.css b/css/style.css index ea16012..8101737 100644 --- a/css/style.css +++ b/css/style.css @@ -1,16 +1,147 @@ -body{ - display: flex; +@font-face { + font-family: "SpeedBeast"; + src: + local("SpeedBeast"), + url("./SpeedBeast.ttf") format("truetype"); +} + +body { + display: flex; justify-content: center; align-items: center; position: fixed; width: 100%; height: 100%; + font-size: 10px; + margin: 0; + display: grid; + place-items: center; + } -h1{ - font-size: 24px; + +h1 { + font-size: 36px; margin-top: 20px; + color: #4f3c68; +} + +main { + font-family: Speedbeast,Trebuchet, sans-serif, calibiri; } #background-image { - background-image: url('./assets/bg.webp'); - } \ No newline at end of file + background-image: url('../assets/bg.webp'); +} + +#checkbox { + display: none; +} +#checkbox:checked + #formcontainer #form { + width: 37.5em; +} +#checkbox:checked + #formcontainer #form_toggle { + visibility: hidden; + opacity: 0; + transform: scale(0.7); +} +#checkbox:checked + #formcontainer #form_input, #checkbox:checked + #formcontainer #form_buttonLabel { + transition: 0.2s 0.1s; + visibility: visible; + opacity: 1; + transform: scale(1); +} +#checkbox:not(:checked) + #formcontainer #form_input:required:valid ~ #form_toggle::before, #checkbox:checked + #formcontainer #form_input:required:valid ~ #form_toggle::before { + content: 'Thank You! \1F60A'; +} +#checkbox:not(:checked) + #formcontainer #form_input:required:valid ~ #form_toggle { + pointer-events: none; + cursor: default; +} +#formcontainer, #form, #form_toggle { + width: 20em; + height: 6.25em; +} +#formontainer { + position: relative; + font-weight: 700; +} +#form, #form_toggle { + position: absolute; + border-radius: 6.25em; + background-color: #fff; + transition: 0.2s; +} +#form { + left: 50%; + transform: translateX(-50%); + padding: 0.6em; + box-sizing: border-box; + box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.3); + display: flex; + justify-content: center; +} +#form_toggle { + color: #7e2722; + top: 0; + cursor: pointer; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; +} +#form_toggle::before { + font-size: 1.75em; + content: attr(data-title); +} +#form_input, #form_button { + font: inherit; + border: 0; + outline: 0; + border-radius: 5em; + box-sizing: border-box; +} +#form_input, #form_buttonLabel { + font-size: 1.75em; + opacity: 0; + visibility: hidden; + transform: scale(0.7); + transition: 0s; +} +#form_input { + color: rgb(31, 24, 134); + height: 100%; + width: 100%; + padding: 0 0.714em; +} +#form_input::placeholder { + color: currentColor; +} +#form_input:required:valid { + color: #1b5228; +} +#form_input:required:valid + .c-form__buttonLabel { + color: #fff; +} +#form_input:required:valid + .c-form__buttonLabel::before { + pointer-events: initial; +} +#form_buttonLabel { + color: #ffaea9; + height: 100%; + width: auto; +} +#form_buttonLabel::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + pointer-events: none; + cursor: pointer; +} +#form_button { + color: inherit; + padding: 0; + height: 100%; + width: 5em; + background-color: #7e2722; +} diff --git a/index.html b/index.html index 7fae7bc..0015d3d 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,22 @@
- +