Difference between revisions of "Template:NTNU Trondheim Draft"

Line 1: Line 1:
 
{{Template_All_Teams}}
 
{{Template_All_Teams}}
  
−
<!-- Declare that you are going to use html code instead of wiki code -->
 
 
<html>
 
<html>
−
 
+
<head>
−
<!-- Start of CSS-->
+
<link href="https://2015.igem.org/Template:NTNU_Trondheim/css/bootstrap.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all">
−
<style type="text/css">
+
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
−
 
+
<script src="https://2015.igem.org/Template:NTNU_Trondheim/js/jquery.min.js?action=raw&ctype=text/javascript"></script>
−
/* PAGE LAYOUT */
+
<!-- Custom Theme files -->
−
 
+
<link href="https://2015.igem.org/Template:NTNU_Trondheim/css/style.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all"/>
−
/* Change Background color*/
+
<!-- Custom Theme files -->
−
body {
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
background-color: #fff;
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
}
+
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }>
−
 
+
</script>
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
<meta name="keywords" content="Trip Way Responsive web template, Bootstrap Web Templates, Flat Web Templates, AndriodCompatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
−
#mainContainer { 
+
<!--Google Fonts-->
−
width: 978px;
+
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
−
overflow:hidden;
+
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
−
float:left;
+
<!-- start-smoth-scrolling -->
−
margin-left:20px;
+
<script type="text/javascript" src="https://2015.igem.org/Template:NTNU_Trondheim/js/move-top.js?action=raw&ctype=text/javascript"></script>
−
margin-bottom: 10px;
+
<script type="text/javascript" src="https://2015.igem.org/Template:NTNU_Trondheim/js/easing.js?action=raw&ctype=text/javascript"></script>
−
background-color: #fff;
+
<script type="text/javascript">
−
border-bottom: 14px solid #565656;
+
jQuery(document).ready(function($) {
−
border-right: 2px solid #565656;
+
$(".scroll").click(function(event){
−
border-left: 2px solid #565656;
+
event.preventDefault();
−
border-top: 2px solid #565656;
+
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
});
−
}
+
});
−
 
+
</script>
−
/* Creates the container for the menu */
+
<!-- //end-smoth-scrolling -->
−
#menuContainer  {  
+
</head>
−
float:left;
+
<body>
−
width: 134px;
+
<!--header start here-->
−
padding: 20px 0px;
+
<div class="header">
−
border-top: 14px solid #565656;
+
<div class="container">
−
background-color: #E8E8E9;
+
<div class="header-main">
−
}
+
<div class="header-left">
−
 
+
<div class="logo">
−
/* Creates the container for the content */
+
<a href="index.html"><h1>Trip Way</h1></a>
−
#contentContainer {
+
</div>
−
padding-top:20px;
+
<div class="top-nav">
−
padding-right:10px;
+
<ul class="res">
−
margin-bottom: 20px;
+
<li><a href="services.html">Services</a></li>
−
width: 814px;
+
<li><a class="active" href="about.html">About</a></li>
−
padding-left: 20px;
+
<li><a href="contact.html">Contact</a></li>
−
float: left;
+
</ul>
−
background-color: #fff;
+
</div>
−
border-top: 14px solid #565656;
+
</div>
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
<div class="header-right">
−
}
+
  <div class="search">
−
 
+
    <form>
−
/*Set up height place holder for the banner*/
+
<input type="text" value="Search" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}"/>
−
#bannerContainer {
+
<input type="submit" value=""/>
−
height:200px;
+
  </form>
−
margin:auto;
+
</div>
−
text-align:center;
+
</div>
−
color: #F95F00;
+
<div class="clearfix"> </div>
−
}
+
</div>
−
 
+
</div>
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
</div>
−
 
+
<!--header end here-->
−
/*Change the styling of text for everything inside main container*/
+
<!--friend start here-->
−
#mainContainer p {  
+
<link rel="stylesheet" href="https://2015.igem.org/Template:NTNU_Trondheim/css/swipebox.css?action=raw&ctype=text/css">
−
font-size: 13px;
+
<script src="https://2015.igem.org/Template:NTNU_Trondheim/js/jquery.swipebox.min.js?action=raw&ctype=text/javascript"></script>
−
color: #000000;
+
    <script type="text/javascript">
−
}
+
jQuery(function($) {
−
+
$(".swipebox").swipebox();
−
/*This changes the color and font family */
+
});
−
#contentContainer h1, h2, h3, h4, h5, h6 {
+
</script>
−
color: #565656;
+
<div class="about">
−
border-bottom: none;
+
<div class="container">
−
font-weight: bold;
+
<div class="about-main">
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
<div class="about-top">
−
margin-top:10px;
+
<h3>About</h3>
−
}
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor.</p>
−
 
+
  </div>
−
/*Style of the links - links are different inside the menu */
+
  <div class="about-bottom">
