Skip to content

Instantly share code, notes, and snippets.

@Mixone-FinallyHere

Mixone-FinallyHere/Hornbostel SA.markdown

Last active October 10, 2015 09:40
Show Gist options
  • Save Mixone-FinallyHere/c41b099d6e7bccecfc83 to your computer and use it in GitHub Desktop.
Save Mixone-FinallyHere/c41b099d6e7bccecfc83 to your computer and use it in GitHub Desktop.
Download ZIP
Hornbostel SA
Raw
index.html
<html>
<body>
<div id="title">
<h1>HORNBOSTEL & Co S.A.</h1>
<h2>METAL DIVISION</h2>
</div>
<img id="separator" src="https://cryptowise.net/separator1.png" </img>
<div id="nav-wrapper">
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<nav>
<ul id="navigation">
<li><a href="#middle" title="Lorum ipsum dolor sit amet">Middle</a></li>
<li><a href="#test" title="Aliquam tincidunt mauris eu risus">Test</a></li>
<li><a href="#contents" title="Morbi in sem quis dui placerat ornare">Contents</a></li>
<li><a href="#mine" title="Praesent dapibus, neque id cursus faucibus">Mine</a></li>
<li><a href="#title" title="Pellentesque fermentum dolor">Title</a></li>
</ul>
</nav>
<div id="contents">
<h1>Introduction</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</div>
<img id="mine" src="http://images.freeimages.com/images/previews/067/mine-1251557.jpg" </img>
<h1 id="test">Test parragraph</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2 id="middle">Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<div id="level3">
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
<div class="leftColumn clearfix">
<div class="box newsletter">
<time datetime="2015-10-08">08 October 2015</time>
<h3>e-newsletter</h3>
<a href="/health/newsletter/newsletter_en.htm"><span><strong style="left: 0px;">Ensuring that safe surplus food reaches those in greatest need</strong></span></a>
</div>
<div class="dynPanel" id="N70FD4">
<!--start_latest_updates-->
<div class="contentBox lastestUpdatesWrapper">
<h3>Latest updates</h3>
<div class="content">
<ul>
<li class="item">
<a href="/dgs/health_food-safety/dyna/enews/enews.cfm?al_id=1625" target="_blank">8-9 October: Conference on European Reference Networks</a>
<br>
<small>Released <time datetime="10/07/2015 16:25:00">07 October 2015</time>
</small>
</li>
<li class="item">
<a href="/health/ern/docs/faq_establishing_ern_en.pdf" target="_blank">Frequently Asked Questions (FAQs) on the procedural aspects on establishing ERNs</a>
<br>
<small>Released <time datetime="10/06/2015 10:25:00">06 October 2015</time>
</small>
</li>
<li class="item">
<a href="/health/ern/events/ev_20151008_en.htm#f" target="_blank">Web streaming - 2nd conference on European Reference Networks (Lisbon, 8-9 October 2015)</a>
<br>
<small>Released <time datetime="10/05/2015 16:43:00">05 October 2015</time>
</small>
</li>
</ul>
<ul class="actions">
<li>
<a class="rss" title="Subscribe to RSS" href="/health/rss/latest_updates/ern/latest_updates_en.rss">Subscribe to RSS</a>
</li>
<li>
<a class="more" href="/health/ern/latest_updates/index_en.htm">More <i class="icon-blue icon-circle-arrow-right"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dynPanel" id="N70FE4">
<!--start_related_docs-->
<div class="contentBox quickLinksWrapper">
<h3>Related information</h3>
<ul class="content">
<li class="pressLink">
<a href="/health/ern/press_material/index_en.htm"><i class="sprite sprite-fountain_pen"></i> Press material</a>
</li>
<li class="keyDocumentsLink">
<a href="/health/ern/key_documents/index_en.htm"><i class="sprite sprite-file_cabinet_2"></i> Key documents</a>
</li>
<li class="eventsLink">
<a href="/health/ern/events/index_en.htm"><i class="sprite sprite-calendar"></i> Events</a>
</li>
<li class="consultationsLink">
<a href="/health/ern/consultations/index_en.htm"><i class="sprite sprite-clipboard"></i> Consultations</a>
</li>
<li class="projectsLink">
<a href="/health/ern/projects/index_en.htm"><i class="sprite sprite-presentation"></i> Projects</a>
</li>
</ul>
<div class="end"></div>
</div>
</div>
</div>
</body>
</html>
Raw
style.css
html {
margin: 0;
padding: 0;
}
body {
font: 100% Arial, Helvetica, sans-serif;
color: #333;
background: url(http://net2net.com/wp-content/uploads/2015/04/plain-light-color-for-guest-background.jpg) no-repeat;
background-size: 100% 100%;
margin: 20px;
padding: 0;
}
p {
font-size: 1em;
line-height;
1.4em;
margin: 0.7em 0 0.7em 0;
padding: 0;
text-align: justify;
}
a:link {
font-weight: bold;
text-decoration: none;
color: #B1DF;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #C35;
}
a:hover,
a:focus,
a:active {
text-decoration: underline;
color: #555559;
}
div {}
/* specific divs */
#title {
text-align: center;
}
#title h1 {
font: bold 6em monospace;
color: black;
margin-bottom: 0;
}
#title h2 {
margin-top: 0;
font: bold 3em monospace;
color: black;
}
#separator {
display: block;
margin: 0 auto;
}
#mine {
display: block;
margin: 0 auto;
border-radius: 500px;
padding: 20px;
width: auto;
height: auto;
float: right;
}
#contents {
width: 50%;
float: left;
}
#test {
width: 50%;
}
#level3 {
width: 50%;
}
.leftColumn {
padding: 10px 10px 0 10px;
}
#navigation {
position: fixed;
top: 20px;
right: 20px;
}
#nav-wrapper {
margin:0 auto;
padding:20px 0;
}
ul#nav {
font-family: Verdana;
font-size:14px;
list-style:none;
margin:0 auto;
padding:0;
overflow: auto;
}
ul#nav li {
display:inline;
}
ul#nav li a {
text-decoration:none;
display: block;
padding:5px 21px;
background:#5F3222;
color:#eee;
float:left;
text-align:center;
border-top:2px solid #815444;
border-right:2px solid #3d1000;
border-bottom:2px solid #3d1000;
border-left:2px solid #815444;
}
ul#nav li a:hover {
background:#a37666;
color:#000;
border-top:2px solid #815444;
border-right:2px solid #c59888;
border-bottom:2px solid #c59888;
border-left:2px solid #815444;
}
ul#navigation li a {
text-decoration:none;
display: block;
padding:5px 21px;
background:#5F3222;
color:#eee;
float:left;
text-align:center;
border-top:2px solid #815444;
border-right:2px solid #3d1000;
border-bottom:2px solid #3d1000;
border-left:2px solid #815444;
}
ul#navigation li a:hover {
background:#a37666;
color:#000;
border-top:2px solid #815444;
border-right:2px solid #c59888;
border-bottom:2px solid #c59888;
border-left:2px solid #815444;
}
Raw
styles
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment