(34 intermediate revisions by 2 users not shown) | |||
Line 36: | Line 36: | ||
/*Start Styles for Home Page*/ | /*Start Styles for Home Page*/ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | /* Font Styling */ | |
− | + | @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans|Raleway'); | |
− | + | @font-face { | |
+ | font-family: 'Futura'; | ||
+ | src: url('../futura/futura\ medium\ bt.ttf'); | ||
+ | } | ||
− | + | body { | |
− | + | font-family: 'Open Sans', sans-serif; | |
− | + | } | |
− | + | .dropbtn, .dropdown-content { | |
− | + | font-size: 16px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .tile-title { | |
− | vertical-align: top; | + | font-family: 'Futura', sans-serif; |
− | display: inline-block; | + | line-height: 1em; |
− | + | color: rgba(0, 0, 0, 1) | |
− | margin-left: | + | } |
− | margin- | + | /* End Font Styling */ |
+ | |||
+ | html, | ||
+ | body { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | overflow-x: hidden; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | background-size: 40px 40px; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | nav { | ||
+ | padding-top: 30px; | ||
+ | padding-bottom: 30px; | ||
+ | padding-right: 100px; | ||
+ | background-color: #a0e0bd; | ||
+ | height: 98px; | ||
+ | } | ||
+ | |||
+ | .nav-bar-logo { | ||
+ | vertical-align: top; | ||
+ | display: inline-block; | ||
+ | float: left; | ||
+ | margin-left: 80px; | ||
+ | margin-top: 10px; | ||
+ | width: 200px; | ||
+ | } | ||
+ | |||
+ | .nav-bar-logo img { | ||
+ | width: 200px; | ||
+ | } | ||
+ | |||
+ | .banner-container { | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | flex-wrap: wrap; | ||
+ | justify-content: center; | ||
+ | } | ||
+ | |||
+ | .dropbtn { | ||
+ | background-color: transparent; | ||
+ | text-decoration: none; | ||
+ | padding: 15px; | ||
+ | margin: 0px; | ||
+ | font-size: 15px; | ||
+ | border: none; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | @media (max-width: 1050px) { | ||
+ | .dropbtn { | ||
+ | font-size: 12px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .dropdown { | ||
+ | position: relative; | ||
+ | vertical-align: top; | ||
+ | display: inline-block; | ||
+ | float: right; | ||
+ | } | ||
+ | |||
+ | .dropdown ul { | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | |||
+ | .dropdown a { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | color: #e8b023; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .dropdown-content { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | background-color: #016C64; | ||
+ | color: #ffffff; | ||
+ | width: 200px; | ||
+ | font-size: 14px; | ||
+ | box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a:hover { | ||
+ | background-color: #a0e0bd !important; | ||
+ | } | ||
+ | |||
+ | .toolkit-dropdown-content { | ||
+ | width: 630px; | ||
+ | left: -160px; | ||
+ | } | ||
+ | |||
+ | .modeling-dropdown-content { | ||
+ | left: -40px; | ||
+ | } | ||
+ | |||
+ | .human-dropdown-content { | ||
+ | left: 12px; | ||
+ | } | ||
+ | |||
+ | .outreach-dropdown-content { | ||
+ | width: 230px; | ||
+ | left: -40px; | ||
+ | } | ||
+ | |||
+ | .team-dropdown-content { | ||
+ | width: 140px; | ||
+ | left: -35px; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a { | ||
+ | color: #ffffff; | ||
+ | padding: 12px 16px; | ||
+ | text-decoration: none !important; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .wet-lab-list-title, | ||
+ | .doc-list-title, | ||
+ | .pd-list-title { | ||
+ | padding-top: 12px; | ||
+ | padding-left: 16px; | ||
+ | padding-bottom: 14px; | ||
+ | } | ||
+ | |||
+ | .nav-second-col { | ||
+ | margin-left: 30px; | ||
+ | } | ||
+ | |||
+ | .nav-third-col { | ||
+ | margin-left: 30px; | ||
+ | } | ||
+ | |||
+ | .dropbtn:hover, | ||
+ | .active-page { | ||
+ | color: #016C64; | ||
+ | transition-duration: 0.5s; | ||
+ | } | ||
+ | |||
+ | .dropdown-content a:hover { | ||
+ | color: #016C64; | ||
+ | background-color: #ffffff; | ||
+ | } | ||
+ | |||
+ | .dropdown:hover .dropdown-content { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | footer { | ||
+ | padding: 35px; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | background-color: #a0e0bd; | ||
+ | } | ||
+ | |||
+ | .footer-wrapper { | ||
+ | margin: auto; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .icon-wrapper { | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | padding-right: 18px; | ||
+ | padding-left: 18px; | ||
+ | border-right: 0.5px solid white; | ||
+ | } | ||
+ | |||
+ | .icon-wrapper-last { | ||
+ | border-right: none; | ||
+ | } | ||
+ | |||
+ | .icon { | ||
+ | margin: 16px; | ||
+ | } | ||
+ | |||
+ | .icon img { | ||
+ | height: 24px; | ||
+ | } | ||
+ | |||
+ | .home-description-wrapper { | ||
+ | margin-top: 120px; | ||
} | } | ||
− | . | + | .home-description-logo { |
− | width: | + | width: 40%; |
+ | height: auto; | ||
+ | display: block; | ||
+ | margin: 0 auto; | ||
+ | margin-bottom: 80px; | ||
} | } | ||
− | . | + | .home-description { |
− | font- | + | color: #000; |
− | + | font-size: 20px; | |
+ | margin-bottom: 80px; | ||
+ | text-align: center; | ||
} | } | ||
+ | |||
+ | .tiles-wrapper { | ||
+ | background-color: #F9FCFB; | ||
+ | } | ||
.home-banner-wrapper { | .home-banner-wrapper { | ||
Line 105: | Line 294: | ||
height: 680px; | height: 680px; | ||
width: 1400px; | width: 1400px; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 271: | Line 308: | ||
.tile-title { | .tile-title { | ||
− | |||
font-size: 30px; | font-size: 30px; | ||
color: rgb(30, 30, 30); | color: rgb(30, 30, 30); | ||
Line 296: | Line 332: | ||
.overlay:hover { | .overlay:hover { | ||
− | background-color: | + | background-color: #F9FCFB; |
+ | opacity: .7; | ||
} | } | ||
+ | |||
+ | .wrapper-space { | ||
+ | background-color: #F9FCFB; | ||
+ | } | ||
/*End Styles for Home Page*/ | /*End Styles for Home Page*/ | ||
Line 424: | Line 465: | ||
} | } | ||
/*End Grid for Home Page*/ | /*End Grid for Home Page*/ | ||
+ | |||
+ | a.icon { | ||
+ | padding: 0 !important; | ||
+ | } | ||
</style> | </style> | ||
+ | <meta name="description" content="Developing a community-oriented Harmful Algal Bloom detection and remediation system."> | ||
<title>Team:Cornell - 2019.igem.org</title> | <title>Team:Cornell - 2019.igem.org</title> | ||
<!-- CSS --> | <!-- CSS --> | ||
Line 440: | Line 486: | ||
<div class="nav-bar-wrapper"> | <div class="nav-bar-wrapper"> | ||
<div class="nav-bar-main-menu"> | <div class="nav-bar-main-menu"> | ||
+ | <a href="https://2019.igem.org/Team:Cornell"><img class="nav-bar-logo" src="https://static.igem.org/mediawiki/2019/c/cd/T--Cornell--WhiteIGEMLogo.png" alt="logo"></a> | ||
<div class="dropdown"> | <div class="dropdown"> | ||
<button class="dropbtn">TEAM</button> | <button class="dropbtn">TEAM</button> | ||
Line 451: | Line 498: | ||
<button class="dropbtn">OUTREACH</button> | <button class="dropbtn">OUTREACH</button> | ||
<div class="dropdown-content outreach-dropdown-content"> | <div class="dropdown-content outreach-dropdown-content"> | ||
− | <a href="https://2019.igem.org/Team:Cornell/ | + | <a href="https://2019.igem.org/Team:Cornell/Public_Engagement">EDUCATION & ENGAGEMENT</a> |
<a href="https://2019.igem.org/Team:Cornell/Collaborations">COLLABORATIONS</a> | <a href="https://2019.igem.org/Team:Cornell/Collaborations">COLLABORATIONS</a> | ||
</div> | </div> | ||
Line 458: | Line 505: | ||
<button class="dropbtn">HUMAN PRACTICES</button> | <button class="dropbtn">HUMAN PRACTICES</button> | ||
<div class="dropdown-content human-dropdown-content"> | <div class="dropdown-content human-dropdown-content"> | ||
− | <a href="https://2019.igem.org/Team:Cornell/ | + | <a href="https://2019.igem.org/Team:Cornell/Human_Practices">INTEGRATED PRACTICES</a> |
<a href="https://2019.igem.org/Team:Cornell/Policies">POLICIES</a> | <a href="https://2019.igem.org/Team:Cornell/Policies">POLICIES</a> | ||
<a href="https://2019.igem.org/Team:Cornell/Entrepreneurship">ENTREPRENEURSHIP</a> | <a href="https://2019.igem.org/Team:Cornell/Entrepreneurship">ENTREPRENEURSHIP</a> | ||
Line 480: | Line 527: | ||
</div> | </div> | ||
<div class="nav-second-col"> | <div class="nav-second-col"> | ||
− | <li class="pd-list-title"><b> | + | <li class="pd-list-title"><b>PRODUCT DEVELOPMENT</b></li> |
<li><a href="https://2019.igem.org/Team:Cornell/DesignProcess">DESIGN PROCESS</a></li> | <li><a href="https://2019.igem.org/Team:Cornell/DesignProcess">DESIGN PROCESS</a></li> | ||
+ | <li><a href="https://2019.igem.org/Team:Cornell/Hardware">HARDWARE</a></li> | ||
</div> | </div> | ||
<div class="nav-third-col"> | <div class="nav-third-col"> | ||
Line 520: | Line 568: | ||
</div> | </div> | ||
<div class="home-description"> | <div class="home-description"> | ||
− | + | Developing a community-oriented Harmful Algal Bloom detection and remediation system. | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
Line 539: | Line 574: | ||
<!------------------------TILES------------------------> | <!------------------------TILES------------------------> | ||
− | <div class="tiles-wrapper"> | + | <div class="wrapper-space"><br></div> |
− | <div class="tile-wrapper wet-lab-tile"><img src="https://static.igem.org/mediawiki/ | + | <div class="tiles-wrapper"> |
+ | <div class="tile-wrapper wet-lab-tile" onclick="location.href='https://2019.igem.org/Team:Cornell/Foundations'"><img src="https://static.igem.org/mediawiki/2017/a/ac/CornellTileWetlab.png" alt="Wet Lab"> | ||
<div class="overlay"> | <div class="overlay"> | ||
− | <div class="tile-title">WET LAB</div> | + | <div class="tile-title">WET LAB</div></a> |
</div> | </div> | ||
</div> | </div> | ||
− | <div class="tile-wrapper pd-tile"><img src="https://static.igem.org/mediawiki/2019/6/6c/T--Cornell--PDTile.png" alt="Product Development"> | + | <div class="tile-wrapper pd-tile" onclick="location.href='https://2019.igem.org/Team:Cornell/DesignProcess'"><img src="https://static.igem.org/mediawiki/2019/6/6c/T--Cornell--PDTile.png" alt="Product Development"> |
<div class="overlay"> | <div class="overlay"> | ||
<div class="tile-title">PRODUCT DEV</div> | <div class="tile-title">PRODUCT DEV</div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class="tile-wrapper pp-tile"><img src="https://static.igem.org/mediawiki/ | + | <div class="tile-wrapper pp-tile" onclick="location.href='https://2019.igem.org/Team:Cornell/Human_Practices'"><img src="https://static.igem.org/mediawiki/2017/7/7f/CornellTileP%26P.png" alt="Policies & Practices"> |
<div class="overlay"> | <div class="overlay"> | ||
<div class="tile-title pp-title">POLICY & <br>PRACTICES</div> | <div class="tile-title pp-title">POLICY & <br>PRACTICES</div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class="tile-wrapper outreach-tile"><img src="https://static.igem.org/mediawiki/ | + | <div class="tile-wrapper outreach-tile" onclick="location.href='https://2019.igem.org/Team:Cornell/Public_Engagement'"><img src="https://static.igem.org/mediawiki/2017/8/8e/CornellTileOutreach.png" alt="Outreach"> |
<div class="overlay"> | <div class="overlay"> | ||
<div class="tile-title">OUTREACH</div> | <div class="tile-title">OUTREACH</div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class="tile-wrapper bus-tile"><img src="https://static.igem.org/mediawiki/ | + | <div class="tile-wrapper bus-tile" onclick="location.href='https://2019.igem.org/Team:Cornell/Entrepreneurship'"><img src="https://static.igem.org/mediawiki/2017/d/d7/CornellTileBusiness.png" alt="Business"> |
<div class="overlay"> | <div class="overlay"> | ||
<div class="tile-title">BUSINESS</div> | <div class="tile-title">BUSINESS</div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class="tile-wrapper team-tile"><img src="https://static.igem.org/mediawiki/2019/a/a8/T--Cornell--TeamTile.png" alt="Team"> | + | <div class="tile-wrapper team-tile" onclick="location.href='https://2019.igem.org/Team:Cornell/Team'"><img src="https://static.igem.org/mediawiki/2019/a/a8/T--Cornell--TeamTile.png" alt="Team"> |
<div class="overlay"> | <div class="overlay"> | ||
<div class="tile-title">THE TEAM</div> | <div class="tile-title">THE TEAM</div> | ||
Line 571: | Line 607: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | <div class="wrapper-space"><br><br></div> | ||
<!------------------------END TILES------------------------> | <!------------------------END TILES------------------------> | ||
<!------------------------ FOOTER START ------------------------> | <!------------------------ FOOTER START ------------------------> | ||
Line 582: | Line 619: | ||
</div> | </div> | ||
<div class="icon-wrapper"> | <div class="icon-wrapper"> | ||
− | <a class="icon" href="https://www.instagram.com/cugem/"><img src="https://static.igem.org/mediawiki/2019/3/37/T--Cornell--Instagram.png"></a> | + | <a class="icon" href="https://www.instagram.com/cugem/"><img src="https://static.igem.org/mediawiki/2019/3/37/T--Cornell--Instagram.png" style="padding: 0;"></a> |
</div> | </div> | ||
<div class="icon-wrapper icon-wrapper-last"> | <div class="icon-wrapper icon-wrapper-last"> |
Latest revision as of 21:32, 21 October 2019