diff --git a/static/index.html b/static/index.html index 76846e80..046483f1 100644 --- a/static/index.html +++ b/static/index.html @@ -10,13 +10,19 @@ -
-

URL Shortener

-
- -
- -
+
+
+

URL Shortener

+
+
+ +
+
+
+ +
+
+
\ No newline at end of file diff --git a/static/style.css b/static/style.css index f5b37cc7..aa890f45 100644 --- a/static/style.css +++ b/static/style.css @@ -1,20 +1,44 @@ *{ - align: center; + margin: 0; + padding: 0; + box-sizing: border-box; +} +.wrapper{ + overflow-x: none; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.heading{ + font-family: "Poppins"; + font-weight: 400; + width: 100vw; + height: 20%; + text-align: center; + font-size: 30px; +} + +.url{ + width: 50%; + box-shadow: 5px 10px #cfcdcd; } #url{ - align: center; size: 100px; height: 50px; - width: 600px; - font-family: Arial; + width: 100%; + font-family: Poppins; font-size: 25px; - margin-top: 2%; - margin-left: 25%; } + .btn { background: #ffd324; background-image: -webkit-linear-gradient(top, #ffd324, #fab120); - background-image: -moz-linear-gradient(top, #ffd324, #fab120); + background-image: -moz-linear-gradien 5px 10px t(top, #ffd324, #fab120); background-image: -ms-linear-gradient(top, #ffd324, #fab120); background-image: -o-linear-gradient(top, #ffd324, #fab120); background-image: linear-gradient(to bottom, #ffd324, #fab120); @@ -24,17 +48,17 @@ font-size: 29px; padding: 10px 20px 10px 20px; text-decoration: black; - margin-top: 2%; - margin-left: 43%; } .btn:hover { - background: #3cb0fd; - background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); - background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); - background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); - background-image: -o-linear-gradient(top, #3cb0fd, #3498db); - background-image: linear-gradient(to bottom, #3cb0fd, #3498db); + cursor: pointer; + + background: #ec9624; + background-image: -webkit-linear-gradient(top, #ec9624, #ec9624); + background-image: -moz-linear-gradient(top, #ec9624, #ec9624); + background-image: -ms-linear-gradient(top, #ec9624, #ec9624); + background-image: -o-linear-gradient(top, #ec9624, #ec9624); + background-image: linear-gradient(to bottom, #ec9624, #ec9624); text-decoration: none; } @@ -49,6 +73,7 @@ background:#FFFF00; width:fit-content; } + .center{ font-family: "American Typewriter"; font-size: 40px;