User:Sifuentes anita

From 2014.igem.org

(Difference between revisions)
 
(86 intermediate revisions not shown)
Line 1: Line 1:
-
<!-- Declare that you are going to use html code instead of wiki code -->
+
{{Sifuentes01}}  <!-- This calls the styling and the menu -->
-
<html>
+
<html> <!-- Declare that you are going to use html code instead of wiki code -->
-
<!-- The styling for the website is placed here -->
+
<!-- Content for the page starts here -->
-
<head>
+
<body>
-
+
-
<!-- start of css -->
+
-
<style type="text/css">
+
-
+
-
/* Clear the default wiki settings */
+
-
+
-
/* Remove footer, catlinks and logos */
+
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading {
+
-
display: none;
+
-
}
+
-
+
-
/* set up a white background */
+
-
body {
+
-
width: 100%;
+
-
height: 100%;
+
-
background-color: #fff;
+
-
}
+
-
/*-- Make page full width and remove borders */
+
<div id ="contentWrap">
-
#globalWrapper, #content {
+
<div id="rightColumn"> <!-- this where the content and information go -->
-
width: 100%;
+
-
height: 100%;
+
-
border: 0px;
+
-
background-color: transparent;
+
-
margin: 0px;
+
-
padding: 0px;
+
-
}
+
-
 
-
/*Clear wiki default settings for the top part and create mock "black navigation bar" */
 
-
#top-section {
 
-
background-color: #383838;
 
-
border: 0 none;
 
-
height: 14px;
 
-
z-index: 100;
 
-
top: 0;
 
-
position: fixed;
 
-
width: 975px;
 
-
left: 50%;
 
-
margin-left: -487px;
 
-
}
 
-
/* Create layout divs */
+
<div class="fullWidthRight">
-
/* General content wrap */
+
<div class="smallBlockRight">
-
#contentWrap { 
+
<h4> How to start an iGEM Team</h4>
-
width: 975px;
+
<p>All the things you need to know before starting your iGEM experience.</p>
-
margin-left: auto;
+
</div>
-
margin-right: auto;
+
-
padding-top: 25px;
+
-
}
+
-
#leftColumn {
+
<div class="smallBlockRight">
-
background-color: #f9f9f9;
+
<h4> FAQs</h4>
-
width: 215px;
+
<p>Answers to our most frequent questions.</p>
-
height: 700px;
+
</div>
-
float: left;
+
-
padding: 5px 5px 5px 5px;
+
-
}
+
-
#rightColumn {
+
<div class="smallBlockRight">
-
background-color: #fff;
+
<h4>Giant Jamboree </h4>
-
width: 740px;
+
<p>Mark your calendars for September 24 to September 28, 2015.</p>
-
height: 100%;
+
</div>
-
padding: 5px 5px 5px 5px;
+
-
float: left;
+
-
}
+
-
#featureBoxLeft {
+
</div>
-
background-color: #ffffff;
+
-
padding: 5px 10px 10px 10px;
+
-
border: 1px solid #cccccc;
+
-
border-radius: 5px;
+
-
}
+
-
.fullWidthRight {
+
<div class="clear"></div>
-
background-color: #ffffff;
+
<div class="fullWidthRight">
-
padding: 5px 10px 10px 10px;
+
-
border-radius: 5px;
+
-
margin-bottom: 5px;
+
-
}
+
-
.smallBlockRight{
+
<div class="smallBlockRight">
-
margin-bottom: 5px;
+
<div class="button"> <a href=""> READ MORE </a> </div>
-
padding: 5px 20px 10px 20px;
+
</div>
-
width : 205px;
+
-
float: left;
+
-
}
+
-
.newsItem {
+
<div class="smallBlockRight">
-
background-color: #f9f9f9;
+
<div class="button"> <a href=""> READ MORE </a> </div>
-
padding: 5px 20px 5px 20px;
+
</div>
-
border: 1px solid #cccccc;
+
-
margin-bottom: 5px;
+
<div class="smallBlockRight">
-
border-radius: 5px;
+
<div class="button"> <a href="igem.org"> READ MORE </a> </div>
-
}
+
</div>
-
.clear {
+
</div>
-
    clear: both;
+
-
}
+
-
    .button {
+
<div class="clear"></div>
-
    width: 120px;
+
<div class="fullWidthRight">
-
    border: 1px solid #cccccc;
+
<h3> iGEM News </h3>
-
    background-color: fff;
+
<div class="newsItem">
-
    height: 30px;
+
<div class="newsDate"> 17/March</div>
-
    text-align: center;
+
<h5> New Tracks for 2015 </h5>
-
        border-radius: 5px;
+
<p>The new tracks for have been announced. More information: <a href=""> Tracks 2015 </a> </p>
-
        padding-top: 10px;
+
</div>
-
        margin: auto;
+
-
        color: black;
+
-
    }       
