diff --git a/static/styles_index.css b/static/styles_index.css index ea1c803..8ae407c 100644 --- a/static/styles_index.css +++ b/static/styles_index.css @@ -1,5 +1,11 @@ +@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Tilt+Prism&display=swap'); + +:root{ + --primary_color:#222831 +} + body { - font-family: Arial, sans-serif; + font-family: Oswald; margin: 0; padding: 0; } @@ -7,9 +13,9 @@ body { .container { max-width: 600px; margin: 50px auto; - padding: 20px; + padding: 25px; border: 1px solid #ccc; - border-radius: 5px; + border-radius: 15px; } h1 { @@ -19,6 +25,11 @@ h1 { .form-group { margin-bottom: 15px; } +.summary { + display: flex; + width: 100%; + justify-content: center; +} label { display: block; @@ -31,6 +42,8 @@ select { margin-top: 4px; margin-bottom: 8px; box-sizing: border-box; + border-radius: 5px; + } input[type="checkbox"] { @@ -51,3 +64,69 @@ input[type="submit"] { input[type="submit"]:hover { background-color: #45a049; } +.header-box{ + width: 100%; + background-color: var(--primary_color); + color: #FFF; + display: flex; + justify-content: center; + align-items: center; + padding: 5px; + border-radius: 10px; +} +.watermark{ + width: 100%; + margin: 20px; + height: 30px; + color: #FFF; + background-color: var(--primary_color); + padding: 5px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; +} +.watermark-container{ + width: 100%; + position: absolute; + bottom: 5px; + display: flex; + justify-content: center; + align-items: center; + +} +.heart{ + color: red; +} + +header { + background-color: var(--primary_color); + color: #fff; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + height: 60px; +} + +.logo { + width: 50px; + height: 50px; +} + +.logo img { + width: 100%; + height: auto; +} + +.title { + font-size: 24px; +} + +#dbTitle{ + font-family: Oswald; +} + +#process-box{ + border-radius: 10px; +}