Difference between revisions of "Template:METU HS Ankara"

Line 1: Line 1:
 +
{{Template_All_Teams}}
 +
 +
<!-- Declare that you are going to use html code instead of wiki code -->
 +
<!DOCTYPE HTML>
 +
<!--
 +
Overflow by HTML5 UP
 +
html5up.net | @n33co
 +
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 +
-->
 
<html>
 
<html>
 +
<head>
 +
<title>Overflow by HTML5 UP</title>
 +
<meta charset="utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1" />
 +
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
 +
<link rel="stylesheet" href="assets/css/main.css" />
 +
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
 +
</head>
 +
<body>
  
−
<!-- Start of CSS-->
+
<!-- Header -->
−
<style type="text/css">
+
<section id="header">
 +
<header>
 +
<h1>Overflow</h1>
 +
<p>By HTML5 UP</p>
 +
</header>
 +
<footer>
 +
<a href="#banner" class="button style2 scrolly-middle">Proceed as anticipated</a> </footer>
 +
</section>
  
−
/* PAGE LAYOUT */
+
<!-- Banner -->
 +
<section id="banner">
 +
<header>
 +
<h2>This is Overflow</h2>
 +
</header>
 +
<p>A brand new site template designed by <a href="http://n33.co">AJ</a> for <a href="http://html5up.net">HTML5 UP</a>.<br />
 +
It’s fully responsive, built on <strong>skel</strong>, and of course entirely free<br />
 +
under the <a href="http://html5up.net/license">Creative Commons license</a>.</p>
 +
<footer>
 +
<a href="#first" class="button style2 scrolly">Act on this message</a>
 +
</footer>
 +
</section>
  
−
/* Change Background color*/
+
<!-- Feature 1 -->
−
body {
+
<article id="first" class="container box style1 right">
−
background-color: #fff;
+
<a href="#" class="image fit"><img src="images/pic01.jpg" alt="" /></a>
−
}
+
<div class="inner">
 +
<header>
 +
<h2>Lorem ipsum<br />
 +
dolor sit amet</h2>
 +
</header>
 +
<p>Tortor faucibus ullamcorper nec tempus purus sed penatibus. Lacinia pellentesque eleifend vitae est elit tristique velit tempus etiam.</p>
 +
</div>
 +
</article>
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
<!-- Feature 2 -->
−
#mainContainer { 
+
<article class="container box style1 left">
−
width: 978px;
+
<a href="#" class="image fit"><img src="images/pic02.jpg" alt="" /></a>
−
overflow:hidden;
+
<div class="inner">
−
float:left;
+
<header>
−
margin-left:20px;
+
<h2>Mollis posuere<br />
−
margin-bottom: 10px;
+
lectus lacus</h2>
−
background-color: #fff;
+
</header>
−
border-bottom: 14px solid #565656;
+
<p>Rhoncus mattis egestas sed fusce sodales rutrum et etiam ullamcorper. Etiam egestas scelerisque ac duis magna lorem ipsum dolor.</p>
−
border-right: 2px solid #565656;
+
</div>
−
border-left: 2px solid #565656;
+
</article>
−
border-top: 2px solid #565656;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
}
+
  
−
/* Creates the container for the menu */
+
<!-- Portfolio -->
−
#menuContainer  {
+
<article class="container box style2">
−
float:left;
+
<header>
−
width: 134px;
+
<h2>Magnis parturient</h2>
−
padding: 20px 0px;
+
<p>Justo phasellus et aenean dignissim<br />
−
border-top: 14px solid #565656;
+
placerat cubilia purus lectus.</p>
−
background-color: #E8E8E9;
+
</header>
−
}
+
<div class="inner gallery">
 +
<div class="row 0%">
 +
<div class="3u 12u(mobile)"><a href="images/fulls/01.jpg" class="image fit"><img src="images/thumbs/01.jpg" alt="" title="Ad infinitum" /></a></div>
 +
<div class="3u 12u(mobile)"><a href="images/fulls/02.jpg" class="image fit"><img src="images/thumbs/02.jpg" alt="" title="Dressed in Clarity" /></a></div>
 +
<div class="3u 12u(mobile)"><a href="images/fulls/03.jpg" class="image fit"><img src="images/thumbs/03.jpg" alt="" title="Raven" /></a></div>
 +
<div class="3u 12u(mobile)"><a href="images/fulls/04.jpg" class="image fit"><img src="images/thumbs/04.jpg" alt="" title="I'll have a cup of Disneyland, please" /></a></div>
 +
