Difference between revisions of "Team:NUS Singapore-A/shadow/Outreach"

 
(3 intermediate revisions by the same user not shown)
Line 16: Line 16:
 
/**************************END OF NEW CAROUSEL********************************/
 
/**************************END OF NEW CAROUSEL********************************/
  
* {box-sizing: border-box;}
 
body {font-family: Verdana, sans-serif;}
 
.mySlides {display: none;}
 
img {vertical-align: middle;}
 
  
 
.outreach-header{
 
.outreach-header{
Line 27: Line 23:
  
  
.active {
 
  background-color: #717171;
 
}
 
 
/* Fading animation */
 
 
@-webkit-keyframes fade {
 
  from {opacity: .4}
 
  to {opacity: 1}
 
}
 
 
@keyframes fade {
 
  from {opacity: .4}
 
  to {opacity: 1}
 
}
 
 
/* On smaller screens, decrease text size */
 
@media only screen and (max-width: 300px) {
 
  .text {font-size: 11px}
 
}
 
 
/****************ANYTHING ONWARDS IS THE STYLE FROM INTERLAB********************************************/
 
/****************ANYTHING ONWARDS IS THE STYLE FROM INTERLAB********************************************/
  
Line 202: Line 178:
 
     /********************
 
     /********************
 
     End of two columns */
 
     End of two columns */
 +
/* Style the img inside the buttons */
 +
.sponsors-overview-rows button img{
 +
  max-height:100%;
 +
  max-width:100%;
 +
}
 +
/* Create an active/current tablink class */
 +
.sponsors-overview-rows button.active {
 +
    background-color: #ccc;
 +
}
 +
 +
.tabcontent-wrapper{
 +
  text-align: center;
 +
}
 +
/* Style the tab content */
 +
.tabcontent {
 +
    display: none;
 +
    max-width: 85%;
 +
    margin: auto auto;
 +
    padding: 6px 12px;
 +
    border-radius: 12px;
 +
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
    flex-direction: row;
 +
    justify-content: flex-start;
 +
    align-items: center;
 +
}
 +
.sponsor-pic{
 +
  display: flex;
 +
  width: 235px;
 +
  max-width: 235px;
 +
  min-width: 235px;
 +
  height: auto;
 +
}
 
      
 
      
 
</style>
 
</style>
Line 230: Line 240:
  
 
<div class="tabcontent-wrapper">
 
<div class="tabcontent-wrapper">
 +
 +
 
<!-- YOU CAN COPY PASTE FROM HERE TO THE NEXT WARNING -->
 
<!-- YOU CAN COPY PASTE FROM HERE TO THE NEXT WARNING -->
<!--     HELLO BELOW HERE IS THE DIV TAG YOU SHOULD CHANGE. REMEMBER TO RELATE THE ID TO THE CORRECT ID AT CAROUSEL UP ABOVE -->
+
 
 +
 
 +
 
 +
<!-- HELLO BELOW HERE IS THE DIV TAG YOU SHOULD CHANGE. REMEMBER TO RELATE THE ID TO THE CORRECT ID AT CAROUSEL UP ABOVE -->
  
 
<div id="IHP1" class="tabcontent">
 
<div id="IHP1" class="tabcontent">
Line 238: Line 253:
  
 
     <img src="https://static.igem.org/mediawiki/2018/a/a6/T--NUS_Singapore-A--IHP_FooJeeLoon.jpg" class="sponsor-pic" alt="Dr Foo Jee Loon"></a>
 
     <img src="https://static.igem.org/mediawiki/2018/a/a6/T--NUS_Singapore-A--IHP_FooJeeLoon.jpg" class="sponsor-pic" alt="Dr Foo Jee Loon"></a>
     <span class="sponsor-description"> [1/8] - BLAH BLAH LIFEHACKS
+
     <div class="row">  
<br> <br>
+
      <div class="column left" style="background-color: white;">
<p>HELLO TVARITA I WANT YOU TO WRITE HERE. REMEMBER FOR EVERY NEW PICTURE YOU WANNA ADD. MAKE SURE YOU LOOK AT THE onclick="openSponsor(event, '<INSERT CORRECT NUMBER HERE>')" THEN REMEMBER TO CHANGE THE DIV ID FOR THIS SPECIFIC WRITEUP</p>  
+
        <p>HELLO TVARITA I WANT YOU TO WRITE HERE. REMEMBER FOR EVERY NEW PICTURE YOU WANNA ADD. MAKE SURE YOU LOOK AT THE onclick="openSponsor(event, 'INSERT CORRECT NUMBER HERE')" THEN REMEMBER TO CHANGE THE DIV ID FOR THIS SPECIFIC WRITEUP </p>
<br><br>  
+
 
<p>ALWAYS REMEMBER TO OPEN AND CLOSE YOUR P TAGS OR THE LAYOUT WILL BE SCREWED BIG TIME</p>
+
        <br>
<br><br>
+
 
<p>PLEASE ASK IF YOU'RE NOT SURE AND HAPPY HTML-ING</p>
+
        <p>HELLO TVARITA I WANT YOU TO WRITE HERE. REMEMBER FOR EVERY NEW PICTURE YOU WANNA ADD. MAKE SURE YOU LOOK AT THE onclick="openSponsor(event, 'INSERT CORRECT NUMBER HERE')" THEN REMEMBER TO CHANGE THE DIV ID FOR THIS SPECIFIC WRITEUP </p>
     </span>
+
 
 +
        <br>
 +
      </div>
 +
      <div class="column right" style="background-color: white;">
 +
        <p><i>Use Italics for mini titles</i></p>
 +
        <p>ALWAYS REMEMBER TO OPEN AND CLOSE YOUR P TAGS OR THE LAYOUT WILL BE SCREWED BIG TIME</p>
 +
 
 +
      <br>
 +
    </div>
 +
     </div>
 +
 
 
   </div>
 
   </div>
 +
 +
 
<!-- HERE IS WHERE YOU SHOULD STOP YOUR COPYING. TRY TO SHOW PREVIEW BEFORE SAVING THE PAGE. ALSO DON'T USE GOOGLE CHROME WHEN SHOWING PREVIEW CAUSE IT'LL ALL BE GONE -->
 
<!-- HERE IS WHERE YOU SHOULD STOP YOUR COPYING. TRY TO SHOW PREVIEW BEFORE SAVING THE PAGE. ALSO DON'T USE GOOGLE CHROME WHEN SHOWING PREVIEW CAUSE IT'LL ALL BE GONE -->
  
Line 313: Line 340:
 
     </div>
 
     </div>
  
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>

Latest revision as of 12:35, 28 September 2018

CONNECT WITH US
Outreach Header

HELLO TVARITA I WANT YOU TO WRITE HERE. REMEMBER FOR EVERY NEW PICTURE YOU WANNA ADD. MAKE SURE YOU LOOK AT THE onclick="openSponsor(event, 'INSERT CORRECT NUMBER HERE')" THEN REMEMBER TO CHANGE THE DIV ID FOR THIS SPECIFIC WRITEUP


HELLO TVARITA I WANT YOU TO WRITE HERE. REMEMBER FOR EVERY NEW PICTURE YOU WANNA ADD. MAKE SURE YOU LOOK AT THE onclick="openSponsor(event, 'INSERT CORRECT NUMBER HERE')" THEN REMEMBER TO CHANGE THE DIV ID FOR THIS SPECIFIC WRITEUP


Use Italics for mini titles

ALWAYS REMEMBER TO OPEN AND CLOSE YOUR P TAGS OR THE LAYOUT WILL BE SCREWED BIG TIME


OVERVIEW

Through outreach, NUSGEM aimed to raise more awareness about synthetic biology, iGEM and our project to the public focusing greatly on high school and university students. Although synthetic biology research and development is growing in Singapore, it is not being emphasized to students. We feel it is important that students are exposed to the basics of synthetic biology early on to help them open to newer career options.