Difference between revisions of "Template:Tsinghua"

(Prototype team template page)
 
Line 1: Line 1:
−
{{Template_All_Teams}}
 
−
 
−
<!-- Declare that you are going to use html code instead of wiki code -->
 
 
<html>
 
<html>
−
 
+
<head>
−
<!-- Start of CSS-->
+
<title>HOME</title>
−
<style type="text/css">
+
<!--bootstrap-css-->
−
 
+
<link href="https://2015.igem.org/Template:Tsinghua/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
−
/* PAGE LAYOUT */
+
<!--/bootstarp-css -->
−
 
+
<!--css-->
−
/* Change Background color*/
+
<link rel="stylesheet" href="https://2015.igem.org/Template:Tsinghua/css/style.css" type="text/css" media="all" />
−
body {  
+
<!--/css-->
−
background-color: #fff;
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
}
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
 
+
<meta name="keywords" content="Petcare Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
−
#mainContainer {
+
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
−
width: 978px;
+
<link href="https://2015.igem.org/Template:Tsinghua/css/hover.css" rel="stylesheet" media="all">
−
overflow:hidden;
+
<!--fonts-->
−
float:left;
+
<link href='http://fonts.useso.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>
−
margin-left:20px;
+
<link href='http://fonts.useso.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
−
margin-bottom: 10px;
+
<!--/fonts-->
−
background-color: #fff;
+
<script type="text/javascript" src="https://2015.igem.org/Template:Tsinghua/js/jquery.min.js"></script>
−
border-bottom: 14px solid #565656;
+
<script type="text/javascript" src="https://2015.igem.org/Template:Tsinghua/js/modernizr.custom.js"></script>
−
border-right: 2px solid #565656;
+
<script type="text/javascript" src="https://2015.igem.org/Template:Tsinghua/js/responsiveslides.min.js"></script>
−
border-left: 2px solid #565656;
+
<script>
−
border-top: 2px solid #565656;
+
    // You can also use "$(window).load(function() {"
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
    $(function () {
−
}
+
      $("#slider2").responsiveSlides({
−
 
+
        auto: true,
−
/* Creates the container for the menu */
+
        pager: true,
−
#menuContainer  {
+
        speed: 300,
−
float:left;
+
        namespace: "callbacks",
−
width: 134px;
+
      });
−
padding: 20px 0px;
+
    });
−
border-top: 14px solid #565656;
+
  </script>
−
background-color: #E8E8E9;
+
</head>
−
}
+
<body>
−
 
+
<!--header-->
−
/* Creates the container for the content */
+
<div class="header">
−
#contentContainer {
+
<div class="header-info">
−
padding-top:20px;
+
  <div class="container">
−
padding-right:10px;
+
<div class="logo">
−
margin-bottom: 20px;
+
<a href="index.html"><img src="images/logo.png" alt="" /></a>
−
width: 814px;
+
</div>
−
padding-left: 20px;
+
  </div>
−
float: left;
+
</div>
−
background-color: #fff;
+
</div>
−
border-top: 14px solid #565656;
+
  <div class="container">
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
      <div class="header-bottom">
−
}
+
<div class="menu">
−
 
+
<div align="center">
−
/*Set up height place holder for the banner*/
+
      <ul class="cl-effect-21">
−
#bannerContainer {
+
    <li><samp><a href="index.html" class="active">HOME</a></samp></li>
−
height:200px;
+
    <li><samp><a href="about.html">ABOUT</a></samp></li>
−
margin:auto;
+
    <li><samp><a href="projects.html">PROJECTS</a></samp></li>
−
text-align:center;
+
    <li><samp><a href="support.html">SUPPORT</a></samp></li>
−
color: #24B694;
+
    <li><samp><a href="404.html">CAREPLUS</a></samp></li>
−
}
+
    <li><samp><a href="contact.html">CONTACT</a></samp></li>
−
 
+
</ul>
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
  </div>
−
 
+
</div>
−
/*Change the styling of text for everything inside main container*/
+
        <div align="center">
−
#mainContainer p {
+
            <samp>
−
font-size: 13px;
+
            <!--script-nav -->
−
color: #000000;
+
            <script>
−
}
+
$("span.menu-info").click(function(){
 +
$("ul.cl-effect-21").slideToggle("slow" , function(){
 +
});
 +
});
 +
          </script>
 +
            <!-- /script-nav -->
 +
            </samp></div>
 +
        <div class="clearfix"> </div>
 +
  </div>
 +
  </div>
 +
