Merge branch 'fixup-menu' into 'master'
Add menu with named anchor links Closes #27 See merge request autonomic-cooperative/autonomic-cooperative.gitlab.io!12
This commit is contained in:
Luke M
commit
f136067359
12
src/_includes/contact.html
Normal file
12
src/_includes/contact.html
Normal file
@ -0,0 +1,12 @@
|
||||
<a class="named-anchor" name="contact"></a>
|
||||
<section id="contact" class="wrapper style5 special">
|
||||
<header class="major">
|
||||
<h2>Get in Touch</h2>
|
||||
<p>Contact us to discuss your project's needs and arrange a consultation.</p>
|
||||
<p>We're available at <a href="mailto:autonomic@posteo.net">autonomic@posteo.net</a></p>
|
||||
<p>
|
||||
If you use encrypted email, here is our <a href="{{ "/assets/pgp/autonomic-key.asc" | relative_url }}">PGP key</a>.
|
||||
Our key fingerprint is: <br/><code id="fingerprint">82FC 87C5 1A71 902F DC10 2CF5 4F90 D55B B24B 1147</code>
|
||||
</p>
|
||||
</header>
|
||||
</section>
|
||||
@ -1,11 +1,14 @@
|
||||
<!-- One -->
|
||||
<a class="named-anchor" name="core-values"></a>
|
||||
<section id="one" class="wrapper style5 special">
|
||||
<div class="inner">
|
||||
<header class="major">
|
||||
<h2>Autonomic is a co-operative<br />
|
||||
that is owned and run by its workers</h2>
|
||||
<p>We build technologies and infrastructure to empower users to make a positive</br>
|
||||
impact on the world. All of our services reflect our commitment to our core values:</p>
|
||||
<h2>
|
||||
Autonomic is a co-operative<br/>that is owned and run by its workers
|
||||
</h2>
|
||||
<p>
|
||||
We build technologies and infrastructure to empower users to make a positive</br>
|
||||
impact on the world. All of our services reflect our commitment to our core values:
|
||||
</p>
|
||||
</header>
|
||||
<ul class="icons major icons--flex">
|
||||
<li>
|
||||
@ -1,12 +0,0 @@
|
||||
<!-- CTA -->
|
||||
<section id="cta" class="wrapper style4">
|
||||
<div class="inner">
|
||||
<header>
|
||||
<h2>Get in Touch</h2>
|
||||
<p>Contact us to discuss your project's needs and arrange a consultation.</p>
|
||||
</header>
|
||||
<ul class="actions vertical">
|
||||
<li><a href="{{ "/contact" | relative_url }}" class="button fit special">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,7 +1,4 @@
|
||||
<!-- Page Wrapper -->
|
||||
<div id="page-wrapper">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header" {% if page.layout == 'default' %} class="alt" {% endif %}>
|
||||
<h1><a href="{{ "/" | absolute_url }}">Autonomic</a></h1>
|
||||
<nav id="nav">
|
||||
@ -10,18 +7,11 @@
|
||||
<a href="#menu" class="menuToggle"><span>Menu</span></a>
|
||||
<div id="menu">
|
||||
<ul>
|
||||
{% for page in site.pages %}
|
||||
{% if page.layout == "default" %}
|
||||
<li><a href="{{ page.url | absolute_url }}">{{ page.title }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for page in site.pages %}
|
||||
{% if page.layout == "page" or page.layout == "spotlight" %}
|
||||
{% unless page.hidden %}
|
||||
<li><a href="{{ page.url | absolute_url }}">{{ page.title }}</a></li>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<li><a href="{{ "/" | relative_url }}">Home</a></li>
|
||||
<li><a href="{{ "/#core-values" | relative_url }}">Our Core Values</a></li>
|
||||
<li><a href="{{ "/blog" | relative_url }}">Blog</a></li>
|
||||
<li><a href="{{ "/#services" | relative_url }}">Services We Offer</a></li>
|
||||
<li><a href="{{ "/#contact" | relative_url }}">Get In Touch</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
<!-- Three -->
|
||||
<section id="three" class="wrapper style6 special">
|
||||
<div class="inner">
|
||||
<header class="major">
|
||||
<h2>Services we offer</h2>
|
||||
<p>We design integrated infrastructure tailored to your needs utilising technologies from<br />the
|
||||
best free and open source software projects available. Your data under your control. <br />Here are some examples of the
|
||||
applications we have deployed for our clients.</p>
|
||||
</header>
|
||||
<ul class="features">
|
||||
<li class="icon fa-paper-plane-o">
|
||||
<h3>Encrypted Email</h3>
|
||||
<p>Secure your email communications with state of the art transport encryption and <a href="https://0xacab.org/riseuplabs/trees">TREES</a> encrypted mailbox storage.</p>
|
||||
</li>
|
||||
<li class="icon fa-rocket2">
|
||||
<h3>Text and Video Chat</h3>
|
||||
<p>Mobile friendly multi-channel team chat using <a href="https://rocket.chat/">Rocket.Chat</a>, with no artificial limits on features. Vital for remote project coordination.</p>
|
||||
</li>
|
||||
<li class="icon fa-cloud-o">
|
||||
<h3>Cloud Storage and Collaboration</h3>
|
||||
<p><a href="https://sandstorm.io/">Sandstorm</a> is a personal "cloud in a box" , designed with the upmost security in mind. It allows you to deploy apps for file-storage, collaborative document editing, calendars, to-do lists and much more.</p>
|
||||
</li>
|
||||
<li class="icon fa-headphones">
|
||||
<h3>Voice Conferencing</h3>
|
||||
<p>Stable and low latency voice communications using <a href="https://wiki.mumble.info/wiki/Main_Page">Mumble</a>. Perfect for meetings, even with large groups, on mobile, or with low bandwidth.</p>
|
||||
</li>
|
||||
<li class="icon fa-comments-o">
|
||||
<h3>Forum and Mailing Lists</h3>
|
||||
<p>Build your online community with a modern and responsive forum with <a href="https://www.discourse.org/">Discourse</a>. An accessible replacement for traditional mailing lists.</p>
|
||||
</li>
|
||||
<li class="icon fa-map-o">
|
||||
<h3>Interactive Data and Mapping</h3>
|
||||
<p>Got some data? We can provide a variety of interactive data visualisations, including mapping using <a href="https://www.openstreetmap.org">OpenStreetMap</a>, and charts using <a href="https://d3js.org/">D3.js</a>. Get the most out of your data by presenting it in a bespoke web app.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
64
src/_includes/services.html
Normal file
64
src/_includes/services.html
Normal file
@ -0,0 +1,64 @@
|
||||
<a class="named-anchor" name="services"></a>
|
||||
<section id="three" class="wrapper style6 special">
|
||||
<div class="inner">
|
||||
<header class="major">
|
||||
<h2>Services we offer</h2>
|
||||
<p>
|
||||
We design integrated infrastructure tailored to your needs utilising
|
||||
technologies from <br/> the best free and open source software projects
|
||||
available. Your data under your control.<br/> Here are some examples of
|
||||
the applications we have deployed for our clients.
|
||||
</p>
|
||||
</header>
|
||||
<ul class="features">
|
||||
<li class="icon fa-paper-plane-o">
|
||||
<h3>Encrypted Email</h3>
|
||||
<p>
|
||||
Secure your email communications with state of the art transport
|
||||
encryption and <a href="https://0xacab.org/riseuplabs/trees">TREES</a>
|
||||
encrypted mailbox storage.
|
||||
</p>
|
||||
</li>
|
||||
<li class="icon fa-rocket2">
|
||||
<h3>Text and Video Chat</h3>
|
||||
<p>
|
||||
Mobile friendly multi-channel team chat using <a href="https://rocket.chat/">Rocket.Chat</a>,
|
||||
with no artificial limits on features. Vital for remote project coordination.
|
||||
</p>
|
||||
</li>
|
||||
<li class="icon fa-cloud-o">
|
||||
<h3>Cloud Storage and Collaboration</h3>
|
||||
<p>
|
||||
<a href="https://sandstorm.io/">Sandstorm</a> is a personal "cloud
|
||||
in a box" , designed with the upmost security in mind. It allows you to
|
||||
deploy apps for file-storage, collaborative document editing,
|
||||
calendars, to-do lists and much more.
|
||||
</p>
|
||||
</li>
|
||||
<li class="icon fa-headphones">
|
||||
<h3>Voice Conferencing</h3>
|
||||
<p>
|
||||
Stable and low latency voice communications using <a href="https://wiki.mumble.info/wiki/Main_Page">Mumble</a>.
|
||||
Perfect for meetings, even with large groups, on mobile, or with low bandwidth.
|
||||
</p>
|
||||
</li>
|
||||
<li class="icon fa-comments-o">
|
||||
<h3>Forum and Mailing Lists</h3>
|
||||
<p>
|
||||
Build your online community with a modern and responsive forum with
|
||||
<a href="https://www.discourse.org/">Discourse</a>. An accessible
|
||||
replacement for traditional mailing lists.
|
||||
</p>
|
||||
</li>
|
||||
<li class="icon fa-map-o">
|
||||
<h3>Interactive Data and Mapping</h3>
|
||||
<p>
|
||||
Got some data? We can provide a variety of interactive data
|
||||
visualisations, including mapping using <a href="https://www.openstreetmap.org">OpenStreetMap</a>,
|
||||
and charts using <a href="https://d3js.org/">D3.js</a>. Get the most out of your
|
||||
data by presenting it in a bespoke web app.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,21 +1,14 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Spectral by HTML5 UP
|
||||
html5up.net | @ajlkn
|
||||
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
||||
-->
|
||||
<html>
|
||||
{% include head.html %}
|
||||
|
||||
<body class="landing">
|
||||
{% include header.html %}
|
||||
{% include banner.html %}
|
||||
{% include section-one.html %}
|
||||
{% include section-two.html %}
|
||||
{% include section-three.html %}
|
||||
{% include cta.html %}
|
||||
{% include core-values.html %}
|
||||
{% include blog.html %}
|
||||
{% include services.html %}
|
||||
{% include contact.html %}
|
||||
{% include footer.html %}
|
||||
{% include foot-scripts.html %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
37
src/assets/styles/components/_contact.scss
Normal file
37
src/assets/styles/components/_contact.scss
Normal file
@ -0,0 +1,37 @@
|
||||
#contact {
|
||||
header {
|
||||
@include vendor('order', '1');
|
||||
|
||||
p {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include vendor('order', '2');
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
header {
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 20em;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
.actions {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
|
||||
|
||||
|
||||
|
||||
/* CTA */
|
||||
|
||||
#cta {
|
||||
.inner {
|
||||
@include vendor('display', 'flex');
|
||||
max-width: 45em;
|
||||
|
||||
header {
|
||||
@include vendor('order', '1');
|
||||
padding-right: 3em;
|
||||
width: 70%;
|
||||
|
||||
p {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include vendor('order', '2');
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
header {
|
||||
padding-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 20em;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(small) {
|
||||
.actions {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -42,7 +42,7 @@
|
||||
@import 'components/menu';
|
||||
@import 'components/header';
|
||||
@import 'components/banner';
|
||||
@import 'components/cta';
|
||||
@import 'components/contact';
|
||||
|
||||
/* Main */
|
||||
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
---
|
||||
layout: page
|
||||
title: Contact
|
||||
---
|
||||
|
||||
### Get in touch by email:
|
||||
|
||||
[autonomic@posteo.net](mailto:autonomic@posteo.net)
|
||||
|
||||
[Download PGP Key]({{ "/assets/pgp/autonomic-key.asc" | relative_url }})
|
||||
|
||||
Fingerprint: 82FC 87C5 1A71 902F DC10 2CF5 4F90 D55B B24B 1147
|
||||
|
||||
@ -1,314 +0,0 @@
|
||||
---
|
||||
layout: page
|
||||
hidden: true
|
||||
title: Stylesheet
|
||||
description: Just for reference
|
||||
---
|
||||
|
||||
<section>
|
||||
<h4>Text</h4>
|
||||
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
|
||||
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
|
||||
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
|
||||
<hr />
|
||||
<header>
|
||||
<h4>Heading with a Subtitle</h4>
|
||||
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
|
||||
</header>
|
||||
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
|
||||
<header>
|
||||
<h5>Heading with a Subtitle</h5>
|
||||
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
|
||||
</header>
|
||||
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
|
||||
<hr />
|
||||
<h2>Heading Level 2</h2>
|
||||
<h3>Heading Level 3</h3>
|
||||
<h4>Heading Level 4</h4>
|
||||
<h5>Heading Level 5</h5>
|
||||
<h6>Heading Level 6</h6>
|
||||
<hr />
|
||||
<h5>Blockquote</h5>
|
||||
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
|
||||
<h5>Preformatted</h5>
|
||||
<pre><code>i = 0;
|
||||
|
||||
while (!deck.isInOrder()) {
|
||||
print 'Iteration ' + i;
|
||||
deck.shuffle();
|
||||
i++;
|
||||
}
|
||||
|
||||
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Lists</h4>
|
||||
<div class="row">
|
||||
<div class="6u 12u$(medium)">
|
||||
<h5>Unordered</h5>
|
||||
<ul>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Sagittis adipiscing.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
</ul>
|
||||
<h5>Alternate</h5>
|
||||
<ul class="alt">
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Sagittis adipiscing.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="6u$ 12u$(medium)">
|
||||
<h5>Ordered</h5>
|
||||
<ol>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Etiam vel felis viverra.</li>
|
||||
<li>Felis enim feugiat.</li>
|
||||
<li>Dolor pulvinar etiam.</li>
|
||||
<li>Etiam vel felis lorem.</li>
|
||||
<li>Felis enim et feugiat.</li>
|
||||
</ol>
|
||||
<h5>Icons</h5>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<h5>Actions</h5>
|
||||
<div class="row">
|
||||
<div class="6u 12u$(medium)">
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button special">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions small">
|
||||
<li><a href="#" class="button special small">Small</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
<ul class="actions vertical">
|
||||
<li><a href="#" class="button special">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions vertical small">
|
||||
<li><a href="#" class="button special small">Small</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="6u 12u$(medium)">
|
||||
<ul class="actions vertical">
|
||||
<li><a href="#" class="button special fit">Default</a></li>
|
||||
<li><a href="#" class="button fit">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions vertical small">
|
||||
<li><a href="#" class="button special small fit">Small</a></li>
|
||||
<li><a href="#" class="button small fit">Small</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Table</h4>
|
||||
<h5>Default</h5>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item One</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Two</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Three</td>
|
||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Four</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Five</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>100.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Alternate</h5>
|
||||
<div class="table-wrapper">
|
||||
<table class="alt">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Item One</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Two</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Three</td>
|
||||
<td> Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Four</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>19.99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Item Five</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>29.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>100.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Buttons</h4>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button special">Special</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button big">Big</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
<ul class="actions fit">
|
||||
<li><a href="#" class="button fit">Fit</a></li>
|
||||
<li><a href="#" class="button special fit">Fit</a></li>
|
||||
<li><a href="#" class="button fit">Fit</a></li>
|
||||
</ul>
|
||||
<ul class="actions fit small">
|
||||
<li><a href="#" class="button special fit small">Fit + Small</a></li>
|
||||
<li><a href="#" class="button fit small">Fit + Small</a></li>
|
||||
<li><a href="#" class="button special fit small">Fit + Small</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button special icon fa-download">Icon</a></li>
|
||||
<li><a href="#" class="button icon fa-download">Icon</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><span class="button special disabled">Disabled</span></li>
|
||||
<li><span class="button disabled">Disabled</span></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Form</h4>
|
||||
<form method="post" action="#">
|
||||
<div class="row uniform">
|
||||
<div class="6u 12u$(xsmall)">
|
||||
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
|
||||
</div>
|
||||
<div class="6u$ 12u$(xsmall)">
|
||||
<input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
|
||||
</div>
|
||||
<div class="12u$">
|
||||
<div class="select-wrapper">
|
||||
<select name="demo-category" id="demo-category">
|
||||
<option value="">- Category -</option>
|
||||
<option value="1">Manufacturing</option>
|
||||
<option value="1">Shipping</option>
|
||||
<option value="1">Administration</option>
|
||||
<option value="1">Human Resources</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="4u 12u$(small)">
|
||||
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
|
||||
<label for="demo-priority-low">Low</label>
|
||||
</div>
|
||||
<div class="4u 12u$(small)">
|
||||
<input type="radio" id="demo-priority-normal" name="demo-priority">
|
||||
<label for="demo-priority-normal">Normal</label>
|
||||
</div>
|
||||
<div class="4u$ 12u$(small)">
|
||||
<input type="radio" id="demo-priority-high" name="demo-priority">
|
||||
<label for="demo-priority-high">High</label>
|
||||
</div>
|
||||
<div class="6u 12u$(small)">
|
||||
<input type="checkbox" id="demo-copy" name="demo-copy">
|
||||
<label for="demo-copy">Email me a copy</label>
|
||||
</div>
|
||||
<div class="6u$ 12u$(small)">
|
||||
<input type="checkbox" id="demo-human" name="demo-human" checked>
|
||||
<label for="demo-human">Not a robot</label>
|
||||
</div>
|
||||
<div class="12u$">
|
||||
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
|
||||
</div>
|
||||
<div class="12u$">
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Send Message" class="special" /></li>
|
||||
<li><input type="reset" value="Reset" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Image</h4>
|
||||
<h5>Fit</h5>
|
||||
<div class="box alt">
|
||||
<div class="row uniform 50%">
|
||||
<div class="12u"><span class="image fit"><img src="assets/images/banner.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="assets/images/pic01.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="assets/images/pic02.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="assets/images/pic02.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="assets/images/pic01.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="assets/images/pic02.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="assets/images/pic01.jpg" alt="" /></span></div>
|
||||
<div class="4u"><span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<h5>Left & Right</h5>
|
||||
<p><span class="image left"><img src="assets/images/pic04.jpg" alt="" /></span>Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien. Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.</p>
|
||||
<p><span class="image right"><img src="assets/images/pic05.jpg" alt="" /></span>Vestibulum ultrices risus velit, sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius. Nam sapien ante, varius in pulvinar vitae, rhoncus id massa. Donec varius ex in mauris ornare, eget euismod urna egestas. Etiam lacinia tempor ipsum, sodales porttitor justo. Aliquam dolor quam, semper in tortor eu, volutpat efficitur quam. Fusce nec fermentum nisl. Aenean erat diam, tempus aliquet erat. Etiam iaculis nulla ipsum, et pharetra libero rhoncus ut. Phasellus rutrum cursus velit, eget condimentum nunc blandit vel. In at pulvinar lectus. Morbi diam ante, vulputate et imperdiet eget, fermentum non dolor. Ut eleifend sagittis tincidunt. Sed viverra commodo mi, ac rhoncus justo. Duis neque ligula, elementum ut enim vel, posuere finibus justo. Vivamus facilisis maximus nibh quis pulvinar. Quisque hendrerit in ipsum id tellus facilisis fermentum. Proin mauris dui.</p>
|
||||
</section>
|
||||
Reference in New Issue
Block a user