Difference between revisions of "Team:Queens Canada/testtest"

m (Closed header menu's unordered list)
 
(32 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
<head>
 +
<link href="https://fonts.googleapis.com/css?family=Ubuntu|Quicksand" rel="stylesheet">
 +
<meta charset="utf-8">
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<script src="https://use.fontawesome.com/334e00a61e.js"></script>
 +
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
 +
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
 +
 +
<script>
 +
$(document).ready(function() {
 +
$(".btn-menu").on('click', function() {
 +
$(".menu").slideToggle('slow');
 +
});
 +
 +
$(".btn-menu").each(function() {
 +
$(this).on('click', function() {
 +
$(".menu").slideToggle('slow');
 +
});
 +
});
 +
});
 +
</script>
 +
</head>
 +
<style>
 +
 +
/* Clear the default wiki settings */
 +
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { width:100%; padding:0px;  margin-top:-32px; margin-left:0px; margin-bottom:-17px; background-color: #f9f0f0;}
 +
body {
 +
margin: 0px auto;
 +
background-color: #f9f0f0;
 +
font-family: 'Ubuntu', sans-serif; line-height:1.5;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 +
/********************************* WIKI SETTINGS ********************************/
 +
*{margin: 0; padding: 0;}
 +
 +
img,
 +
figure,
 +
picture,
 +
video,
 +
embed {
 +
  max-width: 100%;
 +
}
 +
 +
hr {
 +
color: #8d9cd4;
 +
}
 +
 +
a, a:visited, a:active, a:link {
 +
text-decoration: none;
 +
color: #8d9cd4;
 +
}
 +
 +
a:hover {
 +
color: #7681a9;
 +
        text-decoration:none;
 +
}
 +
 +
h1, h2, h3, h4 {
 +
font-family: 'Quicksand', sans-serif;
 +
color: #4b5ea4;
 +
}
 +
 +
h2.sponsors {
 +
color: white;
 +
text-align: center;
 +
}
 +
 +
img.title-logo {
 +
width: 15%;
 +
margin-top: 2%;
 +
}
 +
/*************** MENU *************/
 +
 +
.header {
 +
background-color: #11af26;
 +
width: 100%;
 +
float: left;
 +
padding: 2% 0%;
 +
}
 +
 +
.btn-menu {
 +
width: 56px;
 +
height: 56px;
 +
float: center;
 +
text-align: center;
 +
color: white;
 +
border-radius: 56px;
 +
cursor: pointer;
 +
background: #C06C84;
 +
}
 +
 +
.menu {
 +
width: 100%;
 +
background-color: #2fce44;
 +
        margin: 0 auto;
 +
font-family: 'Quicksand', sans-serif;
 +
//display: none;
 +
}
 +
 +
.btn-close {
 +
font-size: 3em;
 +
color: white;
 +
float: center;
 +
cursor: pointer;
 +
margin-right: 5%;
 +
}
 +
 +
.menu ul { width: 100%;
 +
float: left;
 +
text-align: center;
 +
list-style: none;
 +
text-decoration: none;
 +
        display: inline-block;
 +
        list-style-type: none;
 +
}
 +
 +
.menu ul li {
 +
padding: 1.5%;
 +
        display: inline;
 +
}
 +
 +
.menu ul li a {
 +
font-size: 1.5em;
 +
color: white;
 +
padding: 3% 0%;
 +
}
 +
 +
.menu li a:hover {
 +
color: #F8B195;
 +
}
 +
 +
.menu ul li ul {
 +
display: none;
 +
}
 +
 +
.menu li:hover ul, .menu li.over ul {
 +
display: block;
 +
}
 +
 +
.menu li ul li {
 +
display: block;
 +
}
 +
 +
/***************** CONTENT *****************/
 +
#title {
 +
width: 100%;
 +
display: flex;
 +
min-height: 100%;
 +
align-items: center;
 +
justify-content: center;
 +
}
 +
 +
.content {
 +
margin: 0 auto;
 +
max-width: 1100px;
 +
text-align: justify;
 +
background-color: white;
 +
        line-height:1.5;
 +
        font-size:12pt;
 +
}
 +
 +
.content figure, p.figure-caption {
 +
text-align: center;
 +
}
 +
 +
h2.title-content {
 +
font-size: 2em;
 +
color: #ffffff;
 +
font-weight: bold;
 +
padding: 2%;
 +
text-align: center;
 +
background-color: #4b5ea4;
 +
}
 +
 +
.sublinks {
 +
text-align: center;
 +
margin-right: 30px;
 +
        margin-bottom: 10px;
 +
        margin-top: 0px;
 +
}
 +
 +
.sublinks h2 {
 +
font-size: 22pt;
 +
margin: 20px 10px;
 +
display: inline-block;
 +
        font-weight: lighter;
 +
}
 +
 +
.mid {
 +
margin-bottom: 50px;
 +
margin-top: 10px;
 +
font-size: 12pt;
 +
color: #2F2F2F;
 +
}
 +
 +
.mid h2 {
 +
color: #66100a;
 +
margin-bottom: 10px;
 +
}
 +
 +
.box {
 +
width: 450px;
 +
display:inline-block;
 +
margin-bottom:30px;
 +
}
 +
 +
#description {
 +
text-align: justify;
 +
vertical-align:top;
 +
margin-top:50px;
 +
}
 +
 +
 +
#description h2 {
 +
color: #4b5ea4;
 +
font-size:20pt;
 +
text-align:left;
 +
}
 +
 +
#subtitle_index {
 +
width:100%;
 +
font-size:24pt;
 +
text-align:center;
 +
font-family: 'Quicksand', sans-serif;
 +
text-align:center;
 +
line-height:1.5;
 +
}
 +
 +
