|
|
Line 203: |
Line 203: |
| | | |
| #team-wrap{ | | #team-wrap{ |
− | width: 1020px; | + | width: 1000px; |
| height: auto; | | height: auto; |
| overflow: hidden; | | overflow: hidden; |
Line 209: |
Line 209: |
| background-color: #f2f2f2; | | background-color: #f2f2f2; |
| text-align: center; | | text-align: center; |
− | padding: 40px 40px 40px 40px; | + | padding: 50px; |
| } | | } |
| | | |
Line 334: |
Line 334: |
| <div id="content"> | | <div id="content"> |
| <div id="team-wrap"> | | <div id="team-wrap"> |
− | <h2>
| |
− | OUR TEAM STRIVES TO CREATE THE BEST POSSIBLE SOLUTIONS WITH CURRENT RESOURCES.
| |
− | </h2>
| |
− | <a>MEET THE TEAM</a>
| |
− | <!--<div id="team">
| |
− | <img src="http://whysquare.co.nz/wp-content/uploads/2013/07/profile_square3-270x270.jpg" width="250" />
| |
− | <span class="name">ERIC CHEN</span>
| |
− | </div>-->
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− | </body>
| |
− | </html>
| |
− | <html>
| |
− | <head>
| |
− | <meta name="viewport" content="width=device-width, initial-scale=1" />
| |
− | <meta charset="utf-8" />
| |
− | <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
| |
− | <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
| |
− | <link href='https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700' rel='stylesheet' type='text/css'>
| |
− | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
| |
− | <script>
| |
− | function setHeight() {
| |
− | var winheight = ($(window).height() - 180)/2;
| |
− | $('#slider').css("margin-top", winheight);
| |
− | $('#slider').css("margin-bottom", winheight - 50)
| |
− | }
| |
− | </script>
| |
− | <script type="text/javascript">
| |
− | $(window).scroll(function(){
| |
− | var winheight = $(window).height() - 67;
| |
− | var mn = $("#nav-wrapper");
| |
− | var mn2 = $("#nav");
| |
− | var nextdiv = $("#content-wrapper");
| |
− | if($(window).scrollTop() > winheight){
| |
− | mn.addClass("fixed");
| |
− | mn2.addClass("marginRight")
| |
− | nextdiv.css("padding-top", "50px");
| |
− | }
| |
− | else{
| |
− | mn.removeClass("fixed");
| |
− | mn2.removeClass("marginRight")
| |
− | nextdiv.css("padding-top", "0px");
| |
− | }
| |
− | });
| |
− | </script>
| |
− | <style>
| |
− | /* WIKI SETTINGS*/
| |
− | /* Hide first heading */
| |
− | .firstHeading {
| |
− | display: none;
| |
− | }
| |
− |
| |
− | /*-- Remove borders, float content left and remove padding/margin */
| |
− | #globalWrapper, #content{
| |
− | background-color: transparent;
| |
− | border: none;
| |
− | float: center;
| |
− | margin-left: -3px;
| |
− | margin-top: -8px;
| |
− | padding: auto;
| |
− | width: 101%;
| |
− | }
| |
− |
| |
− | /*left align Black Menu Bar
| |
− | #top_menu_inside {
| |
− | margin-left: 0px;
| |
− | } */
| |
− | html{
| |
− | overflow-x: hidden;
| |
− | }
| |
− |
| |
− | body {
| |
− | background: url(https://farm8.staticflickr.com/7370/11160131685_a616627ffb_o.jpg) no-repeat center center fixed;
| |
− | -moz-background-size: cover;
| |
− | -webkit-background-size: cover;
| |
− | -o-background-size: cover;
| |
− | background-size: cover;
| |
− | }
| |
− |
| |
− | #whole-wrapper{
| |
− | height: auto;
| |
− | width: auto;
| |
− | }
| |
− |
| |
− | #nav-wrapper{
| |
− | width: 101%;
| |
− | height: 50px;
| |
− | background-color: #333333;
| |
− | z-index: 100;
| |
− | line-height: 50px;
| |
− | font-family: Verdana;
| |
− | }
| |
− |
| |
− | #nav{
| |
− | width: 1100px;
| |
− | margin: 0 auto 0 auto;
| |
− | font-family: Montserrat;
| |
− | font-size: 14px;
| |
− | font-weight: 700;
| |
− | }
| |
− |
| |
− | #nav a{
| |
− | padding-left: 20px;
| |
− | color: #f2f2f2;
| |
− | font-weight: 400;
| |
− | text-decoration: none;
| |
− | }
| |
− |
| |
− | #nav a:hover{
| |
− | color: #f15258;
| |
− | -webkit-transition: color .1s ease-in;
| |
− | text-decoration: none;
| |
− | }
| |
− |
| |
− | #content-wrapper{
| |
− | width: 101%;
| |
− | height: auto;
| |
− | overflow: hidden;
| |
− | background-color: white;
| |
− | padding-bottom: 20px;
| |
− | }
| |
− |
| |
− | #nav-right{
| |
− | width: 500px;
| |
− | float: right;
| |
− | text-align: right;
| |
− | }
| |
− |
| |
− | .fixed{
| |
− | position: fixed;
| |
− | top: 18px;
| |
− | width: 100%;
| |
− | bottom: 50px;
| |
− | }
| |
− |
| |
− | .marginRight{
| |
− | padding-left: 1%;
| |
− | }
| |
− |
| |
− | #content{
| |
− | width: auto;
| |
− | margin: 0 auto 0 auto;
| |
− | padding: 0;
| |
− | margin: 0;
| |
− | }
| |
− |
| |
− | h2{
| |
− | font-family: Poppins;
| |
− | font-size: 36px;
| |
− | font-weight: 100;
| |
− | border-bottom: none;
| |
− | line-height: 40px;
| |
− | margin-bottom: -20px;
| |
− | }
| |
− |
| |
− | h5{
| |
− | font-family: Poppins;
| |
− | font-size: 18px;
| |
− | font-weight: 100;
| |
− | border-bottom: none;
| |
− | line-height: 40px;
| |
− | margin-bottom: -20px;
| |
− | }
| |
− |
| |
− | p{
| |
− | font-family: Montserrat;
| |
− | font-size: 12px;
| |
− | color: #333;
| |
− | font-weight: 400;
| |
− | }
| |
− |
| |
− | #outer{
| |
− | height: 400px;
| |
− | width: 100%;
| |
− | background-image: url(http://i.imgur.com/XpUONRc.jpg);
| |
− | background-size: cover;
| |
− | margin: 0px 0px 40px 0px;
| |
− | }
| |
− |
| |
− | #outerRight{
| |
− | height: 400px;
| |
− | width: 100%;
| |
− | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Wide_view_over_S%C3%B8rfjorden_from_the_coast_of_Sveingard%2C_2012_June.jpg/1280px-Wide_view_over_S%C3%B8rfjorden_from_the_coast_of_Sveingard%2C_2012_June.jpg);
| |
− | background-size: cover;
| |
− | margin: 20px 0px 20px 0px;
| |
− | }
| |
− |
| |
− | #inner{
| |
− | width: 1100px;
| |
− | height: 400px;
| |
− | overflow: hidden;
| |
− | margin: 0 auto 0 auto;
| |
− | }
| |
− |
| |
− | #finalinner{
| |
− | width: 250px;
| |
− | height: 380px;
| |
− | float: left;
| |
− | background-color: white;
| |
− | padding: 18px 75px 0 35px;
| |
− | background-color: #f2f2f2;
| |
− | border-top: 2px solid #f15258;
| |
− | }
| |
− |
| |
− | #finalinnerRight{
| |
− | width: 250px;
| |
− | height: 380px;
| |
− | float: right;
| |
− | background-color: white;
| |
− | padding: 18px 35px 0 75px;
| |
− | text-align: right;
| |
− | background-color: #f2f2f2;
| |
− | border-top: 2px solid #f15258;
| |
− | }
| |
− |
| |
− | #team-wrap{
| |
− | width: 1020px;
| |
− | height: auto;
| |
− | overflow: hidden;
| |
− | margin: 0 auto 0 auto;
| |
− | background-color: #f2f2f2;
| |
− | text-align: center;
| |
− | padding: 40px 40px 40px 40px;
| |
− | }
| |
− |
| |
− | #team{
| |
− | height: 450px;
| |
− | width: 250px;
| |
− | float: left;
| |
− | margin-right: 33.3px;
| |
− | background-color: #f2f2f2;
| |
− | margin-bottom: 25px;
| |
− | }
| |
− |
| |
− | #team img{
| |
− | margin-bottom: 15px;
| |
− | }
| |
− |
| |
− | .name{
| |
− | font-family: Poppins;
| |
− | font-size: 24px;
| |
− | font-weight: 100;
| |
− | margin-left: 10px;
| |
− | }
| |
− |
| |
− | #inner a{
| |
− | color: #f15258;
| |
− | font-weight: 700;
| |
− | font-size: 12px;
| |
− | font-family: Montserrat;
| |
− | border: 2px solid #f15258;
| |
− | padding: 5px 10px 5px 10px;
| |
− | }
| |
− |
| |
− | #inner a:hover{
| |
− | color: white;
| |
− | font-weight: 700;
| |
− | font-size: 12px;
| |
− | font-family: Montserrat;
| |
− | background-color: #f15258;
| |
− | border: 2px solid #f15258;
| |
− | padding: 5px 10px 5px 10px;
| |
− | text-decoration: none;
| |
− | }
| |
− |
| |
− | #team-wrap a{
| |
− | color: #f15258;
| |
− | font-weight: 700;
| |
− | font-size: 12px;
| |
− | font-family: Montserrat;
| |
− | border: 2px solid #f15258;
| |
− | padding: 5px 10px 5px 10px;
| |
− | }
| |
− |
| |
− | #team-wrap a:hover{
| |
− | color: white;
| |
− | font-weight: 700;
| |
− | font-size: 12px;
| |
− | font-family: Montserrat;
| |
− | background-color: #f15258;
| |
− | border: 2px solid #f15258;
| |
− | padding: 5px 10px 5px 10px;
| |
− | text-decoration: none;
| |
− | }
| |
− |
| |
− | #borderBot{
| |
− | border-bottom: 2px solid #f15258;
| |
− | width: 50px;
| |
− | }
| |
− |
| |
− | #slider{
| |
− | width: 648px;
| |
− | height: 140px;
| |
− | margin: 0 auto 0 auto;
| |
− | font-family: Poppins;
| |
− | font-size: 128px;
| |
− | color: white;
| |
− | font-weight: 500;
| |
− | line-height: 140px;
| |
− | padding: 20px 30px 8px 30px;
| |
− | border: 5px solid #f15258;
| |
− | color: #f15258;
| |
− | }
| |
− | </style>
| |
− | </head>
| |
− |
| |
− | <body onload="setHeight()">
| |
− | <div id="whole-wrapper">
| |
− | <div id="slider">
| |
− | CHITINASE
| |
− | </div>
| |
− | <div id="nav-wrapper">
| |
− | <div id="nav">
| |
− | <span style="color: #f15258">TPHS / CCA iGEM</span>
| |
− | <div id="nav-right">
| |
− | <a>HOME</a>
| |
− | <a>NEWS</a>
| |
− | <a>HELLO</a>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− | <div id="content-wrapper">
| |
− | <div id="content">
| |
− | <div id="outer">
| |
− | <div id="inner">
| |
− | <div id="finalinner">
| |
− | <h2 style="margin-bottom: 0px;">PROJECT OVERVIEW</h2>
| |
− | <div id="borderBot"></div><br><br>
| |
− | <p style="margin-bottom: 15px;">Lorem Ipsum Dolor Dot. God I hate typing this over and over again. Seriously there is no good filler text here.</p>
| |
− | <a>FIND OUT MORE</a>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− | <div id="outerRight">
| |
− | <div id="inner">
| |
− | <div id="finalinnerRight">
| |
− | <h2 style="margin-bottom: 0px;">NOTEBOOK</h2>
| |
− | <div id="borderBot" style="float: right;"></div><br><br>
| |
− | <p style="margin-bottom: 15px;">Lorem Ipsum Dolor Dot. God I hate typing this over and over again. Seriously there is no good filler text here.</p>
| |
− | <a>FIND OUT MORE</a>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div id="content">
| |
− | <div id="team-wrap" style="padding-bottom: 20px;">
| |
| <h2> | | <h2> |
| OUR TEAM STRIVES TO CREATE THE BEST POSSIBLE SOLUTIONS WITH CURRENT RESOURCES. | | OUR TEAM STRIVES TO CREATE THE BEST POSSIBLE SOLUTIONS WITH CURRENT RESOURCES. |