+
-
    div.button:hover {
+
<div class="newsItem">
-
    background-color: #c1dfa6;
+
<div class="newsDate"> 18/March</div>
-
        color: black;
+
<h5>High School teams at the Giant Jamboree</h5>
-
    }
+
<p>High School teams will participate in their own Jamboree inside the event.  
 +
<br>More information: <a href=""> High School 2015 </a></p>
 +
</div>
-
     
+
<div class="newsItem">  
-
 
+
<div class="newsDate"> 05/March</div>
-
/* general styling */
+
<h5> Early registration ends </h5>
-
 
+
<p>Eearly registration is now closed. Read the <a href="">registration</a> page to see what is new.</p>
-
/* Titles are switched to Arial Black with no line decoration */
+
</div>
-
h1, h2, h3, h4, h5 {
+
-
font-family: "Arial Black", Gadget, sans-serif; border-bottom:none;
+
-
}
+
-
 
+
-
/* Establish font size and family for all text */
+
-
p {
+
-
font-family: "Arial", Helvetica, sans-serif;
+
-
font-size: 14px;
+
-
}
+
-
 
+
-
/*styling for the links on the content side*/
+
-
#rightColumn a {
+
-
color:#3aa76c;
+
-
font-weight: bold;
+
-
text-decoration: none;
+
-
}
+
-
 
+
-
#rightColumn a:hover {
+
-
text-decoration: underline;
+
-
}
+
-
 
+
-
/* menu styling */
+
-
#menuWrap {
+
-
background: #f9f9f9;
+
-
padding: 5px 10px 10px 10px;
+
-
}
+
-
 
+
-
/*styling for the menu header */
+
-
.accordion-header {
+
-
background: #d3d3d3;
+
-
margin: 5px 0 0 0;
+
-
padding: 5px 20px;
+
-
border: 1px solid #cccccc;
+
-
cursor: pointer;
+
-
color: #383838;
+
-
border-radius: 5px;
+
-
}
+
-
 
+
-
/* switches background color to green */
+
-
.active-header {
+
-
background: #95cea0;
+
-
}
+
-
+
-
/* switches background color to light green */
+
-
.active-header:hover {
+
-
background: #c1dfa6;
+
-
}
+
-
 
+
-
/* switches background color to default gray */
+
-
.inactive-header {
+
-
background: #d3d3d3;
+
-
}
+
-
 
+
-
/* switches background color to light green */
+
-
.inactive-header:hover {
+
-
background: #c1dfa6;
+
-
}
+
-
 
+
-
/* styling for the submenus */
+
-
.accordion-content {
+
-
display: none;
+
-
padding: 0px 20px 5px 20px;
+
-
background: #ffffff;
+
-
border: 1px solid #cccccc;
+
-
border-top: 0;
+
-
border-radius: 5px;
+
-
}
+
-
 
+
-
+
-
/*styling the links inside the submenus */
+
-
ul.submenuoptions {
+
-
                                list-style: none;
+
-
}
+
-
 
+
-
/* change the color and styling of the links */
+
-
ul.submenuoptions li a{
+
-
color: #383838;
+
-
font-size: 14px;
+
-
font-weight: bold;
+
-
padding-left: 15px;
+
-
border-radius: 5px;
+
-
}
+
-
 
+
-
/* change background color on hover */
+
-
ul.submenuoptions li:hover a, ul.submenuoptions li:hover {
+
-
background-color: #c1dfa6;
+
-
text-decoration: none;
+
-
border-radius: 5px;
+
-
}
+
-
 
+
-
</style>
+
-
<!-- end of css -->
+
-
 
+
-
</head>
+
-
 
+
-
<!-- Content for the page starts here -->
+
-
<body>
+
-
 