.faixa {
 +
width:100%;
 +
background-color: #4b5ea4;
 +
margin: 30px auto;
 +
}
 +
 +
p#faixa {
 +
font-family: 'Quicksand', sans-serif;
 +
text-align:center;
 +
font-size: 42pt;
 +
color:white;
 +
}
 +
 +
.dyk {
 +
text-align:center;
 +
margin: 50px 0;
 +
}
 +
 +
#projectindex {
 +
max-width:1305px;
 +
margin: 0 auto;
 +
}
 +
 +
img.blueman {
 +
display: list-item;
 +
opacity: 0.7;
 +
}
 +
 +
img#blueman1:hover{
 +
opacity:1;
 +
cursor:pointer;
 +
}
 +
 +
img#blueman2:hover{
 +
opacity:1;
 +
cursor:pointer;
 +
}
 +
 +
#description{
 +
margin-top:10px;
 +
}
 +
 +
 +
p#text {
 +
color: #4b5ea4;
 +
font-size: 12pt;
 +
display: flex;
 +
justify-content: center;
 +
flex-direction: column;
 +
height:600px;
 +
font-family: 'Ubuntu', sans-serif;
 +
}
 +
 +
#blueman {
 +
margin: 40px auto;
 +
text-align: center;
 +
}
 +
 +
.box {
 +
max-width:650px;
 +
display:inline-block;
 +
}
 +
 +
 +
/***************** FOOTER *************/
 +
#footer {
 +
width: 100%;
 +
height:220px;
 +
background-color: #4b5ea4;
 +
color: white;
 +
}
 +
 +
#sponsors {
 +
text-align: center;
 +
margin-left:20px;
 +
margin-top:15px;
 +
float:left;
 +
}
 +
 +
#contact {
 +
text-align: center;
 +
float: right;
 +
margin-right:20px;
 +
margin-top: 15px;
 +
}
 +
 +
#contact p {font-family: 'Ubuntu', sans-serif; font-size:12pt}
 +
 +
#contact img {
 +
margin: 10px 5px 5px 0;
 +
}
 +
 +
 +
/* desktops */
 +
@media screen and (min-width: 1280px) {
 +
.header {padding: 1% 0%;}
 +
 +
.btn-menu {display: none}
 +
 +
.menu {
 +
width: auto;
 +
float: right;
 +
display: block !important;
 +
position: relative;
 +
}
 +
 +
.menu ul {width:auto}
 +
 +
.menu li {
 +
padding:2% 0%;
 +
float: left;
 +
position: relative;
 +
}
 +
 +
.menu li a {
 +
font-size: 1.5em;
 +
padding: 15px;
 +
}
 +
 +
.menu li a:hover {
 +
color: #c1d9ff;
 +
}
 +
 +
.menu ul li ul {
 +
background-color: #C06C84;
 +
display: none;
 +
position: absolute;
 +
min-width: 150px;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
.menu ul li ul li {
 +
padding: 5%;
 +
margin: 0;
 +
line-height: 150%;
 +
}
 +
 +
.menu li:hover ul, .menu li.over ul {
 +
display: block;
 +
}
 +
}
 +
 +
</style>
 +
 
<header class="header">
 
<header class="header">
−
<a href="https://2018.igem.org/Team:HAFS"><h1 class="logo">iGEM HAFS</h1></a>
+
<nav class="menu" style="width:100%;">
−
<button class="btn-menu"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></button>
+
−
<nav class="menu">
+
 
<ul>
 
<ul>
 
<li><a href="#">PROJECT &#9662;</a>
 
<li><a href="#">PROJECT &#9662;</a>
Line 31: Line 405:
 
<li><a href="https://2018.igem.org/Team:Queens_Canada/InterLab">INTERLAB</a></li>
 
<li><a href="https://2018.igem.org/Team:Queens_Canada/InterLab">INTERLAB</a></li>
 
<li><a href="https://2018.igem.org/Team:Queens_Canada/Notebook">NOTEBOOK</a></li>
 
<li><a href="https://2018.igem.org/Team:Queens_Canada/Notebook">NOTEBOOK</a></li>
−
<li><a href="https://2018.igem.org/Team:Queens_Canada/Entrepreneurship">ENTREPRENEURSHIP</a></li>
 
 
</ul>
 
</ul>
 
</nav>
 
</nav>
 
</header>
 
</header>
 
</html>
 
</html>

Latest revision as of 16:36, 19 June 2018