Difference between revisions of "Team:Bilkent-UNAMBG"

Line 1: Line 1:
−
{{Bilkent-UNAMBG}}
+
 
−
<!DOCTYPE HTML>
+
−
<!--
+
−
Helios by HTML5 UP
+
−
html5up.net | @ajlkn
+
−
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+
−
-->
+
 
<html>
 
<html>
−
<head>
+
<head>
−
<title>Helios by HTML5 UP</title>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
<meta charset="utf-8" />
+
<title></title>
−
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+
<meta name="keywords" content="" />
−
<link rel="stylesheet" href="assets/css/main.css" />
+
<meta name="description" content="" />
−
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
+
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
−
</head>
+
 
−
<body class="homepage is-preload">
+
<style>
−
<div id="page-wrapper">
+
 
 +
.sponsor {width: 100%}
 +
img.sponsors {margin-left:30%; margin-right:30%;width:40%; height: auto;}
 +
 
 +
#page.team img.safety {width: 240px; height:240px;}
 +
#page .title h2.headline {line-height:1em; font-size: 4em; overflow:visible; text-shadow: 3px 3px 0 #666666;top: -5em;}
 +
li.noteb { display: inline-block; float: none;}
 +
.notebooks .buttonx {font-size: 1.2em;}
 +
 
 +
@keyframes example {
 +
    0%  {text-shadow: 0px 3px 3px 0 red;}
 +
    25%  {text-shadow: 3px 0px 3px 0 blue;}
 +
    50%  {text-shadow: 0px -3px 3px 0 green;}
 +
    75%  {text-shadow: 3px  0 3px gray;}
 +
    100% {text-shadow: 3px 3px 0 red;}}
 +
@-webkit-keyframes example {
 +
    0%  {text-shadow: 0px 3px 3px 0 red;}
 +
    25%  {text-shadow: 3px 0px 3px 0 blue;}
 +
    50%  {text-shadow: 0px -3px 3px 0 green;}
 +
    75%  {text-shadow: 3px  0 3px gray;}
 +
    100% {text-shadow: 3px 3px 0 red;}}
 +
 
 +
#page .title h2.headline:hover{
 +
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
 +
    -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
 +
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
 +
    animation-name: example;
 +
    animation-duration: 2s;
 +
    animation-iteration-count: infinite;}
 +
 
 +
 
 +
ul.notebooks {width: 50%; margin-left:25%; margin-right:25%;}
 +
.hpgoldbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/f/fe/Bilkent-hpgoldbg.jpg");background-position: center top;background-size: 100% auto;}
 +
 
 +
.hpgoldbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
 +
 
 +
.middle {margin-left: 15%; margin-right:15%; width: 60%; }
 +
.middle p {text-align:center;}
 +
.middle p b {text-align:center;}
 +
 
 +
.hp img {width:100%;}
 +
.teambg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/0/05/Bilkent-team.jpg");background-position: center;}
 +
 
 +
.teambg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
 +
 
 +
.collabsbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/c/ce/Bilkent-collabs.jpg");background-position: center;}
 +
 
 +
.collabsbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
 +
 
 +
.safetybg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/8/8a/Bilkent-safety.jpg");background-position: center;}
 +
 
 +
.safetybg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
 +
 
 +
.partsbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/e/ea/Bilkent-parts.jpg");background-position: center;}
 +
 
 +
.partsbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
 +
 
 +
.attrbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/9/9f/Bilkent-attr.jpg");background-position: center;background-size: 100% auto;}
 +
 
 +
.attrbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
 +
 
 +
.hpbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/8/8e/Bilkent-hp.jpg");background-position: center;}
 +
 
 +
.hpbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
 +
 
 +
.projectbg {width:100%; height: 80vh; background-image: url("https://static.igem.org/mediawiki/2017/0/00/Bilkent-teambg.jpg");background-position: center;}
 +
 
 +
