aboutsummaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
authorVidhu Kant Sharma <bokuwakanojogahoshii@yahoo.com>2021-04-08 21:42:12 +0530
committerVidhu Kant Sharma <bokuwakanojogahoshii@yahoo.com>2021-04-08 21:42:12 +0530
commit9b9875c34b336fac5932d514746be7c1470dce54 (patch)
treef000cfbd760b91c469177dce28e0be6645c1c9b7 /static
parentc866ff3317bd86facf8dfa14edd2064fed10c09f (diff)
added text styles and made the site more responsive. Now it looks pretty much like hell-correspondence
Diffstat (limited to 'static')
-rw-r--r--static/css/style.css62
1 files changed, 56 insertions, 6 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%;
+ }
}