diff --git a/README.md b/README.md index e69de29..c409365 100644 --- a/README.md +++ b/README.md @@ -0,0 +1 @@ +## Test \ No newline at end of file diff --git a/login_form/framework1/index.html b/login_form/framework1/index.html new file mode 100644 index 0000000..8e3ca21 --- /dev/null +++ b/login_form/framework1/index.html @@ -0,0 +1,24 @@ + + + + + Login + + + + +
+
+
+
+

Login

+ + + +
+
+
+
+ + + diff --git a/login_form/frameworks2/index.html b/login_form/frameworks2/index.html new file mode 100644 index 0000000..6322f46 --- /dev/null +++ b/login_form/frameworks2/index.html @@ -0,0 +1,20 @@ + + + + + Login + + + + +
+

Login

+ + + +
+ + + diff --git a/login_form/ohne_framework/index.html b/login_form/ohne_framework/index.html new file mode 100644 index 0000000..5087d25 --- /dev/null +++ b/login_form/ohne_framework/index.html @@ -0,0 +1,16 @@ + + + + + Login + + + +
+

Login

+ + + +
+ + diff --git a/login_form/ohne_framework/style.css b/login_form/ohne_framework/style.css new file mode 100644 index 0000000..a84a752 --- /dev/null +++ b/login_form/ohne_framework/style.css @@ -0,0 +1,122 @@ +/* ========================= + CSS RESET +========================= */ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ========================= + ROOT VARIABLES +========================= */ +:root { + --bg-gradient: linear-gradient(135deg, #667eea, #764ba2); + --card-bg: #ffffff; + --primary: #667eea; + --primary-hover: #5a67d8; + --text-main: #333333; + --text-muted: #666666; + --border: #dddddd; + --radius: 12px; + --shadow: 0 20px 40px rgba(0, 0, 0, 0.15); +} + +/* ========================= + PAGE LAYOUT +========================= */ +body { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; + background: var(--bg-gradient); +} + +/* ========================= + LOGIN CARD +========================= */ +.login-form { + background: var(--card-bg); + width: 320px; + padding: 2rem; + border-radius: var(--radius); + box-shadow: var(--shadow); +} + +/* ========================= + HEADING +========================= */ +.login-form h2 { + text-align: center; + margin-bottom: 1.5rem; + font-size: 1.5rem; + font-weight: 600; + color: var(--text-main); +} + +/* ========================= + INPUT FIELDS +========================= */ +.login-form input { + width: 100%; + padding: 0.75rem 0.85rem; + margin-bottom: 1rem; + font-size: 1rem; + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text-main); + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.login-form input::placeholder { + color: var(--text-muted); +} + +.login-form input:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25); +} + +/* ========================= + BUTTON +========================= */ +.login-form button { + width: 100%; + padding: 0.75rem; + margin-top: 0.5rem; + border: none; + border-radius: 8px; + background: var(--primary); + color: white; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: background 0.2s ease, transform 0.1s ease, + box-shadow 0.1s ease; +} + +.login-form button:hover { + background: var(--primary-hover); +} + +.login-form button:active { + transform: translateY(1px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) inset; +} + +/* ========================= + RESPONSIVE (MOBILE) +========================= */ +@media (max-width: 400px) { + .login-form { + width: 90%; + padding: 1.5rem; + } +}