</div>
 +
<div class="row 0%">
 +
<div class="3u 12u(mobile)"><a href="images/fulls/05.jpg" class="image fit"><img src="images/thumbs/05.jpg" alt="" title="Cherish" /></a></div>
 +
<div class="3u 12u(mobile)"><a href="images/fulls/06.jpg" class="image fit"><img src="images/thumbs/06.jpg" alt="" title="Different." /></a></div>
 +
<div class="3u 12u(mobile)"><a href="images/fulls/07.jpg" class="image fit"><img src="images/thumbs/07.jpg" alt="" title="History was made here" /></a></div>
 +
<div class="3u 12u(mobile)"><a href="images/fulls/08.jpg" class="image fit"><img src="images/thumbs/08.jpg" alt="" title="People come and go and walk away" /></a></div>
 +
</div>
 +
</div>
 +
</article>
  
−
/* Creates the container for the content */
+
<!-- Contact -->
−
#contentContainer {
+
<article class="container box style3">
−
padding-top:20px;
+
<header>
−
padding-right:10px;
+
<h2>Nisl sed ultricies</h2>
−
margin-bottom: 20px;
+
<p>Diam dignissim lectus eu ornare volutpat orci.</p>
−
width: 814px;
+
</header>
−
padding-left: 20px;
+
<form method="post" action="#">
−
float: left;
+
<div class="row 50%">
−
background-color: #fff;
+
<div class="6u 12u$(mobile)"><input type="text" class="text" name="name" placeholder="Name" /></div>
−
border-top: 14px solid #565656;
+
<div class="6u$ 12u$(mobile)"><input type="text" class="text" name="email" placeholder="Email" /></div>
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
<div class="12u$">
−
}
+
<textarea name="message" placeholder="Message"></textarea>
 +
</div>
 +
<div class="12u$">
 +
<ul class="actions">
 +
<li><input type="submit" value="Send Message" /></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</form>
 +
</article>
  
−
/*Set up height place holder for the banner*/
+
<!-- Generic -->
−
#bannerContainer {
+
<!--
−
height:200px;
+
<article class="container box style3">
−
margin:auto;
+
<header>
−
text-align:center;
+
<h2>Generic Box</h2>
−
color: #24B694;
+
<p>Just a generic box. Nothing to see here.</p>
−
}
+
</header>
 +
<section>
 +
<header>
 +
<h3>Paragraph</h3>
 +
<p>This is a subtitle</p>
 +
</header>
 +
<p>Phasellus nisl nisl, varius id <sup>porttitor sed pellentesque</sup> ac orci. Pellentesque
 +
habitant <strong>strong</strong> tristique <b>bold</b> et netus <i>italic</i> malesuada <em>emphasized</em> ac turpis egestas. Morbi
 +
leo suscipit ut. Praesent <sub>id turpis vitae</sub> turpis pretium ultricies. Vestibulum sit
 +
amet risus elit.</p>
 +
</section>
 +
<section>
 +
<header>
 +
<h3>Blockquote</h3>
 +
</header>
 +
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget.
 +
tempus euismod. Vestibulum ante ipsum primis in faucibus.</blockquote>
 +
</section>
 +
<section>
 +
<header>
 +
<h3>Divider</h3>
 +
</header>
 +
<p>Donec consectetur <a href="#">vestibulum dolor et pulvinar</a>. Etiam vel felis enim, at viverra
 +
ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
 +
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
 +
tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
 +
posuere cubilia.</p>
 +
<hr />
 +
<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra
 +
ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
 +
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
 +
tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
 +
posuere cubilia.</p>
 +
</section>
 +
<section>
 +
<header>
 +
<h3>Unordered List</h3>
 +
</header>
 +
<ul class="default">
 +
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
 +
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
 +
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
 +
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
 +
</ul>
 +
</section>
 +
<section>
 +
<header>
 +
<h3>Ordered List</h3>
 +
</header>
 +
<ol class="default">
 +
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
 +
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
 +
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
 +
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
 +
</ol>
 +
</section>
 +
<section>
 +
<header>
 +
<h3>Table</h3>
 +
</header>
 +
<div class="table-wrapper">
 +
<table class="default">
 +
<thead>
 +
<tr>
 +
<th>ID</th>
 +
<th>Name</th>
 +
<th>Description</th>
 +