<div class="header-banner">
 +
  <div class="slider">
 +
    <ul class="rslides" id="slider2">
 +
      <li><a href="#"><img src="images/4.jpg" class="img-responsive" alt=""/></a></li>
 +
      <li><a href="#"><img src="images/2.jpg" class="img-responsive" alt=""/></a></li>
 +
      <li><a href="#"><img src="images/3.jpg" class="img-responsive" alt=""/></a></li>
 +
    </ul>
 +
  </div>
 +
</div>
 +
<!--/header-->
 +
<!--doctor-self-->
 +
<div class="doctor-self">
 +
<div class="container">
 +
<div class="doctor-self-info">
 +
<h3>WHAT WOULD OUR DEAN SAYS</h3>
 +
<div class="doctor-self-info-bottom">
 +
<div class="col-md-4 doctor-self-left">
 +
<img src="images/5.jpg" class="img-responsive" alt=""/>
 +
<h4>DR.JIMMY</h4>
 +
<h5>lorem lipsum doolr in groem horntim</h5>
 +
</div>
 +
<div class="col-md-8 doctor-self-right">
 +
<p>"Lorem Ipsum is simply dummy text of the printing and typesetting i
 +
ndustry. Lorem Ipsum has been the industry's standard dummy text
 +
ever since the 1500s<br /><br /> reproduced below for those interested. Sections 1.10.32
 +
  and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero
 +
  are also reproduced in their exact original form, accompanied
 +
    by English versions from the 1914 translation by H. Rackham
 +
Lorem Ipsum is simply dummy text of the printing and typesetting i
 +
ndustry. Lorem Ipsum has been the industry's standard dummy text
 +
ever since the 1500s"</p>
 +
</div>
 +
<div class="clearfix"> </div>
 +
  </div>
 +
</div>
 +
</div>
 +
</div>
 +
<!--/doctor-self-->
 +
<!--dogs-food-->
 +
<div class="dogs-food">
 +
<div class="container">
 +
<div class="dogs-food-top-info">
 +
<div class="dogs-food-top">
 +
<div class="col-md-4 dogs-food-info">
 +
<img src="images/dg-1.png">
 +
<h4>CARE</h4>
 +
<p>when an unknown printer took a galley of
 +
type and scrambled it to make a type speci
 +
men book</p>
 +
<a class="dogs-top-food" href="#">More</a>
 +
</div>
 +
<div class="col-md-4 dogs-food-info">
 +
<img src="images/dg-2.png">
 +
<h4>CARE-+</h4>
 +
<p>when an unknown printer took a galley of
 +
type and scrambled it to make a type speci
 +
men book</p>
 +
<a class="dogs-top-food" href="#">More</a>
 +
</div>
 +
<div class="col-md-4 dogs-food-info">
 +
<img src="images/dg-3.png">
 +
<h4>TRAVEL</h4>
 +
<p>when an unknown printer took a galley of
 +
type and scrambled it to make a type speci
 +
men book</p>
 +
<a class="dogs-top-food" href="#">More</a>
 +
</div>
 +
<div class="col-md-4 dogs-food-info">
 +
<img src="images/dg-4.png">
 +
<h4>FRIEND-SHIP</h4>
 +
<p>when an unknown printer took a galley of
 +
type and scrambled it to make a type speci
 +
men book</p>
 +
<a class="dogs-top-food" href="#">More</a>
 +
</div>
 +
<div class="col-md-4 dogs-food-info">
 +
<img src="images/dg-5.png">
 +
<h4>DOG-HOME</h4>
 +
<p>when an unknown printer took a galley of
 +
type and scrambled it to make a type speci
 +
men book</p>
 +
<a class="dogs-top-food" href="#">More</a>
 +
</div>
 +
<div class="col-md-4 dogs-food-info">
 +
<img src="images/dg-6.png">
 +
<h4>DOG-FOOD</h4>
 +
<p>when an unknown printer took a galley of
 +
type and scrambled it to make a type speci
 +
men book</p>
 +
<a class="dogs-top-food" href="#">More</a>
 +
</div>
 +
<div class="clearfix"> </div>
 +
  </div>
 +
<div class="clearfix"> </div>
 +
</div>
 +
</div>
 +
</div>
 +
<!--/dogs-food-->
 +
<!--daily-updates-->
 +
<div class="daily-updates">
 +
<div class="container">
 +
<div class="daily-updates-info">
 +
<h4>SUBSCRIBE FOR DAILY UPDATES</h4>
 +
