Team:Penn/Modeling
From 2013.igem.org
Line 14: | Line 14: | ||
$('body').scrollspy({ target: '#nav-circles' }); | $('body').scrollspy({ target: '#nav-circles' }); | ||
+ | |||
+ | $("#one").click(function() { | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $("#top").offset().top, | ||
+ | }, '2400'); | ||
+ | }); | ||
+ | |||
+ | $("#two").click(function() { | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $("#first-section").offset().top, | ||
+ | }, '2400'); | ||
+ | }); | ||
+ | |||
+ | $("#three, #team").click(function() { | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $("#second-section").offset().top, | ||
+ | }, '2400'); | ||
+ | }); | ||
+ | $("#four").click(function() { | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $("#third-section").offset().top, | ||
+ | }, '2400'); | ||
+ | }); | ||
}); | }); | ||
Line 21: | Line 44: | ||
/*hero unit positioning*/ | /*hero unit positioning*/ | ||
#text { | #text { | ||
- | + | align: center; | |
+ | float: center; | ||
padding: 50px; | padding: 50px; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | margin-top: 40px; | ||
+ | width: 400px; | ||
+ | overflow: hidden; | ||
} | } | ||
Line 33: | Line 62: | ||
z-index: 9999; | z-index: 9999; | ||
} | } | ||
+ | |||
- | #nav-circles li { | + | #nav-circles li, #icon { |
+ | overflow: hidden; | ||
display: block; | display: block; | ||
height: 30px; | height: 30px; | ||
Line 40: | Line 71: | ||
border-radius: 100%; | border-radius: 100%; | ||
margin:10px; | margin:10px; | ||
- | + | padding:3px; | |
top: 100px; | top: 100px; | ||
right: 100px; | right: 100px; | ||
Line 61: | Line 92: | ||
height: 150px; | height: 150px; | ||
width: 150px; | width: 150px; | ||
+ | position: static; | ||
+ | -moz-border-radius: 100%; | ||
+ | -webkit-border-radius: 100%; | ||
+ | -khtml-border-radius: 100%; | ||
+ | border-radius: 100%; | ||
+ | overflow: hidden; | ||
+ | background-size: 300px; | ||
+ | background-position: -70px -20px; | ||
+ | |||
+ | display: inline-block; | ||
+ | |||
+ | } | ||
+ | |||
+ | .span_smaller { | ||
+ | font-family: arial, sans-serif; | ||
+ | text-align: center; | ||
+ | height: 100px; | ||
+ | width: 100px; | ||
position: relative; | position: relative; | ||
-moz-border-radius: 100%; | -moz-border-radius: 100%; | ||
Line 70: | Line 119: | ||
background-position: -70px -20px; | background-position: -70px -20px; | ||
opacity: .7; | opacity: .7; | ||
- | margin: | + | margin: 25px; |
+ | margin-top: 0px; | ||
display: inline-block; | display: inline-block; | ||
Line 77: | Line 127: | ||
.span4 img { | .span4 img { | ||
height: 150px; | height: 150px; | ||
+ | |||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .span4:hover { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .span_smaller:hover { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | .span_smaller img { | ||
+ | height: 100px; | ||
position: relative; | position: relative; | ||
Line 91: | Line 154: | ||
background-size: 100%; | background-size: 100%; | ||
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/uN-wv6h07i/Unified%20Artwork%20Styles%20Here/science%21%21%21/20130513135201-0.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"); | background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/uN-wv6h07i/Unified%20Artwork%20Styles%20Here/science%21%21%21/20130513135201-0.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"); | ||
- | |||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
+ | background-position: center; | ||
+ | position: relative; | ||
margin-left: 0px; | margin-left: 0px; | ||
+ | margin-top: 20px; | ||
+ | margin-bottom: 20px; | ||
} | } | ||
- | . | + | a { |
- | + | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; | |
+ | filter: alpha(opacity=80); | ||
+ | -moz-opacity: 0.8; | ||
+ | -khtml-opacity: 0.8; | ||
+ | opacity: 0.8; | ||
} | } | ||
- | + | a:hover { | |
- | + | opacity: 1; | |
- | + | text-decoration: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | |||
+ | .figure { | ||
+ | float: left; | ||
+ | margin: 7px; | ||
+ | display: inline; | ||
+ | max-height: 400px; | ||
+ | max-width: 400px; | ||
- | + | } | |
+ | .clear { clear:both;} /*add a clear div if formatting gets weird because of float*/ | ||
+ | |||
+ | .caption { | ||
+ | font-size: 10px; | ||
+ | font-family: arial; | ||
+ | margin-bottom: 15px; | ||
+ | line-height: 10px; | ||
+ | text-align: center; | ||
+ | |||
+ | } | ||
+ | |||
+ | .caption2 { | ||
+ | font-size: 10px; | ||
+ | font-family: arial; | ||
+ | position: relative; | ||
+ | left: -150px; | ||
+ | top:-10px; | ||
+ | |||
+ | line-height: 10px; | ||
+ | text-align: left; | ||
+ | float: left; | ||
+ | } | ||
</style> | </style> | ||
</head> | </head> | ||
- | <body | + | <body> |
- | + | <div class="navbar-wrapper"> | |
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. --> | <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. --> | ||
<div class="container"> | <div class="container"> | ||
<div class="navbar navbar-inverse navbar-fixed-top"> | <div class="navbar navbar-inverse navbar-fixed-top"> | ||
- | <div class="navbar-inner | + | <div class="navbar-inner"> |
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. --> | <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. --> | ||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> | <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> | ||
Line 140: | Line 221: | ||
<span class="icon-bar"></span> | <span class="icon-bar"></span> | ||
</button> | </button> | ||
- | + | <!-- <a class="brand" style="color: white; padding-left: 11%;" href="https://2013.igem.org/Team:Penn">Penn iGEM</a>--> | |
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. --> | <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. --> | ||
<div class="nav-collapse collapse"> | <div class="nav-collapse collapse"> | ||
<ul class="nav"> | <ul class="nav"> | ||
- | < | + | <li><a href="https://2013.igem.org/Team:Penn">Penn iGEM</a></li> |
<li class="dropdown"> | <li class="dropdown"> | ||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a> | <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a> | ||
Line 152: | Line 233: | ||
<li><a href="https://2013.igem.org/Team:Penn/Sponsors">Sponsors</a></li> | <li><a href="https://2013.igem.org/Team:Penn/Sponsors">Sponsors</a></li> | ||
<li><a href="https://igem.org/Team.cgi?id=1128">Official Team Profile</a></li> | <li><a href="https://igem.org/Team.cgi?id=1128">Official Team Profile</a></li> | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</ul> | </ul> | ||
</li> | </li> | ||
Line 165: | Line 243: | ||
<li><a href="https://2013.igem.org/Team:Penn/Project">Project</a></li> | <li><a href="https://2013.igem.org/Team:Penn/Project">Project</a></li> | ||
- | <li><a href="https://2013.igem.org/Team:Penn/Parts">Parts</a></li> | + | <li class="active"><a href="https://2013.igem.org/Team:Penn/Parts">Parts</a></li> |
<li><a href="https://2013.igem.org/Team:Penn/Modeling">Modeling</a></li> | <li><a href="https://2013.igem.org/Team:Penn/Modeling">Modeling</a></li> | ||
<li><a href="https://2013.igem.org/Team:Penn/Safety">Safety</a></li> | <li><a href="https://2013.igem.org/Team:Penn/Safety">Safety</a></li> | ||
Line 179: | Line 257: | ||
+ | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<!--First section--> | <!--First section--> | ||
<div class="section" id="first-section"> | <div class="section" id="first-section"> | ||
- | <div class="row"> | + | <div align="center" class="row" style="position: relative; margin-left: auto; margin-right: auto; display: block; width: 600px; max-height: 200px; margin-top: 140px; margin-bottom: 40px; overflow: hidden; position: static; white-space: nowrap;"> |
- | + | <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/jtmF8YkJ_P/device%20photo.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); margin: 0px 25px 0px 25px;"> | |
- | + | </div><!-- /.span4 --> | |
- | <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/WTlON78GgW/IMG_0264.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); | + | |
+ | <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/WTlON78GgW/IMG_0264.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); margin: auto; align: center; margin: 0px 25px 0px 25px;"> | ||
<!--<img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/WTlON78GgW/IMG_0264.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>--> | <!--<img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/WTlON78GgW/IMG_0264.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>--> | ||
</div><!-- /.span4 --> | </div><!-- /.span4 --> | ||
- | <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/Y5d0PLu26o/photo-7.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); | + | <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/Y5d0PLu26o/photo-7.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); margin: auto; margin: 0px 25px 0px 25px;"> |
<!--<img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/APrj2Se2i-/Lynch%20Labs%20PGFI/BE_LynchLabGroup_DSC2811.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>--> | <!--<img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/APrj2Se2i-/Lynch%20Labs%20PGFI/BE_LynchLabGroup_DSC2811.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>--> | ||
- | </div><!-- /.span4 --></div> | + | </div><!-- /.span4 --></div> |
+ | |||
+ | |||
+ | <!--first hero unit--> | ||
<div class="hero-unit" id="text"> | <div class="hero-unit" id="text"> | ||
- | + | <h4>Modeling</h4> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor | ||
+ | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | ||
+ | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor | ||
+ | in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<img src="https://googledrive.com/host/0B4ZBZOYYKBzEdTRvdHVIRDI0OWM/" | ||
+ | class="figure"/><p class="caption">This is a caption</p><p>Excepteur | ||
+ | sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor | ||
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | ||
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor | ||
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur | in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur | ||
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> | sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> | ||
- | <p> | + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor |
+ | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | ||
+ | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor | ||
+ | in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur | ||
+ | sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> | ||
+ | </div><div class="hero-unit" id="text"> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor | ||
+ | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | ||
+ | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor | ||
+ | in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur | ||
+ | sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> | ||
+ | </div><div class="hero-unit" id="text"> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor | ||
+ | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | ||
+ | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor | ||
+ | in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | ||
+ | <img src="https://googledrive.com/host/0B4ZBZOYYKBzER09TYUNULWdHdU0" class="figure"/><p class="caption">This is a caption</p><p>Excepteur | ||
+ | sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p< | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor | ||
+ | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | ||
+ | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor | ||
+ | in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur | ||
+ | sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> | ||
+ | <img src="https://googledrive.com/host/0B4ZBZOYYKBzESmtGdU1XelBPVm8/" class="figure"/><p class="caption2">This is a caption</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor | ||
+ | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | ||
+ | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor | ||
+ | in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur | ||
+ | sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> | ||
+ | |||
+ | |||
</div> | </div> | ||
</div> | </div> | ||
- | + | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> <!--endsection--> | ||
</body> | </body> |
Revision as of 17:47, 4 August 2013
Modeling
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum