|
|
(24 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
| {{NUS_Singapore-A}} | | {{NUS_Singapore-A}} |
| + | {{:Team:NUS_Singapore-A/Templates/Style}} |
| <html> | | <html> |
| | | |
Line 10: |
Line 11: |
| <script src="https://2018.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> | | <script src="https://2018.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> |
| | | |
− | <style>
| |
− | /***************************************************CSS STARTS HERE*********************************************************/
| |
− | /* The accordion is the class given to the drop-down menu thingy */
| |
− | .accordion {
| |
− | background-color: #f2f2f2;
| |
− | color: black;
| |
− | cursor: pointer;
| |
− | padding: 15px;
| |
− | width: 90%;
| |
− | text-align: left;
| |
− | margin-left: 5%;
| |
− | margin-right: 5%;
| |
− | border: none;
| |
− | outline: none;
| |
− | /* I wanted to give a gradual change, but it's having some trouble reading the 'transition' property. I'll look into having it javascripted instead. */
| |
− | /* transition: 0.4s linear; */
| |
− | font-family: "Montserrat", sans-serif;
| |
− | font-weight: 300;
| |
− | font-size: 20px;
| |
− | }
| |
− |
| |
− | /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
| |
− | .active, .accordion:hover {
| |
− | font: bold 20px "Montserrat", sans-serif;
| |
− | background-color: #e6e6e6;
| |
− | }
| |
− |
| |
− | /* Style the accordion panel. Note: hidden by default */
| |
− | .panel {
| |
− | background-color: white;
| |
− | text-align: left;
| |
− | margin-top: 10px;
| |
− | max-height: 0;
| |
− | overflow: hidden;
| |
− | transition: max-height 0.2s ease-out;
| |
− | }
| |
− | .accordion:after {
| |
− | content: '+';
| |
− | font-size: 13px;
| |
− | color: #777;
| |
− | float: right;
| |
− | margin-left: 5px;
| |
− | }
| |
− |
| |
− | /* Not sure why this function does not work. Need to check */
| |
− | .active:after {
| |
− | content: "-";
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | /* Style the tab content */
| |
− | .tabcontent {
| |
− | display: none;
| |
− | border: none;
| |
− | margin: none;
| |
− | -webkit-animation: fadeEffect 1s;
| |
− | animation: fadeEffect 1s;
| |
− | min-height: 500px;
| |
− | }
| |
− |
| |
− | /* Fade in tabs */
| |
− | @-webkit-keyframes fadeEffect {
| |
− | from {opacity: 0;}
| |
− | to {opacity: 1;}
| |
− | }
| |
− |
| |
− | @keyframes fadeEffect {
| |
− | from {opacity: 0;}
| |
− | to {opacity: 1;}
| |
− | }
| |
− |
| |
− | table, th, td {
| |
− | border: none;
| |
− | border-collapse: collapse;
| |
− | }
| |
− | table {
| |
− | font-family: "Lora";
| |
− | font-size: 12px;
| |
− | word-spacing: 0.5em;
| |
− | }
| |
− | th, td {
| |
− | text-align: left;
| |
− | padding: 1px;
| |
− | }
| |
− |
| |
− | h1 {
| |
− | color: #000;
| |
− | font-family: "montserrat", sans-serif;
| |
− | font-weight: bold;
| |
− | }
| |
− |
| |
− | h2 {
| |
− | font-family: "Montserrat", sans-serif;
| |
− | font-size: 15px;
| |
− | font-weight: normal;
| |
− | text-align: left;
| |
− | color: black;
| |
− | padding-left: 1%;
| |
− | padding-top: 1.5%;
| |
− | padding-bottom: 1%;
| |
− | margin-left: 1%;
| |
− | }
| |
− |
| |
− | h3 {
| |
− | font-family: "Lora", sans;
| |
− | font-size: 12px;
| |
− | font-weight: bold;
| |
− | text-align: left;
| |
− | color: black;
| |
− | margin-left: 15%;
| |
− | margin-bottom: 5px;
| |
− | }
| |
− |
| |
− | p {
| |
− | font-family: "Lora", serif;
| |
− | font-size: 14px;
| |
− | word-spacing: 0.5em;
| |
− | text-align:justify;
| |
− | margin-left:5%;
| |
− | margin-right:5%;
| |
− | }
| |
− |
| |
− | img {
| |
− | display: block;
| |
− | margin-left: auto;
| |
− | margin-right: auto;
| |
− | }
| |
− |
| |
− | .discussion_graph, .measurement_table{
| |
− | width: 70%;
| |
− | height: auto;
| |
− | margin: auto;
| |
− | }
| |
− |
| |
− | .notebook-header{
| |
− | width: 50%;
| |
− | height: auto;
| |
− | margin: auto;
| |
− | }
| |
− |
| |
− |
| |
− | /**********************
| |
− | Start of two columns */
| |
− | * {
| |
− | box-sizing: border-box;
| |
− | }
| |
− |
| |
− | /* Create two columns that floats next to each other */
| |
− | .column {
| |
− | float: left;
| |
− | text-align: left;
| |
− | }
| |
− |
| |
− | .left {
| |
− | width: 50%;
| |
− | padding-left: 5%;
| |
− | padding-right: 2.5%;
| |
− | }
| |
− |
| |
− | .right {
| |
− | width: 50%;
| |
− | padding-left: 2.5%;
| |
− | padding-right: 5%;
| |
− | }
| |
− |
| |
− | /* Clear floats after the columns */
| |
− | .row:after {
| |
− | content: "";
| |
− | display: table;
| |
− | clear: both;
| |
− | }
| |
− |
| |
− | /********************
| |
− | End of two columns */
| |
− |
| |
− |
| |
− | /* Style the tab */
| |
− | .tab_vertical {
| |
− | float: left;
| |
− | border: 1px solid #ccc;
| |
− | background-color: #f1f1f1;
| |
− | width: 15%;
| |
− | min-height: 150px;
| |
− | height: 150px;
| |
− | overflow-y: auto;
| |
− | }
| |
− |
| |
− | /* Style the buttons inside the tab */
| |
− | .tab_vertical button {
| |
− | display: block;
| |
− | background-color: inherit;
| |
− | color: black;
| |
− | padding: 22px 16px;
| |
− | width: 100%;
| |
− | border: none;
| |
− | outline: none;
| |
− | text-align: left;
| |
− | cursor: pointer;
| |
− | transition: 0.3s;
| |
− | font-size: 17px;
| |
− | }
| |
− |
| |
− | /* Change background color of buttons on hover */
| |
− | .tab_vertical button:hover {
| |
− | background-color: #ddd;
| |
− | }
| |
− |
| |
− | /* Create an active/current "tab button" class */
| |
− | .tab_vertical button.active {
| |
− | background-color: #ccc;
| |
− | }
| |
− |
| |
− | /* Style the tab content */
| |
− | .tabcontent_vertical {
| |
− | float: left;
| |
− | padding: 0 1%;
| |
− | width: 85%;
| |
− | border: none;
| |
− | min-height: 400px;
| |
− | }
| |
− |
| |
− |
| |
− | #sidenav a {font-family:"Segoe UI",Arial,sans-serif;text-decoration:none;display:block;padding:2px 1px 1px 16px}
| |
− | #sidenav a:hover,#sidenav a:focus {color:#000000;background-color:#cccccc;}
| |
− | #sidenav a.active {background-color:#4CAF50;color:#ffffff}
| |
− | #leftmenuinner {
| |
− | position:fixed;
| |
− | top:0;
| |
− | padding-top:112px;
| |
− | padding-bottom:0;
| |
− | height:100%;
| |
− | width:220px;
| |
− | background-color:transparent;
| |
− | }
| |
− | #leftmenuinnerinner {
| |
− | height:100%;
| |
− | width:100%;
| |
− | overflow-y:scroll;
| |
− | overflow-x:hidden;
| |
− | padding-top:20px;
| |
− | }
| |
− |
| |
− |
| |
− | /***************************************************CSS ENDS HERE**********************************************************/
| |
− | </style>
| |
| | | |
| <body> | | <body> |
| <div class="inner-border" style="border-top: none;"> | | <div class="inner-border" style="border-top: none;"> |
− | <img src="https://static.igem.org/mediawiki/2018/f/fd/T--NUS_Singapore-A--Notebook.jpg" class="notebook-header"> | + | <div class="all-wrapper"> |
| + | <div class="content-wrapper"> |
| + | <img src="https://static.igem.org/mediawiki/2018/e/e7/T--NUS_Singapore-A--Notebook_heading_C.png" class="notebook-header"> |
| + | <div class="all-wrapper"> |
| <br> | | <br> |
| <img src="https://static.igem.org/mediawiki/2018/9/9b/T--NUS_Singapore-A--Notebook_heading.png" width="1090" height="160" alt="Notebook heading" usemap="#workmap"> | | <img src="https://static.igem.org/mediawiki/2018/9/9b/T--NUS_Singapore-A--Notebook_heading.png" width="1090" height="160" alt="Notebook heading" usemap="#workmap"> |
| | | |
− | <p style="text-align: center;">Click on different notebooks to see our records.</p> | + | <div class="months-container"> |
− | <hr>
| + | <div><span>Protocol</span></div> |
− | | + | <div><span>May</span></div> |
− | <div class='w3-sidebar w3-collapse' id='sidenav'>
| + | <div><span>June</span></div> |
− | <div id='leftmenuinner'>
| + | <div><span>July</span></div> |
− | <div class='w3-light-grey' id='leftmenuinnerinner'> | + | <div><span>August</span></div> |
− | <a href='javascript:void(0)' onclick='close_menu()' class='w3-button w3-hide-large w3-large w3-display-topright' style='right:16px;padding:3px 12px;font-weight:bold;'>×</a>
| + | <div><span>September</span></div> |
− | <h2 class="left"><span class="left_h2">HTML5</span> Tutorial</h2>
| + | <!--<div><span>October</span></div>--> |
− | <a target="_top" href="default.asp">HTML HOME</a> | + | |
− | <a target="_top" href="html_intro.asp">HTML Introduction</a>
| + | |
− | <a target="_top" href="html_editors.asp">HTML Editors</a>
| + | |
− | <a target="_top" href="html_basic.asp">HTML Basic</a>
| + | |
− | <a target="_top" href="html_elements.asp">HTML Elements</a>
| + | |
− | <a target="_top" href="html_attributes.asp">HTML Attributes</a>
| + | |
− | <a target="_top" href="html_headings.asp">HTML Headings</a>
| + | |
− | <a target="_top" href="html_paragraphs.asp">HTML Paragraphs</a>
| + | |
− | <a target="_top" href="html_styles.asp">HTML Styles</a>
| + | |
− | <a target="_top" href="html_formatting.asp">HTML Formatting</a>
| + | |
− | <a target="_top" href="html_quotation_elements.asp">HTML Quotations</a>
| + | |
− | <a target="_top" href="html_comments.asp">HTML Comments</a>
| + | |
− | <a target="_top" href="html_colors.asp">HTML Colors</a>
| + | |
− | <a target="_top" href="html_css.asp">HTML CSS</a>
| + | |
− | <a target="_top" href="html_links.asp">HTML Links</a>
| + | |
− | <a target="_top" href="html_images.asp">HTML Images</a>
| + | |
− | <a target="_top" href="html_tables.asp">HTML Tables</a>
| + | |
− | <a target="_top" href="html_lists.asp">HTML Lists</a>
| + | |
− | <a target="_top" href="html_blocks.asp">HTML Blocks</a>
| + | |
− | <a target="_top" href="html_classes.asp">HTML Classes</a>
| + | |
− | <a target="_top" href="html_id.asp">HTML Id</a>
| + | |
− | <a target="_top" href="html_iframe.asp">HTML Iframes</a>
| + | |
− | <a target="_top" href="html_scripts.asp">HTML JavaScript</a>
| + | |
− | <a target="_top" href="html_filepaths.asp">HTML File Paths</a>
| + | |
− | <a target="_top" href="html_head.asp">HTML Head</a>
| + | |
− | <a target="_top" href="html_layout.asp">HTML Layout</a>
| + | |
− | <a target="_top" href="html_responsive.asp">HTML Responsive</a>
| + | |
− | <a target="_top" href="html_computercode_elements.asp">HTML Computercode</a>
| + | |
− | <a target="_top" href="html_entities.asp">HTML Entities</a>
| + | |
− | <a target="_top" href="html_symbols.asp">HTML Symbols</a>
| + | |
− | <a target="_top" href="html_charset.asp">HTML Charset</a>
| + | |
− | <a target="_top" href="html_urlencode.asp">HTML URL Encode</a>
| + | |
− | <a target="_top" href="html_xhtml.asp">HTML XHTML</a>
| + | |
− | <br>
| + | |
− | <h2 class="left"><span class="left_h2">HTML</span> Forms</h2>
| + | |
− | <a target="_top" href="html_forms.asp">HTML Forms</a> | + | |
− | <a target="_top" href="html_form_elements.asp">HTML Form Elements</a>
| + | |
− | <a target="_top" href="html_form_input_types.asp">HTML Input Types</a>
| + | |
− | <a target="_top" href="html_form_attributes.asp">HTML Input Attributes</a>
| + | |
− | <br>
| + | |
− | <h2 class="left"><span class="left_h2">HTML5</span></h2>
| + | |
− | <a target="_top" href="html5_intro.asp">HTML5 Intro</a> | + | |
− | <a target="_top" href="html5_browsers.asp">HTML5 Support</a>
| + | |
− | <a target="_top" href="html5_new_elements.asp">HTML5 New Elements</a>
| + | |
− | <a target="_top" href="html5_semantic_elements.asp">HTML5 Semantics</a>
| + | |
− | <a target="_top" href="html5_migration.asp">HTML5 Migration</a>
| + | |
− | <a target="_top" href="html5_syntax.asp">HTML5 Style Guide</a>
| + | |
− | <br>
| + | |
− | <h2 class="left"><span class="left_h2">HTML</span> Graphics</h2>
| + | |
− | <a target="_top" href="html5_canvas.asp">HTML Canvas</a> | + | |
− | <a target="_top" href="html5_svg.asp">HTML SVG</a>
| + | |
− | <a target="_top" href="html_googlemaps.asp">HTML Google Maps</a>
| + | |
− | <br>
| + | |
− | <h2 class="left"><span class="left_h2">HTML</span> Media</h2>
| + | |
− | <a target="_top" href="html_media.asp">HTML Media</a> | + | |
− | <a target="_top" href="html5_video.asp">HTML Video</a>
| + | |
− | <a target="_top" href="html5_audio.asp">HTML Audio</a>
| + | |
− | <a target="_top" href="html_object.asp">HTML Plug-ins</a>
| + | |
− | <a target="_top" href="html_youtube.asp">HTML YouTube</a>
| + | |
− | <br>
| + | |
− | <h2 class="left"><span class="left_h2">HTML</span> APIs</h2>
| + | |
− | <a target="_top" href="html5_geolocation.asp">HTML Geolocation</a> | + | |
− | <a target="_top" href="html5_draganddrop.asp">HTML Drag/Drop</a>
| + | |
− | <a target="_top" href="html5_webstorage.asp">HTML Web Storage</a>
| + | |
− | <a target="_top" href="html5_webworkers.asp">HTML Web Workers</a>
| + | |
− | <a target="_top" href="html5_serversentevents.asp">HTML SSE</a>
| + | |
− | <br>
| + | |
− | <h2 class="left"><span class="left_h2">HTML</span> Examples</h2>
| + | |
− | <a target="_top" href="html_examples.asp">HTML Examples</a>
| + | |
− | <a target="_top" href="html_quiz.asp">HTML Quiz</a>
| + | |
− | <a target="_top" href="html_exercises.asp">HTML Exercises</a>
| + | |
− | <a target="_top" href="html_exam.asp">HTML Certificate</a>
| + | |
− | <a target="_top" href="html_summary.asp">HTML Summary</a>
| + | |
− | <a target="_top" href="html_accessibility.asp">HTML Accessibility</a>
| + | |
− | <br>
| + | |
− | <h2 class="left"><span class="left_h2">HTML</span> References</h2>
| + | |
− | <a target="_top" href="/tags/default.asp">HTML Tag List</a>
| + | |
− | <a target="_top" href="/tags/ref_standardattributes.asp">HTML Attributes</a>
| + | |
− | <a target="_top" href="/tags/ref_eventattributes.asp">HTML Events</a>
| + | |
− | <a target="_top" href="/tags/ref_colornames.asp">HTML Colors</a>
| + | |
− | <a target="_top" href="/tags/ref_canvas.asp">HTML Canvas</a>
| + | |
− | <a target="_top" href="/tags/ref_av_dom.asp">HTML Audio/Video</a>
| + | |
− | <a target="_top" href="/tags/ref_html_dtd.asp">HTML Doctypes</a>
| + | |
− | <a target="_top" href="/tags/ref_charactersets.asp">HTML Character Sets</a>
| + | |
− | <a target="_top" href="/tags/ref_urlencode.asp">HTML URL Encode</a>
| + | |
− | <a target="_top" href="/tags/ref_language_codes.asp">HTML Lang Codes</a>
| + | |
− | <a target="_top" href="/tags/ref_httpmessages.asp">HTTP Messages</a>
| + | |
− | <a target="_top" href="/tags/ref_httpmethods.asp">HTTP Methods</a>
| + | |
− | <a target="_top" href="/tags/ref_pxtoemconversion.asp">PX to EM Converter</a>
| + | |
− | <a target="_top" href="/tags/ref_keyboardshortcuts.asp">Keyboard Shortcuts</a>
| + | |
− | <br><br>
| + | |
| </div> | | </div> |
− | </div>
| |
− | </div>
| |
− |
| |
− |
| |
− |
| |
− |
| |
| | | |
| + | <p style="text-align: center;">Click on different notebooks to see our records.</p> |
| | | |
| <hr> | | <hr> |
Line 382: |
Line 44: |
| | | |
| <div id="Protocols" class="tabcontent"> | | <div id="Protocols" class="tabcontent"> |
− | <div class="tab_vertical">
| + | <h1>Protocols</h1> |
− | <button class="tablinks" onclick="openCity(event, 'Protocol1')">Protocol 1</button>
| + | |
− | <button class="tablinks" onclick="openCity(event, 'Protocol2')">Protocol 2</button>
| + | |
− | <button class="tablinks" onclick="openCity(event, 'Protocol3')">Protocol 3</button>
| + | |
− | <button class="tablinks" onclick="openCity(event, 'Protocol4')">Protocol 4</button>
| + | |
− | <button class="tablinks" onclick="openCity(event, 'Protocol5')">Protocol 5</button>
| + | |
− | <button class="tablinks" onclick="openCity(event, 'Protocol6')">Protocol 6</button>
| + | |
− | <button class="tablinks" onclick="openCity(event, 'Protocol7')">Protocol 7</button>
| + | |
− | <button class="tablinks" onclick="openCity(event, 'Protocol8')">Protocol 8</button>
| + | |
− | </div>
| + | |
| | | |
− | <div id="Protocol1" class="tabcontent_vertical">
| + | <object data="https://static.igem.org/mediawiki/2016/e/ec/T--Imperial_College--LabBook.pdf" type="application/pdf" width="80%" height="900px"> |
− | <h2>Protocol 1</h2>
| + | <p>It appears you don't have a PDF plugin for this browser. |
− | <p>Add your protocols here.</p>
| + | No biggie... you can <a href="https://static.igem.org/mediawiki/2016/e/ec/T--Imperial_College--LabBook.pdf">click here to |
− | </div>
| + | download the PDF file.</a></p> |
− |
| + | </object> |
− | <div id="Protocol2" class="tabcontent_vertical">
| + | |
− | <h2>Protocol 2</h2>
| + | |
− | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div id="Protocol3" class="tabcontent_vertical">
| + | |
− | <h2>Protocol 3</h2>
| + | |
− | </div>
| + | |
− |
| + | |
− | <div id="Protocol4" class="tabcontent_vertical">
| + | |
− | <h2>Protocol 4</h2>
| + | |
− | </div> | + | |
− | | + | |
− | <div id="Protocol4" class="tabcontent_vertical">
| + | |
− | <h2>Protocol 5</h2>
| + | |
− | </div>
| + | |
− | | + | |
− | <div id="Protocol4" class="tabcontent_vertical">
| + | |
− | <h2>Protocol 6</h2>
| + | |
− | </div> | + | |
− | | + | |
− | <div id="Protocol4" class="tabcontent_vertical">
| + | |
− | <h2>Protocol 7</h2>
| + | |
− | </div>
| + | |
| | | |
| </div> | | </div> |
Line 427: |
Line 56: |
| <div id="June" class="tabcontent"> | | <div id="June" class="tabcontent"> |
| <h2>June</h2> | | <h2>June</h2> |
− | <p>We had fun!!!</p> | + | <p>PDF here</p> |
− | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
| + | |
| </div> | | </div> |
| | | |
| <div id="July" class="tabcontent"> | | <div id="July" class="tabcontent"> |
| <h2>July</h2> | | <h2>July</h2> |
− | <p>NUSGEM GO GO GO GO!</p> | + | <p>PDF here</p> |
− | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
| + | |
| </div> | | </div> |
| | | |
| <div id="August" class="tabcontent"> | | <div id="August" class="tabcontent"> |
| <h2>August</h2> | | <h2>August</h2> |
− | <p>NUSGEM GO GO GO GO!</p> | + | <p>PDF here</p> |
− | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
| + | |
| </div> | | </div> |
| | | |
| <div id="September" class="tabcontent"> | | <div id="September" class="tabcontent"> |
| <h2>September</h2> | | <h2>September</h2> |
− | <p>NUSGEM GO GO GO GO!</p> | + | <p>PDF here</p> |
− | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
| + | |
| </div> | | </div> |
| | | |
| <div id="October" class="tabcontent"> | | <div id="October" class="tabcontent"> |
| <h2>October</h2> | | <h2>October</h2> |
− | <p>NUSGEM GO GO GO GO!</p> | + | <p>PDF here</p> |
− | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
| + | |
| </div> | | </div> |
| | | |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </body> |
| + | |
| <script> | | <script> |
| function openCity(evt, cityName) { | | function openCity(evt, cityName) { |
Line 470: |
Line 105: |
| } | | } |
| | | |
− | function openCity(evt, cityName) {
| |
− | var i, tabcontent_vertical, tablinks;
| |
− | tabcontent_vertical = document.getElementsByClassName("tabcontent_vertical");
| |
− | for (i = 0; i < tabcontent_vertical.length; i++) {
| |
− | tabcontent_vertical[i].style.display = "none";
| |
− | }
| |
− | tablinks = document.getElementsByClassName("tablinks");
| |
− | for (i = 0; i < tablinks.length; i++) {
| |
− | tablinks[i].className = tablinks[i].className.replace(" active", "");
| |
− | }
| |
− | document.getElementById(cityName).style.display = "block";
| |
− | evt.currentTarget.className += " active";
| |
− | }
| |
− | </script>
| |
− | </div>
| |
− | </body>
| |
− |
| |
− | <script>
| |
− | /***************************************************JAVASCRIPT STARTS HERE**************************************************/
| |
− |
| |
− |
| |
− | /***************************************************JAVASCRIPT ENDS HERE****************************************************/
| |
| </script> | | </script> |
| | | |