+++ /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="Some information about me.">\r
- <meta name="referrer" content="no-referrer">\r
- <meta name="robots" content="index, follow">\r
- <title>tenkyuu - about</title>\r
- <link rel="icon" type="image/ico" href="assets/icons/favicon.ico">\r
- <link rel="preload" href="css/styles.css" as="style">\r
- <link rel="stylesheet" href="css/styles.css">\r
- <meta property="og:type" content="website">\r
- <meta property="og:title" content="tenkyuu - web developer">\r
- <meta property="og:description" content="17-year old awesome web developer who loves creating websites and stuffs.">\r
- <meta property="og:image" content="assets/pfp/tenkyuu-img.webp">\r
- <meta property="og:url" content="https://tenkyuu.dev">\r
- <meta name="twitter:card" content="summary_large_image">\r
- <meta name="twitter:site" content="@tenkyuu07">\r
- <meta name="twitter:creator" content="@tenkyuu07">\r
-<!-- Google Fonts -->\r
- <link rel="preconnect" href="https://fonts.bunny.net">\r
- <link href="https://fonts.bunny.net/css2?family=Epilogue:ital@0;1&family=Lato:wght@700;900&family=Meddon&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">\r
-<!-- Font Awesome -->\r
- <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>\r
-</head>\r
-<body>\r
- <header>\r
- <span class="logo">tenkyuu</span>\r
- <span class="btnNav" onclick="menuToggleOpen()">☰</span>\r
- <nav id="menu">\r
- <span class="btnNavClose" onclick="menuToggleClose()">x</span>\r
- <ul>\r
- <li><a href="index.html">Home</a></li>\r
- <li><a href="projects.html">Projects</a></li>\r
- <li><a href="about.html" class="current-page">About</a></li>\r
- <li><a href="contact.html">Contact</a></li>\r
- </ul>\r
- </nav>\r
- <div id="opacity-block" onclick="menuToggleClose()"></div>\r
- </header>\r
-\r
- <main id="top">\r
- <section>\r
- <h1 class="main-section-title">//ABOUT</h1>\r
- <div class="content-container-centered">\r
- <a href="https://twitter.com/tenkyuu07">\r
- <img src="assets/pfp/tenkyuu-img.webp"\r
- alt="tenkyuu profile image"\r
- title="Yuzaki Nasa from 'Tonikawa'"\r
- class="dev-pfp">\r
- </a>\r
- <div>\r
- <p class="description center">\r
- Hello, My name is <span class="strong">tenkyuu.</span><br>\r
- Nice to meet you!<br>\r
- </p>\r
- <p class="description center">\r
- I'm a 17-year old self-learn<br>\r
- Filipino web developer who makes<br>\r
- hand-coded static websites.\r
- </p>\r
- <p class="description center">\r
- I've been interested on making<br>\r
- websites since grade school.<br>\r
- </p>\r
- <p class="description center">\r
- Now, that's what I do for a living!\r
- </p>\r
- <p class="description center">\r
- I'm really passionate on making<br>\r
- specific type of websites - <br>\r
- simple websites like this one,<br>\r
- old-internet style websites, and<br>\r
- Japanese style websites.\r
- </p>\r
- <p class="description center">\r
- Umm... that's all I can say for now HAHA<br>\r
- (tbh I'm not really good at words.)\r
- </p>\r
- <p class="description center">\r
- Thank you for reading this!<br>\r
- <span class="strong">Thank youu!!</span>\r
- </p>\r
- </div>\r
- </div>\r
- </section>\r
-\r
- <div class="back-to-top">\r
- <a href="#top">\r
- <i class="fa fa-chevron-up"></i>\r
- </a>\r
- </div>\r
-\r
- <div class="social-icons">\r
- <a href="https://twitter.com/tenkyuu07">\r
- <i class="fab fa-twitter"></i>\r
- </a>\r
- <a href="https://github.com/ten-kyuu">\r
- <i class="fa-brands fa-github"></i>\r
- </a>\r
- </div>\r
- </main>\r
-\r
- <footer>\r
- <p class="built-with-love">\r
- Built with <span class="love">愛</span> using hand-coded <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>, and <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>.\r
- </p>\r
- <p class="copyright">© tenkyuu.dev</p>\r
- </footer>\r
-\r
- <script src="javascript/script.js"></script>\r
-</body>\r
-</html>
\ 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="You can contact me using the following links.">\r
- <meta name="referrer" content="no-referrer">\r
- <meta name="robots" content="index, follow">\r
- <title>tenkyuu - contact</title>\r
- <link rel="icon" type="image/ico" href="assets/icons/favicon.ico">\r
- <link rel="preload" href="css/styles.css" as="style">\r
- <link rel="stylesheet" href="css/styles.css">\r
- <meta property="og:type" content="website">\r
- <meta property="og:title" content="tenkyuu - web developer">\r
- <meta property="og:description" content="17-year old awesome web developer who loves creating websites and stuffs.">\r
- <meta property="og:image" content="assets/pfp/tenkyuu-img.webp">\r
- <meta property="og:url" content="https://tenkyuu.dev">\r
- <meta name="twitter:card" content="summary_large_image">\r
- <meta name="twitter:site" content="@tenkyuu07">\r
- <meta name="twitter:creator" content="@tenkyuu07">\r
-<!-- Bunny Fonts -->\r
- <link rel="preconnect" href="https://fonts.bunny.net">\r
- <link href="https://fonts.bunny.net/css2?family=Epilogue:ital@0;1&family=Lato:wght@700;900&family=Meddon&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">\r
-<!-- Font Awesome -->\r
- <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>\r
-</head>\r
-<body>\r
- <header>\r
- <span class="logo">tenkyuu</span>\r
- <span class="btnNav" onclick="menuToggleOpen()">☰</span>\r
- <nav id="menu">\r
- <span class="btnNavClose" onclick="menuToggleClose()">x</span>\r
- <ul>\r
- <li><a href="index.html">Home</a></li>\r
- <li><a href="projects.html">Projects</a></li>\r
- <li><a href="about.html">About</a></li>\r
- <li><a href="contact.html" class="current-page">Contact</a></li>\r
- </ul>\r
- </nav>\r
- <div id="opacity-block" onclick="menuToggleClose()"></div>\r
- </header>\r
-\r
- <main id="top">\r
- <section>\r
- <div class="full-width-title">\r
- <h1 class="main-section-title">//CONTACT</h1>\r
- </div>\r
- <div class="content-container-centered contact-container">\r
- <p class="description">\r
- Hello! If you liked this website and you're<br>\r
- interested in making a website for your own,<br>\r
- whether for personal or business purposes.<br>\r
- You can reach me out anytime!\r
- </p>\r
- <p class="description center-description strong">\r
- For inquiries, you can email me here:\r
- </p>\r
- <a href="mailto:hello@tenkyuu.dev">\r
- <i class="fas fa-envelope email-icon"></i>\r
- </a>\r
- <p class="description center-description">\r
- If you didn't received a reply immediately.<br>\r
- Don't worry, I'll reply as soon as I could!\r
- </p>\r
- </div>\r
- </section>\r
-\r
- <div class="social-icons">\r
- <a href="https://twitter.com/tenkyuu07">\r
- <i class="fab fa-twitter"></i>\r
- </a>\r
- <a href="https://github.com/ten-kyuu">\r
- <i class="fa-brands fa-github"></i>\r
- </a>\r
- </div>\r
- </main>\r
-\r
- <footer>\r
- <p class="built-with-love">\r
- Built with <span class="love">愛</span> using hand-coded <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>, and <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>.\r
- </p>\r
- <p class="copyright">© tenkyuu.dev</p>\r
- </footer>\r
-\r
- <script src="javascript/script.js"></script>\r
-</body>\r
-</html>
\ No newline at end of file
+++ /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
- background-color: #22243e;\r
- height: 100vh;\r
-}\r
-main {\r
- display: flex;\r
- justify-content: center;\r
- align-items: center;\r
-}\r
-.form-container {\r
- width: 90%;\r
- max-width: 45rem;\r
- height: auto;\r
- padding: 4rem 2rem;\r
- margin: 4rem auto;\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
-}\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
-:root {\r
- --text-color: #ffffff;\r
- --background-color: #000000;\r
- --box-selection-color: #ffffff;\r
- --box-text-color: #000000;\r
- --title-text: "Lato", sans-serif;\r
- --cursive-text: "Meddon", cursive;\r
- --section-title-background: #0f0c0c;\r
- --box-border: #000000;\r
- --black-icon-color: #000000;\r
-}\r
-*,\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: "Epilogue", sans-serif;\r
- display: flex;\r
- flex-direction: column;\r
- align-items: center;\r
-}\r
-\r
-/* top and sidebar */\r
-header {\r
- position: fixed;\r
- width: 100vw;\r
- height: 10rem;\r
- background-color: var(--background-color);\r
- top: 0;\r
- padding: 0 5rem;\r
- display: flex;\r
- justify-content: space-between;\r
- align-items: center;\r
- z-index: 1;\r
-}\r
-.logo, .btnNav, nav, nav li {\r
- color: var(--text-color);\r
-}\r
-.logo {\r
- font-size: 2rem;\r
- font-family: var(--title-text);\r
- font-weight: 900;\r
-}\r
-.btnNav, .btnNavClose {\r
- cursor: pointer;\r
-}\r
-.btnNav {\r
- font-size: 3rem;\r
-}\r
-.btnNavClose {\r
- font-size: 3rem;\r
- margin-left: 15rem;\r
-}\r
-nav {\r
- height: 100vh;\r
- width: 0;\r
- padding-top: 4rem;\r
- font-size: 2rem;\r
- background-color: var(--background-color);\r
- position: fixed;\r
- top: 0;\r
- right: 0;\r
- z-index: 3;\r
- transition: 0.5s;\r
-}\r
-nav li {\r
- list-style: none;\r
- margin: 4rem 5rem;\r
-}\r
-nav a {\r
- text-decoration: none;\r
- color: var(--text-color);\r
- padding: 1rem;\r
-}\r
-.current-page {\r
- background-color: var(--box-selection-color);\r
- color: var(--box-text-color);\r
-}\r
-nav a:hover, nav a:focus {\r
- background-color: var(--box-selection-color);\r
- color: var(--box-text-color);\r
- transition: 0.2s;\r
-}\r
-#opacity-block {\r
- width: 100vw;\r
- height: 100vh;\r
- top: 0;\r
- left: 0;\r
- background-color: var(--background-color);\r
- opacity: 0;\r
- z-index: 2;\r
- position: fixed;\r
- pointer-events: none;\r
- transition: 1s;\r
-}\r
-\r
-/* main */\r
-main {\r
- padding-top: 10rem;\r
-}\r
-.section-title {\r
- background-color: var(--section-title-background);\r
- color: var(--text-color);\r
- padding: 0.7rem 0;\r
- padding-left: 1rem;\r
- margin: 1rem;\r
- font-size: 1.4rem;\r
-}\r
-.content-container {\r
- margin: 2rem 1.2rem 4rem;\r
-}\r
-/* for centered contents */\r
-.content-container-centered {\r
- margin: 2rem 1.2rem 4rem;\r
- display: flex;\r
- flex-direction: column;\r
- justify-content: center;\r
- align-items: center;\r
-}\r
-.dev-name {\r
- font-size: 3.6rem;\r
- font-family: var(--title-text);\r
- font-weight: 900;\r
-}\r
-.description {\r
- font-size: 1.8rem;\r
- margin-top: 1.2rem;\r
- margin-bottom: 1rem;\r
- line-height: 2.4rem;\r
-}\r
-.center {\r
- text-align: center;\r
-}\r
-.strong {\r
- font-weight: bold;\r
-}\r
-/* for contact.html */\r
-.center-description {\r
- text-align: center;\r
-}\r
-.main-section-title {\r
- background-color: var(--section-title-background);\r
- color: var(--text-color);\r
- padding: 2rem;\r
- font-size: 1.8rem;\r
- text-align: center;\r
- width: 100vw;\r
-}\r
-/* for about.html */\r
-.dev-pfp {\r
- width: 20rem;\r
- border-radius: 1rem;\r
- margin-bottom: 2rem;\r
-}\r
-\r
-/* skills */\r
-.skills-section {\r
- display: flex;\r
- justify-content: center;\r
- flex-direction: row;\r
- flex-wrap: wrap;\r
- gap: 1rem;\r
-}\r
-.skill-container {\r
- border: 0.2rem solid var(--box-border);\r
- border-radius: 1rem;\r
- padding: 2rem;\r
- width: 100%;\r
- max-width: 50rem;\r
-}\r
-.skill-title {\r
- font-size: 2.4rem;\r
- font-family: var(--title-text);\r
- font-weight: 900;\r
-}\r
-.skill-container li {\r
- font-size: 1.6rem;\r
- list-style-position: inside;\r
- padding: 0.6rem 0;\r
-}\r
-.skill-container li:nth-of-type(1) {\r
- margin-top: 1rem;\r
-}\r
-\r
-/* projects */\r
-.project-gallery {\r
- display: flex;\r
- flex-direction: row;\r
- justify-content: center;\r
- align-items: center;\r
- flex-wrap: wrap;\r
- gap: 1rem;\r
-}\r
-.project-tile img {\r
- width: 100%;\r
- max-width: 50rem;\r
- border: 0.4rem solid var(--box-border);\r
- border-radius: 1rem;\r
- object-fit: cover;\r
- transition: 0.2s;\r
-}\r
-.project-tile img:hover, .project-tile img:focus {\r
- transform: scale(0.99);\r
-}\r
-.all-projects-view {\r
- padding: 7rem;\r
- text-align: center;\r
- vertical-align: middle;\r
-}\r
-.project-tile .all-text {\r
- text-decoration: none;\r
- color: var(--box-text-color);\r
- border: 0.2rem solid var(--box-border);\r
- font-size: 2rem;\r
- padding: 2rem;\r
- transition: 0.2s;\r
-}\r
-.project-tile .all-text:hover, .project-tile .all-text:focus {\r
- color: var(--text-color);\r
- background-color: var(--background-color);\r
-}\r
-/* for projects.html */\r
-.full-project-list {\r
- display: flex;\r
- justify-content: center;\r
- align-items: flex-start;\r
- flex-direction: row;\r
- flex-wrap: wrap;\r
- gap: 1rem;\r
- margin: 2rem 1.2rem 4rem;\r
-}\r
-.full-project-tile {\r
- width: 100%;\r
- max-width: 50rem;\r
-}\r
-.full-project-tile img {\r
- width: 100%;\r
- max-width: 50rem;\r
- border: 0.4rem solid var(--box-border);\r
- border-radius: 1rem;\r
- object-fit: cover;\r
- transition: 0.2s;\r
-}\r
-.full-project-tile img:hover, .full-project-tile img:focus {\r
- transform: scale(0.99);\r
-}\r
-.project-info {\r
- padding: 1.4rem;\r
-}\r
-.project-name {\r
- font-family: var(--title-text);\r
- font-weight: 900;\r
- font-size: 2rem;\r
-}\r
-.project-description {\r
- padding-top: 0.8rem;\r
- font-size: 1.6rem;\r
- line-height: 2.4rem;\r
-}\r
-\r
-/* contactMe! */\r
-.contact-container {\r
- text-align: center;\r
- vertical-align: center;\r
-}\r
-.contact-container a {\r
- text-decoration: none;\r
- color: var(--black-icon-color);\r
-}\r
-.email-icon {\r
- font-size: 7rem;\r
- transition: 0.2s;\r
-}\r
-.email-me-text {\r
- background-color: var(--background-color);\r
- color: var(--text-color);\r
- width: 10rem;\r
- padding: 1rem;\r
- margin: 0 auto;\r
- font-size: 1.6rem;\r
- border: 0.2rem solid var(--box-border);\r
- transition: 0.2s;\r
-}\r
-.email-icon:hover, .email-icon:focus {\r
- transform: scale(0.9);\r
-}\r
-.email-me-text:hover, .email-me-text:focus {\r
- background-color: unset;\r
- color: var(--box-text-color);\r
-}\r
-/* for contact.html */\r
-\r
-\r
-/* randomArt */\r
-code {\r
- display: flex;\r
- justify-content: center;\r
- align-items: center;\r
- margin: auto;\r
- width: fit-content;\r
- border: 0.4rem solid var(--box-border);\r
- border-radius: 1rem;\r
-}\r
-.your-name {\r
- transform: scale(0.5)\r
-}\r
-\r
-/* back-to-top & social-icons */\r
-.back-to-top, .social-icons {\r
- text-align: center;\r
- vertical-align: middle;\r
- display: flex;\r
- align-items: center;\r
- justify-content: center;\r
- gap: 1rem;\r
-}\r
-.back-to-top a, .social-icons a {\r
- color: var(--black-icon-color);\r
- text-decoration: none;\r
- transition: 0.3s;\r
-}\r
-.back-to-top {\r
- margin-top: 4rem;\r
- font-size: 2rem;\r
-}\r
-.back-to-top a {\r
- padding: 2rem;\r
-}\r
-.back-to-top a:hover, .back-to-top a:focus{\r
- transform: translateY(-1rem);\r
-}\r
-.social-icons {\r
- font-size: 4rem;\r
-}\r
-.social-icons a:hover, .social-icons a:focus {\r
- transform: scale(0.9);\r
-}\r
-\r
-/* footer */\r
-footer {\r
- width: 95%;\r
- margin: 2rem auto;\r
- background-color: var(--background-color);\r
- color: var(--text-color);\r
- padding: 2rem;\r
-}\r
-footer p {\r
- text-align: center;\r
-}\r
-.built-with-love {\r
- font-size: 1.4rem;\r
-}\r
-.love {\r
- font-family: var(--title-text);\r
- font-weight: 900;\r
- font-size: 1.8rem;\r
-}\r
-footer a {\r
- color: var(--box-text-color);\r
- background-color: var(--box-selection-color);\r
- padding: 0.2rem 0.4rem;\r
- font-family: var(--title-text);\r
- text-decoration: none;\r
-}\r
-.copyright {\r
- margin-top: 1.8rem;\r
- font-size: 1.8rem;\r
- font-family: var(--title-text);\r
- font-weight: 700;\r
-}\r
-\r
-/* media queries */\r
-@media (prefers-reduced-motion: no-preference) {\r
- * {\r
- scroll-behavior: smooth;\r
- }\r
-}\r
-\r
-/* large mobile devices*/\r
-@media only screen and (min-width: 600px) {\r
- /* top and sidebar */\r
- .btnNav, .btnNavClose {\r
- display: none;\r
- }\r
- nav {\r
- height: 100%;\r
- width: unset;\r
- padding-top: unset;\r
- font-size: 1.4rem;\r
- background-color: transparent;\r
- position: relative;\r
- top: unset;\r
- right: unset;\r
- z-index: 1;\r
- transition: 0.5s;\r
- display: flex;\r
- flex-direction: row;\r
- justify-content: center;\r
- align-items: center;\r
- }\r
- nav ul {\r
- width: inherit;\r
- display: flex;\r
- flex-direction: row;\r
- }\r
- nav li {\r
- margin: 1rem;\r
- }\r
- nav a {\r
- padding: 1rem;\r
- }\r
-\r
- /* skills */\r
- .skill-container {\r
- width: calc(50% - 1rem);\r
- }\r
-\r
- /* projects */\r
- .project-tile img {\r
- max-width: 40rem;\r
- }\r
- .all-projects-view {\r
- width: 40rem;\r
- }\r
- /* for projects.html */\r
- .full-project-tile {\r
- width: calc(50% - 1rem);\r
- }\r
- .full-project-tile img {\r
- max-width: 40rem;\r
- }\r
-\r
- /* randomArt */\r
- code {\r
- font-size: 1rem;\r
- }\r
-}\r
-\r
-/* tablets, ipads, and alike */\r
-@media only screen and (min-width: 768px) {\r
- .logo {\r
- font-size: 2.6rem;\r
- }\r
-\r
- /* top and sidebar */\r
- nav {\r
- font-size: 1.8rem;\r
- }\r
-\r
- /* whoAmI? */\r
- .section-title {\r
- font-size: 1.6rem;\r
- }\r
- .dev-name {\r
- font-size: 4.2rem;\r
- }\r
- .description {\r
- font-size: 2rem;\r
- line-height: 2.8rem;\r
- }\r
- /* for projects.html */\r
- .main-section-title {\r
- font-size: 2rem;\r
- }\r
- .project-name {\r
- font-size: 3rem;\r
- }\r
- .project-description {\r
- font-size: 1.8rem;\r
- }\r
- .full-project-tile img {\r
- max-width: 60rem;\r
- }\r
-\r
- /* skills */\r
- .skill-title {\r
- font-size: 3rem;\r
- }\r
- .skill-container li {\r
- font-size: 2rem;\r
- padding: 0.8rem 0;\r
- }\r
-\r
- /* projects */\r
- .project-tile img {\r
- max-width: 60rem;\r
- }\r
- .project-tile .all-text {\r
- font-size: 2.4rem;\r
- }\r
-\r
- /* contactMe! */\r
- .email-icon {\r
- font-size: 9rem;\r
- }\r
- .email-me-text {\r
- width: 12rem;\r
- font-size: 2rem;\r
- }\r
-\r
- /* randomArt */\r
- code {\r
- font-size: 1.2rem;\r
- }\r
-\r
- /* back-to-top & social icons */\r
- .back-to-top {\r
- margin-top: 7rem;\r
- font-size: 2.8rem;\r
- }\r
- .back-to-top a {\r
- padding: 2rem;\r
- }\r
- .social-icons {\r
- font-size: 5rem;\r
- gap: 2.4rem;\r
- }\r
-\r
- footer {\r
- padding: 4rem;\r
- }\r
- .built-with-love {\r
- font-size: 1.8rem;\r
- }\r
- .love {\r
- font-size: 2.4rem;\r
- }\r
- footer a {\r
- padding: 0.4rem 0.6rem;\r
- font-size: 2rem;\r
- }\r
- .copyright {\r
- margin-top: 2.4rem;\r
- font-size: 2rem;\r
- }\r
-}\r
-\r
-/* laptops/desktops and bigger screens */\r
-@media only screen and (min-width: 1024px) {\r
- .logo {\r
- font-size: 2.8rem;\r
- }\r
-\r
- /* top and sidebar */\r
- header {\r
- padding: 0 10rem;\r
- }\r
- nav {\r
- font-size: 2rem;\r
- }\r
-\r
- /* main */\r
- .content-container {\r
- margin: 2rem 6rem 4rem;\r
- }\r
- .content-container-centered {\r
- margin: 2rem 6rem 4rem;\r
- display: flex;\r
- flex-direction: column;\r
- justify-content: center;\r
- align-items: center;\r
- }\r
-\r
- /* for projects.html */\r
- .main-section-title {\r
- font-size: 1.8rem;\r
- }\r
- .full-project-list {\r
- width: 60%;\r
- margin: 2rem auto 4rem;\r
- gap: 2rem;\r
- }\r
- .project-name {\r
- font-size: 2.8rem;\r
- }\r
- .project-description {\r
- font-size: 1.6rem;\r
- }\r
-\r
- /* whoAmI? */\r
- .dev-name {\r
- font-size: 4rem;\r
- }\r
- .description {\r
- line-height: 2.6rem;\r
- }\r
-\r
- /* skills */\r
- .skill-container {\r
- width: 15%;\r
- }\r
- .skill-title {\r
- font-size: 2.4rem;\r
- }\r
-\r
- /* projects */\r
- .project-tile img {\r
- max-width: 35rem;\r
- height: 50rem;\r
- }\r
- .all-projects-view {\r
- width: 25rem;\r
- }\r
- .project-tile .all-text {\r
- font-size: 2rem;\r
- }\r
-\r
- /* contactMe! */\r
- .email-icon {\r
- font-size: 8rem;\r
- }\r
-\r
- /* randomArt */\r
- code {\r
- font-size: 1rem;\r
- }\r
-\r
- /* back-to-top & social icons */\r
- .back-to-top {\r
- font-size: 2.4rem;\r
- }\r
- .back-to-top a {\r
- padding: 4rem;\r
- }\r
- .social-icons {\r
- font-size: 4rem;\r
- }\r
-\r
- /* footer */\r
- .built-with-love {\r
- font-size: 1.4rem;\r
- }\r
- .love {\r
- font-size: 2rem;\r
- }\r
- footer a {\r
- font-size: 1.6rem;\r
- }\r
- .copyright {\r
- margin-top: 2.8rem;\r
- }\r
-}
\ No newline at end of file
<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>tenkyuu - web developer</title>\r
- <link rel="icon" type="image/ico" href="assets/icons/favicon.ico">\r
- <link rel="preload" href="css/styles.css" as="style">\r
- <link rel="stylesheet" href="css/styles.css">\r
- <meta property="og:type" content="website">\r
- <meta property="og:title" content="tenkyuu - web developer">\r
- <meta property="og:description" content="17-year old awesome web developer who loves creating websites and stuffs.">\r
- <meta property="og:image" content="assets/pfp/tenkyuu-img.webp">\r
- <meta property="og:url" content="https://tenkyuu.dev">\r
- <meta name="twitter:card" content="summary_large_image">\r
- <meta name="twitter:site" content="@tenkyuu07">\r
- <meta name="twitter:creator" content="@tenkyuu07">\r
-<!-- Bunny Fonts -->\r
- <link rel="preconnect" href="https://fonts.bunny.net">\r
- <link href="https://fonts.bunny.net/css2?family=Epilogue:ital@0;1&family=Lato:wght@700;900&family=Meddon&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">\r
-<!-- Font Awesome -->\r
- <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>\r
</head>\r
<body>\r
- <header>\r
- <span class="logo">tenkyuu</span>\r
- <span class="btnNav" onclick="menuToggleOpen()">☰</span>\r
- <nav id="menu">\r
- <span class="btnNavClose" onclick="menuToggleClose()">x</span>\r
- <ul>\r
- <li><a href="index.html" class="current-page">Home</a></li>\r
- <li><a href="projects.html">Projects</a></li>\r
- <li><a href="about.html">About</a></li>\r
- <li><a href="contact.html">Contact</a></li>\r
- </ul>\r
- </nav>\r
- <div id="opacity-block" onclick="menuToggleClose()"></div>\r
- </header>\r
-\r
- <main id="top">\r
- <section>\r
- <p class="section-title">//whoAmI?</p>\r
- <div class="content-container">\r
- <h1 class="dev-name">tenkyuu</h1>\r
- <p class="description">I'm a 17-year old Filipino web developer making hand-coded static websites. I've been improving my skills and learning new stuffs everyday.</p>\r
- <p class="description">I love creating websites such as old-internet, and Japanese style websites.</p>\r
- </div>\r
- </section>\r
-\r
- <section>\r
- <p class="section-title">//skills</p>\r
- <div class="content-container skills-section">\r
- <div class="skill-container">\r
- <h2 class="skill-title">Front-End Development:</h2>\r
- <ul>\r
- <li>HTML</li>\r
- <li>CSS</li>\r
- <li>JavaScript (beginner)</li>\r
- </ul>\r
- </div>\r
- <div class="skill-container">\r
- <h2 class="skill-title">Softwares:</h2>\r
- <ul>\r
- <li>Visual Studio</li>\r
- <li>Notepad (yep, i code here)</li>\r
- <li>CapCut</li>\r
- </ul>\r
- </div>\r
- <div class="skill-container">\r
- <h2 class="skill-title">Other Things I'm Interested:</h2>\r
- <ul>\r
- <li>Cybersecurity</li>\r
- <li>Eastern Philosophies</li>\r
- <li>Christianity</li>\r
- <li>Stoicism</li>\r
- <li>Aerospace</li>\r
- <li>Books</li>\r
- <li>Anime</li>\r
- </ul>\r
- </div>\r
- <div class="skill-container">\r
- <h2 class="skill-title">Other Skills:</h2>\r
- <ul>\r
- <li>Video Editing</li>\r
- </ul>\r
- </div>\r
- <div class="skill-container">\r
- <h2 class="skill-title">Spoken Languages:</h2>\r
- <ul>\r
- <li>Filipino (native)</li>\r
- <li>Japanese (conversational)</li>\r
- <li>English (fluent)</li>\r
- </ul>\r
- </div>\r
- </div>\r
- </section>\r
-\r
- <section>\r
- <p class="section-title">//projects</p>\r
- <div class="content-container project-gallery">\r
- <div class="project-tile">\r
- <a href="" onclick="imgClickNull()">\r
- <picture>\r
- <source srcset="images/projects/avif/technical-documentation.avif" type="image/avif">\r
- <source srcset="images/projects/webp/technical-documentation.webp" type="image/webp">\r
- <img src="images/projects/jpeg/technical-documentation.jpeg"\r
- alt="Technical Documentation Page"\r
- title="Technical Documentation Page">\r
- </picture>\r
- </a>\r
- </div>\r
- <div class="project-tile">\r
- <a href="" onclick="imgClickNull()">\r
- <picture>\r
- <source srcset="images/projects/avif/product-landing.avif" type="image/avif">\r
- <source srcset="images/projects/webp/product-landing.webp" type="image/webp">\r
- <img src="images/projects/jpeg/product-landing.jpeg"\r
- alt="Product Landing Page"\r
- title="Product Landing Page">\r
- </picture>\r
- </a>\r
- </div>\r
- <div class="project-tile">\r
- <a href="" onclick="imgClickNull()">\r
- <picture>\r
- <source srcset="images/projects/avif/tribute.avif" type="image/avif">\r
- <source srcset="images/projects/webp/tribute.webp" type="image/webp">\r
- <img src="images/projects/jpeg/tribute.jpeg"\r
- alt="Tribute Page"\r
- title="Tribute Page">\r
- </picture>\r
- </a>\r
- </div>\r
- <div class="project-tile all-projects-view">\r
- <a href="projects.html" class="all-text">All ➔</a>\r
- </div>\r
- </div>\r
- </section>\r
-\r
- <section>\r
- <p class="section-title">//contactMe!</p>\r
- <div class="content-container contact-container">\r
- <a href="mailto:hello@tenkyuu.dev">\r
- <i class="fas fa-envelope email-icon"></i>\r
- <div class="email-me-text">\r
- Email me\r
- </div>\r
- </a>\r
- <p class="description">Want to talk about life?<br>\r
- or maybe about work, I guess?!<br>\r
- You want to make your own website, right?<br>\r
- Agh... whatever it is, just email me<br>\r
- I'll reply right away!\r
- </p>\r
- </div>\r
- </section>\r
-\r
- <section>\r
- <p class="section-title">//randomArt</p>\r
- <div class="content-container">\r
- <code><pre>\r
-░░░░░░░░░░░░░░░░░░░░░░████░░░░░░░░░░░░░░░░░░░░\r
-░░░░░░░░░░░░░░░░████████████████░░░░░░░░░░░░░░\r
-░░░░░░░░░░░░████▒▒▓▓██▓▓▓▓██▒▒▓▓████░░░░░░░░░░\r
-░░░░░░░░░░██░░▒▒▓▓██▓▓▒▒▓▓▓▓██▒▒▓▓▓▓██░░░░░░░░\r
-░░░░░░░░██▒▒▒▒▓▓██▓▓▒▒▒▒▓▓▓▓▓▓██▒▒▓▓▓▓██░░░░░░\r
-░░░░░░██▒▒▒▒▓▓▓▓██▓▓▒▒▒▒▓▓▓▓▓▓██▒▒▓▓▓▓▓▓██░░░░\r
-░░░░██▒▒▒▒▓▓▓▓██▓▓▒▒░░▓▓▓▓▓▓▓▓▓▓██▒▒▒▒▓▓▓▓██░░\r
-░░░░██▒▒▓▓▓▓▓▓██▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓██▒▒▓▓▓▓▓▓██░░\r
-░░██▒▒▓▓██████████████████████████████▓▓▒▒▓▓██\r
-░░██████░░██▒▒██░░░░░░░░██░░██▒▒██░░░░████████\r
-░░██░░░░░░██▒▒▒▒████████████▒▒▒▒██░░░░░░░░░░██\r
-░░░░░░░░██▒▒▒▒▒▒▒▒▒▒▒▒▒▒██▒▒▒▒▒▒▒▒██░░░░░░░░░░\r
-░░██░░░░██ ▒▒▒▒▒▒▒▒██▒▒ ██░░░░██░░░░\r
-░░░░████▒▒ ██ ▒▒▒▒██████▒▒ ██ ▒▒████░░░░░░\r
-░░░░░░██▒▒ ▒▒▒▒▒▒▒▒██▒▒ ▒▒██░░░░░░░░\r
-██████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██▒▒▒▒▒▒▒▒▒▒▒▒██████░░\r
-░░░░██▒▒▒▒▒▒▒▒▒▒▒▒ ██████▒▒▒▒▒▒▒▒██░░░░░░\r
-░░░░██▒▒▒▒▒▒▒▒ ██▒▒▒▒██▒▒▒▒▒▒██░░░░░░\r
-░░██▒▒▒▒▒▒▒▒ ██▒▒▒▒▒▒████▒▒▒▒██░░░░\r
-░░██▒▒▒▒▒▒ ██ ██▒▒▒▒▒▒▒▒▒▒▒▒▒▒██░░░░\r
-██▒▒▒▒▒▒ ████ ██▒▒▒▒▒▒▒▒▒▒▒▒██░░░░\r
-██▒▒██▒▒ ██▒▒▒▒▒▒▒▒▒▒██░░░░\r
-██▒▒██ ▒▒ ▒▒ ▒▒██████▒▒▒▒██░░░░\r
-████▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒██░░░░\r
-████▒▒ ▒▒██░░░░\r
-░░████ ██░░░░░░\r
-░░░░██ ██░░░░░░\r
-░░░░░░██ ██░░░░░░░░\r
-░░░░░░░░██ ██░░░░░░░░░░\r
-░░░░░░░░██▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒██░░░░░░░░░░\r
-░░░░░░░░░░██▒▒▒▒▒▒▒▒████▒▒▒▒▒▒▒▒██░░░░░░░░░░░░\r
-░░░░░░░░░░░░████████████████████░░░░░░░░░░░░░░</pre></code>\r
- </div>\r
- </section>\r
- \r
- <div class="back-to-top">\r
- <a href="#top">\r
- <i class="fa fa-chevron-up"></i>\r
- </a>\r
- </div>\r
-\r
- <div class="social-icons">\r
- <a href="https://twitter.com/tenkyuu07">\r
- <i class="fab fa-twitter"></i>\r
- </a>\r
- <a href="https://github.com/ten-kyuu">\r
- <i class="fa-brands fa-github"></i>\r
- </a>\r
- </div>\r
- </main>\r
-\r
- <footer>\r
- <p class="built-with-love">\r
- Built with <span class="love">愛</span> using hand-coded <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>, and <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>.\r
- </p>\r
- <p class="copyright">© tenkyuu.dev</p>\r
- </footer>\r
-\r
- <script src="javascript/script.js"></script>\r
+ <h1>Construction still ongoing!</h1>\r
+ <p>A new version of this website will be released soon.</p>\r
+ <a href="https://tenkyuu.dev/legacy/v2/">Version 2</a>\r
+ <a href="https://tenkyuu.dev/legacy/v1/">Version 1</a>\r
</body>\r
</html>
\ No newline at end of file
+++ /dev/null
-function menuToggleOpen() {\r
- document.getElementById("menu").style.width = "50%";\r
- document.getElementById("opacity-block").style.opacity = "80%";\r
- document.getElementById("opacity-block").style.pointerEvents = "all";\r
-}\r
-function menuToggleClose() {\r
- document.getElementById("menu").style.width = "0";\r
- document.getElementById("opacity-block").style.opacity = "0";\r
- document.getElementById("opacity-block").style.pointerEvents = "none";\r
-}\r
-function imgClickNull() {\r
- alert("No link for this project yet. Construction still ongoing!");\r
-}\r
-\r
-// survey-form.html\r
-function fakeSubmittedNotice() {\r
- alert("Yeah, it works! (not actually submitted lol, idk php yet.)");\r
-}\r
-function termsNull() {\r
- alert("i didn't made a real terms and conditions ^.^");\r
-}
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="author" content="tenkyuu">
+ <meta name="description" content="Some information about me.">
+ <meta name="referrer" content="no-referrer">
+ <meta name="robots" content="index, follow">
+ <title>tenkyuu - about</title>
+ <link rel="icon" type="image/ico" href="assets/icons/favicon.ico">
+ <link rel="preload" href="css/styles.css" as="style">
+ <link rel="stylesheet" href="css/styles.css">
+ <meta property="og:type" content="website">
+ <meta property="og:title" content="tenkyuu - web developer">
+ <meta property="og:description" content="17-year old awesome web developer who loves creating websites and stuffs.">
+ <meta property="og:image" content="assets/pfp/tenkyuu-img.webp">
+ <meta property="og:url" content="https://tenkyuu.dev">
+ <meta name="twitter:card" content="summary_large_image">
+ <meta name="twitter:site" content="@tenkyuu07">
+ <meta name="twitter:creator" content="@tenkyuu07">
+<!-- Google Fonts -->
+ <link rel="preconnect" href="https://fonts.bunny.net">
+ <link href="https://fonts.bunny.net/css2?family=Epilogue:ital@0;1&family=Lato:wght@700;900&family=Meddon&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">
+<!-- Font Awesome -->
+ <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>
+</head>
+<body>
+ <header>
+ <span class="logo">tenkyuu</span>
+ <span class="btnNav" onclick="menuToggleOpen()">☰</span>
+ <nav id="menu">
+ <span class="btnNavClose" onclick="menuToggleClose()">x</span>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="projects.html">Projects</a></li>
+ <li><a href="about.html" class="current-page">About</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <div id="opacity-block" onclick="menuToggleClose()"></div>
+ </header>
+
+ <main id="top">
+ <section>
+ <h1 class="main-section-title">//ABOUT</h1>
+ <div class="content-container-centered">
+ <a href="https://twitter.com/tenkyuu07">
+ <img src="assets/pfp/tenkyuu-img.webp"
+ alt="tenkyuu profile image"
+ title="Yuzaki Nasa from 'Tonikawa'"
+ class="dev-pfp">
+ </a>
+ <div>
+ <p class="description center">
+ Hello, My name is <span class="strong">tenkyuu.</span><br>
+ Nice to meet you!<br>
+ </p>
+ <p class="description center">
+ I'm a 17-year old self-learn<br>
+ Filipino web developer who makes<br>
+ hand-coded static websites.
+ </p>
+ <p class="description center">
+ I've been interested on making<br>
+ websites since grade school.<br>
+ </p>
+ <p class="description center">
+ Now, that's what I do for a living!
+ </p>
+ <p class="description center">
+ I'm really passionate on making<br>
+ specific type of websites - <br>
+ simple websites like this one,<br>
+ old-internet style websites, and<br>
+ Japanese style websites.
+ </p>
+ <p class="description center">
+ Umm... that's all I can say for now HAHA<br>
+ (tbh I'm not really good at words.)
+ </p>
+ <p class="description center">
+ Thank you for reading this!<br>
+ <span class="strong">Thank youu!!</span>
+ </p>
+ </div>
+ </div>
+ </section>
+
+ <div class="back-to-top">
+ <a href="#top">
+ <i class="fa fa-chevron-up"></i>
+ </a>
+ </div>
+
+ <div class="social-icons">
+ <a href="https://twitter.com/tenkyuu07">
+ <i class="fab fa-twitter"></i>
+ </a>
+ <a href="https://github.com/ten-kyuu">
+ <i class="fa-brands fa-github"></i>
+ </a>
+ </div>
+ </main>
+
+ <footer>
+ <p class="built-with-love">
+ Built with <span class="love">愛</span> using hand-coded <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>, and <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>.
+ </p>
+ <p class="copyright">© tenkyuu.dev</p>
+ </footer>
+
+ <script src="javascript/script.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="author" content="tenkyuu">
+ <meta name="description" content="You can contact me using the following links.">
+ <meta name="referrer" content="no-referrer">
+ <meta name="robots" content="index, follow">
+ <title>tenkyuu - contact</title>
+ <link rel="icon" type="image/ico" href="assets/icons/favicon.ico">
+ <link rel="preload" href="css/styles.css" as="style">
+ <link rel="stylesheet" href="css/styles.css">
+ <meta property="og:type" content="website">
+ <meta property="og:title" content="tenkyuu - web developer">
+ <meta property="og:description" content="17-year old awesome web developer who loves creating websites and stuffs.">
+ <meta property="og:image" content="assets/pfp/tenkyuu-img.webp">
+ <meta property="og:url" content="https://tenkyuu.dev">
+ <meta name="twitter:card" content="summary_large_image">
+ <meta name="twitter:site" content="@tenkyuu07">
+ <meta name="twitter:creator" content="@tenkyuu07">
+<!-- Bunny Fonts -->
+ <link rel="preconnect" href="https://fonts.bunny.net">
+ <link href="https://fonts.bunny.net/css2?family=Epilogue:ital@0;1&family=Lato:wght@700;900&family=Meddon&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">
+<!-- Font Awesome -->
+ <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>
+</head>
+<body>
+ <header>
+ <span class="logo">tenkyuu</span>
+ <span class="btnNav" onclick="menuToggleOpen()">☰</span>
+ <nav id="menu">
+ <span class="btnNavClose" onclick="menuToggleClose()">x</span>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="projects.html">Projects</a></li>
+ <li><a href="about.html">About</a></li>
+ <li><a href="contact.html" class="current-page">Contact</a></li>
+ </ul>
+ </nav>
+ <div id="opacity-block" onclick="menuToggleClose()"></div>
+ </header>
+
+ <main id="top">
+ <section>
+ <div class="full-width-title">
+ <h1 class="main-section-title">//CONTACT</h1>
+ </div>
+ <div class="content-container-centered contact-container">
+ <p class="description">
+ Hello! If you liked this website and you're<br>
+ interested in making a website for your own,<br>
+ whether for personal or business purposes.<br>
+ You can reach me out anytime!
+ </p>
+ <p class="description center-description strong">
+ For inquiries, you can email me here:
+ </p>
+ <a href="mailto:hello@tenkyuu.dev">
+ <i class="fas fa-envelope email-icon"></i>
+ </a>
+ <p class="description center-description">
+ If you didn't received a reply immediately.<br>
+ Don't worry, I'll reply as soon as I could!
+ </p>
+ </div>
+ </section>
+
+ <div class="social-icons">
+ <a href="https://twitter.com/tenkyuu07">
+ <i class="fab fa-twitter"></i>
+ </a>
+ <a href="https://github.com/ten-kyuu">
+ <i class="fa-brands fa-github"></i>
+ </a>
+ </div>
+ </main>
+
+ <footer>
+ <p class="built-with-love">
+ Built with <span class="love">愛</span> using hand-coded <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>, and <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>.
+ </p>
+ <p class="copyright">© tenkyuu.dev</p>
+ </footer>
+
+ <script src="javascript/script.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+*,
+::before,
+::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+html {
+ font-size: 62.5%;
+}
+body {
+ font-family: "Raleway", sans-serif;
+ background-color: #22243e;
+ height: 100vh;
+}
+main {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.form-container {
+ width: 90%;
+ max-width: 45rem;
+ height: auto;
+ padding: 4rem 2rem;
+ margin: 4rem auto;
+ background-color: #e5e5e5;
+ border: 0.2rem solid #000;
+ border-radius: 1.4rem;
+ box-shadow: #000 0.7rem 1rem 0.7rem;
+
+}
+.header-container, .footer-container {
+ text-align: center;
+}
+form {
+ padding: 1rem 2rem;
+}
+.form-title {
+ font-size: 2.8rem;
+ font-family: "DM Sans", sans-serif;
+ font-weight: 900;
+}
+.form-subheading {
+ font-size: 1.6rem;
+ font-family: "DM Sans", sans-serif;
+ font-weight: 600;
+}
+.italicize {
+ font-style: italic;
+}
+fieldset {
+ border: none;
+ border-bottom: 0.2rem solid gray;
+ padding-bottom: 1.4rem;
+ margin-bottom: 1rem;
+}
+legend, p {
+ font-size: 1.4rem;
+ margin: 0.7rem;
+}
+label {
+ font-size: 1.4rem;
+ display: block;
+ margin: 0.7rem auto;
+}
+input, select, textarea {
+ padding: 0.2rem 0.4rem;
+ border: 0.1rem solid #000;
+ border-radius: 0.3rem;
+ background-color: #e5e5e5;
+ font-family: "Raleway", sans-serif;
+}
+input:focus, select:focus, textarea:focus {
+ box-shadow: #000 0.1rem 0.1rem;
+}
+option:checked {
+ background-color: #22243e;
+ color: #e5e5e5;
+}
+input[type="radio"], input[type="checkbox"] {
+ accent-color: #22243e;
+}
+textarea {
+ width: 100%;
+ height: 7rem;
+ resize: none;
+}
+input[type="submit"] {
+ font-family: "DM Sans", sans-serif;
+ font-weight: 700;
+ font-size: 1.8rem;
+ padding: 0.4rem 2rem;
+ background-color: #22243e;
+ color: #e5e5e5;
+ cursor: pointer;
+}
+input[type="submit"]:hover, input[type="submit"]:focus {
+ background-color: #e5e5e5;
+ color: #000;
+ transition: 0.2s;
+}
+a {
+ color: #22243e;
+}
\ No newline at end of file
--- /dev/null
+:root {
+ --text-color: #ffffff;
+ --background-color: #000000;
+ --box-selection-color: #ffffff;
+ --box-text-color: #000000;
+ --title-text: "Lato", sans-serif;
+ --cursive-text: "Meddon", cursive;
+ --section-title-background: #0f0c0c;
+ --box-border: #000000;
+ --black-icon-color: #000000;
+}
+*,
+::before,
+::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+html {
+ font-size: 62.5%;
+}
+body {
+ font-family: "Epilogue", sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+/* top and sidebar */
+header {
+ position: fixed;
+ width: 100vw;
+ height: 10rem;
+ background-color: var(--background-color);
+ top: 0;
+ padding: 0 5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 1;
+}
+.logo, .btnNav, nav, nav li {
+ color: var(--text-color);
+}
+.logo {
+ font-size: 2rem;
+ font-family: var(--title-text);
+ font-weight: 900;
+}
+.btnNav, .btnNavClose {
+ cursor: pointer;
+}
+.btnNav {
+ font-size: 3rem;
+}
+.btnNavClose {
+ font-size: 3rem;
+ margin-left: 15rem;
+}
+nav {
+ height: 100vh;
+ width: 0;
+ padding-top: 4rem;
+ font-size: 2rem;
+ background-color: var(--background-color);
+ position: fixed;
+ top: 0;
+ right: 0;
+ z-index: 3;
+ transition: 0.5s;
+}
+nav li {
+ list-style: none;
+ margin: 4rem 5rem;
+}
+nav a {
+ text-decoration: none;
+ color: var(--text-color);
+ padding: 1rem;
+}
+.current-page {
+ background-color: var(--box-selection-color);
+ color: var(--box-text-color);
+}
+nav a:hover, nav a:focus {
+ background-color: var(--box-selection-color);
+ color: var(--box-text-color);
+ transition: 0.2s;
+}
+#opacity-block {
+ width: 100vw;
+ height: 100vh;
+ top: 0;
+ left: 0;
+ background-color: var(--background-color);
+ opacity: 0;
+ z-index: 2;
+ position: fixed;
+ pointer-events: none;
+ transition: 1s;
+}
+
+/* main */
+main {
+ padding-top: 10rem;
+}
+.section-title {
+ background-color: var(--section-title-background);
+ color: var(--text-color);
+ padding: 0.7rem 0;
+ padding-left: 1rem;
+ margin: 1rem;
+ font-size: 1.4rem;
+}
+.content-container {
+ margin: 2rem 1.2rem 4rem;
+}
+/* for centered contents */
+.content-container-centered {
+ margin: 2rem 1.2rem 4rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.dev-name {
+ font-size: 3.6rem;
+ font-family: var(--title-text);
+ font-weight: 900;
+}
+.description {
+ font-size: 1.8rem;
+ margin-top: 1.2rem;
+ margin-bottom: 1rem;
+ line-height: 2.4rem;
+}
+.center {
+ text-align: center;
+}
+.strong {
+ font-weight: bold;
+}
+/* for contact.html */
+.center-description {
+ text-align: center;
+}
+.main-section-title {
+ background-color: var(--section-title-background);
+ color: var(--text-color);
+ padding: 2rem;
+ font-size: 1.8rem;
+ text-align: center;
+ width: 100vw;
+}
+/* for about.html */
+.dev-pfp {
+ width: 20rem;
+ border-radius: 1rem;
+ margin-bottom: 2rem;
+}
+
+/* skills */
+.skills-section {
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+.skill-container {
+ border: 0.2rem solid var(--box-border);
+ border-radius: 1rem;
+ padding: 2rem;
+ width: 100%;
+ max-width: 50rem;
+}
+.skill-title {
+ font-size: 2.4rem;
+ font-family: var(--title-text);
+ font-weight: 900;
+}
+.skill-container li {
+ font-size: 1.6rem;
+ list-style-position: inside;
+ padding: 0.6rem 0;
+}
+.skill-container li:nth-of-type(1) {
+ margin-top: 1rem;
+}
+
+/* projects */
+.project-gallery {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+.project-tile img {
+ width: 100%;
+ max-width: 50rem;
+ border: 0.4rem solid var(--box-border);
+ border-radius: 1rem;
+ object-fit: cover;
+ transition: 0.2s;
+}
+.project-tile img:hover, .project-tile img:focus {
+ transform: scale(0.99);
+}
+.all-projects-view {
+ padding: 7rem;
+ text-align: center;
+ vertical-align: middle;
+}
+.project-tile .all-text {
+ text-decoration: none;
+ color: var(--box-text-color);
+ border: 0.2rem solid var(--box-border);
+ font-size: 2rem;
+ padding: 2rem;
+ transition: 0.2s;
+}
+.project-tile .all-text:hover, .project-tile .all-text:focus {
+ color: var(--text-color);
+ background-color: var(--background-color);
+}
+/* for projects.html */
+.full-project-list {
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 1rem;
+ margin: 2rem 1.2rem 4rem;
+}
+.full-project-tile {
+ width: 100%;
+ max-width: 50rem;
+}
+.full-project-tile img {
+ width: 100%;
+ max-width: 50rem;
+ border: 0.4rem solid var(--box-border);
+ border-radius: 1rem;
+ object-fit: cover;
+ transition: 0.2s;
+}
+.full-project-tile img:hover, .full-project-tile img:focus {
+ transform: scale(0.99);
+}
+.project-info {
+ padding: 1.4rem;
+}
+.project-name {
+ font-family: var(--title-text);
+ font-weight: 900;
+ font-size: 2rem;
+}
+.project-description {
+ padding-top: 0.8rem;
+ font-size: 1.6rem;
+ line-height: 2.4rem;
+}
+
+/* contactMe! */
+.contact-container {
+ text-align: center;
+ vertical-align: center;
+}
+.contact-container a {
+ text-decoration: none;
+ color: var(--black-icon-color);
+}
+.email-icon {
+ font-size: 7rem;
+ transition: 0.2s;
+}
+.email-me-text {
+ background-color: var(--background-color);
+ color: var(--text-color);
+ width: 10rem;
+ padding: 1rem;
+ margin: 0 auto;
+ font-size: 1.6rem;
+ border: 0.2rem solid var(--box-border);
+ transition: 0.2s;
+}
+.email-icon:hover, .email-icon:focus {
+ transform: scale(0.9);
+}
+.email-me-text:hover, .email-me-text:focus {
+ background-color: unset;
+ color: var(--box-text-color);
+}
+/* for contact.html */
+
+
+/* randomArt */
+code {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: auto;
+ width: fit-content;
+ border: 0.4rem solid var(--box-border);
+ border-radius: 1rem;
+}
+.your-name {
+ transform: scale(0.5)
+}
+
+/* back-to-top & social-icons */
+.back-to-top, .social-icons {
+ text-align: center;
+ vertical-align: middle;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 1rem;
+}
+.back-to-top a, .social-icons a {
+ color: var(--black-icon-color);
+ text-decoration: none;
+ transition: 0.3s;
+}
+.back-to-top {
+ margin-top: 4rem;
+ font-size: 2rem;
+}
+.back-to-top a {
+ padding: 2rem;
+}
+.back-to-top a:hover, .back-to-top a:focus{
+ transform: translateY(-1rem);
+}
+.social-icons {
+ font-size: 4rem;
+}
+.social-icons a:hover, .social-icons a:focus {
+ transform: scale(0.9);
+}
+
+/* footer */
+footer {
+ width: 95%;
+ margin: 2rem auto;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ padding: 2rem;
+}
+footer p {
+ text-align: center;
+}
+.built-with-love {
+ font-size: 1.4rem;
+}
+.love {
+ font-family: var(--title-text);
+ font-weight: 900;
+ font-size: 1.8rem;
+}
+footer a {
+ color: var(--box-text-color);
+ background-color: var(--box-selection-color);
+ padding: 0.2rem 0.4rem;
+ font-family: var(--title-text);
+ text-decoration: none;
+}
+.copyright {
+ margin-top: 1.8rem;
+ font-size: 1.8rem;
+ font-family: var(--title-text);
+ font-weight: 700;
+}
+
+/* media queries */
+@media (prefers-reduced-motion: no-preference) {
+ * {
+ scroll-behavior: smooth;
+ }
+}
+
+/* large mobile devices*/
+@media only screen and (min-width: 600px) {
+ /* top and sidebar */
+ .btnNav, .btnNavClose {
+ display: none;
+ }
+ nav {
+ height: 100%;
+ width: unset;
+ padding-top: unset;
+ font-size: 1.4rem;
+ background-color: transparent;
+ position: relative;
+ top: unset;
+ right: unset;
+ z-index: 1;
+ transition: 0.5s;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ }
+ nav ul {
+ width: inherit;
+ display: flex;
+ flex-direction: row;
+ }
+ nav li {
+ margin: 1rem;
+ }
+ nav a {
+ padding: 1rem;
+ }
+
+ /* skills */
+ .skill-container {
+ width: calc(50% - 1rem);
+ }
+
+ /* projects */
+ .project-tile img {
+ max-width: 40rem;
+ }
+ .all-projects-view {
+ width: 40rem;
+ }
+ /* for projects.html */
+ .full-project-tile {
+ width: calc(50% - 1rem);
+ }
+ .full-project-tile img {
+ max-width: 40rem;
+ }
+
+ /* randomArt */
+ code {
+ font-size: 1rem;
+ }
+}
+
+/* tablets, ipads, and alike */
+@media only screen and (min-width: 768px) {
+ .logo {
+ font-size: 2.6rem;
+ }
+
+ /* top and sidebar */
+ nav {
+ font-size: 1.8rem;
+ }
+
+ /* whoAmI? */
+ .section-title {
+ font-size: 1.6rem;
+ }
+ .dev-name {
+ font-size: 4.2rem;
+ }
+ .description {
+ font-size: 2rem;
+ line-height: 2.8rem;
+ }
+ /* for projects.html */
+ .main-section-title {
+ font-size: 2rem;
+ }
+ .project-name {
+ font-size: 3rem;
+ }
+ .project-description {
+ font-size: 1.8rem;
+ }
+ .full-project-tile img {
+ max-width: 60rem;
+ }
+
+ /* skills */
+ .skill-title {
+ font-size: 3rem;
+ }
+ .skill-container li {
+ font-size: 2rem;
+ padding: 0.8rem 0;
+ }
+
+ /* projects */
+ .project-tile img {
+ max-width: 60rem;
+ }
+ .project-tile .all-text {
+ font-size: 2.4rem;
+ }
+
+ /* contactMe! */
+ .email-icon {
+ font-size: 9rem;
+ }
+ .email-me-text {
+ width: 12rem;
+ font-size: 2rem;
+ }
+
+ /* randomArt */
+ code {
+ font-size: 1.2rem;
+ }
+
+ /* back-to-top & social icons */
+ .back-to-top {
+ margin-top: 7rem;
+ font-size: 2.8rem;
+ }
+ .back-to-top a {
+ padding: 2rem;
+ }
+ .social-icons {
+ font-size: 5rem;
+ gap: 2.4rem;
+ }
+
+ footer {
+ padding: 4rem;
+ }
+ .built-with-love {
+ font-size: 1.8rem;
+ }
+ .love {
+ font-size: 2.4rem;
+ }
+ footer a {
+ padding: 0.4rem 0.6rem;
+ font-size: 2rem;
+ }
+ .copyright {
+ margin-top: 2.4rem;
+ font-size: 2rem;
+ }
+}
+
+/* laptops/desktops and bigger screens */
+@media only screen and (min-width: 1024px) {
+ .logo {
+ font-size: 2.8rem;
+ }
+
+ /* top and sidebar */
+ header {
+ padding: 0 10rem;
+ }
+ nav {
+ font-size: 2rem;
+ }
+
+ /* main */
+ .content-container {
+ margin: 2rem 6rem 4rem;
+ }
+ .content-container-centered {
+ margin: 2rem 6rem 4rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ /* for projects.html */
+ .main-section-title {
+ font-size: 1.8rem;
+ }
+ .full-project-list {
+ width: 60%;
+ margin: 2rem auto 4rem;
+ gap: 2rem;
+ }
+ .project-name {
+ font-size: 2.8rem;
+ }
+ .project-description {
+ font-size: 1.6rem;
+ }
+
+ /* whoAmI? */
+ .dev-name {
+ font-size: 4rem;
+ }
+ .description {
+ line-height: 2.6rem;
+ }
+
+ /* skills */
+ .skill-container {
+ width: 15%;
+ }
+ .skill-title {
+ font-size: 2.4rem;
+ }
+
+ /* projects */
+ .project-tile img {
+ max-width: 35rem;
+ height: 50rem;
+ }
+ .all-projects-view {
+ width: 25rem;
+ }
+ .project-tile .all-text {
+ font-size: 2rem;
+ }
+
+ /* contactMe! */
+ .email-icon {
+ font-size: 8rem;
+ }
+
+ /* randomArt */
+ code {
+ font-size: 1rem;
+ }
+
+ /* back-to-top & social icons */
+ .back-to-top {
+ font-size: 2.4rem;
+ }
+ .back-to-top a {
+ padding: 4rem;
+ }
+ .social-icons {
+ font-size: 4rem;
+ }
+
+ /* footer */
+ .built-with-love {
+ font-size: 1.4rem;
+ }
+ .love {
+ font-size: 2rem;
+ }
+ footer a {
+ font-size: 1.6rem;
+ }
+ .copyright {
+ margin-top: 2.8rem;
+ }
+}
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="author" content="tenkyuu">
+ <meta name="description" content="17-year old awesome web developer who loves creating websites and stuffs.">
+ <meta name="referrer" content="no-referrer">
+ <meta name="robots" content="index, follow">
+ <title>tenkyuu - web developer</title>
+ <link rel="icon" type="image/ico" href="assets/icons/favicon.ico">
+ <link rel="preload" href="css/styles.css" as="style">
+ <link rel="stylesheet" href="css/styles.css">
+ <meta property="og:type" content="website">
+ <meta property="og:title" content="tenkyuu - web developer">
+ <meta property="og:description" content="17-year old awesome web developer who loves creating websites and stuffs.">
+ <meta property="og:image" content="assets/pfp/tenkyuu-img.webp">
+ <meta property="og:url" content="https://tenkyuu.dev">
+ <meta name="twitter:card" content="summary_large_image">
+ <meta name="twitter:site" content="@tenkyuu07">
+ <meta name="twitter:creator" content="@tenkyuu07">
+<!-- Bunny Fonts -->
+ <link rel="preconnect" href="https://fonts.bunny.net">
+ <link href="https://fonts.bunny.net/css2?family=Epilogue:ital@0;1&family=Lato:wght@700;900&family=Meddon&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">
+<!-- Font Awesome -->
+ <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>
+</head>
+<body>
+ <header>
+ <span class="logo">tenkyuu</span>
+ <span class="btnNav" onclick="menuToggleOpen()">☰</span>
+ <nav id="menu">
+ <span class="btnNavClose" onclick="menuToggleClose()">x</span>
+ <ul>
+ <li><a href="index.html" class="current-page">Home</a></li>
+ <li><a href="projects.html">Projects</a></li>
+ <li><a href="about.html">About</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <div id="opacity-block" onclick="menuToggleClose()"></div>
+ </header>
+
+ <main id="top">
+ <section>
+ <p class="section-title">//whoAmI?</p>
+ <div class="content-container">
+ <h1 class="dev-name">tenkyuu</h1>
+ <p class="description">I'm a 17-year old Filipino web developer making hand-coded static websites. I've been improving my skills and learning new stuffs everyday.</p>
+ <p class="description">I love creating websites such as old-internet, and Japanese style websites.</p>
+ </div>
+ </section>
+
+ <section>
+ <p class="section-title">//skills</p>
+ <div class="content-container skills-section">
+ <div class="skill-container">
+ <h2 class="skill-title">Front-End Development:</h2>
+ <ul>
+ <li>HTML</li>
+ <li>CSS</li>
+ <li>JavaScript (beginner)</li>
+ </ul>
+ </div>
+ <div class="skill-container">
+ <h2 class="skill-title">Softwares:</h2>
+ <ul>
+ <li>Visual Studio</li>
+ <li>Notepad (yep, i code here)</li>
+ <li>CapCut</li>
+ </ul>
+ </div>
+ <div class="skill-container">
+ <h2 class="skill-title">Other Things I'm Interested:</h2>
+ <ul>
+ <li>Cybersecurity</li>
+ <li>Eastern Philosophies</li>
+ <li>Christianity</li>
+ <li>Stoicism</li>
+ <li>Aerospace</li>
+ <li>Books</li>
+ <li>Anime</li>
+ </ul>
+ </div>
+ <div class="skill-container">
+ <h2 class="skill-title">Other Skills:</h2>
+ <ul>
+ <li>Video Editing</li>
+ </ul>
+ </div>
+ <div class="skill-container">
+ <h2 class="skill-title">Spoken Languages:</h2>
+ <ul>
+ <li>Filipino (native)</li>
+ <li>Japanese (conversational)</li>
+ <li>English (fluent)</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+
+ <section>
+ <p class="section-title">//projects</p>
+ <div class="content-container project-gallery">
+ <div class="project-tile">
+ <a href="" onclick="imgClickNull()">
+ <picture>
+ <source srcset="images/projects/avif/technical-documentation.avif" type="image/avif">
+ <source srcset="images/projects/webp/technical-documentation.webp" type="image/webp">
+ <img src="images/projects/jpeg/technical-documentation.jpeg"
+ alt="Technical Documentation Page"
+ title="Technical Documentation Page">
+ </picture>
+ </a>
+ </div>
+ <div class="project-tile">
+ <a href="" onclick="imgClickNull()">
+ <picture>
+ <source srcset="images/projects/avif/product-landing.avif" type="image/avif">
+ <source srcset="images/projects/webp/product-landing.webp" type="image/webp">
+ <img src="images/projects/jpeg/product-landing.jpeg"
+ alt="Product Landing Page"
+ title="Product Landing Page">
+ </picture>
+ </a>
+ </div>
+ <div class="project-tile">
+ <a href="" onclick="imgClickNull()">
+ <picture>
+ <source srcset="images/projects/avif/tribute.avif" type="image/avif">
+ <source srcset="images/projects/webp/tribute.webp" type="image/webp">
+ <img src="images/projects/jpeg/tribute.jpeg"
+ alt="Tribute Page"
+ title="Tribute Page">
+ </picture>
+ </a>
+ </div>
+ <div class="project-tile all-projects-view">
+ <a href="projects.html" class="all-text">All ➔</a>
+ </div>
+ </div>
+ </section>
+
+ <section>
+ <p class="section-title">//contactMe!</p>
+ <div class="content-container contact-container">
+ <a href="mailto:hello@tenkyuu.dev">
+ <i class="fas fa-envelope email-icon"></i>
+ <div class="email-me-text">
+ Email me
+ </div>
+ </a>
+ <p class="description">Want to talk about life?<br>
+ or maybe about work, I guess?!<br>
+ You want to make your own website, right?<br>
+ Agh... whatever it is, just email me<br>
+ I'll reply right away!
+ </p>
+ </div>
+ </section>
+
+ <section>
+ <p class="section-title">//randomArt</p>
+ <div class="content-container">
+ <code><pre>
+░░░░░░░░░░░░░░░░░░░░░░████░░░░░░░░░░░░░░░░░░░░
+░░░░░░░░░░░░░░░░████████████████░░░░░░░░░░░░░░
+░░░░░░░░░░░░████▒▒▓▓██▓▓▓▓██▒▒▓▓████░░░░░░░░░░
+░░░░░░░░░░██░░▒▒▓▓██▓▓▒▒▓▓▓▓██▒▒▓▓▓▓██░░░░░░░░
+░░░░░░░░██▒▒▒▒▓▓██▓▓▒▒▒▒▓▓▓▓▓▓██▒▒▓▓▓▓██░░░░░░
+░░░░░░██▒▒▒▒▓▓▓▓██▓▓▒▒▒▒▓▓▓▓▓▓██▒▒▓▓▓▓▓▓██░░░░
+░░░░██▒▒▒▒▓▓▓▓██▓▓▒▒░░▓▓▓▓▓▓▓▓▓▓██▒▒▒▒▓▓▓▓██░░
+░░░░██▒▒▓▓▓▓▓▓██▒▒▒▒▒▒▓▓▓▓▓▓▓▓▓▓██▒▒▓▓▓▓▓▓██░░
+░░██▒▒▓▓██████████████████████████████▓▓▒▒▓▓██
+░░██████░░██▒▒██░░░░░░░░██░░██▒▒██░░░░████████
+░░██░░░░░░██▒▒▒▒████████████▒▒▒▒██░░░░░░░░░░██
+░░░░░░░░██▒▒▒▒▒▒▒▒▒▒▒▒▒▒██▒▒▒▒▒▒▒▒██░░░░░░░░░░
+░░██░░░░██ ▒▒▒▒▒▒▒▒██▒▒ ██░░░░██░░░░
+░░░░████▒▒ ██ ▒▒▒▒██████▒▒ ██ ▒▒████░░░░░░
+░░░░░░██▒▒ ▒▒▒▒▒▒▒▒██▒▒ ▒▒██░░░░░░░░
+██████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██▒▒▒▒▒▒▒▒▒▒▒▒██████░░
+░░░░██▒▒▒▒▒▒▒▒▒▒▒▒ ██████▒▒▒▒▒▒▒▒██░░░░░░
+░░░░██▒▒▒▒▒▒▒▒ ██▒▒▒▒██▒▒▒▒▒▒██░░░░░░
+░░██▒▒▒▒▒▒▒▒ ██▒▒▒▒▒▒████▒▒▒▒██░░░░
+░░██▒▒▒▒▒▒ ██ ██▒▒▒▒▒▒▒▒▒▒▒▒▒▒██░░░░
+██▒▒▒▒▒▒ ████ ██▒▒▒▒▒▒▒▒▒▒▒▒██░░░░
+██▒▒██▒▒ ██▒▒▒▒▒▒▒▒▒▒██░░░░
+██▒▒██ ▒▒ ▒▒ ▒▒██████▒▒▒▒██░░░░
+████▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒ ▒▒██░░░░
+████▒▒ ▒▒██░░░░
+░░████ ██░░░░░░
+░░░░██ ██░░░░░░
+░░░░░░██ ██░░░░░░░░
+░░░░░░░░██ ██░░░░░░░░░░
+░░░░░░░░██▒▒▒▒▒▒▒▒ ▒▒▒▒▒▒▒▒██░░░░░░░░░░
+░░░░░░░░░░██▒▒▒▒▒▒▒▒████▒▒▒▒▒▒▒▒██░░░░░░░░░░░░
+░░░░░░░░░░░░████████████████████░░░░░░░░░░░░░░</pre></code>
+ </div>
+ </section>
+
+ <div class="back-to-top">
+ <a href="#top">
+ <i class="fa fa-chevron-up"></i>
+ </a>
+ </div>
+
+ <div class="social-icons">
+ <a href="https://twitter.com/tenkyuu07">
+ <i class="fab fa-twitter"></i>
+ </a>
+ <a href="https://github.com/ten-kyuu">
+ <i class="fa-brands fa-github"></i>
+ </a>
+ </div>
+ </main>
+
+ <footer>
+ <p class="built-with-love">
+ Built with <span class="love">愛</span> using hand-coded <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>, and <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>.
+ </p>
+ <p class="copyright">© tenkyuu.dev</p>
+ </footer>
+
+ <script src="javascript/script.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+function menuToggleOpen() {
+ document.getElementById("menu").style.width = "50%";
+ document.getElementById("opacity-block").style.opacity = "80%";
+ document.getElementById("opacity-block").style.pointerEvents = "all";
+}
+function menuToggleClose() {
+ document.getElementById("menu").style.width = "0";
+ document.getElementById("opacity-block").style.opacity = "0";
+ document.getElementById("opacity-block").style.pointerEvents = "none";
+}
+function imgClickNull() {
+ alert("No link for this project yet. Construction still ongoing!");
+}
+
+// survey-form.html
+function fakeSubmittedNotice() {
+ alert("Yeah, it works! (not actually submitted lol, idk php yet.)");
+}
+function termsNull() {
+ alert("i didn't made a real terms and conditions ^.^");
+}
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="author" content="tenkyuu">
+ <meta name="description" content="List of all my works and personal projects.">
+ <meta name="referrer" content="no-referrer">
+ <meta name="robots" content="index, follow">
+ <title>tenkyuu - works</title>
+ <link rel="icon" type="image/ico" href="assets/icons/favicon.ico">
+ <link rel="preload" href="css/styles.css" as="style">
+ <link rel="stylesheet" href="css/styles.css">
+ <meta property="og:type" content="website">
+ <meta property="og:title" content="tenkyuu - web developer">
+ <meta property="og:description" content="17-year old awesome web developer who loves creating websites and stuffs.">
+ <meta property="og:image" content="assets/pfp/tenkyuu-img.webp">
+ <meta property="og:url" content="https://tenkyuu.dev">
+ <meta name="twitter:card" content="summary_large_image">
+ <meta name="twitter:site" content="@tenkyuu07">
+ <meta name="twitter:creator" content="@tenkyuu07">
+<!-- Bunny Fonts -->
+ <link rel="preconnect" href="https://fonts.bunny.net">
+ <link href="https://fonts.bunny.net/css2?family=Epilogue:ital@0;1&family=Lato:wght@700;900&family=Meddon&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">
+<!-- Font Awesome -->
+ <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>
+</head>
+<body>
+ <header>
+ <span class="logo">tenkyuu</span>
+ <span class="btnNav" onclick="menuToggleOpen()">☰</span>
+ <nav id="menu">
+ <span class="btnNavClose" onclick="menuToggleClose()">x</span>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="projects.html" class="current-page">Projects</a></li>
+ <li><a href="about.html">About</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <div id="opacity-block" onclick="menuToggleClose()"></div>
+ </header>
+
+ <main id="top">
+ <section>
+ <h1 class="main-section-title">//PROJECTS</h1>
+ <div class="full-project-list">
+ <div class="full-project-tile">
+ <a href="" onclick="imgClickNull()">
+ <picture>
+ <source srcset="images/projects/avif/technical-documentation.avif" type="image/avif">
+ <source srcset="images/projects/webp/technical-documentation.webp" type="image/webp">
+ <img src="images/projects/jpeg/technical-documentation.jpeg"
+ alt="Technical Documentation Page"
+ title="Technical Documentation Page">
+ </picture>
+ </a>
+ <div class="project-info">
+ <h2 class="project-name">Technical Documentation Page</h2>
+ <p class="project-description">
+ A fake technical documentation page I've made
+ from one of the required courses in freeCodeCamp.
+ </p>
+ </div>
+ </div>
+
+ <div class="full-project-tile">
+ <a href="" onclick="imgClickNull()">
+ <picture>
+ <source srcset="images/projects/avif/product-landing.avif" type="image/avif">
+ <source srcset="images/projects/webp/product-landing.webp" type="image/webp">
+ <img src="images/projects/jpeg/product-landing.jpeg"
+ alt="Product Landing Page"
+ title="Product Landing Page">
+ </picture>
+ </a>
+ <div class="project-info">
+ <h2 class="project-name">Product Landing Page</h2>
+ <p class="project-description">
+ A product landing page I've made about coffee because I love coffee.
+ </p>
+ </div>
+ </div>
+
+ <div class="full-project-tile">
+ <a href="" onclick="imgClickNull()">
+ <picture>
+ <source srcset="images/projects/avif/tribute.avif" type="image/avif">
+ <source srcset="images/projects/webp/tribute.webp" type="image/webp">
+ <img src="images/projects/jpeg/tribute.jpeg"
+ alt="Tribute Page"
+ title="Tribute Page">
+ </picture>
+ </a>
+ <div class="project-info">
+ <h2 class="project-name">Tribute Page</h2>
+ <p class="project-description">
+ A tribute page I've made for Steve Jobs, the founder of Apple.
+ </p>
+ </div>
+ </div>
+
+ <div class="full-project-tile">
+ <a href="projects/survey-form.html">
+ <picture>
+ <source srcset="images/projects/avif/survey-form.avif" type="image/avif">
+ <source srcset="images/projects/webp/survey-form.webp" type="image/webp">
+ <img src="images/projects/jpeg/survey-form.jpeg"
+ alt="Survey Form"
+ title="Survey Form">
+ </picture>
+ </a>
+ <div class="project-info">
+ <h2 class="project-name">Survey Form</h2>
+ <p class="project-description">
+ A simple survey form that records surveys (obviously).
+ </p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <div class="back-to-top">
+ <a href="#top">
+ <i class="fa fa-chevron-up"></i>
+ </a>
+ </div>
+
+ <div class="social-icons">
+ <a href="https://twitter.com/tenkyuu07">
+ <i class="fab fa-twitter"></i>
+ </a>
+ <a href="https://github.com/ten-kyuu">
+ <i class="fa-brands fa-github"></i>
+ </a>
+ </div>
+ </main>
+
+ <footer>
+ <p class="built-with-love">
+ Built with <span class="love">愛</span> using hand-coded <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>, and <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>.
+ </p>
+ <p class="copyright">© tenkyuu.dev</p>
+ </footer>
+
+ <script src="javascript/script.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="author" content="tenkyuu">
+ <meta name="description" content="17-year old awesome web developer who loves creating websites and stuffs.">
+ <meta name="referrer" content="no-referrer">
+ <meta name="robots" content="index, follow">
+ <title>Survey Form by tenkyuu</title>
+ <link rel="icon" type="image/ico" href="/assets/icons/favicon.ico">
+ <link rel="preload" href="/css/projects/survey-form.css" as="style">
+ <link rel="stylesheet" href="/css/projects/survey-form.css">
+ <meta property="og:type" content="website">
+ <meta property="og:title" content="Survey Form by tenkyuu">
+ <meta property="og:description" content="A survey form that record surveys (obviously!) made by tenkyuu.">
+ <meta property="og:image" content="https://tenkyuu.dev/images/projects/jpeg/survey-form.jpeg">
+ <meta property="og:url" content="https://tenkyuu.dev/">
+ <meta name="twitter:card" content="summary_large_image">
+ <meta name="twitter:site" content="@tenkyuudev">
+ <meta name="twitter:creator" content="@tenkyuudev">
+<!-- Google Fonts -->
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <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');">
+</head>
+<body>
+ <main>
+ <div class="form-container">
+ <div class="header-container">
+ <h1 class="form-title">Sign Up</h1>
+ <p class="form-subheading">Fill out the following information to join.</p>
+ </div>
+ <form action="form-landing.html" method="POST">
+ <fieldset>
+ <label>First Name: <input type="text" name="first-name" id="fname" placeholder="Hayao" required></label>
+ <label>Last Name <span class="italicize">(optional)</span>: <input type="text" name="last-name" id="lname" placeholder="Miyazaki"></label>
+ <label>Age: <input type="number" name="age" id="age" min="13" max="120" placeholder="Age" required></label>
+ <label>Occupation:
+ <select id="occupation" required>
+ <option value="">Select occupation</option>
+ <option value="1">Student</option>
+ <option value="2">Full Time</option>
+ <option value="3">Part Time</option>
+ <option value="4">Freelance</option>
+ <option value="5">Unemployed</option>
+ <option value="6">Retired</option>
+ <option value="7">Homemaker</option>
+ <option value="8">Prefer not to say</option>
+ <option value="9">Other</option>
+ </select>
+ </label>
+ <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>
+ <label>Password: <input type="password" name="password" id="pwd" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,24}" placeholder="********" required></label>
+ </fieldset>
+
+ <fieldset>
+ <label><input type="radio" name="account-type" id="personal-account" value="personal" checked> Personal</label>
+ <label><input type="radio" name="account-type" id="business-account" value="business"> Business</label>
+ </fieldset>
+
+ <fieldset>
+ <legend>Where did you hear about us? <span class="italicize">(optional)</span></legend>
+ <label><input type="checkbox" name="where" id="chkbx1" value="twitter"> Twitter</label>
+ <label><input type="checkbox" name="where" id="chkbx2" value="website"> Website</label>
+ <label><input type="checkbox" name="where" id="chkbx3" value="searchengine"> Search Engine</label>
+ <label>Other: <input type="text" name="where" id="chkbx4" value=""></label>
+ </fieldset>
+
+ <fieldset>
+ <legend>What do you think about this form? <span class="italicize">(optional)</span></legend>
+ <textarea name="feedback" id="feedback" maxlength="200" placeholder="Your comment here..."></textarea>
+ </fieldset>
+
+ <div class="footer-container">
+ <p id="terms">
+ By signing up, you hereby agree to the <a href="" onclick="termsNull()">Terms and Conditions.</a>
+ </p>
+ <input type="submit" value="Create Account">
+ </div>
+ </form>
+ </div>
+ </main>
+
+ <script src="/javascript/script.js"></script>
+</body>
+</html>
\ 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="List of all my works and personal projects.">\r
- <meta name="referrer" content="no-referrer">\r
- <meta name="robots" content="index, follow">\r
- <title>tenkyuu - works</title>\r
- <link rel="icon" type="image/ico" href="assets/icons/favicon.ico">\r
- <link rel="preload" href="css/styles.css" as="style">\r
- <link rel="stylesheet" href="css/styles.css">\r
- <meta property="og:type" content="website">\r
- <meta property="og:title" content="tenkyuu - web developer">\r
- <meta property="og:description" content="17-year old awesome web developer who loves creating websites and stuffs.">\r
- <meta property="og:image" content="assets/pfp/tenkyuu-img.webp">\r
- <meta property="og:url" content="https://tenkyuu.dev">\r
- <meta name="twitter:card" content="summary_large_image">\r
- <meta name="twitter:site" content="@tenkyuu07">\r
- <meta name="twitter:creator" content="@tenkyuu07">\r
-<!-- Bunny Fonts -->\r
- <link rel="preconnect" href="https://fonts.bunny.net">\r
- <link href="https://fonts.bunny.net/css2?family=Epilogue:ital@0;1&family=Lato:wght@700;900&family=Meddon&display=swap" rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');">\r
-<!-- Font Awesome -->\r
- <script src="https://kit.fontawesome.com/517a92f811.js" crossorigin="anonymous" async></script>\r
-</head>\r
-<body>\r
- <header>\r
- <span class="logo">tenkyuu</span>\r
- <span class="btnNav" onclick="menuToggleOpen()">☰</span>\r
- <nav id="menu">\r
- <span class="btnNavClose" onclick="menuToggleClose()">x</span>\r
- <ul>\r
- <li><a href="index.html">Home</a></li>\r
- <li><a href="projects.html" class="current-page">Projects</a></li>\r
- <li><a href="about.html">About</a></li>\r
- <li><a href="contact.html">Contact</a></li>\r
- </ul>\r
- </nav>\r
- <div id="opacity-block" onclick="menuToggleClose()"></div>\r
- </header>\r
-\r
- <main id="top">\r
- <section>\r
- <h1 class="main-section-title">//PROJECTS</h1>\r
- <div class="full-project-list">\r
- <div class="full-project-tile">\r
- <a href="" onclick="imgClickNull()">\r
- <picture>\r
- <source srcset="images/projects/avif/technical-documentation.avif" type="image/avif">\r
- <source srcset="images/projects/webp/technical-documentation.webp" type="image/webp">\r
- <img src="images/projects/jpeg/technical-documentation.jpeg"\r
- alt="Technical Documentation Page"\r
- title="Technical Documentation Page">\r
- </picture>\r
- </a>\r
- <div class="project-info">\r
- <h2 class="project-name">Technical Documentation Page</h2>\r
- <p class="project-description">\r
- A fake technical documentation page I've made\r
- from one of the required courses in freeCodeCamp.\r
- </p>\r
- </div>\r
- </div>\r
-\r
- <div class="full-project-tile">\r
- <a href="" onclick="imgClickNull()">\r
- <picture>\r
- <source srcset="images/projects/avif/product-landing.avif" type="image/avif">\r
- <source srcset="images/projects/webp/product-landing.webp" type="image/webp">\r
- <img src="images/projects/jpeg/product-landing.jpeg"\r
- alt="Product Landing Page"\r
- title="Product Landing Page">\r
- </picture>\r
- </a>\r
- <div class="project-info">\r
- <h2 class="project-name">Product Landing Page</h2>\r
- <p class="project-description">\r
- A product landing page I've made about coffee because I love coffee.\r
- </p>\r
- </div>\r
- </div>\r
-\r
- <div class="full-project-tile">\r
- <a href="" onclick="imgClickNull()">\r
- <picture>\r
- <source srcset="images/projects/avif/tribute.avif" type="image/avif">\r
- <source srcset="images/projects/webp/tribute.webp" type="image/webp">\r
- <img src="images/projects/jpeg/tribute.jpeg"\r
- alt="Tribute Page"\r
- title="Tribute Page">\r
- </picture>\r
- </a>\r
- <div class="project-info">\r
- <h2 class="project-name">Tribute Page</h2>\r
- <p class="project-description">\r
- A tribute page I've made for Steve Jobs, the founder of Apple.\r
- </p>\r
- </div>\r
- </div>\r
-\r
- <div class="full-project-tile">\r
- <a href="projects/survey-form.html">\r
- <picture>\r
- <source srcset="images/projects/avif/survey-form.avif" type="image/avif">\r
- <source srcset="images/projects/webp/survey-form.webp" type="image/webp">\r
- <img src="images/projects/jpeg/survey-form.jpeg"\r
- alt="Survey Form"\r
- title="Survey Form">\r
- </picture>\r
- </a>\r
- <div class="project-info">\r
- <h2 class="project-name">Survey Form</h2>\r
- <p class="project-description">\r
- A simple survey form that records surveys (obviously).\r
- </p>\r
- </div>\r
- </div>\r
- </div>\r
- </section>\r
-\r
- <div class="back-to-top">\r
- <a href="#top">\r
- <i class="fa fa-chevron-up"></i>\r
- </a>\r
- </div>\r
-\r
- <div class="social-icons">\r
- <a href="https://twitter.com/tenkyuu07">\r
- <i class="fab fa-twitter"></i>\r
- </a>\r
- <a href="https://github.com/ten-kyuu">\r
- <i class="fa-brands fa-github"></i>\r
- </a>\r
- </div>\r
- </main>\r
-\r
- <footer>\r
- <p class="built-with-love">\r
- Built with <span class="love">愛</span> using hand-coded <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>, <a href="https://en.wikipedia.org/wiki/CSS">CSS</a>, and <a href="https://en.wikipedia.org/wiki/JavaScript">JavaScript</a>.\r
- </p>\r
- <p class="copyright">© tenkyuu.dev</p>\r
- </footer>\r
-\r
- <script src="javascript/script.js"></script>\r
-</body>\r
-</html>
\ No newline at end of file
+++ /dev/null
-The form was submitted.
\ 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