.projectbg h1 {line-height: 4em;padding-top: 50vh; padding-left: 7%; font-size: 3em; text-shadow: 2px 2px 1px #36332D; overflow: visible; color: rgb(39, 174, 97);}
 +
 
 +
 
 +
#page img{margin: 20px;}
 +
 
 +
#page.team img {width: 100%; height:auto; margin: 0;}
 +
 
 +
.quote {width: 80%; margin-left: 10%; font-style: italic; color: #333; font-size: 1em;}
 +
.quote_source {margin-left: 10%;}
 +
 
 +
#page h4 {font-size:0.7em; color:#111;}
 +
 
 +
#page h2 {font-size: 1.3em;}
 +
#page .byline {font-size: 0.8em;}
 +
 
 +
/* Clear the default wiki settings */
 +
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
 +
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, sup, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td,
 +
article, aside, canvas, details, embed,
 +
figure, figcaption, footer, header, hgroup,
 +
menu, nav, output, ruby, section, summary,
 +
time, mark, audio, video {
 +
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
font-size: 100%;
 +
vertical-align: baseline;
 +
}
 +
 
 +
small {
 +
    font-size: 0.8em;
 +
font-weight: 700;
 +
}
 +
 
 +
/* HTML5 display-role reset for older browsers */
 +
article, aside, details, figcaption, figure,
 +
footer, header, hgroup, menu, nav, section {
 +
display: block;
 +
}
 +
body {
 +
line-height: 1;
 +
}
 +
 
 +
blockquote, q {
 +
quotes: none;
 +
}
 +
blockquote:before, blockquote:after,
 +
q:before, q:after {
 +
content: '';
 +
content: none;
 +
}
 +
table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
}
 +
 +
 +
html, body
 +
{
 +
height: 100%;
 +
}
 +
 +
body
 +
{
 +
margin: 0px;
 +
padding: 0px;
 +
background: #EEEEEE;
 +
font-family: 'News Cycle', sans-serif;
 +
font-size: 13pt;
 +
font-weight: 300;
 +
color: #656565;
 +
}
 +
 +
 +
h1, h2, h3
 +
{
 +
padding: 0;
 +
font-weight: 700;
 +
color: #2B3F48;
 +
}
 +
 +
p, ol, ul
 +
{
 +
margin-top: 0;
 +
}
 +
 +
ol, ul
 +
{
 +
padding: 0;
 +
}
 +
 +
ul.actions
 +
{
 +
text-align: center;
 +
list-style-type:none;
 +
list-style-image: none;
 +
}
 +
 +
ul.actions li
 +
{
 +
}
 +
 +
p
 +
{
 +
line-height: 180%;
 +
}
 +
 
 +
 
 +
 +
strong
 +
{
 +
}
 +
 +
a
 +
{
 +
color: #0000FF;
 +
}
 +
 +
a:hover
 +
{
 +
text-decoration: none;
 +
}
 +
 +
.container
 +
{
 +
overflow: hidden;
 +
margin: 0em auto;
 +
width: 1000px;
 +
}
 +
 +
/*********************************************************************************/
 +
/* Image Style                                                                  */
 +
/*********************************************************************************/
 +
 
 +
.image
 +
{
 +
display: inline-block;
 +
}
 +
 +
.image img
 +
{
 +
display: block;
 +
width: 100%;
 +
}
 +
 +
.image-full
 +
{
 +
display: block;
 +
width: 100%;
 +
margin: 0 0 2em 0;
 +
}
 +
 +
.image-left
 +
{
 +
float: left;
 +
margin: 0 2em 2em 0;
 +
}
 +
 +
.image-centered
 +
{
 +
display: block;
 +
margin: 0 0 2em 0;
 +
}
 +
 +
.image-centered img
 +
{
 +
margin: 0 auto;
 +
width: auto;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* List Styles                                                                  */
 +
/*********************************************************************************/
 +
 
 +
ul.staff
 +
{
 +
margin-bottom: 3em;
 +
}
 +
 
 +
ul.staff li
 +
{
 +
display: inline-block;
 +
}
 +
 +
ul.staff li img
 +
{
 +
width: 80%;
 +
border-radius: 50%;
 +
}
 +
 
 +
 
 +
/*********************************************************************************/
 +
/* Social Icon Styles                                                            */
 +
/*********************************************************************************/
 +
 
 +
ul.contact
 +
{
 +
margin: 0;
 +
padding: 2em 0em 0em 0em;
 +
list-style: none;
 +
}
 +
 +
ul.contact li
 +
{
 +
display: inline-block;
 +
padding: 0em 0.30em;
 +
font-size: 1em;
 +
}
 +
 +
ul.contact li span
 +
{
 +
display: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
ul.contact li a
 +
{
 +
color: #FFF;
 +
}
 +
 +
ul.contact li a:before
 +
{
 +
display: inline-block;
 +
background: #3f3f3f;
 +
width: 40px;
 +
height: 40px;
 +
line-height: 40px;
 +
border-radius: 20px;
 +
text-align: center;
 +
color: #FFFFFF;
 +
}
 +
 +
ul.contact li a.icon-twitter:before { background: #2DAAE4; }
 +
ul.contact li a.icon-facebook:before { background: #39599F; }
 +
ul.contact li a.icon-dribbble:before { background: #C4376B; }
 +
ul.contact li a.icon-tumblr:before { background: #31516A; }
 +
ul.contact li a.icon-rss:before { background: #F2600B; }
 +
 
 +
/*********************************************************************************/
 +
/* Button Style                                                                  */
 +
/*********************************************************************************/
 +
 
 +
.buttonx
 +
{
 +
display: inline-block;
 +
padding: 0em 1.6em;
 +
background: #27AE61;
 +
border-radius: 8px;
 +
letter-spacing: 0.20em;
 +
line-height: 2.5em;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
font-weight: 400;
 +
font-size: 0.7em;
 +
color: #FFF;
 +
}
 +
a.buttonx:visited {
 +
    color: white;
 +
}
 +
 +
.buttonx:before
 +
{
 +
display: inline-block;
 +
background: #FFC31F;
 +
margin-right: 1em;
 +
width: 40px;
 +
height: 40px;
 +
line-height: 40px;
 +
border-radius: 20px;
 +
text-align: center;
 +
color: #272925;
 +
}
 +
 +
/*********************************************************************************/
 +
/* Heading Titles                                                                */
 +
/*********************************************************************************/
 +
 
 +
.title
 +
{
 +
margin-bottom: 1.8em;
 +
}
 +
 +
.title h2
 +
{
 +
font-size: 2em;
 +
margin: 10px;
 +
overflow: visible;
 +
}
 +
 +
.title .byline
 +
{
 +
font-size: 0.9em;
 +
color: #6F6F6F;
 +
}
 +
 +
/*********************************************************************************/
 +
/* 4-column                                                                      */
 +
/*********************************************************************************/
 +
 
 +
.box1,
 +
.box2,
 +
.box3,
 +
.box4
 +
{
 +
width: 22.5%;
 +
}
 +
 +
.box1,
 +
.box2,
 +
.box3,
 +
{
 +
float: left;
 +
margin-right: 20px;
 +
}
 +
 +
.box4
 +
{
 +
float: right;
 +
}
 +
 +
/*********************************************************************************/
 +
/* 3-column                                                                      */
 +
/*********************************************************************************/
 +
 
 +
.boxA,
 +
.boxB,
 +
.boxC
 +
{
 +
width: 31%;
 +
margin: 1%;
 +
text-align:center;
 +
}
 +
 
 +
.boxA,
 +
.boxB
 +
{
 +
float: left;
 +
 +
}
 +
 +
.boxC
 +
{
 +
float: right;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* 2-column                                                                      */
 +
/*********************************************************************************/
 +
 
 +
.tbox1,
 +
.tbox2
 +
{
 +
width: 45%;
 +
margin-left: 2.5%;
 +
margin-right: 2.5%
 +
}
 +
 +
.tbox1
 +
{
 +
float: left;
 +
}
 +
 
 +
.tbox2
 +
{
 +
float: right;
 +
}
 +
 
 +
hr { margin-top:10px;
 +
margin-bottom: 10px;}
 +
 
 +
/*********************************************************************************/
 +
/* Header                                                                        */
 +
/*********************************************************************************/
 +
 
 +
#header
 +
{
 +
position: relative;
 +
padding: 3em 0em;
 +
overflow: visible;
 +
}
 +
 
 +
#header.container {width: 1200px;}
 +
 
 +
/*********************************************************************************/
 +
/* Logo                                                                          */
 +
/*********************************************************************************/
 +
 
 +
#logo
 +
{
 +
position: absolute;
 +
top: 1em;
 +
left: 0;
 +
}
 +
 +
#logo h1
 +
{
 +
color: #2B3F48;
 +
 +
padding-top: 10px;
 +
}
 +
 +
#logo a
 +
{
 +
text-decoration: none;
 +
color: #2B3F48;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Menu                                                                          */
 +
/*********************************************************************************/
 +
 
 +
#menux
 +
{
 +
width: 70%;
 +
position: absolute;
 +
top: 2em;
 +
right: 0;
 +
}
 +
 +
#menux ul
 +
{
 +
display: inline-block;
 +
}
 +
 +
#menux li
 +
{
 +
display: block;
 +
float: left;
 +
text-align: center;
 +
}
 +
 +
 +
#menux li a, #menu li span
 +
{
 +
padding: 1em 1.5em;
 +
letter-spacing: 1px;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
font-size: 0.6em !important;
 +
color: #2B3F48;
 +
}
 +
 +
#menux li:hover a, #menu li.active a, #menu li.active span
 +
{
 +
color: #2B3F48;
 +
}
 +
 +
#menux .current_page_item a
 +
{
 +
color: #27AE61;
 +
}
 +
 +
#menux .icon
 +
{
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Banner                                                                        */
 +
/*********************************************************************************/
 +
 
 +
#banner
 +
{
 +
overflow: hidden;
 +
background: #27AE61 url(images/banner.png) no-repeat center;
 +
background-size: cover;
 +
text-align: center;
 +
color: rgba(255,255,255,.8);
 +
}
 +
 
 +
#banner .title
 +
{
 +
}
 +
 
 +
#banner .title h2
 +
{
 +
color: #FFF;
 +
}
 +
 
 +
#banner .title .byline
 +
{
 +
color: rgba(255,255,255,.6);
 +
}
 +
 +
#banner .buttonx
 +
{
 +
margin-top: 3em;
 +
background: #2B3F48 !important;
 +
}
  
−
<!-- Header -->
+
/*********************************************************************************/
−
<div id="header">
+
/* Page                                                                          */
 +
/*********************************************************************************/
  
−
<!-- Inner -->
+
#page
−
<div class="inner">
+
{
−
<header>
+
padding: 2em 0em;
−
<h1><a href="index.html" id="logo">Helios</a></h1>
+
text-align: center;
−
<hr />
+
}
−
<p>Another fine freebie by HTML5 UP</p>
+
−
</header>
+
#page .buttonx
−
<footer>
+
{
−
<a href="#banner" class="button circled scrolly">Start</a>
+
margin-top: 1.2em;
−
</footer>
+
display: inline-block;
−
</div>
+
text-align: center;
 +
}
  
−
<!-- Nav -->
+
/*********************************************************************************/
−
<nav id="nav">
+
/* Content                                                                      */
−
<ul>
+
/*********************************************************************************/
−
<li><a href="index.html">Home</a></li>
+
−
<li>
+
−
<a href="#">Dropdown</a>
+
−
<ul>
+
−
<li><a href="#">Lorem ipsum dolor</a></li>
+
−
<li><a href="#">Magna phasellus</a></li>
+
−
<li><a href="#">Etiam dolore nisl</a></li>
+
−
<li>
+
−
<a href="#">And a submenu &hellip;</a>
+
−
<ul>
+
−
<li><a href="#">Lorem ipsum dolor</a></li>
+
−
<li><a href="#">Phasellus consequat</a></li>
+
−
<li><a href="#">Magna phasellus</a></li>
+
−
<li><a href="#">Etiam dolore nisl</a></li>
+
−
</ul>
+
−
</li>
+
−
<li><a href="#">Veroeros feugiat</a></li>
+
−
</ul>
+
−
</li>
+
−
<li><a href="left-sidebar.html">Left Sidebar</a></li>
+
−
<li><a href="right-sidebar.html">Right Sidebar</a></li>
+
−
<li><a href="no-sidebar.html">No Sidebar</a></li>
+
−
</ul>
+
−
</nav>
+
  
−
</div>
+
#content
 +
{
 +
}
  
−
<!-- Banner -->
+
/*********************************************************************************/
−
<section id="banner">
+
/* Sidebar                                                                      */
−
<header>
+
/*********************************************************************************/
−
<h2>Hi. You're looking at <strong>Helios</strong>.</h2>
+
−
<p>
+
−
A (free) responsive site template by <a href="http://html5up.net">HTML5 UP</a>.
+
−
Built with HTML5/CSS3 and released under the <a href="http://html5up.net/license">CCA</a> license.
+
−
</p>
+
−
</header>
+
−
</section>
+
  
−
<!-- Carousel -->
+
#sidebar
−
<section class="carousel">
+
{
−
<div class="reel">
+
}
  
−
<article>
+
/*********************************************************************************/
−
<a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
+
/* Footer                                                                        */
−
<header>
+
/*********************************************************************************/
−
<h3><a href="#">Pulvinar sagittis congue</a></h3>
+
−
</header>
+
−
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
+
−
</article>
+
  
−
<article>
+
#footer
−
<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
+
{
−
<header>
+
}
−
<h3><a href="#">Fermentum sagittis proin</a></h3>
+
−
</header>
+
−
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
+
−
</article>
+
  
−
<article>
+
/*********************************************************************************/
−
<a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
+
/* Copyright                                                                    */
−
<header>
+
/*********************************************************************************/
−
<h3><a href="#">Sed quis rhoncus placerat</a></h3>
+
−
</header>
+
−
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
+
−
</article>
+
  
−
<article>
+
#copyright
−
<a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
+
{
−
<header>
+
overflow: hidden;
−
<h3><a href="#">Ultrices urna sit lobortis</a></h3>
+
padding: 5em 0em;
−
</header>
+
border-top: 1px solid rgba(0,0,0,0.08);
−
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
+
}
−
</article>
+
 +
#copyright p
 +
{
 +
letter-spacing: 0.20em;
 +
text-align: center;
 +
text-transform: uppercase;
 +
font-size: 0.40em;
 +
color: rgba(0,0,0,0.5);
 +
}
 +
 +
#copyright a
 +
{
 +
text-decoration: none;
 +
color: rgba(0,0,0,0.8);
 +
}
  
−
<article>
+
/*********************************************************************************/
−
<a href="#" class="image featured"><img src="images/pic05.jpg" alt="" /></a>
+
/* Featured                                                                      */
−
<header>
+
/*********************************************************************************/
−
<h3><a href="#">Varius magnis sollicitudin</a></h3>
+
−
</header>
+
−
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
+
−
</article>
+
  
−
<article>
+
#featured
−
<a href="#" class="image featured"><img src="images/pic01.jpg" alt="" /></a>
+
{
−
<header>
+
overflow: hidden;
−
<h3><a href="#">Pulvinar sagittis congue</a></h3>
+
padding: 1em 0em;
−
</header>
+
background: #27AE61;
−
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
+
text-align: center;
−
</article>
+
color: rgba(255,255,255,.8);
 +
}
  
−
<article>
+
#featured a
−
<a href="#" class="image featured"><img src="images/pic02.jpg" alt="" /></a>
+
{
−
<header>
+
color: rgba(255,255,255,1);
−
<h3><a href="#">Fermentum sagittis proin</a></h3>
+
}
−
</header>
+
−
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
+
#featured .buttonx
−
</article>
+
  
−
<article>
+
{
−
<a href="#" class="image featured"><img src="images/pic03.jpg" alt="" /></a>
+
background: #FFF;
−
<header>
+
margin-top: 1.2em;
−
<h3><a href="#">Sed quis rhoncus placerat</a></h3>
+
font-size: 0.8em;
−
</header>
+
color: #27AE61;
−
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
+
}
−
</article>
+
  
−
<article>
+
#featured .title
−
<a href="#" class="image featured"><img src="images/pic04.jpg" alt="" /></a>
+
{
−
<header>
+
}
−
<h3><a href="#">Ultrices urna sit lobortis</a></h3>
+
−
</header>
+
−
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
+
−
</article>
+
  
−
<article>
+
#featured .title h2
−
<a href="#" class="image featured"><img src="images/pic05.jpg" alt="" /></a>
+
{
−
<header>
+
color: #FFF;
−
<h3><a href="#">Varius magnis sollicitudin</a></h3>
+
}
−
</header>
+
−
<p>Commodo id natoque malesuada sollicitudin elit suscipit magna.</p>
+
−
</article>
+
  
−
</div>
+
#featured .title .byline
−
</section>
+
{
 +
color: rgba(255,255,255,.6);
 +
}
  
−
<!-- Main -->
+
/*********************************************************************************/
−
<div class="wrapper style2">
+
/* Featured                                                                      */
 +
/*********************************************************************************/
  
−
<article id="main" class="container special">
+
.box
−
<a href="#" class="image featured"><img src="images/pic06.jpg" alt="" /></a>
+
{
−
<header>
+
padding: 2em 2em;
−
<h2><a href="#">Sed massa imperdiet magnis</a></h2>
+
border: 1px solid rgba(0,0,0,0.1);
−
<p>
+
border-radius: 8px;
−
Sociis aenean eu aenean mollis mollis facilisis primis ornare penatibus aenean. Cursus ac enim
+
}
−
pulvinar curabitur morbi convallis. Lectus malesuada sed fermentum dolore amet.
+
−
</p>
+
−
</header>
+
−
<p>
+
−
Commodo id natoque malesuada sollicitudin elit suscipit. Curae suspendisse mauris posuere accumsan massa
+
−
posuere lacus convallis tellus interdum. Amet nullam fringilla nibh nulla convallis ut venenatis purus
+
−
sit arcu sociis. Nunc fermentum adipiscing tempor cursus nascetur adipiscing adipiscing. Primis aliquam
+
−
mus lacinia lobortis phasellus suscipit. Fermentum lobortis non tristique ante proin sociis accumsan
+
−
lobortis. Auctor etiam porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum
+
−
consequat integer interdum integer purus sapien. Nibh eleifend nulla nascetur pharetra commodo mi augue
+
−
interdum tellus. Ornare cursus augue feugiat sodales velit lorem. Semper elementum ullamcorper lacinia
+
−
natoque aenean scelerisque.
+
−
</p>
+
−
<footer>
+
−
<a href="#" class="button">Continue Reading</a>
+
−
</footer>
+
−
</article>
+
  
−
</div>
 
  
−
<!-- Features -->
+
#extra
−
<div class="wrapper style1">
+
{
 +
overflow: hidden;
 +
padding: 5em 0em;
 +
}
 +
 +
#extra .title
 +
{
 +
text-align: center;
 +
}
 +
 +
#extra .buttonx
 +
{
 +
margin-top: 5em;
 +
}
  
−
<section id="features" class="container special">
+
#page ul, #page ol, #page ol li ul li, #page li {font-size: 0.8em; }
−
<header>
+
#page li, #page li ul li {text-align: left;}
−
<h2>Morbi ullamcorper et varius leo lacus</h2>
+
//DROPDOWN MENU
−
<p>Ipsum volutpat consectetur orci metus consequat imperdiet duis integer semper magna.</p>
+
−
</header>
+
−
<div class="row">
+
−
<article class="col-4 col-12-mobile special">
+
−
<a href="#" class="image featured"><img src="images/pic07.jpg" alt="" /></a>
+
−
<header>
+
−
<h3><a href="#">Gravida aliquam penatibus</a></h3>
+
−
</header>
+
−
<p>
+
−
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
+
−
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
+
−
</p>
+
−
</article>
+
−
<article class="col-4 col-12-mobile special">
+
−
<a href="#" class="image featured"><img src="images/pic08.jpg" alt="" /></a>
+
−
<header>
+
−
<h3><a href="#">Sed quis rhoncus placerat</a></h3>
+
−
</header>
+
−
<p>
+
−
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
+
−
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
+
−
</p>
+
−
</article>
+
−
<article class="col-4 col-12-mobile special">
+
−
<a href="#" class="image featured"><img src="images/pic09.jpg" alt="" /></a>
+
−
<header>
+
−
<h3><a href="#">Magna laoreet et aliquam</a></h3>
+
−
</header>
+
−
<p>
+
−
Amet nullam fringilla nibh nulla convallis tique ante proin sociis accumsan lobortis. Auctor etiam
+
−
porttitor phasellus tempus cubilia ultrices tempor sagittis. Nisl fermentum consequat integer interdum.
+
−
</p>
+
−
</article>
+
−
</div>
+
−
</section>
+
  
−
</div>
+
.dropdown {
 +
    position: relative;
 +
    display: inline-block;
 +
}
  
−
<!-- Footer -->
+
/* Dropdown Content (Hidden by Default) */
−
<div id="footer">
+
.dropdown-content {
−
<div class="container">
+
    display: none;
−
<div class="row">
+
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
  
−
<!-- Tweets -->
+
/* Links inside the dropdown */
−
<section class="col-4 col-12-mobile">
+
.dropdown-content a {
−
<header>
+
    color: black;
−
<h2 class="icon fa-twitter circled"><span class="label">Tweets</span></h2>
+
    padding: 12px 16px;
−
</header>
+
    text-decoration: none;
−
<ul class="divided">
+
    display: block;
−
<li>
+
}
−
<article class="tweet">
+
−
Amet nullam fringilla nibh nulla convallis tique ante sociis accumsan.
+
−
<span class="timestamp">5 minutes ago</span>
+
−
</article>
+
−
</li>
+
−
<li>
+
−
<article class="tweet">
+
−
Hendrerit rutrum quisque.
+
−
<span class="timestamp">30 minutes ago</span>
+
−
</article>
+
−
</li>
+
−
<li>
+
−
<article class="tweet">
+
−
Curabitur donec nulla massa laoreet nibh. Lorem praesent montes.
+
−
<span class="timestamp">3 hours ago</span>
+
−
</article>
+
−
</li>
+
−
<li>
+
−
<article class="tweet">
+
−
Lacus natoque cras rhoncus curae dignissim ultricies. Convallis orci aliquet.
+
−
<span class="timestamp">5 hours ago</span>
+
−
</article>
+
−
</li>
+
−
</ul>
+
−
</section>
+
  
−
<!-- Posts -->
+
/* Change color of dropdown links on hover */
−
<section class="col-4 col-12-mobile">
+
.dropdown-content a:hover {background-color: #f1f1f1}
−
<header>
+
−
<h2 class="icon fa-file circled"><span class="label">Posts</span></h2>
+
−
</header>
+
−
<ul class="divided">
+
−
<li>
+
−
<article class="post stub">
+
−
<header>
+
−
<h3><a href="#">Nisl fermentum integer</a></h3>
+
−
</header>
+
−
<span class="timestamp">3 hours ago</span>
+
−
</article>
+
−
</li>
+
−
<li>
+
−
<article class="post stub">
+
−
<header>
+
−
<h3><a href="#">Phasellus portitor lorem</a></h3>
+
−
</header>
+
−
<span class="timestamp">6 hours ago</span>
+
−
</article>
+
−
</li>
+
−
<li>
+
−
<article class="post stub">
+
−
<header>
+
−
<h3><a href="#">Magna tempus consequat</a></h3>
+
−
</header>
+
−
<span class="timestamp">Yesterday</span>
+
−
</article>
+
−
</li>
+
−
<li>
+
−
<article class="post stub">
+
−
<header>
+
−
<h3><a href="#">Feugiat lorem ipsum</a></h3>
+
−
</header>
+
−
<span class="timestamp">2 days ago</span>
+
−
</article>
+
−
</li>
+
−
</ul>
+
−
</section>
+
  
−
<!-- Photos -->
+
/* Show the dropdown menu on hover */
−
<section class="col-4 col-12-mobile">
+
.dropdown:hover .dropdown-content {
−
<header>
+
    display: block;
−
<h2 class="icon fa-camera circled"><span class="label">Photos</span></h2>
+
}
−
</header>
+
−
<div class="row gtr-25">
+
−
<div class="col-6">
+
−
<a href="#" class="image fit"><img src="images/pic10.jpg" alt="" /></a>
+
−
</div>
+
−
<div class="col-6">
+
−
<a href="#" class="image fit"><img src="images/pic11.jpg" alt="" /></a>
+
−
</div>
+
−
<div class="col-6">
+
−
<a href="#" class="image fit"><img src="images/pic12.jpg" alt="" /></a>
+
−
</div>
+
−
<div class="col-6">
+
−
<a href="#" class="image fit"><img src="images/pic13.jpg" alt="" /></a>
+
−
</div>
+
−
<div class="col-6">
+
−
<a href="#" class="image fit"><img src="images/pic14.jpg" alt="" /></a>
+
−
</div>
+
−
<div class="col-6">
+
−
<a href="#" class="image fit"><img src="images/pic15.jpg" alt="" /></a>
+
−
</div>
+
−
</div>
+
−
</section>
+
  
−
</div>
+
/* Change the background color of the dropdown button when the dropdown content is shown */
−
<hr />
+
.dropdown:hover .dropbtn {
−
<div class="row">
+
    background-color: #3e8e41;
−
<div class="col-12">
+
}
  
−
<!-- Contact -->
+
.social {position: fixed; top: 22px; right: 0; width:32px; margin-right: 10px;}
−
<section class="contact">
+
</style>
−
<header>
+
−
<h3>Nisl turpis nascetur interdum?</h3>
+
−
</header>
+
−
<p>Urna nisl non quis interdum mus ornare ridiculus egestas ridiculus lobortis vivamus tempor aliquet.</p>
+
−
<ul class="icons">
+
−
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
+
−
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
+
−
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
+
−
<li><a href="#" class="icon fa-pinterest"><span class="label">Pinterest</span></a></li>
+
−
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
+
−
<li><a href="#" class="icon fa-linkedin"><span class="label">Linkedin</span></a></li>
+
−
</ul>
+
−
</section>
+
  
−
<!-- Copyright -->
+
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
−
<div class="copyright">
+
−
<ul class="menu">
+
−
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
+
−
</ul>
+
−
</div>
+
  
−
</div>
+
</head>
 +
<body>
  
−
</div>
+
<div class="social">
−
</div>
+
<a href="https://www.facebook.com/UNAMBG2017/" target="_blank"><img src="https://static.igem.org/mediawiki/2017/d/df/Bilkent-facebook.png"></a>
−
</div>
+
<a href="https://twitter.com/BilkentUNAMBG?lang=tr" target="_blank"><img src="https://static.igem.org/mediawiki/2017/b/b7/Bilkent-twitter.png"></a>
 +
<a href="mailto:unambgigem@gmail.com" target="_blank"><img src="https://static.igem.org/mediawiki/2017/8/89/Bilkent-mail.png"></a>
 +
</div>
  
−
</div>
+
<div id="header" class="container">
 +
<div id="logo">
 +
<a href="#"><img src="https://static.igem.org/mediawiki/2017/4/49/UnambgLogo.png"></a>
 +
</div>
 +
<div id="menux">
 +
<ul>
 +
<li><a href="https://2017.igem.org/Team:Bilkent-UNAMBG" title="">Home</a></li>
 +
<li class="dropdown"><a href="#">Team</a><div class="dropdown-content">
 +
<a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Team">Team Members</a>
 +
    <a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Attributions">Attributions</a>
 +
<a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Collaborations">Collaborations</a>
 +
  </div></li>
 +
<li class="dropdown"><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Project">Project</a><div class="dropdown-content">
  
−
<!-- Scripts -->
+
<a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Project#desc">Description</a>
−
<script src="assets/js/jquery.min.js"></script>
+
−
<script src="assets/js/jquery.dropotron.min.js"></script>
+
−
<script src="assets/js/jquery.scrolly.min.js"></script>
+
−
<script src="assets/js/jquery.scrollex.min.js"></script>
+
−
<script src="assets/js/browser.min.js"></script>
+
−
<script src="assets/js/breakpoints.min.js"></script>
+
−
<script src="assets/js/util.js"></script>
+
−
<script src="assets/js/main.js"></script>
+
  
−
</body>
+
<a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Project#const">Constructs</a><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Project#notebooks">Notebooks</a>
−
</html>
+
<a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Project#modeling">Modeling</a>
 +
<a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Project#protocols">Protocols</a><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/InterLab">InterLab</a>
 +
  </div></li>
 +
<li><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Parts">Parts</a></li>
 +
<li><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Safety">Safety</a></li>
 +
<li><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/Results">Results</a></li>
 +
<li class="dropdown"><a href="#">Human Practices</a><div class="dropdown-content"><a href="https://2017.igem.org/Team:Bilkent-UNAMBG/HP/Silver">Human Practice</a>
 +
    <a href="https://2017.igem.org/Team:Bilkent-UNAMBG/HP/Gold_Integrated">Integrated Human Practice</a>
 +
  </div></li>
 +
                     
 +
</ul>
 +
</div>
 +
</div>

Revision as of 16:51, 8 October 2018