Difference between revisions of "Team:Penn/Team"

(Prototype team page)
 
 
(37 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{Penn}}
+
{{Team:Penn/CSS}}
 
<html>
 
<html>
 +
<head>
 +
<!--<link rel="stylesheet" type="text/css" media="screen, projection" href="https://98c43ce680a0761e7c3ad3c1d7ae34f6de6db886.googledrive.com/host/0B9QyOqpKYA2gdGV2aGFRMWh4aXM/style.css" />-->
 +
<title>University of Pennsylvania iGEM</title>
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 +
</div>
 +
</head>
 +
<style type="text/css">
 +
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
 +
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
  
−
<h2>Team</h2>
+
/* Override UGG site */
 +
#main {width: 100%; padding:0;}
 +
.content-asset p {margin:0 auto;}
 +
.breadcrumb {display:none;}
  
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
/* Helpers */
 +
/**************************/
 +
.margin-top-10 {padding-top:10px;}
 +
.margin-bot-10 {padding-bottom:10px;}
  
 +
/* Typography */
 +
/**************************/
 +
#parallax-world-of-ugg h1 {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; color:black; padding:10px; margin:0;}
 +
#parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; padding:50px; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;}
 +
#parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
 +
#parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:20px; line-height:24px;}
 +
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}
  
 +
.sc {color: #3b8595;}
 +
.ny {color: #3d3c3a;}
 +
.atw {color: #c48660;}
  
 +
/* Section - Title */
 +
/**************************/
 +
#parallax-world-of-ugg .title {background: white; padding: 20px; margin:0 auto; text-align:center;}
 +
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}
  
 +
/* Section - Block */
 +
/**************************/
 +
#parallax-world-of-ugg .block {background: white; padding: 60px; width:1020px; margin:0 auto; text-align:justify;}
 +
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
 +
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}
  
−
<h4>Inspiration</h4>
+
/* Section - Parallax */
−
<p>You can look at what other teams did to get some inspiration! <br />
+
/**************************/
−
Here are a few examples:</p>
+
#parallax-world-of-ugg .parallax-one {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://static.igem.org/mediawiki/2015/0/06/Bulb-in-the-sunset-light-hd-background.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;}
−
<ul>
+
#parallax-world-of-ugg .parallax-two {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://static.igem.org/mediawiki/2015/0/07/Light.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">METU Turkey </a></li>
+
#parallax-world-of-ugg .parallax-three {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://static.igem.org/mediawiki/2015/d/df/Communciation.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a></li>
+
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">Stony Brook</a></li>
+
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">OUC-China</a></li>
+
−
</ul>
+
  
−
<h5>What should this page contain?</h5>
+
/* Extras */
−
<ul>
+
/**************************/
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
#parallax-world-of-ugg .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
−
</ul>
+
  
 +
/* Media Queries */
 +
/**************************/
 +
@media screen and (max-width: 959px) and (min-width: 768px) {
 +
  #parallax-world-of-ugg .block {padding: 40px; width:620px;}
 +
}
 +
@media screen and (max-width: 767px) {
 +
  #parallax-world-of-ugg .block {padding: 30px; width:420px;}
 +
  #parallax-world-of-ugg h2 {font-size:30px;}
 +
  #parallax-world-of-ugg .block {padding: 30px;}
 +
  #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three {padding-top:100px; padding-bottom:100px;}
 +
}
 +
@media screen and (max-width: 479px) {
 +
  #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
 +
}
 +
</style>
  
 +
<div id="parallax-world-of-ugg">
 +
 +
  <div class="title">
 +
  <h1>OUR TEAM</h1>
 +
</div>
 +
 +
<div class="block">
 +
      <p align = "center"><br> The Penn iGEM team consists of five undergraduate students in bioengineering and chemical engineering. The team would like to thank all of the people who helped us complete our project! A special thanks to our iGEM Mentors Pim, Mike and Spencer and our Team Advisor Dr. Chow.</p>
 +
</div>
 +
<table align = "center">
 +
<tr>
 +
<td><img id = "daicon" src="https://static.igem.org/mediawiki/2015/e/e0/Everyone.png"></a></td>
 +
</table>
 +
 +
  <!-- images placed inside block elements to deal with a Firefox rendering bug affecting  scaled flexbox images -->
 
</div>
 
</div>
 
</html>
 
</html>

Latest revision as of 02:59, 19 September 2015

University of Pennsylvania iGEM

OUR TEAM


The Penn iGEM team consists of five undergraduate students in bioengineering and chemical engineering. The team would like to thank all of the people who helped us complete our project! A special thanks to our iGEM Mentors Pim, Mike and Spencer and our Team Advisor Dr. Chow.