−
#contentContainer a {
+
  <div class="col-md-4 about-left">
−
font-weight: bold;
+
  <img src="images/ab.jpg" alt="" title="">
−
color: #F95F00;
+
  </div>
−
}
+
  <div class="col-md-8 about-right">
−
 
+
  <h4>On the other hand, we denounce with righteous indignation</h4>
−
  /* Styling links on hover- links are different inside the menu */
+
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolorNemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.</p>
−
#contentContainer a:hover {
+
  </div>
−
color: #F95F00;
+
<div class="clearfix"> </div>
−
}
+
  </div>
−
 
+
    <div class="our-team">
−
/*Change the styling of tables */
+
    <h3>Our Team</h3>
−
        #contentContainer table {
+
    <div class="col-md-3 team-grid">
−
    border: 1px solid #565656;
+
        <a href="images/b-t1.jpg" class="b-link-stripe b-animate-go  swipebox"  title="Image Title">
−
    border-collapse: collapse;
+
    <img src="images/t1.jpg" /><div class="b-wrapper">
−
    width: 90%
+
</div></a>
−
    margin: auto;
+
  <div class="team-details">
−
    margin-bottom: 15px;
+
        <h4>McClintock</h4>
−
    margin-top: 15px;
+
        <p>Co-founder& CEO</p>
−
    margin-right: 10px;
+
      </div>
−
    margin-left: 10px;
+
    </div>
−
    }
+
    <div class="col-md-3 team-grid ma-more">
−
 
+
        <a href="images/b-t2.jpg" class="b-link-stripe b-animate-go  swipebox"  title="Image Title">
−
/*Change the styling of table cells*/
+
    <img src="images/t2.jpg" /><div class="b-wrapper">
−
    #contentContainer td {
+
</div></a>
−
    padding: 10px;
+
        <div class="team-details">
−
    border: 1px solid #565656;
+
        <h4>Malorum</h4>
−
    border-collapse: collapse;
+
        <p>Co-founder</p>
−
    vertical-align: text-top;
+
        </div>
−
    }
+
    </div>
−
 
+
    <div class="col-md-3 team-grid">
−
/*Change the styling of table headers */
+
        <a href="images/b-t3.jpg" class="b-link-stripe b-animate-go  swipebox"  title="Image Title">
−
    #contentContainer th {
+
    <img src="images/t3.jpg" /><div class="b-wrapper">
−
    background-color: #E8E8E9;
+
</div></a>
−
    padding: 10px;
+
        <div class="team-details">
−
    border: 1px solid #565656;
+
        <h4>Richard</h4>
−
    border-collapse: collapse;
+
        <p>Head Of Sale</p>
−
    vertical-align: text-top;
+
        </div>
−
    }
+
    </div>
−
 
+
    <div class="col-md-3 team-grid mar-more">
−
 
+
        <a href="images/b-t4.jpg" class="b-link-stripe b-animate-go  swipebox"  title="Image Title">
−
 
+
    <img src="images/t4.jpg" /><div class="b-wrapper">
−
/*MENU STYLING */
+
</div></a>
−
 
+
        <div class="team-details">
−
/*Styling for the links in the menu */
+
        <h4>Bonorum</h4>
−
#menuContainer a {
+
        <p>Operator</p>
−
color: #565656;
+
        </div>
−
text-decoration:none;
+
    </div>
−
font-weight: bold;
+
    <div class="clearfix"> </div>
−
}
+
    </div>
−
 
+
</div>
−
/* Sets the style for lists inside menuContainer  */
+
</div>
−
#menuContainer ul {
+
</div>
−
list-style: none;
+
<!--friend end here-->
−
margin-left:0px;
+
<!--footer start here-->
−
}
+
<div class="footer">
−
 
+
<div class="container">
−
/*Styles the list items to become menu buttons */
+
<div class="footer-main">
−
#menuContainer ul li {
+
<p>Template by <a href="http://w3layouts.com/" target="_blank">W3layouts</a></p>
−
text-align: center;
+
</div>
−
display: block;
+
</div>
−
width: 100%;
+
</div>
−
height:30px;
+
<!--footer end here-->
−
padding-top:10px;
+
</body>
−
}
+
−
 
+
−
/*For the menu buttons, changes the color when hovering*/
+
−
#menuContainer li:hover {
+
−
color:  #FFF;
+
−
background-color: #F95F00;
+
−
}
+
−
 
+
−
/*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: #F95F00;
+
−
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.-->
+
−
 
+
 
</html>
 
</html>

Revision as of 11:32, 1 July 2015

About

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor.

On the other hand, we denounce with righteous indignation

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolorNemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.

Our Team

McClintock

Co-founder& CEO

Malorum

Co-founder

Richard

Head Of Sale

Bonorum

Operator

Template by W3layouts