join

SYSH-Tech-Volunteer · Aug 10, 2023 · ea1de0e · ea1de0e
1 parent 8280d02
commit ea1de0e
Showing 1 changed file with 201 additions and 0 deletions.
diff --git a/2023-join/index.html b/2023-join/index.html
@@ -0,0 +1,201 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>歡迎加入資訊志工隊!</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background-color: #ecf0f3;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        }
+
+        main {
+            position: relative;
+            width: 100%;
+            max-width: 1000px;
+            min-height: 600px;
+            margin: 3em auto;
+            padding: 2em;
+            background-color: #ecf0f3;
+            box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
+            border-radius: 12px;
+            overflow: hidden;
+        }
+
+        main>* {
+            z-index: 2;
+            position: relative;
+            color: #6b6f70;
+        }
+
+        .circle {
+            border-radius: 50%;
+            background-color: #ecf0f3;
+            box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9;
+            bottom: -60%;
+            position: absolute;
+            right: 3em;
+            top: -170px;
+            width: 300px;
+            height: 300px;
+            z-index: 1;
+        }
+
+        .c2 {
+            width: 500px;
+            height: 500px;
+            top: calc(100% - 200px);
+            right: -2em;
+        }
+
+        h1 {
+            font-size: 2em;
+            font-weight: 700;
+            margin: .5em 0;
+            color: #181818;
+        }
+
+        p {
+            color: #808689;
+            line-height: 1.6;
+        }
+
+        input[type="text"] {
+            width: 350px;
+            height: 40px;
+            margin: 4px 0;
+            padding-left: 25px;
+            font-size: 13px;
+            letter-spacing: 0.15px;
+            border: none;
+            outline: transparent;
+            background-color: #ecf0f3;
+            transition: 0.25s ease;
+            border-radius: 8px;
+            box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
+        }
+
+        input[type="checkbox"] {
+            width: 20px;
+            height: 20px;
+            margin: 4px 0;
+            padding-left: 25px;
+            font-size: 13px;
+            letter-spacing: 0.15px;
+            border: none;
+            outline: transparent;
+            background-color: #ecf0f3;
+        }
+
+        input:hover {
+            background-color: hsl(206, 23%, 93%);
+            box-shadow: inset 2px 2px 4px hsl(217, 30%, 85%), inset -2px -2px 4px hsl(0, 0%, 97%);
+        }
+
+        label {
+            display: block;
+            margin-top: 2em;
+        }
+
+        svg {
+            margin: 0 .3em;
+        }
+
+        .dis {
+            background-color: #c0e9ff;
+            color: #3f3f3f;
+            margin: 2em .1em;
+            padding: 1em 4em 1em 1em;
+            border-radius: 1em;
+            width: fit-content;
+            display: flex;
+            align-items: center;
+        }
+
+        button {
+            padding: 1em 3em;
+            border-radius: 25px;
+            margin: 2em;
+            font-weight: 700;
+            font-size: 14px;
+            letter-spacing: 1.15px;
+            background-color: #4B70E2;
+            color: #f9f9f9;
+            box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
+            border: none;
+            outline: none;
+            display: block;
+        }
+
+        button:hover {
+            background-color: #3f5be2;
+        }
+
+        button:active {
+            background-color: #2e4ad2;
+        }
+
+        .check {
+            margin-top: .5em;
+            margin-left: .5em;
+        }
+
+        .check label {
+            display: inline-block;
+            margin-top: .1em;
+        }
+    </style>
+</head>
+
+<body>
+    <main>
+        <div class="circle"></div>
+        <div class="circle c2"></div>
+        <h1>歡迎加入西苑資訊志工隊!</h1>
+        <p>西苑資訊志工隊是西苑高中的資訊志工隊。西苑資訊志工隊員會在西苑提供資訊方面的志工協助，例如：設備維護，辦理營隊等等。<br>
+            協助填寫以下表單讓我們更加認識你!</p>
+        <label for="name">姓名</label>
+        <input class="form__input" type="text" placeholder="如: 張三" id="name">
+        <label for="classNo">班級座號</label>
+        <input class="form__input" type="text" placeholder="如: 40802" id="classNo">
+        <label>你有什麼特別的興趣/專長? </label>
+        <div class="check">
+            <input type="checkbox" id="skill1" />
+            <label for="skill1">網頁設計(HTML, css, javaScript...)</label><br>
+            <input type="checkbox" id="skill2" />
+            <label for="skill2"></label>電腦硬體方面(了解電腦零件, 組電腦等等)</label><br>
+            <input type="checkbox" id="skill3" />
+            <label for="skill3">學過一個或以上程式語言(不用精通。ex:C++, Python, java, javascript...)</label><br>
+            <input type="checkbox" id="skill5" />
+            <label for="skill5">平面設計/電腦繪圖 (Canva不算)</label><br>
+            <input type="checkbox" id="skill6" />
+            <label for="skill6">文書處裡，很會打報告</label>
+        </div>
+        <label for="wish">希望我們可以做甚麼活動/學習到什麼? </label>
+        <input class="form__input" type="text" placeholder="如: 學習如何做出和這一樣酷的網頁" id="wish">
+        <button onclick="submit()">提交</button>
+        <div class="dis"><svg xmlns="http://www.w3.org/2000/svg" height="1em"
+                viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+                <path
+                    d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z" />
+            </svg>
+            <div>記得加入</div><a href="https://discord.gg/D8wFzrC5At" target="_blank"><svg
+                    xmlns="http://www.w3.org/2000/svg" height="1em"
+                    viewBox="0 0 640 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+                    <path
+                        d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z" />
+                </svg></a>
+            <div>喔!</div>
+        </div>
+    </main>
+</body>
+
+</html>