Team:IIT Delhi/Outreach
From 2013.igem.org
(Difference between revisions)
Harshitsinha (Talk | contribs) (Created page with "<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type...") |
|||
(19 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | |||
<html> | <html> | ||
<head> | <head> | ||
Line 6: | Line 5: | ||
<title>Navigation-Top</title> | <title>Navigation-Top</title> | ||
<style ="text/css"> | <style ="text/css"> | ||
- | contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { | + | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { display:none;} |
- | display:none;} | + | #top-section { |
+ | border: none; | ||
+ | height: 0px;} | ||
+ | #content { | ||
+ | border: none;} | ||
/* Redesigning the topmenu */ /***************************/ body { | /* Redesigning the topmenu */ /***************************/ body { | ||
- | margin: | + | margin: 0px 0 0 0; |
padding: 0;} | padding: 0;} | ||
#content, #globalWrapper { | #content, #globalWrapper { | ||
Line 18: | Line 21: | ||
.centering { | .centering { | ||
margin: 0 auto; | margin: 0 auto; | ||
- | width: | + | width: 100%;} |
+ | /* Nav Bar */ | ||
#wrap { | #wrap { | ||
width: 100%; /* Spans the width of the page */ | width: 100%; /* Spans the width of the page */ | ||
height: 50px; margin: 0; /* Ensures there is no space between sides of the screen and the menu */ | height: 50px; margin: 0; /* Ensures there is no space between sides of the screen and the menu */ | ||
z-index: 99; /* Makes sure that your menu remains on top of other page elements */ | z-index: 99; /* Makes sure that your menu remains on top of other page elements */ | ||
- | position: relative; background-color: | + | position: relative; background-color: white; |
} | } | ||
.navbar { | .navbar { | ||
height: 50px; | height: 50px; | ||
+ | width: 100%; | ||
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
position: absolute; /* Ensures that the menu doesn’t affect other elements */ | position: absolute; /* Ensures that the menu doesn’t affect other elements */ | ||
- | border-right: | + | border-right: 0.5px solid white; } |
.navbar li { | .navbar li { | ||
height: auto; | height: auto; | ||
- | width: | + | width: 16.666%; /* Each menu item is 200px wide */ |
float: left; /* This lines up the menu items horizontally */ | float: left; /* This lines up the menu items horizontally */ | ||
text-align: center; /* All text is placed in the center of the box */ | text-align: center; /* All text is placed in the center of the box */ | ||
list-style: none; /* Removes the default styling (bullets) for the list */ | list-style: none; /* Removes the default styling (bullets) for the list */ | ||
- | font: normal bold | + | font: normal bold 13px/1.2em Arial, Verdana, Helvetica; padding: 0; |
margin: 0; | margin: 0; | ||
- | background-color: | + | background-color: white; |
} | } | ||
.navbar a { padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */ | .navbar a { padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */ | ||
- | border-left: | + | border-left: 0.5px solid black; border-right: 0.5px solid black; border-top: 0.5px solid black; border-bottom: 0.5px solid black;text-decoration: none; /* Removes the default hyperlink styling. */ |
color: white; /* Text color is white */ | color: white; /* Text color is white */ | ||
display: block; | display: block; | ||
} | } | ||
- | + | ||
+ | #home {background-color:red;} | ||
+ | #home:hover {color:red; background-color: white;} | ||
+ | |||
+ | #Project {background-color:orange;} | ||
+ | #Project:hover {color:orange; background-color: white;} | ||
+ | #overview {background-color: orange;} | ||
+ | #overview:hover {color:orange; background-color: white;} | ||
+ | #motivation {background-color: orange;} | ||
+ | #motivation:hover {color:orange; background-color: white;} | ||
+ | #model {background-color: orange;} | ||
+ | #model:hover {color:orange; background-color: white;} | ||
+ | #biobricks {background-color: orange;} | ||
+ | #biobricks:hover {color:orange; background-color: white;} | ||
+ | |||
+ | #modelling {background-color: #b3b300;} | ||
+ | #modelling:hover {color:#b3b300; background-color: white;} | ||
+ | |||
+ | #methods {background-color: green;} | ||
+ | #methods:hover {color:green; background-color:white;} | ||
+ | #protocol {background-color: green;} | ||
+ | #protocol:hover {color:green; background-color:white;} | ||
+ | #notebook {background-color: green;} | ||
+ | #notebook:hover {color:green; background-color: white;} | ||
+ | #brainstorming {background-color: green;} | ||
+ | #brainstorming:hover {color:green; background-color: white;} | ||
+ | #safety {background-color: green;} | ||
+ | #safety:hover {color:green; background-color:white;} | ||
+ | |||
+ | #outreach {background-color: violet;} | ||
+ | #outreach:hover {color:violet; background-color: white;} | ||
+ | #orientation {background-color: violet;} | ||
+ | #orientation:hover {color:violet; background-color: white;} | ||
+ | #south {background-color: violet;} | ||
+ | #south:hover {color:violet; background-color: white;} | ||
+ | #bill {background-color: violet;} | ||
+ | #bill:hover {color:violet; background-color: white;} | ||
+ | #biotoilets {background-color: violet;} | ||
+ | #biotoilets:hover {color:violet; background-color: white;} | ||
+ | |||
+ | #team {background-color: darkblue;} | ||
+ | #team:hover {color:darkblue; background-color: white;} | ||
+ | #student {background-color: darkblue;} | ||
+ | #student:hover {color:darkblue; background-color: white;} | ||
+ | #faculty {background-color: darkblue;} | ||
+ | #faculty:hover {color:darkblue; background-color: white;} | ||
+ | #attributions {background-color: darkblue;} | ||
+ | #attributions:hover {color:darkblue; background-color: white;} | ||
+ | |||
+ | .navbar li ul { | ||
display: none; /* Hides the drop-down menu */ | display: none; /* Hides the drop-down menu */ | ||
height: auto; margin: 0; /* Aligns drop-down box underneath the menu item */ | height: auto; margin: 0; /* Aligns drop-down box underneath the menu item */ | ||
padding: 0; /* Aligns drop-down box underneath the menu item */ } .navbar li:hover ul { | padding: 0; /* Aligns drop-down box underneath the menu item */ } .navbar li:hover ul { | ||
display: block; /* Displays the drop-down box when the menu item is hovered over */ | display: block; /* Displays the drop-down box when the menu item is hovered over */ | ||
+ | |||
+ | } | ||
+ | |||
+ | .navbar li ul li {background-color: white; width: 100%;} .navbar li ul li a { | ||
+ | border-left: 0.5px solid black; border-right: 0.5px solid black; border-top: 0.5px solid black; border-bottom: 0.5px solid black; width: auto; } | ||
+ | .navbar li ul li a:hover {width: 100%; background-color: white;} | ||
+ | |||
+ | /* Slider */ | ||
+ | #image-slider { | ||
+ | margin: 10px auto; | ||
+ | width: 600px; | ||
+ | } | ||
+ | #slide-frame { | ||
+ | height: 300px; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | #slides { | ||
+ | height: 375px; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | #slides img { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0px; | ||
+ | } | ||
+ | #navigation { | ||
+ | margin: 5px 0 0 0; | ||
+ | text-align: center; | ||
+ | z-index: 10px; | ||
+ | } | ||
+ | #navigation a { | ||
+ | text-decoration: none; | ||
+ | background: #333333; | ||
+ | padding: 2px 6px; | ||
+ | color: #FFFFFF; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | #navigation a:hover { | ||
+ | background: #0182C4; | ||
+ | } | ||
+ | transition: transition-property transition-duration transition-timing-function transition-delay; | ||
+ | #slides img { | ||
+ | z-index: 1; | ||
+ | opacity: 0; | ||
+ | /* animation */ | ||
+ | transition: all linear 400ms; | ||
+ | -o-transition: all linear 400ms; | ||
+ | -moz-transition: all linear 400ms; | ||
+ | -webkit-transition: all linear 400ms; | ||
+ | } | ||
+ | #slides img:target { | ||
+ | left: 0; | ||
+ | z-index: 5; | ||
+ | opacity: 1; | ||
} | } | ||
- | |||
- | |||
- | |||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
<table | <table | ||
- | style=" | + | style="background-color: white; width: 100%; height: 200px; text-align: left; margin-left: auto; margin-right: auto;" |
- | border="0" cellpadding=" | + | border="0" cellpadding="0" cellspacing="0"> |
<tbody> | <tbody> | ||
<tr> | <tr> | ||
<td colspan="1" rowspan="1" | <td colspan="1" rowspan="1" | ||
style="vertical-align: top; text-align: center;"><img | style="vertical-align: top; text-align: center;"><img | ||
- | style="width: 100%; height: | + | style="width: 100%; height: 200px;" alt="" |
- | src=" | + | src="https://static.igem.org/mediawiki/2013/5/5e/Header.jpg"><br> |
</td> | </td> | ||
</tr> | </tr> | ||
Line 73: | Line 179: | ||
<div id="wrap"> | <div id="wrap"> | ||
<ul class="navbar"> | <ul class="navbar"> | ||
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi" id="home">Home</a></li> |
- | <li><a href="#">Project</a> | + | <li><a href="#" id="Project">Our Project</a> |
<ul> | <ul> | ||
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Project" id="overview">Overview</a></li> |
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Idea" id="motivation">Motivation</a></li> |
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Model" id="model">The Model</a></li> |
+ | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Biobrick" id="biobricks">Biobricks Submitted</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Modelling" id="modelling">Modelling and Simulation</a></li> |
- | <li><a href="#"> | + | <li><a href="#" id="methods">Methods and Results</a> |
<ul> | <ul> | ||
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Protocol" id="protocol">Protocols</a></li> |
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Notebook" id="notebook">Notebook</a></li> |
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Brainstorming" id="brainstorming">Brainstorming</a></li> |
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Safety" id="safety">Safety</a></li> |
</ul> | </ul> | ||
</li> | </li> | ||
- | <li><a href="#" | + | <li><a href="#" id="outreach">Outreach</a> |
- | + | ||
<ul> | <ul> | ||
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Outreach" id="orientation">Orientation for Freshmen</a></li> |
- | <li><a href=" | + | |
+ | <li><a href="https://2013.igem.org/Team:IIT_Delhi/BRAI" id="bill">BRAI Bill</a></li> | ||
+ | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Biotoilet" id="biotoilets">Biotoilets</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Team" id="team">Team</a> |
<ul> | <ul> | ||
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Student" id="student">Student Members</a></li> |
- | <li><a href=" | + | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Advisor" id="faculty">Faculty Advisors</a></li> |
+ | <li><a href="https://2013.igem.org/Team:IIT_Delhi/Attributions" id="attributions">Attributions</a></li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
+ | <br> | ||
<br> | <br> | ||
<table style="text-align: left; width: 100%;" border="0" | <table style="text-align: left; width: 100%;" border="0" | ||
Line 110: | Line 220: | ||
<tbody> | <tbody> | ||
<tr> | <tr> | ||
- | <td style="width: | + | <td style="width: 94px;" align="center" |
valign="top"></td> | valign="top"></td> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<td style="width: 128px;" align="center" | <td style="width: 128px;" align="center" | ||
valign="top"></td> | valign="top"></td> | ||
- | <td style="width: | + | <td style="width: 645px;" align="center" |
valign="top"><font size="+2">Outreach</font><br> | valign="top"><font size="+2">Outreach</font><br> | ||
<div style="text-align: left;"> | <div style="text-align: left;"> | ||
- | <hr style="width: 100%; height: 2px;"> | + | <hr style="width: 100%; height: 2px;"><br> |
- | + | We were given a great opportunity by Dr. PVM Rao to give a presentation on iGEM to the incoming batch of students at IIT Delhi for the course "Introduction to Engineering" to about 800 students.. We specifically focused on synthetic biology as for many in our audience this was a term which they’d never heard of before. The presentation was also given with the aim to share with the audience the experiences which we gained while working on a scientific project. We received an enthusiastic response from our audience along with messages from inquisitive freshers who were interested in learning more about synthetic biology. We hope our presentation ignited an initial spark towards research in synthetic biology in some members of our audience. Below are some pictures from our presentation. | |
- | + | ||
- | + | ||
- | "Introduction to Engineering" to about 800 students. | + | |
<br> | <br> | ||
- | <table style="text-align: left; width: 100%;" border=" | + | <br> |
+ | <table style="text-align: left; width: 100%;" border="0" | ||
cellpadding="2" cellspacing="2"> | cellpadding="2" cellspacing="2"> | ||
<tbody> | <tbody> | ||
<tr> | <tr> | ||
- | <td | + | <td style="vertical-align: top; text-align: center;"><img |
- | <td align="center" valign="top"></td> | + | style="width: 480px; height: 320px;" alt="" |
+ | src="https://static.igem.org/mediawiki/igem.org/7/75/Image1_IIT.jpg"></td> | ||
+ | |||
+ | <td align="center" valign="top"><img | ||
+ | style="width: 480px; height: 320px;" alt="" | ||
+ | src="https://static.igem.org/mediawiki/igem.org/7/7b/Image2-IIT.jpg"></td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
- | <td align="center" valign="top"></td> | + | <td align="center" valign="top"><img |
- | + | style="width: 480px; height: 320px;" alt="" | |
+ | src="https://static.igem.org/mediawiki/igem.org/0/03/Image3_IIT.jpg"></td> | ||
+ | |||
+ | <td align="center" valign="top"><img | ||
+ | style="width: 480px; height: 320px;" alt="" | ||
+ | src="https://static.igem.org/mediawiki/2013/6/6b/Iitd1.JPG"></td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td align="center" valign="top" hspace="20px"><img | ||
+ | style="width: 480px; height: 320px;" alt="" | ||
+ | src="https://static.igem.org/mediawiki/2013/9/91/Iitd2.JPG"></td> | ||
</tr> | </tr> | ||
</tbody> | </tbody> | ||
Line 155: | Line 272: | ||
<br> | <br> | ||
<br> | <br> | ||
+ | </div> | ||
+ | </td> | ||
+ | <td style="width: 112px;" align="center" | ||
+ | valign="top"></td> | ||
+ | <td style="width: 79px;" align="center" | ||
+ | valign="top"></td> | ||
+ | </tr> | ||
+ | </tbody> | ||
+ | </table> | ||
+ | <br> | ||
+ | <table | ||
+ | style="text-align: left; background-color: rgb(175, 175, 175); width: 100%;" | ||
+ | border="0" cellpadding="0" cellspacing="0"> | ||
+ | <tbody> | ||
+ | <tr> | ||
+ | <td | ||
+ | style="vertical-align: top; text-align: center; width: 302px; background-color: rgb(175, 175, 175);"><br> | ||
+ | Feel Free to contact us at igemiitdelhi2013 at gmail dot com if you | ||
+ | have queries; requests; suggestions et cetera.<br> | ||
<br> | <br> | ||
+ | Thanks to iGEM and IIT Delhi,<br> | ||
+ | we had an awesome summer!</td> | ||
+ | <td | ||
+ | style="vertical-align: top; text-align: center; width: 351px; background-color: rgb(175, 175, 175);">Our | ||
+ | Project was supported by and done by the students<br> | ||
<br> | <br> | ||
+ | of IIT Delhi, India.<br> | ||
<br> | <br> | ||
+ | <a href="http://www.iitd.ac.in/"><img | ||
+ | style="border: 0px solid ; width: 200px; height: 200px;" alt="" | ||
+ | src="http://www.iitb.ac.in/%7Epge/2k12/jam/images/iitd_logo.png"></a></td> | ||
+ | <td | ||
+ | style="vertical-align: top; text-align: center; width: 339px; background-color: rgb(175, 175, 175);">This | ||
+ | project was done as a part of iGEM:<br> | ||
+ | <a href="https://igem.org/Main_Page">iGEM Main Website</a><br> | ||
<br> | <br> | ||
<br> | <br> | ||
+ | <a href="https://igem.org/Main_Page"><img | ||
+ | style="border: 0px solid ; width: 200px; height: 200px;" alt="" | ||
+ | src="https://static.igem.org/mediawiki/igem.org/d/de/IGEM_basic_Logo_stylized.png"></a><br> | ||
<br> | <br> | ||
- | |||
- | |||
- | |||
- | |||
</td> | </td> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</tr> | </tr> | ||
</tbody> | </tbody> |
Latest revision as of 03:29, 28 September 2013
Outreach We were given a great opportunity by Dr. PVM Rao to give a presentation on iGEM to the incoming batch of students at IIT Delhi for the course "Introduction to Engineering" to about 800 students.. We specifically focused on synthetic biology as for many in our audience this was a term which they’d never heard of before. The presentation was also given with the aim to share with the audience the experiences which we gained while working on a scientific project. We received an enthusiastic response from our audience along with messages from inquisitive freshers who were interested in learning more about synthetic biology. We hope our presentation ignited an initial spark towards research in synthetic biology in some members of our audience. Below are some pictures from our presentation. |
Feel Free to contact us at igemiitdelhi2013 at gmail dot com if you have queries; requests; suggestions et cetera. Thanks to iGEM and IIT Delhi, we had an awesome summer! |
Our
Project was supported by and done by the students of IIT Delhi, India. |
This
project was done as a part of iGEM: iGEM Main Website |