diff options
| -rw-r--r-- | static/css/style.css | 62 | ||||
| -rw-r--r-- | templates/index.html | 4 |
2 files changed, 58 insertions, 8 deletions
diff --git a/static/css/style.css b/static/css/style.css index 8714d21..fa54eee 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -3,22 +3,64 @@ body { height: 100vh; margin: 0; color: #FFFFFF; + text-align: center; } .navbar { height: 3.5rem; border-bottom: 1px solid pink; margin-bottom: 2.5rem; + background-color: #222526; + overflow: hidden; } .root { - width: 100%; - height: 25rem; + width: 90%; + height: 70vh; margin: auto; background: url("/media/hell-girl-full.png"); background-repeat: no-repeat; } +.content { + float: right; + margin-top: 10vh; +} + +form { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-evenly; + margin: 1.5rem auto; + width: 50%; +} + +/* +form input { + margin: 1rem 2rem; +} +*/ + +input[type=text] { + height: 2rem; + box-sizing: border-box; +} + +#submit-button { + height: 2rem; + width: 5rem; + background-color: #ff0057; + border: 1px solid #e30808; + border-radius: 8px; + transition-duration: 0.4s; + box-sizing: border-box; +} + +#submit-button:hover { + background-color: #ff0000; +} + strong, em { color: red; font-style: normal; @@ -26,12 +68,20 @@ strong, em { em { font-size: 2rem; } - -.content { - text-align: center; +h1, h3, strong, em { + margin: 0.5rem 0; + display: inline; +} +h1, h3 { + background-color: #23262766; } - @media only screen and (max-device-width: 480px) { + .content { + margin: auto; + } + form { + width: 100%; + } } diff --git a/templates/index.html b/templates/index.html index eec0057..c1c06fc 100644 --- a/templates/index.html +++ b/templates/index.html @@ -15,8 +15,8 @@ <input type="text" name="name" id="name-input"/> <input type="submit" value="send" id="submit-button"/> </form> - <h3><em>Notice:</em> When you <strong>curse</strong> someone, there will be two holes that you dig...</h3> - <h3>One is for the cursed person and the other one is for <em>yourself.</em></h3> + <h3><em>Notice:</em> When you <strong>curse</strong> someone, there will be two holes that you dig... + <br/>One is for the cursed person and the other one is for <em>yourself.</em></h3> </div> </div> </body> |