diff options
| Commit | bf926f4cc6cbdde25f91808d04991778b156e3c5 (patch) | |
|---|---|---|
| Author | 2024-11-22 21:00:56 +0200 | |
| Committer | 2024-11-22 21:00:56 +0200 | |
| Files | 589d2ca379f6532085cce700e3608c362baa18d3 | |
| uni-projects-bf926f4cc6cbdde25f91808d04991778b156e3c5.tar uni-projects-bf926f4cc6cbdde25f91808d04991778b156e3c5.tar.gz uni-projects-bf926f4cc6cbdde25f91808d04991778b156e3c5.zip | ||
| Parent | e38341caa4b4e85de82b8dde7973b4f6c5df90a3 (diff) | |
hw(2/Web): Added solution
2 files changed, 97 insertions, 0 deletions
| -rw-r--r-- | Year 4/Web technologies/hw02.css | 76 | ||||
| -rw-r--r-- | Year 4/Web technologies/hw02.html | 21 |
diff --git a/Year 4/Web technologies/hw02.css b/Year 4/Web technologies/hw02.css new file mode 100644 index 0000000..16426f7 --- /dev/null +++ b/Year 4/Web technologies/hw02.css @@ -0,0 +1,76 @@ +:root { + --dark-gray: #b8c1cb; + --light-gray: #e8eef4; + + --gray-green: #c3cdc0; + --darker-gray-green: #bbc9ba; + + --cyan-green: #defdf1; + --darker-cyan-green: #cfe7d9; + + --light-dark-green: #79a06b; + --lighter-dark-green: #558d3d; + --dark-green: #427d23; +} + +body { + margin: 0; + height: 100vh; + width: 100vw; +} + +body > :only-child { + position: absolute; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; +} + +.registration-container { + background-color: var(--cyan-green); + /* Made to look like in the screenshot */ + border-top: 1px solid var(--dark-gray); + border-bottom: 1px solid var(--dark-gray); + border-left: 3px solid var(--light-gray); + + box-sizing: border-box; + width: 30.2%; /* ~585px on 1920px width */ +} + +.registration-form { + border: 1px solid var(--dark-green); + font-size: 17px; + /* I wanted to make it as pixel-perfect as possible */ + margin: 3.64em 4.58em 4.88em 4.29em; + padding: 1.82em; +} + +.registration-form > :not(:last-child) { + margin-bottom: 0.7em; +} + +.registration-input { + background-color: white; + border: 2px solid var(--gray-green); + border-radious: none; + display: block; + font-size: inherit; + padding: 0.41em; + width: 100%; +} + +.registration-input:hover { + border-color: var(--light-dark-green); +} + +input[type="submit"].registration-input { + background-color: var(--darker-cyan-green); + border-color: var(--darker-gray-green); + color: var(--lighter-dark-green); +} + +input[type="submit"].registration-input:hover { + background-color: var(--lighter-dark-green); + border-color: var(--darker-cyan-green); + color: var(--darker-cyan-green); +} diff --git a/Year 4/Web technologies/hw02.html b/Year 4/Web technologies/hw02.html new file mode 100644 index 0000000..1581310 --- /dev/null +++ b/Year 4/Web technologies/hw02.html @@ -0,0 +1,21 @@ +<html> + <head> + <link rel="stylesheet" href="./hw02.css"> + </head> + <body> + <section class="registration-container"> + <form class="registration-form"> + <input class="registration-input" name="username" type="text" placeholder="Потребителско име"> + <input class="registration-input" name="password" type="password" placeholder="Парола"> + <input class="registration-input" name="phone-number" type="tel" placeholder="Телефон"> + <input class="registration-input" name="email" type="email" placeholder="Имейл адрес"> + <select class="registration-input" name="residence-type"> + <option value="landlord">Собственик</option> + <option value="tenant">Наемател</option> + </select> + <input class="registration-input" name="apartment-number" type="number" min="0" placeholder="Номер на апартамента"> + <input class="registration-input" type="submit" value="Регистрирай ме!"> + </form> + </section> + </body> +</html> |