final commitHEADmaster

1 files changed, 169 insertions, 0 deletions

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;
+    }
+}