<form>
 
 
−
/*This changes the color and font family */
+
<input type="text" class="text" value="EMAIL" onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'EMAIL';}">
−
#contentContainer h1, h2, h3, h4, h5, h6 {
+
<input type="submit"value="SUBMIT">
−
color: #565656;
+
  </form>
−
border-bottom: none;
+
<p>FOR HELP<span><a href="mailto:example@mail.com">pets-care@mail.com</a></span></p>
−
font-weight: bold;
+
  </div>
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
</div>
−
margin-top:10px;
+
</div>
−
}
+
<!--/daily-updates-->
−
 
+
<!--support-->
−
/*Style of the links - links are different inside the menu */
+
<div class="support">
−
#contentContainer a {
+
<div class="container">
−
font-weight: bold;
+
<div class="support-info">
−
color: #23b593;
+
<h4>OUR TEAM FOR SUPPORT</h4>
−
}
+
<div class="support-info-left">
−
 
+
<div class="col-md-10 support-info-left-bottom">
−
  /* Styling links on hover- links are different inside the menu */
+
<p>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
−
#contentContainer a:hover {
+
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of ty
−
color: #59bf92;
+
pe and scrambled</p>
−
}
+
</div>
−
 
+
<div class="col-md-2 support-info-left-top">
−
/*Change the styling of tables */
+
<img src="images/support.png" class="img-responsive" alt=""/>
−
        #contentContainer table {
+
</div>
−
    border: 1px solid #565656;
+
<div class="clearfix"> </div>
−
    border-collapse: collapse;
+
</div>
−
    width: 90%
+
<div class="support-info-right">
−
    margin: auto;
+
<div class="col-md-2 support-info-right-bottom">
−
    margin-bottom: 15px;
+
<img src="images/support.png" class="img-responsive" alt=""/>
−
    margin-top: 15px;
+
</div>
−
    margin-right: 10px;
+
<div class="col-md-10 support-info-right-top">
−
    margin-left: 10px;
+
<p>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
−
    }
+
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of ty
−
 
+
pe and scrambled</p>
−
/*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_Tsinghua_banner.jpg</i>" </p>
+
 
</div>
 
</div>
−
 
+
<div class="clearfix"> </div>
−
<!-- Start of menu -->
+
−
<div id="menuContainer">
+
−
 
+
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
−
<ul>
+
−
<a href="https://2015.igem.org/Team:Tsinghua"><li>HOME</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Team"><li>TEAM</li></a>
+
−
 
+
−
<a href="#"><li>PROJECT
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Description"><li>Description</li></a>
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Results"><li>Results</li></a> 
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Design"><li>Design</li></a>
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="#"><li>PARTS
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Parts"><li>Team Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Part_Collection"><li>Part Collection</li></a> 
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Notebook"><li>NOTEBOOK</li></a>
+
−
     
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Attributions"><li>ATTRIBUTIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Collaborations"><li>COLLABORATIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Practices"><li>HUMAN PRACTICES</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Safety"><li>SAFETY</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Modeling"><li>MODELING</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Measurement"><li>MEASUREMENT</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Software"><li>SOFTWARE</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Tsinghua/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
−
 
+
−
</ul>
+
 
</div>
 
</div>
−
<!-- End of menu  -->
+
<div class="clearfix"> </div>
−
 
+
</div>
−
<!-- Start of content -->
+
</div>
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
</div>
 +
<!--/support-->
 +
</body>
 
</html>
 
</html>

Revision as of 08:52, 17 September 2015

HOME

WHAT WOULD OUR DEAN SAYS

DR.JIMMY

lorem lipsum doolr in groem horntim

"Lorem Ipsum is simply dummy text of the printing and typesetting i ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham Lorem Ipsum is simply dummy text of the printing and typesetting i ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"

CARE

when an unknown printer took a galley of type and scrambled it to make a type speci men book

More

CARE-+

when an unknown printer took a galley of type and scrambled it to make a type speci men book

More

TRAVEL

when an unknown printer took a galley of type and scrambled it to make a type speci men book

More

FRIEND-SHIP

when an unknown printer took a galley of type and scrambled it to make a type speci men book

More

DOG-HOME

when an unknown printer took a galley of type and scrambled it to make a type speci men book

More

DOG-FOOD

when an unknown printer took a galley of type and scrambled it to make a type speci men book

More

SUBSCRIBE FOR DAILY UPDATES

FOR HELPpets-care@mail.com

OUR TEAM FOR SUPPORT

"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of ty pe and scrambled

"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of ty pe and scrambled