From a426195b7e76fc9ed7959c7717fff434a9bbc44a Mon Sep 17 00:00:00 2001 From: GNUxeava Date: Tue, 8 Mar 2022 22:08:45 +0530 Subject: final commit --- style.css | 169 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 169 insertions(+) create mode 100644 style.css (limited to 'style.css') diff --git a/style.css b/style.css new file mode 100644 index 0000000..84f741c --- /dev/null +++ b/style.css @@ -0,0 +1,169 @@ +@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); + +html { + height: 100%; +} + +body { + background-image: linear-gradient(135deg, #266bff, #59cfa3); + background-repeat: no-repeat; + color: white; +} + +header, main, footer { + margin-left: 100px; + padding-top: 10px; +} + +header { + font-family: 'Raleway', sans-serif; + font-size: 250%; +} + +main { + font-family: 'Lato', sans-serif; +} + +footer { + padding-top: 200px; +} + +p { + font-size: 125%; +} + +form { + border-radius: 15px; + background-image: linear-gradient(315deg, #266bff, #59cfa3); + padding: 25px 10px; + width: fit-content; +} + +.email { + margin-top: 15px; + height: 25px; + border: none; + border-radius: 10px; + padding: 12px 20px; + width: 350px; +} + +input[type=submit] { + background-color: #59cfa3; + color: white; + margin-left: 15px; + padding: 12px 20px; + border: none; + border-radius: 10px; + cursor: pointer; + font-family: 'Raleway', sans-serif; + font-size: 125%; +} + +label { + font-family: 'Raleway', sans-serif; + font-size: 200%; +} + +nav { + float: right; + margin-top: 25px; + margin-right: 100px; +} + +a { + font-family: 'Raleway', sans-serif; + font-size: 135%; + color: white; + padding: 14px 25px; + text-align: center; + text-decoration: none; +} + +a:hover, a:active{ + background-color: rgb(75, 207, 207); + border-radius: 25px; + transition: 0.5s; +} + +figure { + float: right; + margin-top: -150px; + margin-right: 200px; + max-width: 100%; + min-width: none; + height: auto; +} + +/* too tired to remove code duplication and I am afraid things will break; +is this what legacy programs feel like? Yikes!*/ +@media all and (max-width: 768px) { + body + { + position: absolute; + text-align:center; + } + + header { + margin-top: 100px; + } + + nav { + float: center; + margin-top: 25px; + } + + header, main, footer { + margin-left: 0px; + padding: 0px; + } + + a, form { + margin-left: auto; + margin-right: auto; + width: fit-content; + } + .email { + margin-bottom: 20px; + } +} + + +/* here we define rules for mobile devices */ +@media all and (max-width: 480px) { + body + { + background-size: cover; + background-image: none; + background-color:rgb(75, 143, 207); + position:absolute; + text-align:center; + margin: 0px; + padding: 0px; + } + + header { + margin-top: 100px; + } + + nav { + float: center; + margin-top: 25px; + } + + header, main, footer { + margin-left: 0px; + padding: 0px; + } + + form { + margin-left: auto; + margin-right: auto; + width: fit-content; + } + .email { + margin-bottom: 20px; + } +} -- cgit v1.2.3