+
-
<div id ="contentWrap">  
+
-
+
-
<div id="leftColumn"> <!-- this is where the menu and feature box go -->
+
-
<div id="featureBoxLeft">  
+
-
<h3> Welcome to iGEM 2015 </h3>
+
-
<img src="https://static.igem.org/mediawiki/2014/3/3d/Seeyousoon2015.jpg" width="190px">
+
-
<p> More information will be posted soon </p>
+
-
</div>
+
<div class="clear"></div>
<div class="clear"></div>
-
<div id="menuWrap">
+
<br>
-
<h3 class="accordion-header">Section 1</h3>  
+
<div class="button">
-
<div class="accordion-content">  
+
<a href=""> MORE NEWS </a>
-
<ul class="submenuoptions">
+
</div>
-
<li><a href="www.html">LINK</a></li>
+
</div>
-
<li><a href="www.html">LINK</a></li>
+
-
<li><a href="www.html">LINK</a></li>
+
-
</ul>
+
-
</div>  
+
-
<h3 class="accordion-header">Section 2</h3>
+
<div class="clear"></div>
-
<div class="accordion-content">  
+
-
<ul class="submenuoptions">
+
-
<li><a href="www.html">LINK</a></li>
+
-
<li><a href="www.html">LINK</a></li>
+
-
<li><a href="www.html">LINK</a></li>
+
-
</ul>
+
-
</div>  
+
-
<h3 class="accordion-header">Section 3</h3>
+
<div class="clear"></div>
-
<div class="accordion-content">  
+
-
<ul class="submenuoptions">
+
-
<li><a href="www.html">LINK</a></li>
+
-
<li><a href="www.html">LINK</a></li>
+
-
<li><a href="www.html">LINK</a></li>
+
-
</ul>
+
-
</div>  
+
-
<h3 class="accordion-header">Section 4</h3>
+
<div class="fullWidthRight">  
-
<div class="accordion-content">
+
<h3>Community Highlights</h3>
-
<ul class="submenuoptions">
+
-
<li><a href="www.html">LINK</a></li>
+
-
<li><a href="www.html">LINK</a></li>
+
-
<li><a href="www.html">LINK</a></li>
+
-
</ul>
+
-
</div>  
+
-
</div> <!-- this closes the menu div -->
+
-
</div> <!-- this closes the left side of the page -->
+
-
     
+
-
 
+
<div class="smallBlockRight">  
-
<div id="rightColumn"> <!-- this where the content and information go -->
+
<a href=""><img src="https://static.igem.org/mediawiki/2014/c/cd/2014INSA-Lyon_2_vid_thumb_s.png"></a>
-
 
+
<h4> Team INSA-Lyon</h4>
-
<div class="fullWidthRight">  
+
<p><a href=""> Team INSA-Lyon</a>  has made a <a href=""> music video </a>about the frustrations of cloning!</p>
-
<img src="https://static.igem.org/mediawiki/2014/a/ae/Sumbawagen_charimansprize.jpg" width="720px">
+
</div>
</div>
-
 
-
<div class="clear"></div>
 
-
 
<div class="smallBlockRight">  
<div class="smallBlockRight">  
-
<img src="https://static.igem.org/mediawiki/2014/3/3d/Seeyousoon2015.jpg" width="200px">
+
<a href=""><img src="https://static.igem.org/mediawiki/2014/4/4a/2014KIT-Kyoto_vid_thumb_s.png"></a>
-
<h4> Topic 1 </h4>
+
<h4> KIT Kyoto </h4>
-
content goes here content goes here here ipsum lorem ipsum lorem ipsum
+
<p><a href="">Team KIT-Kyoto</a> made an <a href=""> introductory video </a> 'How to make basic BioArt.' </p>
-
<br><br>
+
-
<div class="button"> <a href=""> READ MORE </a> </div>
+
</div>
</div>
-
 
+
<div class="smallBlockRight">  
-
<div class="smallBlockRight">
+
<a href=""><img src="https://static.igem.org/mediawiki/2014/e/ed/2014METU_Turkey_vid_thumb2_s.png"></a>
-
<img src="https://static.igem.org/mediawiki/2014/3/3d/Seeyousoon2015.jpg" width="200px">
+
<h4>METU Turkey</h4>
-
<h4> Topic 2 </h4>  
+
<p><a href=" ">Team METU Turkey</A> made a game related to their project <a href=""> PET degredation </a> </p>
-
content goes here content goes here here ipsum lorem ipsum lorem ipsum
+
-
<br><br>
+
-
<div class="button"> <a href="igem.org"> READ MORE</a> </div>
+
</div>
</div>
 +
