Revathireddy (Talk | contribs) |
Revathireddy (Talk | contribs) |
||
Line 87: | Line 87: | ||
.title { | .title { | ||
color: grey; | color: grey; | ||
+ | } | ||
+ | |||
+ | /* Style the tab */ | ||
+ | div.tab { | ||
+ | overflow: hidden; | ||
+ | border: 1px solid #ccc; | ||
+ | background-color: #f1f1f1; | ||
+ | } | ||
+ | |||
+ | /* Style the buttons inside the tab */ | ||
+ | div.tab button { | ||
+ | background-color: inherit; | ||
+ | float: left; | ||
+ | border: none; | ||
+ | outline: none; | ||
+ | cursor: pointer; | ||
+ | padding: 14px 16px; | ||
+ | transition: 0.3s; | ||
+ | font-size: 17px; | ||
+ | } | ||
+ | |||
+ | /* Change background color of buttons on hover */ | ||
+ | div.tab button:hover { | ||
+ | background-color: #ddd; | ||
+ | } | ||
+ | |||
+ | /* Create an active/current tablink class */ | ||
+ | div.tab button.active { | ||
+ | background-color: #ccc; | ||
+ | } | ||
+ | |||
+ | /* Style the tab content */ | ||
+ | .tabcontent { | ||
+ | display: none; | ||
+ | padding: 6px 12px; | ||
+ | border: 1px solid #ccc; | ||
+ | border-top: none; | ||
} | } | ||
Line 173: | Line 210: | ||
academia, our peers and public opinion have played a huge role in shaping | academia, our peers and public opinion have played a huge role in shaping | ||
up our idea.</p> | up our idea.</p> | ||
− | |||
− | <button onclick=" | + | <div class="tab"> |
+ | <button class="tablinks" onclick="openCity(event, 'London')">Current Solutions | ||
+ | |||
+ | </button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'Paris')">Public and Educational outreach | ||
+ | |||
+ | </button> | ||
+ | <button class="tablinks" onclick="openCity(event, 'Tokyo')">Expert advice</button> | ||
+ | </div> | ||
+ | |||
+ | <div id="London" class="tabcontent"> | ||
+ | <h3>Currrent solutions</h3> | ||
+ | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<p style="font-size:20px; colour:lightgrey;">Before embarking on our pursuit, we first analysed the current solutions | <p style="font-size:20px; colour:lightgrey;">Before embarking on our pursuit, we first analysed the current solutions | ||
that are available for deodorization of toilets and their short-comings. A | that are available for deodorization of toilets and their short-comings. A | ||
Line 202: | Line 242: | ||
that they need to be replaced every few days, making them inconvenient.</p> | that they need to be replaced every few days, making them inconvenient.</p> | ||
</div> | </div> | ||
− | + | <div id="Paris" class="tabcontent"> | |
− | + | <h3>Public and Educational outreach</h3> | |
− | + | <p style="font-size:20px; colour:lightgrey; text-align: justify;">Science is all about curiosity and kids are known to be very curious! Hence, sparking | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
scientific curiosity amongst kids has been over main focus. We are thankful to Sparsha | scientific curiosity amongst kids has been over main focus. We are thankful to Sparsha | ||
Charitable Trust for giving us the opportunity to interact with kids from K.D.Vidyalaya | Charitable Trust for giving us the opportunity to interact with kids from K.D.Vidyalaya | ||
Line 225: | Line 256: | ||
<img src="https://static.igem.org/mediawiki/2017/b/bc/ICT-Mumbai_HP_image_2.jpeg" class="w3-round" alt="Norway" style="width:30%" hspace="10"> | <img src="https://static.igem.org/mediawiki/2017/b/bc/ICT-Mumbai_HP_image_2.jpeg" class="w3-round" alt="Norway" style="width:30%" hspace="10"> | ||
<img src="https://static.igem.org/mediawiki/2017/c/c9/ICT-Mumbai_HP_image_3.jpeg" class="w3-round" alt="Norway" style="width:30%" hspace="10"> | <img src="https://static.igem.org/mediawiki/2017/c/c9/ICT-Mumbai_HP_image_3.jpeg" class="w3-round" alt="Norway" style="width:30%" hspace="10"> | ||
+ | </div> | ||
+ | <div id="Tokyo" class="tabcontent"> | ||
+ | <h3>Expert advice</h3> | ||
+ | <p style="font-size:20px; colour:lightgrey; text-align: justify;">In order to make our device suitable for practical use in public washrooms, we consulted Sulabh International, an NGO behind the ‘Sulabh Sanitation Movement’ who have built 1.5 million household toilets & 54 million government toilets around India. According to Mr.Nirmal Singh, President of Sulabh International, Mumbai the device under design by us could one day be used in public washrooms provided it is economically feasible. From above interaction, we got an idea of how public toilets are being maintained and this motivated us to make this process easier & economical.</p> | ||
+ | </div> | ||
− | + | <script> | |
− | + | function openCity(evt, cityName) { | |
+ | var i, tabcontent, tablinks; | ||
+ | tabcontent = document.getElementsByClassName("tabcontent"); | ||
+ | for (i = 0; i < tabcontent.length; i++) { | ||
+ | tabcontent[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> | </script> | ||
Revision as of 06:06, 17 October 2017