First stab at realistic-looking home page
71
_layouts/home.html
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en-US">
|
||||||
|
|
||||||
|
{% include head.html %}
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
|
||||||
|
<div data-sticky-container style="height: 82.7812px;">
|
||||||
|
|
||||||
|
<div class="top-bar sticky iss-stuck is-at-top" data-sticky data-margin-top=0>
|
||||||
|
<div class="top-bar-title">
|
||||||
|
<strong>
|
||||||
|
<a id="logo" href="https://www.coops.tech/">
|
||||||
|
<img src="https://www.coops.tech/app/themes/coop-tech-oowp-theme/public/img/CoTech-logo.png">CoTech
|
||||||
|
</a>
|
||||||
|
</strong>
|
||||||
|
<span data-responsive-toggle="responsive-menu" data-hide-for="medium"><button class="menu-icon dark" type="button" data-toggle></button></span>
|
||||||
|
</div>
|
||||||
|
<div id="responsive-menu">
|
||||||
|
<div class="top-bar-right">
|
||||||
|
<ul class="dropdown menu vertical medium-horizontal" data-magellan>
|
||||||
|
<li><a href="#members">Members</a></li>
|
||||||
|
<li><a href="#clients">Clients</a></li>
|
||||||
|
<li><a href="#services">Services</a></li>
|
||||||
|
<li><a href="#technologies">Technologies</a></li>
|
||||||
|
<li><a href="#contact" class="button">Get In Touch</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="home">
|
||||||
|
|
||||||
|
<div id="banner">
|
||||||
|
<div class="row">
|
||||||
|
<div class="small-12 columns">
|
||||||
|
<h1>Cooperative Technologists</h1>
|
||||||
|
<p>Building a tech industry that's better for its workers and customers through co-operation, democracy and worker ownership.</p>
|
||||||
|
<span>
|
||||||
|
<a id="video" data-open="video-modal"><i class="fi-play"></i>Watch video</a>
|
||||||
|
<a id="our-manifesto" href="manifesto">Our manifesto</a>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div class="reveal large" id="video-modal" data-reveal>
|
||||||
|
<div class="flex-video widescreen">
|
||||||
|
<iframe width="420" height="315" src="https://player.vimeo.com/video/196080655" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{ content }}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{% include footer.html %}
|
||||||
|
|
||||||
|
<script type='text/javascript' src='{{ site.github.url }}/app/themes/coop-tech-oowp-theme/public/js/app.js?ver=4.8'></script>
|
||||||
|
<script type='text/javascript' src='{{ site.github.url }}/wp/wp-includes/js/wp-embed.min.js?ver=4.8'></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
BIN
app/themes/coop-tech-oowp-theme/public/img/banner-collage.jpg
Normal file
After Width: | Height: | Size: 327 KiB |
BIN
app/themes/coop-tech-oowp-theme/public/img/icon-clients.png
Normal file
After Width: | Height: | Size: 1.6 KiB |
BIN
app/themes/coop-tech-oowp-theme/public/img/icon-coops.png
Normal file
After Width: | Height: | Size: 1.0 KiB |
BIN
app/themes/coop-tech-oowp-theme/public/img/icon-revenue.png
Normal file
After Width: | Height: | Size: 1.3 KiB |
BIN
app/themes/coop-tech-oowp-theme/public/img/icon-staff.png
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
images/services/business-analysis.png
Normal file
After Width: | Height: | Size: 9.2 KiB |
BIN
images/services/consultancy.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
123
index.html
@ -1,29 +1,110 @@
|
|||||||
---
|
---
|
||||||
title: CoTech
|
title: CoTech
|
||||||
|
layout: home
|
||||||
---
|
---
|
||||||
|
|
||||||
<h1>CoTech</h1>
|
<div id="kpi">
|
||||||
|
<div class="row">
|
||||||
|
<div class="small-12 medium-10 large-8 small-centered columns">
|
||||||
|
|
||||||
Co-ops: {{ site.coops.size }}
|
<div class="small-3 columns">
|
||||||
|
<img src="app/themes/coop-tech-oowp-theme/public/img/icon-coops.png" class="float-center">
|
||||||
|
<h6>Co-ops</h6>
|
||||||
|
<h5>{{ site.coops.size }}</h5>
|
||||||
|
</div>
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<img src="app/themes/coop-tech-oowp-theme/public/img/icon-staff.png" class="float-center">
|
||||||
|
<h6>Staff</h6>
|
||||||
|
<h5>159+</h5>
|
||||||
|
</div>
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<img src="app/themes/coop-tech-oowp-theme/public/img/icon-revenue.png" class="float-center">
|
||||||
|
<h6>Revenue</h6>
|
||||||
|
<h5>£5.7m</h5>
|
||||||
|
</div>
|
||||||
|
<div class="small-3 columns">
|
||||||
|
<img src="app/themes/coop-tech-oowp-theme/public/img/icon-clients.png" class="float-center">
|
||||||
|
<h6>Clients</h6>
|
||||||
|
<h5>232+</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
<ul>
|
</div>
|
||||||
{% for coop in site.coops %}
|
</div>
|
||||||
<li>
|
</div>
|
||||||
<a href="{{ coop.url | relative_url }}">
|
|
||||||
{{ coop.name }}
|
<section id="members" data-magellan-target="members">
|
||||||
|
<div class="row">
|
||||||
|
<div class="small-12 columns">
|
||||||
|
|
||||||
|
<h2>Members</h2>
|
||||||
|
<p>Take a look at who is part of the CoTech network</p>
|
||||||
|
|
||||||
|
<div class="view float-center">
|
||||||
|
<ul class="tabs" data-tabs id="coops-view-tabs">
|
||||||
|
<li class="tabs-title is-active"><a href="#grid" aria-selected="true">Grid</a></li>
|
||||||
|
<li class="separator">|</li>
|
||||||
|
<li class="tabs-title"><a href="#map">Map</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tabs-content" data-tabs-content="coops-view-tabs">
|
||||||
|
|
||||||
|
<!-- START Grid View Content -->
|
||||||
|
<div class="tabs-panel is-active" id="grid">
|
||||||
|
<div class="row small-up-2 medium-up-4 large-up-6 small-collapse">
|
||||||
|
<div class="column">
|
||||||
|
{% for coop in site.coops %}
|
||||||
|
<a class="coop-thumb" href="{{ coop.url | relative_url }}">
|
||||||
|
<div class="coop-thumb-img has-tip tip-bottom radius" style="background-image: url(/images/coops/{{ coop.slug }}.png)" data-tooltip aria-haspopup="true" title="{{ coop.name }}"></div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
{% endfor %}
|
||||||
{% endfor %}
|
</div>
|
||||||
</ul>
|
<div class="column">
|
||||||
|
<a href="join" class="coop-thumb">
|
||||||
<h2>Services</h2>
|
<h5 id="join-us">Join CoTech</h5>
|
||||||
|
|
||||||
<ul>
|
|
||||||
{% for service in site.services %}
|
|
||||||
<li>
|
|
||||||
<a href="{{ service.url | relative_url }}">
|
|
||||||
{{ service.name }}
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</div>
|
||||||
{% endfor %}
|
</div>
|
||||||
</ul>
|
</div>
|
||||||
|
<!-- END Grid View Content -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="services" data-magellan-target="services">
|
||||||
|
<div class="row">
|
||||||
|
<div class="small-12 columns">
|
||||||
|
|
||||||
|
<h2>Services</h2>
|
||||||
|
<p>Here are the services the network are able to offer</p>
|
||||||
|
|
||||||
|
<div class="row small-up-3 medium-up-4 large-up-6 small-collapse">
|
||||||
|
{% for service in site.services %}
|
||||||
|
<div class="column">
|
||||||
|
<a href="{{ service.url | relative_url }}" class="service-thumb">
|
||||||
|
<div class="service-thumb-img float-center" style="background-image: url(/images/services/{{ service.slug }}.png)"></div>
|
||||||
|
<h5>{{ service.name }}</h5>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact" data-magellan-target="contact">
|
||||||
|
<div class="row">
|
||||||
|
<div class="small-12 medium-6 small-centered columns">
|
||||||
|
|
||||||
|
<h2>Get In Touch</h2>
|
||||||
|
<p>
|
||||||
|
If you would like to work with us, or find out more,
|
||||||
|
<a href="mailto:contact@coops.tech">get in touch</a>.
|
||||||
|
<br/> Not sure which tech coop, or coops, are right for you? Drop us a message at
|
||||||
|
<a href="mailto:contact@coops.tech">contact@coops.tech</a>, and we will help you find the perfect match.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|