</div>
-
<div class="smallBlockRight">
+
<div class="clear"></div>
-
<img src="https://static.igem.org/mediawiki/2014/3/3d/Seeyousoon2015.jpg" width="200px">
+
-
<h4> Topic 3 </h4>
+
-
content goes here content goes here here ipsum lorem ipsum lorem ipsum
+
-
<br><br>
+
-
<div class="button"> <a href="igem.org"> READ MORE </a> </div>
+
-
</div>
+
-
<div class="clear"></div>
 
-
<div class="fullWidthRight">
 
-
<h3> iGEM News </h3>
 
-
<div class="newsItem"> <a href=""> first item </a></div>
 
-
<div class="newsItem"> second item</div>
 
-
<div class="newsItem"> third item</div>
 
-
<div class="clear"></div>
 
-
<div class="button"> <a href=""> READ MORE </a> </div>
 
-
</div>
 
-
<div class="clear"></div>
+
<div class="fullWidthRight">  
 +
<h3>iGEM Teams</h3>
 +
<iframe width="740" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/ms?msa=0&amp;msid=211889735555343806668.0004f9377a323c3820df3&amp;hl=en&amp;ie=UTF8&amp;t=p&amp;ll=16.636192,14.0625&amp;spn=112.407019,280.898438&amp;z=2&amp;output=embed"></iframe>
 +
 
 +
 
 +
</div>
</div>  <!--end of the right side of the page -->
</div>  <!--end of the right side of the page -->
  </div> <!-- end of content -->
  </div> <!-- end of content -->
 +
</body>
</body>
<!-- End of page -->
<!-- End of page -->
-
 
-
 
-
<!-- jquery for the menu -->
 
-
 
-
<script ="text/javascript">
 
-
$(document).ready(function() {
 
-
//Add Inactive Class To All Accordion Headers
 
-
$('.accordion-header').toggleClass('inactive-header');
 
-
 
-
//Set The Accordion Content Width
 
-
var contentwidth = $('.accordion-header').width();
 
-
$('.accordion-content').css({'width' : contentwidth });
 
-
 
-
//Open The First Accordion Section When Page Loads
 
-
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
 
-
$('.accordion-content').first().slideDown().toggleClass('open-content');
 
-
 
-
// The Accordion Effect
 
-
$('.accordion-header').click(function () {
 
-
if($(this).is('.inactive-header')) {
 
-
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
 
-
$(this).toggleClass('active-header').toggleClass('inactive-header');
 
-
$(this).next().slideToggle().toggleClass('open-content');
 
-
}
 
-
 
-
else {
 
-
$(this).toggleClass('active-header').toggleClass('inactive-header');
 
-
$(this).next().slideToggle().toggleClass('open-content');
 
-
}
 
-
});
 
-
 
-
return false;
 
-
});
 
-
 
-
$(".button").click(function() {
 
-
  window.location = $(this).find("a").attr("href");
 
-
  return false;
 
-
});
 
-
 
-
</script>
 
<!-- end of html -->
<!-- end of html -->
</html>
</html>

Latest revision as of 15:21, 9 January 2015

How to start an iGEM Team

All the things you need to know before starting your iGEM experience.

FAQs

Answers to our most frequent questions.

Giant Jamboree

Mark your calendars for September 24 to September 28, 2015.

READ MORE
READ MORE
READ MORE

iGEM News

17/March
New Tracks for 2015

The new tracks for have been announced. More information: Tracks 2015

18/March
High School teams at the Giant Jamboree

High School teams will participate in their own Jamboree inside the event.
More information: High School 2015

05/March
Early registration ends

Eearly registration is now closed. Read the registration page to see what is new.


MORE NEWS

Community Highlights

Team INSA-Lyon

Team INSA-Lyon has made a music video about the frustrations of cloning!

KIT Kyoto

Team KIT-Kyoto made an introductory video 'How to make basic BioArt.'

METU Turkey

Team METU Turkey made a game related to their project PET degredation

iGEM Teams

Retrieved from "http://2014.igem.org/User:Sifuentes_anita"