<th>Price</th>
 +
</tr>
 +
</thead>
 +
<tbody>
 +
<tr>
 +
<td>45815</td>
 +
<td>Something</td>
 +
<td>Ut porttitor sagittis lorem quis nisi ornare.</td>
 +
<td>29.99</td>
 +
</tr>
 +
<tr>
 +
<td>24524</td>
 +
<td>Nothing</td>
 +
<td>Ut porttitor sagittis lorem quis nisi ornare.</td>
 +
<td>19.99</td>
 +
</tr>
 +
<tr>
 +
<td>45815</td>
 +
<td>Something</td>
 +
<td>Ut porttitor sagittis lorem quis nisi ornare.</td>
 +
<td>29.99</td>
 +
</tr>
 +
<tr>
 +
<td>24524</td>
 +
<td>Nothing</td>
 +
<td>Ut porttitor sagittis lorem quis nisi ornare.</td>
 +
<td>19.99</td>
 +
</tr>
 +
</tbody>
 +
<tfoot>
 +
<tr>
 +
<td colspan="3"></td>
 +
<td>100.00</td>
 +
</tr>
 +
</tfoot>
 +
</table>
 +
</div>
 +
</section>
 +
<section>
 +
<header>
 +
<h3>Form</h3>
 +
</header>
 +
<form method="post" action="#">
 +
<div class="row">
 +
<div class="6u">
 +
<input class="text" type="text" name="name" id="name" value="" placeholder="John Doe" />
 +
</div>
 +
<div class="6u">
 +
<input class="text" type="text" name="email" id="email" value="" placeholder="johndoe@domain.tld" />
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="12u">
 +
<select name="department" id="department">
 +
<option value="">Choose a department</option>
 +
<option value="1">Manufacturing</option>
 +
<option value="2">Administration</option>
 +
<option value="3">Support</option>
 +
</select>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="12u">
 +
<input class="text" type="text" name="subject" id="subject" value="" placeholder="Enter your subject" />
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="12u">
 +
<textarea name="message" id="message" placeholder="Enter your message"></textarea>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="12u">
 +
<ul class="actions">
 +
<li><input type="submit" value="Submit" /></li>
 +
<li><input type="reset" class="style3" value="Clear Form" /></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</form>
 +
</section>
 +
</article>
 +
-->
  
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
<section id="footer">
−
 
+
<ul class="icons">
−
/*Change the styling of text for everything inside main container*/
+
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
−
#mainContainer p {
+
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
−
font-size: 13px;
+
<li><a href="#" class="icon fa-google-plus"><span class="label">Google+</span></a></li>
−
color: #000000;
+
<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>
−
/*This changes the color and font family */
+
</ul>
−
#contentContainer h1, h2, h3, h4, h5, h6 {
+
<div class="copyright">
−
color: #565656;
+
<ul class="menu">
−
border-bottom: none;
+
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
−
font-weight: bold;
+
</ul>
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
margin-top:10px;
+
−
}
+
−
 
+
−
/*Style of the links - links are different inside the menu */
+
−
#contentContainer a {
+
−
font-weight: bold;
+
−
color: #23b593;
+
−
}
+
−
 
+
−
  /* Styling links on hover- links are different inside the menu */
+
−
#contentContainer a:hover {
+
−
color: #59bf92;
+
−
}
+
−
 
+
−
/*Change the styling of tables */
+
−
        #contentContainer table {
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    width: 90%
+
−
    margin: auto;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
    }
+
−
 
+
−
/*Change the styling of table cells*/
+
−
    #contentContainer  td {
+
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
−
 
+
−
/*Change the styling of table headers */
+
−
    #contentContainer th {
+
−
    background-color: #E8E8E9;
+
−
    padding: 10px;
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
−
 
+
−
 
+
−
 
+
−
/*MENU STYLING */
+
−
 
+
−
/*Styling for the links in the menu */
+
−
#menuContainer a {
+
−
color: #565656;
+
−
text-decoration:none;
+
−
font-weight: bold;
+
−
}
+
−
 
+
−
/* Sets the style for lists inside menuContainer  */
+
−
#menuContainer ul {
+
−
list-style: none;
+
−
margin-left:0px;
+
−
}
+
−
 
+
−
/*Styles the list items to become menu buttons */
+
−
#menuContainer ul li {
+
−
text-align: center;
+
−
display: block;
+
−
width: 100%;
+
−
height:30px;
+
−
padding-top:10px;
+
−
}
+
−
 
+
−
/*For the menu buttons, changes the color when hovering*/
+
−
#menuContainer li:hover {
+
−
color:  #FFF;
+
−
background-color: #24B694;
+
−
}
+
−
 
+
−
/*Submenus are not displayed as default*/
+
−
#menuContainer li ul {
+
−
display: none;
+
−
padding-top:15px;
+
−
margin-left: -19px;
+
−
}
+
−
 
+
−
/*Submenus are displayed when hovering the menu button */
+
−
#menuContainer li:hover ul {
+
−
/*display: inline-block; */
+
−
display: block;
+
−
position: absolute;
+
−
float:right;
+
−
margin-left: 134px;
+
−
margin-top:-42px;
+
−
}
+
−
 
+
−
/*Style the submenu buttons*/
+
−
#menuContainer li ul li{
+
−
background-color: #59BF92;
+
−
padding-left:20px;
+
−
padding-right:20px;
+
−
height:30px;
+
−
padding-top:10px;
+
−
margin-top:-2px;
+
−
color: #565656;
+
−
width: 150px;
+
−
}
+
−
 
+
−
/*CLASSES */
+
−
 
+
−
/*Clear class for all the pages, adds spacing too*/
+
−
.clear{
+
−
clear:both;
+
−
height: 10px;
+
−
}
+
−
 
+
−
 
+
−
/* highlight box for special messages */
+
−
    .highlightBox {
+
−
        width:500px;
+
−
        margin:auto;
+
−
        background-color: #E8E8E9;
+
−
margin-bottom: 15px;
+
−
margin-top: 15px;
+
−
padding: 15px;
+
−
padding-top: 5px;
+
−
    }
+
−
 
+
−
 
+
−
</style>
+
−
<!-- End of CSS -->
+
−
 
+
−
 
+
−
<!-- Start of the template html elements. -->
+
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
−
 
+
−
 
+
−
<div id="bannerContainer">
+
−
<br><br>
+
−
<h2> Add a banner to your wiki! </h2>
+
−
+
−
<p>You can make the image 980px  by  200px</p>
+
−
<p> Remember to call the file: "<i>Team_METU_HS_Ankara_banner.jpg</i>" </p>
+
 
</div>
 
</div>
 +
</section>
  
−
<!-- Start of menu -->
+
<!-- Scripts -->
−
<div id="menuContainer">
+
<script src="assets/js/jquery.min.js"></script>
−
 
+
<script src="assets/js/jquery.scrolly.min.js"></script>
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
<script src="assets/js/jquery.poptrox.min.js"></script>
−
<ul>
+
<script src="assets/js/skel.min.js"></script>
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara"><li>HOME</li></a>
+
<script src="assets/js/util.js"></script>
−
 
+
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Team"><li>TEAM</li></a>
+
<script src="assets/js/main.js"></script>
−
 
+
−
<a href="#"><li>PROJECT
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Description"><li>Description</li></a>
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Results"><li>Results</li></a> 
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Design"><li>Design</li></a>
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="#"><li>PARTS
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Parts"><li>Team Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Part_Collection"><li>Part Collection</li></a>
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Notebook"><li>NOTEBOOK</li></a>
+
−
     
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Attributions"><li>ATTRIBUTIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Collaborations"><li>COLLABORATIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Practices"><li>HUMAN PRACTICES</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Safety"><li>SAFETY</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Modeling"><li>MODELING</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Measurement"><li>MEASUREMENT</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Software"><li>SOFTWARE</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:METU_HS_Ankara/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
−
 
+
−
</ul>
+
−
</div>
+
−
<!-- End of menu  -->
+
  
−
<!-- Start of content -->
+
</body>
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
 
</html>
 
</html>

Revision as of 12:51, 6 June 2015

<!DOCTYPE HTML> Overflow by HTML5 UP

Lorem ipsum
dolor sit amet

Tortor faucibus ullamcorper nec tempus purus sed penatibus. Lacinia pellentesque eleifend vitae est elit tristique velit tempus etiam.

Mollis posuere
lectus lacus

Rhoncus mattis egestas sed fusce sodales rutrum et etiam ullamcorper. Etiam egestas scelerisque ac duis magna lorem ipsum dolor.

Magnis parturient

Justo phasellus et aenean dignissim
placerat cubilia purus lectus.

Nisl sed ultricies

Diam dignissim lectus eu ornare volutpat orci.