-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
201 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |