--- /dev/null
+*,\r
+::before,\r
+::after {\r
+ box-sizing: border-box;\r
+ margin: 0;\r
+ padding: 0;\r
+}\r
+html {\r
+ font-size: 62.5%;\r
+}\r
+body {\r
+ font-family: "Raleway", sans-serif;\r
+}\r
+main {\r
+ display: flex;\r
+ justify-content: center;\r
+ align-items: center;\r
+ background-color: #22243e;\r
+ height: 100vh;\r
+}\r
+.form-container {\r
+ width: 90%;\r
+ max-width: 45rem;\r
+ height: 80%;\r
+ padding: 4rem 2rem;\r
+ background-color: #e5e5e5;\r
+ border: 0.2rem solid #000;\r
+ border-radius: 1.4rem;\r
+ box-shadow: #000 0.7rem 1rem 0.7rem;\r
+}\r
+.header-container, .footer-container {\r
+ text-align: center;\r
+}\r
+form {\r
+ padding: 1rem 2rem;\r
+}\r
+.form-title {\r
+ font-size: 2.8rem;\r
+ font-family: "DM Sans", sans-serif;\r
+ font-weight: 900;\r
+}\r
+.form-subheading {\r
+ font-size: 1.6rem;\r
+ font-family: "DM Sans", sans-serif;\r
+ font-weight: 600;\r
+}\r
+.italicize {\r
+ font-style: italic;\r
+}\r
+fieldset {\r
+ border: none;\r
+ border-bottom: 0.2rem solid gray;\r
+ padding-bottom: 1.4rem;\r
+ margin-bottom: 1rem;\r
+}\r
+legend, p {\r
+ font-size: 1.4rem;\r
+ margin: 0.7rem;\r
+}\r
+label {\r
+ font-size: 1.4rem;\r
+ display: block;\r
+ margin: 0.7rem auto;\r
+}\r
+input, select, textarea {\r
+ padding: 0.2rem 0.4rem;\r
+ border: 0.1rem solid #000;\r
+ border-radius: 0.3rem;\r
+ background-color: #e5e5e5;\r
+ font-family: "Raleway", sans-serif;\r
+}\r
+input:focus, select:focus, textarea:focus {\r
+ box-shadow: #000 0.1rem 0.1rem;\r
+}\r
+option:checked {\r
+ background-color: #22243e;\r
+ color: #e5e5e5;\r
+}\r
+input[type="radio"], input[type="checkbox"] {\r
+ accent-color: #22243e;\r
+}\r
+textarea {\r
+ width: 100%;\r
+ height: 7rem;\r
+ resize: none;\r
+}\r
+input[type="submit"] {\r
+ font-family: "DM Sans", sans-serif;\r
+ font-weight: 700;\r
+ font-size: 1.8rem;\r
+ padding: 0.4rem 2rem;\r
+ background-color: #22243e;\r
+ color: #e5e5e5;\r
+ cursor: pointer;\r
+}\r
+input[type="submit"]:hover, input[type="submit"]:focus {\r
+ background-color: #e5e5e5;\r
+ color: #000;\r
+ transition: 0.2s;\r
+}\r
+a {\r
+ color: #22243e;\r
+}
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>\r
+<html lang="en">\r
+<head>\r
+ <meta charset="UTF-8">\r
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">\r
+ <meta name="author" content="tenkyuu">\r
+ <meta name="description" content="17-year old awesome web developer who loves creating websites and stuffs.">\r
+ <meta name="referrer" content="no-referrer">\r
+ <meta name="robots" content="index, follow">\r
+ <title>Survey Form by tenkyuu</title>\r
+ <link rel="icon" type="image/ico" href="/assets/icons/favicon.ico">\r
+ <link rel="preload" href="/css/projects/survey-form.css" as="style">\r
+ <link rel="stylesheet" href="/css/projects/survey-form.css">\r
+ <meta property="og:type" content="website">\r
+ <meta property="og:title" content="Survey Form by tenkyuu">\r
+ <meta property="og:description" content="A survey form that record surveys (obviously!) made by tenkyuu.">\r
+ <meta property="og:image" content="https://tenkyuu.dev/images/projects/jpeg/survey-form.jpeg">\r
+ <meta property="og:url" content="https://tenkyuu.dev/">\r
+ <meta name="twitter:card" content="summary_large_image">\r
+ <meta name="twitter:site" content="@tenkyuudev">\r
+ <meta name="twitter:creator" content="@tenkyuudev">\r
+<!-- Google Fonts -->\r
+ <link rel="preconnect" href="https://fonts.googleapis.com">\r
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\r
+ <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Raleway:ital,wght@0,500;1,500&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">\r
+</head>\r
+<body>\r
+ <main>\r
+ <div class="form-container">\r
+ <div class="header-container">\r
+ <h1 class="form-title">Sign Up</h1>\r
+ <p class="form-subheading">Fill out the following information to join.</p>\r
+ </div>\r
+ <form action="form-landing.html" method="POST">\r
+ <fieldset>\r
+ <label>First Name: <input type="text" name="first-name" id="fname" placeholder="Hayao" required></label>\r
+ <label>Last Name <span class="italicize">(optional)</span>: <input type="text" name="last-name" id="lname" placeholder="Miyazaki"></label>\r
+ <label>Age: <input type="number" name="age" id="age" min="13" max="120" placeholder="Age" required></label>\r
+ <label>Occupation:\r
+ <select id="occupation" required>\r
+ <option value="">Select occupation</option>\r
+ <option value="1">Student</option>\r
+ <option value="2">Full Time</option>\r
+ <option value="3">Part Time</option>\r
+ <option value="4">Freelance</option>\r
+ <option value="5">Unemployed</option>\r
+ <option value="6">Retired</option>\r
+ <option value="7">Homemaker</option>\r
+ <option value="8">Prefer not to say</option>\r
+ <option value="9">Other</option>\r
+ </select>\r
+ </label>\r
+ <label>Email: <input type="email" name="email" id="email" pattern="[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-z]{2,}" placeholder="example@email.com" required></label>\r
+ <label>Password: <input type="password" name="password" id="pwd" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,24}" placeholder="********" required></label>\r
+ </fieldset>\r
+\r
+ <fieldset>\r
+ <label><input type="radio" name="account-type" id="personal-account" value="personal" checked> Personal</label>\r
+ <label><input type="radio" name="account-type" id="business-account" value="business"> Business</label>\r
+ </fieldset>\r
+\r
+ <fieldset>\r
+ <legend>Where did you hear about us? <span class="italicize">(optional)</span></legend>\r
+ <label><input type="checkbox" name="where" id="chkbx1" value="twitter"> Twitter</label>\r
+ <label><input type="checkbox" name="where" id="chkbx2" value="website"> Website</label>\r
+ <label><input type="checkbox" name="where" id="chkbx3" value="searchengine"> Search Engine</label>\r
+ <label>Other: <input type="text" name="where" id="chkbx4" value=""></label>\r
+ </fieldset>\r
+\r
+ <fieldset>\r
+ <legend>What do you think about this form? <span class="italicize">(optional)</span></legend>\r
+ <textarea name="feedback" id="feedback" maxlength="200" placeholder="Your comment here..."></textarea>\r
+ </fieldset>\r
+\r
+ <div class="footer-container">\r
+ <p id="terms">\r
+ By signing up, you hereby agree to the <a href="" onclick="termsNull()">Terms and Conditions.</a>\r
+ </p>\r
+ <input type="submit" value="Create Account">\r
+ </div>\r
+ </form>\r
+ </div>\r
+ </main>\r
+\r
+ <script src="/javascript/script.js"></script>\r
+</body>\r
+</html>
\ No newline at end of file
projects / mysite.git / commitdiff