diff --git a/demo/css/login.css b/demo/css/login.css new file mode 100644 index 0000000..9761163 --- /dev/null +++ b/demo/css/login.css @@ -0,0 +1,98 @@ +/* login.css */ +body, html { + background-attachment: fixed; + height: 100%; + margin: 0; + font-family: 'Roboto', sans-serif; +} + +.container { + display: flex; + height: 100vh; +} + +/* Header Styles */ +.top-header { + display: flex; + align-items: center; + background-color: #1f3d57; + color: white; + padding: 10px 20px; + height: 60px; +} + +.top-header .logo { + height: 40px; + width: auto; + margin-right: 15px; +} + +.site-name { +position: absolute; + left: 50%; + font-size: 2.5em; + font-weight: bold; + letter-spacing: 4px; + font-family: 'EB Garamond', serif;} + + +/* Main Content */ +.main-content { + flex: 1; + display: flex; + justify-content: center; + align-items: center; +} + +/* Login Box */ +.login-box { + background-color: #1f3d57; + padding: 45px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0,0,0,0.2); + width: 300px; + color: #38a7e8; +} + +.login-box h2 { + font-size: 50px; + text-align: center; +font-weight: bold; + margin-bottom: 30px; + margin-top: 8px; + +} + +.login-box label { + display: block; + margin-top: 10px; + font-weight: bold; +} + +.login-box input { + align-items: center; + width: 100%; + padding: 10px; + margin-top: 5px; + border-radius: 3px; + border: 1px solid #ccc; + box-sizing: border-box; + } + +.login-box button { + display: block; + margin: 0 auto; + width: 40%; + padding: 10px; + margin-top: 20px; + background-color: #38a7e8; + color: white; + font-weight: bold; + border: none; + border-radius: 4px; + cursor: pointer; + } + +.login-box button:hover { + background-color: #3498db; +} diff --git a/demo/login.html b/demo/login.html new file mode 100644 index 0000000..0fc9ebe --- /dev/null +++ b/demo/login.html @@ -0,0 +1,31 @@ + + +
+ +