(Prototype team page) |
|||
Line 1: | Line 1: | ||
− | {{NCTU_Formosa}} | + | {{NCTU_Formosa/test}} |
+ | |||
<html> | <html> | ||
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <title>Education</title> | ||
+ | <style> | ||
+ | #globalWrapper{ | ||
+ | padding-top: 0 !important; | ||
+ | padding-bottom: 0 !important; | ||
+ | margin: 0 !important; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | body { | ||
+ | font-size: 0; | ||
+ | margin: 0 !important; | ||
+ | padding: 0; | ||
+ | } | ||
− | + | .wrapper { | |
+ | background-color: #fff; | ||
+ | padding: 0; | ||
+ | font-size: 0; | ||
+ | font-family: Levenim MT; | ||
+ | padding-bottom: 150px; | ||
+ | } | ||
+ | .cover{ | ||
+ | position: relative; | ||
+ | } | ||
− | + | .picture { | |
− | + | width: 100%; | |
+ | height: auto; | ||
+ | padding: 0; | ||
+ | margin-bottom: 100px; | ||
+ | } | ||
− | + | .dot1,.dot2,.dot3,.dot4 { | |
− | + | position: absolute; | |
− | + | } | |
− | + | .dot1 { | |
− | + | width: 4%; | |
− | + | left: 7.5%; | |
− | + | top: 12vw; | |
− | + | } | |
− | + | .dot2 { | |
+ | width: 3.5%; | ||
+ | left: 32.3%; | ||
+ | top: 31.7vw; | ||
+ | } | ||
− | + | .dot4 { | |
− | + | width: 3.5%; | |
− | + | left: 77%; | |
− | + | top: 28.7vw; | |
+ | } | ||
− | + | .dot1 img,.dot2 img,.dot3 img,.dot4 img { | |
− | + | width: 100%; | |
− | + | position: relative; | |
+ | /* 淡出淡入效果0.5秒 */ | ||
+ | transition: opacity 0.5s ease-in-out; | ||
+ | cursor: pointer; | ||
+ | } | ||
− | + | .dot1 img:last-child:hover { | |
+ | /* 滑入時第一張透明度設0 */ | ||
+ | opacity:0; | ||
+ | } | ||
+ | .dot2 img:last-child:hover { | ||
+ | /* 滑入時第一張透明度設0 */ | ||
+ | opacity:0; | ||
+ | } | ||
+ | .dot3 img:last-child:hover { | ||
+ | /* 滑入時第一張透明度設0 */ | ||
+ | opacity:0; | ||
+ | } | ||
− | <div class=" | + | .dot4 img:last-child:hover { |
− | <p> | + | /* 滑入時第一張透明度設0 */ |
− | + | opacity:0; | |
− | </p> | + | } |
+ | |||
+ | .first1 { | ||
+ | top: -3.8vw; | ||
+ | } | ||
+ | |||
+ | .first2 { | ||
+ | top: -3.33vw; | ||
+ | } | ||
+ | |||
+ | .first3 { | ||
+ | top: -4.75vw; | ||
+ | } | ||
+ | |||
+ | .first4 { | ||
+ | top: -3.35vw; | ||
+ | } | ||
+ | |||
+ | .title_title{ | ||
+ | width: 35%; | ||
+ | margin-left: 32.5%; | ||
+ | } | ||
+ | |||
+ | .explanation{ | ||
+ | font-size: 2.5vmin; | ||
+ | font-weight: bold; | ||
+ | color: #575656; | ||
+ | text-align: center; | ||
+ | margin-top: 15px; | ||
+ | margin-bottom: 15px; | ||
+ | } | ||
+ | |||
+ | .icon{ | ||
+ | width: 20px; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | |||
+ | .edu1 { | ||
+ | width: 85%; | ||
+ | margin-left: 7.5%; | ||
+ | margin-right: 7.5%; | ||
+ | margin-bottom: 60px; | ||
+ | margin-top: 10px; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | .block { | ||
+ | box-sizing: border-box; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | .title_1 { | ||
+ | width: 85%; | ||
+ | position: relative; | ||
+ | left: 7.5%; | ||
+ | margin-bottom: -1.5vw; | ||
+ | font-size: 3vw; | ||
+ | } | ||
+ | |||
+ | .title_2 { | ||
+ | width: 80%; | ||
+ | position: relative; | ||
+ | left: 10%; | ||
+ | margin-bottom: -2.5vw; | ||
+ | font-size: 2vw; | ||
+ | } | ||
+ | |||
+ | .photo_1 { | ||
+ | width: 60%; | ||
+ | margin-top: 20px; | ||
+ | position: relative; | ||
+ | left: 20%; | ||
+ | } | ||
+ | |||
+ | .content_1 { | ||
+ | width: 75%; | ||
+ | height: auto; | ||
+ | font-size: 3vmin; | ||
+ | text-align: justify; | ||
+ | padding: 20px; | ||
+ | padding-top: 10px; | ||
+ | position: relative; | ||
+ | left: 12.5%; | ||
+ | } | ||
+ | |||
+ | .team { | ||
+ | color: #060b58; | ||
+ | transition-duration: 0.4s; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .team:hover { | ||
+ | color: #fbdd29; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | |||
+ | <div class="wrapper"> | ||
+ | <div class="cover"> | ||
+ | <img class="picture" src="https://static.igem.org/mediawiki/2018/d/d4/T--NCTU_Formosa--HP_inside_cover.png"/> | ||
+ | <div class="dot1"><img src="https://static.igem.org/mediawiki/2018/9/9d/T--NCTU_Formosa--HP_inside_cover_dot2.png"/><a href="https://2018.igem.org/Team:NCTU_Formosa/Public_Engagement"><img class="first1" src="https://static.igem.org/mediawiki/2018/0/03/T--NCTU_Formosa--HP_inside_cover_dot.png"/></a></div> | ||
+ | <div class="dot2"><img src="https://static.igem.org/mediawiki/2018/9/9d/T--NCTU_Formosa--HP_inside_cover_dot2.png"/><a href="https://2018.igem.org/Team:NCTU_Formosa/Human_Practices/Integrated"><img class="first2" src="https://static.igem.org/mediawiki/2018/0/03/T--NCTU_Formosa--HP_inside_cover_dot.png"/></a></div> | ||
+ | <div class="dot4"><img src="https://static.igem.org/mediawiki/2018/9/9d/T--NCTU_Formosa--HP_inside_cover_dot2.png"/><a href="https://2018.igem.org/Team:NCTU_Formosa/Collaborations"><img class="first4" src="https://static.igem.org/mediawiki/2018/0/03/T--NCTU_Formosa--HP_inside_cover_dot.png"/></a></div> | ||
+ | </div> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/5/57/T--NCTU_Formosa--collaboration_title.png" class="title_title"> | ||
+ | <div class="edu1"> | ||
+ | <div class="block title_1"><p>Team: <a href="" class="team">NTHU_Formosa</a></p></div> | ||
+ | <div class="block title_2"><p>Troubleshooting -- Wiki course</p></div> | ||
+ | <div class="block content_1"><p> On August 23<sup>th</sup>, we prepared a wiki course for NTHU_Formosa, helping them to troubleshoot on their difficulties of writing their wiki. First of all, we taught them the concept and process of designing a website as an introduction. Second, we introduced how to use HTML, CSS, as well as JavaScript. Third, we helped them to build up a simple RWD website step by step to make them more familiar with the web languages. Finally, we gave them some tips and advices on editing their wiki. We’re really happy about having such a chance to share our knowledge with other iGEM teams! Hope the course could help them in a meaningful way. We’re looking forward to have further collaboration with NTHU_Formosa.</p></div> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/9/9f/T--NCTU_Formosa--NTHU_3.png" class="photo_1"> | ||
+ | <div class="explanation"> | ||
+ | <svg class="icon" aria-hidden="true" data-prefix="fas" data-icon="arrow-circle-up" class="svg-inline--fa fa-arrow-circle-up fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm143.6 28.9l72.4-75.5V392c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24V209.4l72.4 75.5c9.3 9.7 24.8 9.9 34.3.4l10.9-11c9.4-9.4 9.4-24.6 0-33.9L273 107.7c-9.4-9.4-24.6-9.4-33.9 0L106.3 240.4c-9.4 9.4-9.4 24.6 0 33.9l10.9 11c9.6 9.5 25.1 9.3 34.4-.4z"></path></svg> | ||
+ | Figure 1: The wiki course (when talking about CSS) | ||
+ | </div> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/e/e1/T--NCTU_Formosa--NTHU_1.png" class="photo_1"> | ||
+ | <div class="explanation" style="margin-bottom: 7vw;"> | ||
+ | <svg class="icon" aria-hidden="true" data-prefix="fas" data-icon="arrow-circle-up" class="svg-inline--fa fa-arrow-circle-up fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm143.6 28.9l72.4-75.5V392c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24V209.4l72.4 75.5c9.3 9.7 24.8 9.9 34.3.4l10.9-11c9.4-9.4 9.4-24.6 0-33.9L273 107.7c-9.4-9.4-24.6-9.4-33.9 0L106.3 240.4c-9.4 9.4-9.4 24.6 0 33.9l10.9 11c9.6 9.5 25.1 9.3 34.4-.4z"></path></svg> | ||
+ | Figure 2: NCTU_Formosa and NTHU_Formosa team members | ||
+ | </div> | ||
+ | |||
+ | <div class="block title_2"><p>Bidirectional collaboration with NTHU_Formosa</p></div> | ||
+ | <div class="block content_1"><p> On August 23<sup>th</sup>, we prepared a wiki course for NTHU_Formosa, helping them to troubleshoot on their difficulties of writing their wiki. First of all, we taught them the concept and process of designing a website as an introduction. Second, we introduced how to use HTML, CSS, as well as JavaScript. Third, we helped them to build up a simple RWD website step by step to make them more familiar with the web languages. Finally, we gave them some tips and advices on editing their wiki. We’re really happy about having such a chance to share our knowledge with other iGEM teams! Hope the course could help them in a meaningful way. We’re looking forward to have further collaboration with NTHU_Formosa.</p></div> | ||
+ | <img src="" class="photo_1"> | ||
+ | <div class="explanation"> | ||
+ | <svg class="icon" aria-hidden="true" data-prefix="fas" data-icon="arrow-circle-up" class="svg-inline--fa fa-arrow-circle-up fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm143.6 28.9l72.4-75.5V392c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24V209.4l72.4 75.5c9.3 9.7 24.8 9.9 34.3.4l10.9-11c9.4-9.4 9.4-24.6 0-33.9L273 107.7c-9.4-9.4-24.6-9.4-33.9 0L106.3 240.4c-9.4 9.4-9.4 24.6 0 33.9l10.9 11c9.6 9.5 25.1 9.3 34.4-.4z"></path></svg> | ||
+ | Figure 3: The wiki course (when talking about CSS) | ||
+ | </div> | ||
+ | |||
+ | <div class="block title_2"><p>Validation</p></div> | ||
+ | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
+ | </body> | ||
</html> | </html> | ||
+ | |||
+ | {{NCTU_Formosa/Top_button}} | ||
+ | {{NCTU_Formosa/Footer}} |
Revision as of 16:19, 10 October 2018
Team: NTHU_Formosa
Troubleshooting -- Wiki course
On August 23th, we prepared a wiki course for NTHU_Formosa, helping them to troubleshoot on their difficulties of writing their wiki. First of all, we taught them the concept and process of designing a website as an introduction. Second, we introduced how to use HTML, CSS, as well as JavaScript. Third, we helped them to build up a simple RWD website step by step to make them more familiar with the web languages. Finally, we gave them some tips and advices on editing their wiki. We’re really happy about having such a chance to share our knowledge with other iGEM teams! Hope the course could help them in a meaningful way. We’re looking forward to have further collaboration with NTHU_Formosa.
Bidirectional collaboration with NTHU_Formosa
On August 23th, we prepared a wiki course for NTHU_Formosa, helping them to troubleshoot on their difficulties of writing their wiki. First of all, we taught them the concept and process of designing a website as an introduction. Second, we introduced how to use HTML, CSS, as well as JavaScript. Third, we helped them to build up a simple RWD website step by step to make them more familiar with the web languages. Finally, we gave them some tips and advices on editing their wiki. We’re really happy about having such a chance to share our knowledge with other iGEM teams! Hope the course could help them in a meaningful way. We’re looking forward to have further collaboration with NTHU_Formosa.
Validation