Added Flexboxes and fonts

Author: Ayanprogrammer11

customers/index.html

@@ -8,7 +8,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>uHost Customers</title>
     <link rel="shortcut icon" href="../favicon.png">
-    <link href="https://fonts.googleapis.com/css?family=Anton|Montserrat:400,700" rel="stylesheet">
+    <!-- <link href="https://fonts.googleapis.com/css?family=Anton|Montserrat:400,700" rel="stylesheet"> -->
     <link rel="stylesheet" href="../shared.css">
     <link rel="stylesheet" href="customers.css">
 </head>

index.html

@@ -7,8 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>uHost</title>
     <link rel="shortcut icon" href="favicon.png">
-    <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
+   
     <link rel="stylesheet" href="shared.css">
     <link rel="stylesheet" href="main.css">
 </head>

main.css

@@ -30,12 +30,7 @@
     font-size: 3rem;
   }
 }
-/*   
-  .plan__list {
-    width: 100%;
-    margin: auto;
-    text-align: center;
-  } */
+
 
   .plan {
     background: #d5ffdc;
@@ -44,6 +39,8 @@
     margin: 0.5rem 0;
     width: 100%;
     vertical-align: middle;
+    display: flex;
+    flex-direction: column;
   }
 
   .plan--highlighted {
@@ -88,17 +85,23 @@
 
   @media (min-width: 40rem) {
     .plan__list {
-      text-align: center;
+      display: flex;
       width: 100%;
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
     }
     .plan {
-      display: inline-block;
-      width: 30%;
-      vertical-align: middle;
       min-width: 13rem;
       max-width: 25rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 28rem;
     }
     .plan--highlighted {
+      z-index: 50;
+      height: 30rem;
       box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5); 
     }
   }
@@ -145,11 +148,14 @@
 
 @media (min-width: 40rem) {
   .key-feature {
-    display: inline-block;
     width: 30%;
-    vertical-align: top;
     max-width: 25rem;
   }
+
+  .key-feature__list {
+    display: flex;
+    justify-content: center;
+  }
 }
 
 

packages/AnonymousPro-BoldItalic.ttf

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>uHost</title>
     <link rel="shortcut icon" href="../favicon.png">
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
+    <!-- <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> -->
     <link rel="stylesheet" href="../shared.css">
     <link rel="stylesheet" href="packages.css">
 </head>

packages/AnonymousPro-Italic.ttf

@@ -2,6 +2,17 @@
     padding-top: 2rem;
 } */
 
+@font-face {
+    font-family: "AnonymousPro";
+    src: url("./anonymousPro-Regular.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: "AnonymousPro";
+    src: url("./anonymousPro-Bold.ttf") format("truetype");
+    font-weight: 700;
+}
+
 .background {
     background: url("../images/plans-background.jpg") center / cover;
     position: fixed;
@@ -53,9 +64,12 @@
 .package__info {
     padding: 1rem;
     border: 1px solid #0e4f1f;
-    font-size: 1.25rem;
+    /* font-size: 1.25rem; */
     color: #0e4f1f;
     background: white;
+    /* font-family: "AnonymousPro", sans-serif;
+    font-weight: 700; */
+    font: 700 1.25rem "AnonymousPro", sans-serif;
 }
 
 .clearfix {

packages/anonymousPro-Bold.ttf

@@ -1,3 +1,6 @@
+@import url("https://fonts.googleapis.com/css?family=Anton");
+@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,900");
+@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
 
 /* Global Styles */
 
@@ -37,13 +40,13 @@ main {
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 1;
+    z-index: 60;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
-.main-header > div {
-    display: inline-block;
-    vertical-align: middle;
-}
+
 
 /* Toggle Mobile Nav button */
 
@@ -73,41 +76,27 @@ main {
     color: #0e4f1f;
     font-weight: bold;
     text-decoration: none;
-    /* font-size: 1.375rem; */
-    height: 2.5rem;
-    display: inline-block;
-    /* height: 1.375rem; */
-    vertical-align: middle;
 }
 
 .main-header__brand img {
-    height: 100%;
+    height: 2.5rem;
+    vertical-align: middle;
 }
 
 .main-nav {
     display: none;
-    text-align: right;
-    width: calc(100% - 44px);
-    vertical-align: middle;
 }
 
-@media (min-width: 40rem) {
-    .main-nav {
-        display: inline-block;
-    }
-    .toggle-button {
-        display: none;
-    }
-}
+
 
 .main-nav__items {
     margin: 0;
     padding: 0;
     list-style: none;
+    display: flex;
 }
 
 .main-nav__item {
-    display: inline-block;
     margin: 0 0.625rem;
 }
 
@@ -149,19 +138,21 @@ main {
     z-index: 101;
     position: fixed;
     height: 100vh;
-    width: 50%;
+    width: 80%;
     background: white;
     top: 0;
     left: 0;
 }
 
 .mobile-nav__items {
     list-style: none;
-    margin: 14rem auto;
     padding: 0;
-    text-align: center;
-    width: 90%;
+    width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 .mobile-nav__item {
@@ -213,7 +204,12 @@ main {
     font-weight: bolder;
 }
 
-
+.button[disabled] {
+    cursor: not-allowed;
+    border: #a1a1a1;
+    background: #ccc;
+    color: #a1a1a1;
+}
 
 
 /* Footer */
@@ -228,16 +224,17 @@ main {
     list-style: none;
     margin: 0;
     padding: 0;
-    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .main-footer__link {
-    display: inline-block;
+    margin: 0.5rem 0;
 }
 
 .main-footer__link a {
     text-decoration: none;
-    margin: 0 1.25rem;
     color: white;
     font-weight: bold;
 }
@@ -269,3 +266,20 @@ main {
 /* .open {
     display: block !important;
 } */ 
+
+
+@media (min-width: 40rem) {
+    .main-nav {
+        display: flex;
+    }
+    .toggle-button {
+        display: none;
+    }
+    .main-footer__links {
+        flex-direction: row;
+        justify-content: center;
+    }
+    .main-footer__link {
+        margin: 0 1rem;
+    }
+}

packages/anonymousPro-Regular.ttf

@@ -57,4 +57,5 @@ toggleButton.addEventListener("click", () => {
 //     closeModal();
 //     mobileNav.style.display = "none";
 //     crossButton.style.display = "none"
-// })
+// })
+

packages/index.html

@@ -7,7 +7,6 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>uHost Signup</title>
     <link rel="shortcut icon" href="../favicon.png">
-    <link href="https://fonts.googleapis.com/css?family=Anton|Montserrat:400,700" rel="stylesheet">
     <link rel="stylesheet" href="../shared.css">
     <link rel="stylesheet" href="start-hosting.css">
 </head>
@@ -62,14 +61,14 @@ <h1 class="signup-title">Awesome! Let's dive right in!</h1>
                 <option value="ms">Ms.</option>
             </select>
             <label for="first-name">First name</label>
-            <input type="text" id="first-name">
+            <input type="text" id="first-name" required>
             <label for="last-name">Last name</label>
-            <input type="text" id="last-name">
+            <input type="text" id="last-name" required>
             <label for="email">E-Mail</label>
-            <input type="email" id="email">
+            <input type="email" id="email" required>
             <label for="password">Password</label>
-            <input type="password" id="password">
-            <input type="checkbox" id="agree-terms">
+            <input type="password" id="password" required>
+            <input type="checkbox" id="agree-terms" required>
             <label for="agree-terms">Agree to
                 <a href="#">Terms &amp; Conditions</a>
             </label>

packages/packages.css

@@ -61,6 +61,11 @@ main {
     border: #0e4f1f;
 }
 
+.signup-form :invalid {
+    background: #ff5454;
+    border-color: red !important;
+}
+
 .signup-form button[type="submit"] {
     display: block;
     margin-top: 2rem;