Difference between revisions of "Template:IONIS Paris-test"

Line 1: Line 1:
 
{{IONIS_Paris-testcss}}
 
{{IONIS_Paris-testcss}}
 +
<!DOCTYPE HTML>
 +
<!--
 +
Strongly Typed by HTML5 UP
 +
html5up.net | @n33co
 +
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 +
-->
 
<html>
 
<html>
−
<head>
+
<head>
−
<link rel="shortcut icon" href="https://static.igem.org/mediawiki/2015/3/36/Couverture_IONIS.jpg">
+
<title>Right Sidebar - Strongly Typed by HTML5 UP</title>
−
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
+
<meta charset="utf-8" />
−
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
−
</head>
+
<!--[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 class="right-sidebar">
 +
<div id="page-wrapper">
  
−
<div class="container">
+
<!-- Header -->
−
           
+
<div id="header-wrapper">
−
                <nav class="section-title-container heat-stress-section clearfix">
+
<div id="header" class="container">
−
               
+
−
                    <a class="heat-stress-button">
+
−
                        <div class="section-title heat-stress active-title">
+
−
                            <h3>
+
−
                                Heat
+
−
                                Stress
+
−
                            </h3>
+
−
                        </div>             
+
−
                    </a>
+
  
−
                    <a class="uv-radiation-button">
+
<!-- Logo -->
−
                        <div class="section-title uv-radiation non-active-title">
+
<h1 id="logo"><a href="index.html">Strongly Typed</a></h1>
−
                            <h3>
+
<p>A responsive HTML5 site template. Manufactured by HTML5 UP.</p>
−
                                UV
+
−
                                Radiation
+
−
                            </h3>
+
−
                        </div>
+
−
                    </a>
+
  
−
                    <a class="pollens-button">
+
<!-- Nav -->
−
                        <div class="section-title pollens non-active-title">
+
<nav id="nav">
−
                            <h3>
+
<ul>
−
                                Pollens
+
<li><a class="icon fa-home" href="index.html"><span>Introduction</span></a></li>
−
                            </h3>
+
<li>
−
                        </div>
+
<a href="#" class="icon fa-bar-chart-o"><span>Dropdown</span></a>
−
                    </a>
+
<ul>
 +
<li><a href="#">Lorem ipsum dolor</a></li>
 +
<li><a href="#">Magna phasellus</a></li>
 +
<li><a href="#">Etiam dolore nisl</a></li>
 +
<li>
 +
<a href="#">Phasellus consequat</a>
 +
<ul>
 +
<li><a href="#">Magna phasellus</a></li>
 +
<li><a href="#">Etiam dolore nisl</a></li>
 +
<li><a href="#">Phasellus consequat</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#">Veroeros feugiat</a></li>
 +
</ul>
 +
</li>
 +
<li><a class="icon fa-cog" href="left-sidebar.html"><span>Left Sidebar</span></a></li>
 +
<li><a class="icon fa-retweet" href="right-sidebar.html"><span>Right Sidebar</span></a></li>
 +
<li><a class="icon fa-sitemap" href="no-sidebar.html"><span>No Sidebar</span></a></li>
 +
</ul>
 +
</nav>
  
−
                    <a class="air-pollution-button">
+
</div>
−
                        <div class="section-title air-pollution non-active-title">
+
</div>
−
                            <h3>
+
−
                                Air
+
−
                                Pollution
+
−
                            </h3>
+
−
                        </div>
+
−
                    </a>
+
−
                   
+
−
                </nav>
+
−
</div>
+
  
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
<!-- Main -->
 +
<div id="main-wrapper">
 +
<div id="main" class="container">
 +
<div class="row">
  
 +
<!-- Content -->
 +
<div id="content" class="8u 12u(mobile)">
  
 +
<!-- Post -->
 +
<article class="box post">
 +
<header>
 +
<h2>Behold! This is the <strong>right sidebar</strong> layout<br />
 +
with a sidebar on the right!</h2>
 +
</header>
 +
<span class="image featured"><img src="images/pic04.jpg" alt="" /></span>
 +
<h3>Right is also not left</h3>
 +
<p>Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit
 +
ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris
 +
sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada
 +
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
 +
magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros
 +
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
 +
justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
 +
mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique.
 +
Curabitur leo nibh, rutrum eu malesuada in, tristique at erat.</p>
 +
<p>Erat lorem ipsum veroeros consequat magna tempus lorem ipsum consequat
 +
Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula
 +
vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet
 +
magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada in,
 +
tristique at erat. Curabitur leo nibh, rutrum eu malesuada  in, tristique
 +
at erat lorem ipsum dolor sit amet lorem ipsum sed consequat magna
 +
tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros consequat
 +
magna tempus</p>
 +
<p>Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit
 +
ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris
 +
sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada
 +
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
 +
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
 +
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
 +
magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros
 +
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
 +
justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
 +
mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique.
 +
Curabitur leo nibh, rutrum eu malesuada in, tristique at erat.</p>
 +
<h3>Accumsan lorem ipsum veroeros</h3>
 +
<p>Consequat Phasellus laoreet massa id in, tristique at erat lorem
 +
ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros
 +
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
 +
justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
 +
mollis tortor congue. Sed quis mauris sit amet magna.</p>
 +
<p>Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit
 +
ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris
 +
sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada
 +
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
 +
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
 +
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
 +
magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros
 +
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
 +
justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
 +
mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique.
 +
Curabitur leo nibh, rutrum eu malesuada in, tristique at erat.</p>
 +
<h3>Ligula suspcipit fusce veroeros</h3>
 +
<p>Nullam dolore etiam sed massa id in, tristique at erat lorem
 +
ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros
 +
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
 +
justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
 +
mollis tortor congue. Sed quis mauris sit amet magna.</p>
 +
<p>Sed massa id justo mattis pharetra. Fusce suscipit
 +
ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris
 +
sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada
 +
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
 +
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
 +
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
 +
magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros
 +
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
 +
justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
 +
mollis tortor congue. Sed quis mauris sit amet magna accumsan.</p>
 +
</article>
 +
 +
</div>
 +
 +
<!-- Sidebar -->
 +
<div id="sidebar" class="4u 12u(mobile)">
 +
 +
<!-- Excerpts -->
 +
<section>
 +
<ul class="divided">
 +
<li>
 +
 +
<!-- Excerpt -->
 +
<article class="box excerpt">
 +
<header>
 +
<span class="date">July 30</span>
 +
<h3><a href="#">Just another post</a></h3>
 +
</header>
 +
<p>Lorem ipsum dolor odio facilisis convallis. Etiam non nunc vel est
 +
suscipit convallis non id orci lorem ipsum sed magna consequat feugiat lorem dolore.</p>
 +
</article>
 +
 +
</li>
 +
<li>
 +
 +
<!-- Excerpt -->
 +
<article class="box excerpt">
 +
<header>
 +
<span class="date">July 28</span>
 +
<h3><a href="#">And another post</a></h3>
 +
</header>
 +
<p>Lorem ipsum dolor odio facilisis convallis. Etiam non nunc vel est
 +
suscipit convallis non id orci lorem ipsum sed magna consequat feugiat lorem dolore.</p>
 +
</article>
 +
 +
</li>
 +
<li>
 +
 +
<!-- Excerpt -->
 +
<article class="box excerpt">
 +
<header>
 +
<span class="date">July 24</span>
 +
<h3><a href="#">One more post</a></h3>
 +
</header>
 +
<p>Lorem ipsum dolor odio facilisis convallis. Etiam non nunc vel est
 +
suscipit convallis non id orci lorem ipsum sed magna consequat feugiat lorem dolore.</p>
 +
</article>
 +
 +
</li>
 +
</ul>
 +
</section>
 +
 +
<!-- Highlights -->
 +
<section>
 +
<ul class="divided">
 +
<li>
 +
 +
<!-- Highlight -->
 +
<article class="box highlight">
 +
<header>
 +
<h3><a href="#">Something of note</a></h3>
 +
</header>
 +
<a href="#" class="image left"><img src="images/pic06.jpg" alt="" /></a>
 +
<p>Phasellus  sed laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam
 +
viverra sit amet mollis tortor congue magna lorem ipsum dolor et quisque ut odio facilisis
 +
convallis. Etiam non nunc vel est suscipit convallis non id orci. Ut interdum tempus
 +
facilisis convallis. Etiam non nunc vel est suscipit convallis non id orci.</p>
 +
<ul class="actions">
 +
<li><a href="#" class="button icon fa-file">Learn More</a></li>
 +
</ul>
 +
</article>
 +
 +
</li>
 +
<li>
 +
 +
<!-- Highlight -->
 +
<article class="box highlight">
 +
<header>
 +
<h3><a href="#">Something of less note</a></h3>
 +
</header>
 +
<a href="#" class="image left"><img src="images/pic07.jpg" alt="" /></a>
 +
<p>Phasellus  sed laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam
 +
viverra sit amet mollis tortor congue magna lorem ipsum dolor et quisque ut odio facilisis
 +
convallis. Etiam non nunc vel est suscipit convallis non id orci. Ut interdum tempus
 +
facilisis convallis. Etiam non nunc vel est suscipit convallis non id orci.</p>
 +
<ul class="actions">
 +
<li><a href="#" class="button icon fa-file">Learn More</a></li>
 +
</ul>
 +
</article>
 +
 +
</li>
 +
</ul>
 +
</section>
 +
 +
</div>
 +
 +
</div>
 +
</div>
 +
</div>
 +
 +
<!-- Footer -->
 +
<div id="footer-wrapper">
 +
<div id="footer" class="container">
 +
<header>
 +
<h2>Questions or comments? <strong>Get in touch:</strong></h2>
 +
</header>
 +
<div class="row">
 +
<div class="6u 12u(mobile)">
 +
<section>
 +
<form method="post" action="#">
 +
<div class="row 50%">
 +
<div class="6u 12u(mobile)">
 +
<input name="name" placeholder="Name" type="text" />
 +
</div>
 +
<div class="6u 12u(mobile)">
 +
<input name="email" placeholder="Email" type="text" />
 +
</div>
 +
</div>
 +
<div class="row 50%">
 +
<div class="12u">
 +
<textarea name="message" placeholder="Message"></textarea>
 +
</div>
 +
</div>
 +
<div class="row 50%">
 +
<div class="12u">
 +
<a href="#" class="form-button-submit button icon fa-envelope">Send Message</a>
 +
</div>
 +
</div>
 +
</form>
 +
</section>
 +
</div>
 +
<div class="6u 12u(mobile)">
 +
<section>
 +
<p>Erat lorem ipsum veroeros consequat magna tempus lorem ipsum consequat Phaselamet
 +
mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique. Curabitur
 +
leo nibh, rutrum eu malesuada.</p>
 +
<div class="row">
 +
<div class="6u 12u(mobile)">
 +
<ul class="icons">
 +
<li class="icon fa-home">
 +
1234 Somewhere Road<br />
 +
Nashville, TN 00000<br />
 +
USA
 +
</li>
 +
<li class="icon fa-phone">
 +
(000) 000-0000
 +
</li>
 +
<li class="icon fa-envelope">
 +
<a href="#">info@untitled.tld</a>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="6u 12u(mobile)">
 +
<ul class="icons">
 +
<li class="icon fa-twitter">
 +
<a href="#">@untitled-tld</a>
 +
</li>
 +
<li class="icon fa-instagram">
 +
<a href="#">instagram.com/untitled-tld</a>
 +
</li>
 +
<li class="icon fa-dribbble">
 +
<a href="#">dribbble.com/untitled-tld</a>
 +
</li>
 +
<li class="icon fa-facebook">
 +
<a href="#">facebook.com/untitled-tld</a>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</section>
 +
</div>
 +
</div>
 +
</div>
 +
<div id="copyright" class="container">
 +
<ul class="links">
 +
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
 +
</div>
 +
 +
<!-- Scripts -->
 +
<script src="assets/js/jquery.min.js"></script>
 +
<script src="assets/js/jquery.dropotron.min.js"></script>
 +
<script src="assets/js/skel.min.js"></script>
 +
<script src="assets/js/skel-viewport.min.js"></script>
 +
<script src="assets/js/util.js"></script>
 +
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
 +
<script src="assets/js/main.js"></script>
 +
 +
</body>
 
</html>
 
</html>

Revision as of 15:12, 16 July 2015

<!DOCTYPE HTML> Right Sidebar - Strongly Typed by HTML5 UP

Behold! This is the right sidebar layout
with a sidebar on the right!

Right is also not left

Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada in, tristique at erat.

Erat lorem ipsum veroeros consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada in, tristique at erat. Curabitur leo nibh, rutrum eu malesuada in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros consequat magna tempus

Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada in, tristique at erat.

Accumsan lorem ipsum veroeros

Consequat Phasellus laoreet massa id in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet magna.

Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada in, tristique at erat.

Ligula suspcipit fusce veroeros

Nullam dolore etiam sed massa id in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet magna.

Sed massa id justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet magna accumsan.