Difference between revisions of "Team:BIT/Interlab/test"

Line 1: Line 1:
−
<!doctype html>
+
 
−
<html>
+
<!DOCTYPE html>
 +
<!--
 +
Template Name: Jeren
 +
Author: <a href="https://www.os-templates.com/">OS Templates</a>
 +
Author URI: https://www.os-templates.com/
 +
Licence: Free to use under our free template licence terms
 +
Licence URI: https://www.os-templates.com/template-terms
 +
-->
 +
<html lang="">
 +
<!-- To declare your language - read more here: https://www.w3.org/International/questions/qa-html-language-declarations -->
 
<head>
 
<head>
 +
<title>Jeren | Pages | Basic Grid</title>
 
<meta charset="utf-8">
 
<meta charset="utf-8">
−
<title>无标题文档</title>
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 +
<link href="../layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
 +
<style type="text/css">
 +
/* DEMO ONLY */
 +
.container .demo{text-align:center;}
 +
.container .demo div{padding:8px 0;}
 +
.container .demo div:nth-child(odd){color:#FFFFFF; background:#CCCCCC;}
 +
.container .demo div:nth-child(even){color:#FFFFFF; background:#979797;}
 +
@media screen and (max-width:900px){.container .demo div{margin-bottom:0;}}
 +
/* DEMO ONLY */
 +
</style>
 
</head>
 
</head>
−
 
+
<body id="top">
−
<body background="https://static.igem.org/mediawiki/2018/e/ef/T--BIT--test.png">
+
<!-- ################################################################################################ -->
−
<h1 style="align-content: center;color: aqua;font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial,' sans-serif';"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;POLY的试验田</h1>
+
<!-- ################################################################################################ -->
−
<p style="color: chocolate;font-family: 'alex-brush';font-size: 30px">
+
<!-- ################################################################################################ -->
−
why be a king ,when you can be a god?
+
<div class="wrapper row0">
−
</p>
+
  <div id="topbar" class="hoc clear">
−
<img src="https://2018.igem.org/File:T--BIT--jpg.jpeg" width=""105  height="200"/>
+
    <!-- ################################################################################################ -->
 +
    <div class="fl_left">
 +
      <ul class="nospace">
 +
        <li><i class="fa fa-phone"></i> +00 (123) 456 7890</li>
 +
        <li><i class="fa fa-envelope-o"></i> info@domain.com</li>
 +
      </ul>
 +
    </div>
 +
    <div class="fl_right">
 +
      <ul class="nospace">
 +
        <li><a href="#"><i class="fa fa-lg fa-home"></i></a></li>
 +
        <li><a href="#">About</a></li>
 +
        <li><a href="#">Contact</a></li>
 +
        <li><a href="#">Login</a></li>
 +
        <li><a href="#">Register</a></li>
 +
      </ul>
 +
    </div>
 +
    <!-- ################################################################################################ -->
 +
  </div>
 +
</div>
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<div class="wrapper row1">
 +
  <header id="header" class="hoc clear">
 +
    <!-- ################################################################################################ -->
 +
    <div id="logo" class="fl_left">
 +
      <h1><a href="../index.html">Jeren</a></h1>
 +
    </div>
 +
    <nav id="mainav" class="fl_right">
 +
      <ul class="clear">
 +
        <li><a href="../index.html">Home</a></li>
 +
        <li class="active"><a class="drop" href="#">Pages</a>
 +
          <ul>
 +
            <li><a href="gallery.html">Gallery</a></li>
 +
            <li><a href="full-width.html">Full Width</a></li>
 +
            <li><a href="sidebar-left.html">Sidebar Left</a></li>
 +
            <li><a href="sidebar-right.html">Sidebar Right</a></li>
 +
            <li class="active"><a href="basic-grid.html">Basic Grid</a></li>
 +
          </ul>
 +
        </li>
 +
        <li><a class="drop" href="#">Dropdown</a>
 +
          <ul>
 +
            <li><a href="#">Level 2</a></li>
 +
            <li><a class="drop" href="#">Level 2 + Drop</a>
 +
              <ul>
 +
                <li><a href="#">Level 3</a></li>
 +
                <li><a href="#">Level 3</a></li>
 +
                <li><a href="#">Level 3</a></li>
 +
              </ul>
 +
            </li>
 +
            <li><a href="#">Level 2</a></li>
 +
          </ul>
 +
        </li>
 +
        <li><a href="#">Link Text</a></li>
 +
        <li><a href="#">Link Text</a></li>
 +
      </ul>
 +
    </nav>
 +
    <!-- ################################################################################################ -->
 +
  </header>
 +
</div>
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<div class="bgded overlay" style="background-image:url('../images/demo/backgrounds/01.png');">
 +
  <div id="breadcrumb" class="hoc clear">
 +
    <!-- ################################################################################################ -->
 +
    <ul>
 +
      <li><a href="#">Home</a></li>
 +
      <li><a href="#">Lorem</a></li>
 +
      <li><a href="#">Ipsum</a></li>
 +
      <li><a href="#">Dolor</a></li>
 +
    </ul>
 +
    <!-- ################################################################################################ -->
 +
  </div>
 +
</div>
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<div class="wrapper row3">
 +
  <main class="hoc container clear">
 +
    <!-- main body -->
 +
    <!-- ################################################################################################ -->
 +
    <div class="content">
 +
      <!-- ################################################################################################ -->
 +
      <h2>Half</h2>
 +
      <!-- ################################################################################################ -->
 +
      <div class="group btmspace-50 demo">
 +
        <div class="one_half first">1/2</div>
 +
        <div class="one_half">1/2</div>
 +
      </div>
 +
      <!-- ################################################################################################ -->
 +
      <h2>Quarter</h2>
 +
      <!-- ################################################################################################ -->
 +
      <div class="group btmspace-50 demo">
 +
        <div class="one_quarter first">1/4</div>
 +
        <div class="one_quarter">1/4</div>
 +
        <div class="one_quarter">1/4</div>
 +
        <div class="one_quarter">1/4</div>
 +
      </div>
 +
      <div class="group btmspace-50 demo">
 +
        <div class="one_quarter first">1/4</div>
 +
        <div class="one_quarter">1/4</div>
 +
        <div class="two_quarter">2/4 or 1/2</div>
 +
      </div>
 +
      <div class="group btmspace-50 demo">
 +
        <div class="one_quarter first">1/4</div>
 +
        <div class="three_quarter">3/4</div>
 +
      </div>
 +
      <!-- ################################################################################################ -->
 +
      <h2>Third</h2>
 +
      <!-- ################################################################################################ -->
 +
      <div class="group btmspace-50 demo">
 +
        <div class="one_third first">1/3</div>
 +
        <div class="one_third">1/3</div>
 +
        <div class="one_third">1/3</div>
 +
      </div>
 +
      <div class="group demo">
 +
        <div class="one_third first">1/3</div>
 +
        <div class="two_third">2/3</div>
 +
      </div>
 +
      <!-- ################################################################################################ -->
 +
    </div>
 +
    <!-- ################################################################################################ -->
 +
    <!-- / main body -->
 +
    <div class="clear"></div>
 +
  </main>
 +
</div>
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<div class="wrapper row4">
 +
  <footer id="footer" class="hoc clear">
 +
    <!-- ################################################################################################ -->
 +
    <div class="one_third first">
 +
      <h6 class="heading">Risus lacus ut lectus</h6>
 +
      <ul class="nospace btmspace-30 linklist contact">
 +
        <li><i class="fa fa-map-marker"></i>
 +
          <address>
 +
          Street Name &amp; Number, Town, Postcode/Zip
 +
          </address>
 +
        </li>
 +
        <li><i class="fa fa-phone"></i> +00 (123) 456 7890</li>
 +
        <li><i class="fa fa-envelope-o"></i> info@domain.com</li>
 +
      </ul>
 +
      <ul class="faico clear">
 +
        <li><a class="faicon-facebook" href="#"><i class="fa fa-facebook"></i></a></li>
 +
        <li><a class="faicon-twitter" href="#"><i class="fa fa-twitter"></i></a></li>
 +
        <li><a class="faicon-dribble" href="#"><i class="fa fa-dribbble"></i></a></li>
 +
        <li><a class="faicon-linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
 +
        <li><a class="faicon-google-plus" href="#"><i class="fa fa-google-plus"></i></a></li>
 +
        <li><a class="faicon-vk" href="#"><i class="fa fa-vk"></i></a></li>
 +
      </ul>
 +
    </div>
 +
    <div class="one_third">
 +
      <h6 class="heading">Massa consequat tellus</h6>
 +
      <ul class="nospace linklist">
 +
        <li>
 +
          <article>
 +
            <h2 class="nospace font-x1"><a href="#">Non efficitur lacus elit</a></h2>
 +
            <time class="font-xs block btmspace-10" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
 +
            <p class="nospace">Metus mauris luctus lacinia posuere aenean nec cursus mi nunc ornare interdum [&hellip;]</p>
 +
          </article>
 +
        </li>
 +
        <li>
 +
          <article>
 +
            <h2 class="nospace font-x1"><a href="#">Ut ipsum vestibulum et fringilla</a></h2>
 +
            <time class="font-xs block btmspace-10" datetime="2045-04-05">Thursday, 5<sup>th</sup> April 2045</time>
 +
            <p class="nospace">Nunc vitae porttitor ipsum in hac habitasse platea dictumst in quis arcu ac [&hellip;]</p>
 +
          </article>
 +
        </li>
 +
      </ul>
 +
    </div>
 +
    <div class="one_third">
 +
      <h6 class="heading">Praesent porttitor pulvinar</h6>
 +
      <p class="nospace btmspace-30">Ligula euismod lacinia eget hendrerit nunc mauris ultrices mauris vel.</p>
 +
      <form method="post" action="#">
 +
        <fieldset>
 +
          <legend>Newsletter:</legend>
 +
          <input class="btmspace-15" type="text" value="" placeholder="Name">
 +
          <input class="btmspace-15" type="text" value="" placeholder="Email">
 +
          <button type="submit" value="submit">Submit</button>
 +
        </fieldset>
 +
      </form>
 +
    </div>
 +
    <!-- ################################################################################################ -->
 +
  </footer>
 +
</div>
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<div class="wrapper row5">
 +
  <div id="copyright" class="hoc clear">
 +
    <!-- ################################################################################################ -->
 +
    <p class="fl_left">Copyright &copy; 2018 - All Rights Reserved - <a href="#">Domain Name</a></p>
 +
    <p class="fl_right">Template by <a target="_blank" href="https://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
 +
    <!-- ################################################################################################ -->
 +
  </div>
 +
</div>
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
 +
<!-- JAVASCRIPTS -->
 +
<script src="../layout/scripts/jquery.min.js"></script>
 +
<script src="../layout/scripts/jquery.backtotop.js"></script>
 +
<script src="../layout/scripts/jquery.mobilemenu.js"></script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 04:09, 20 July 2018

<!DOCTYPE html> Jeren | Pages | Basic Grid

  • +00 (123) 456 7890
  • info@domain.com

Half

1/2
1/2

Quarter

1/4
1/4
1/4
1/4
1/4
1/4
2/4 or 1/2
1/4
3/4

Third

1/3
1/3
1/3
1/3
2/3
Risus lacus ut lectus
  • Street Name & Number, Town, Postcode/Zip
  • +00 (123) 456 7890
  • info@domain.com
Massa consequat tellus
Praesent porttitor pulvinar

Ligula euismod lacinia eget hendrerit nunc mauris ultrices mauris vel.

Newsletter: