Commit 714f096b authored by Tim's avatar Tim

Shop design

parent 5919cdd4
Pipeline #28 failed with stage
......@@ -2,7 +2,7 @@
name = "EtherCalc"
description = "EtherCalc provides collaborative editing of spreadsheets on the web. ."
price = "75€"
logo = "/img/logo-wordpress.png"
logo = "/img/logo-ethercalc.png"
website="https://ethercalc.net/"
git= "https://github.com/audreyt/ethercalc"
+++
......@@ -2,7 +2,7 @@
name = "EtherCalc"
description = "EtherCalc provides collaborative editing of spreadsheets on the web. ."
price = "75€"
logo = "/img/logo-wordpress.png"
logo = "/img/logo-ethercalc.png"
website="https://ethercalc.net/"
git= "https://github.com/audreyt/ethercalc"
+++
......@@ -2,7 +2,7 @@
name = "Invoice Ninja"
description = "The leading open-source platform for invoicing, time tracking, payments, and more."
price = "25€"
logo = "/img/logo-etherpad.png"
logo = "/img/logo-invoiceninja.png"
website = "https://www.invoiceninja.com/"
git = "https://github.com/invoiceninja/invoiceninja"
+++
......@@ -2,7 +2,7 @@
name = "Invoice Ninja"
description = "The leading open-source platform for invoicing, time tracking, payments, and more."
price = "25€"
logo = "/img/logo-etherpad.png"
logo = "/img/logo-invoiceninja.png"
website = "https://www.invoiceninja.com/"
git = "https://github.com/invoiceninja/invoiceninja"
+++
......@@ -2,7 +2,7 @@
name = "Mautic"
description = "Mautic is a marketing automation software (email, social & more). Monitor Websites, Create Landing Pages, Send Email. Grow your Business."
price = "25€"
logo = "/img/logo-laverna.png"
logo = "/img/logo-mautic.png"
website ="https://www.mautic.org/"
git = "https://github.com/mautic"
+++
......@@ -2,7 +2,7 @@
name = "Mautic"
description = "Mautic is a marketing automation software (email, social & more). Monitor Websites, Create Landing Pages, Send Email. Grow your Business."
price = "25€"
logo = "/img/logo-laverna.png"
logo = "/img/logo-mautic.png"
website ="https://www.mautic.org/"
git = "https://github.com/mautic"
+++
+++
name = "Nextcloud"
description = "A safe home for all your data. Access, share and protect your files, calendars, contacts, communication & more at home and in your enterprise."
price = "2€/user/month for 5GB"
price = "from 240€"
logo = "/img/logo-nextcloud.png"
website="https://nextcloud.com/"
git="https://github.com/nextcloud"
......
+++
name = "Nextcloud"
description = "A safe home for all your data. Access, share and protect your files, calendars, contacts, communication & more at home and in your enterprise."
price = "2€/user/month for 5GB"
price = "from 240€"
logo = "/img/logo-nextcloud.png"
website="https://nextcloud.com/"
git="https://github.com/nextcloud"
......
+++
name = "Rocket.Chat"
description = "The Ultimate Open Source Web Chat Platform. From group messages and video calls all the way to helpdesk killer features."
price = "75€"
price = "from 75€"
logo = "/img/logo-rocketchat.png"
+++
+++
name = "Rocket.Chat"
description = "The Ultimate Open Source Web Chat Platform. From group messages and video calls all the way to helpdesk killer features."
price = "75€"
price = "from 75€"
logo = "/img/logo-rocketchat.png"
+++
+++
title = "shop"
date = "2016-09-20T11:25:28+02:00"
+++
+++
title = "shop"
date = "2016-09-20T11:25:28+02:00"
+++
+++
name = "Silex"
description = "Host your static site and show it to your hold."
description = "Host your static site from your cloud or a git repository and show it to the world."
price = "25€"
logo = "/img/logo-static.png"
+++
+++
name = "Silex"
description = "Host your static site and show it to your hold."
description = "Host your static site from your cloud or a git repository and show it to the world."
price = "25€"
logo = "/img/logo-stati.png"
+++
......@@ -4,22 +4,59 @@
<div class="row">
{{ range .Data.Pages }}
<div class="col-sm-6 col-md-4">
<div class="card card-small">
<div class="card card-shop card-small">
<div class="shop-image">
<div class="thumbnail">
<img src="{{ .Params.logo }}">
</div>
</div>
<div class="card-content">
<div class="card-title">{{ .Params.name }}</div>
<div class="row card-details">
<p>{{ .Description }}</p>
</div>
<div class="row card-price">
<p>{{ .Params.price }}</p>
<p>{{ .Params.price }} per year</p>
</div>
<div class="row center">En savoir plus</div>
<div class="row center card-order">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-{{ .Params.name }}">
Order
</button>
<div class="modal fade" id="modal-{{ .Params.name }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Personal details</h4>
</div>
<div class="modal-body">
<form action="mailto:someone@example.com" method="post" >
<div class="form-group">
<input class="form-control" type="text" name="first_name" placeholder="First Name" required/>
</div>
<div class="form-group">
<input class="form-control" type="text" name="last_name" placeholder="Last Name" required/>
</div>
<div class="form-group">
<input class="form-control" type="email" name="email" placeholder="Email" required/>
</div>
<div class="form-group">
<input class="form-control" type="domain" name="Domain Name" placeholder="Choose a domain name or ask us for help to pick one"/>
</div>
<div class="form-group">
<input class="form-control" type="text" name="comment" placeholder="If you have any questions or remarks">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" name="submit" class="btn btn-primary" value="Get a Quote">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......
{{ partial "header.html" . }}
<section class="shop">
<div class="container">
<div class="row">
</div>
</div>
</section>
{{ partial "footer.html" . }}
......@@ -366,6 +366,21 @@ blockquote {
font-size: 2rem;
text-align: center;
background-color: #f3f3f3;
position: absolute;
bottom: 8rem;
width: 100%;
height: 3.5rem;
right: 15px
}
.card-order {
position: absolute;
bottom: 1.5rem;
text-align: center;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.card-panel {
......@@ -509,6 +524,10 @@ blockquote {
display: block;
}
.card-shop {
height: 500px;
}
.z-depth-0 {
box-shadow: none !important;
}
......@@ -516,3 +535,16 @@ blockquote {
.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-floating, .dropdown-content, .collapsible, .side-nav {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.thumbnail {
border: none;
}
.thumbnail>img {
display: block;
max-width: 100%;
}
.shop-image {
height:180px;
}
static/img/collabora-logo.png

42.6 KB | W: | H:

static/img/collabora-logo.png

5.08 KB | W: | H:

static/img/collabora-logo.png
static/img/collabora-logo.png
static/img/collabora-logo.png
static/img/collabora-logo.png
  • 2-up
  • Swipe
  • Onion skin
static/img/logo-discourse.png

32.8 KB | W: | H:

static/img/logo-discourse.png

7.03 KB | W: | H:

static/img/logo-discourse.png
static/img/logo-discourse.png
static/img/logo-discourse.png
static/img/logo-discourse.png
  • 2-up
  • Swipe
  • Onion skin
static/img/logo-ethercalc.png

6.45 KB | W: | H:

static/img/logo-ethercalc.png

6.45 KB | W: | H:

static/img/logo-ethercalc.png
static/img/logo-ethercalc.png
static/img/logo-ethercalc.png
static/img/logo-ethercalc.png
  • 2-up
  • Swipe
  • Onion skin
static/img/logo-static.png

24.7 KB | W: | H:

static/img/logo-static.png

9.18 KB | W: | H:

static/img/logo-static.png
static/img/logo-static.png
static/img/logo-static.png
static/img/logo-static.png
  • 2-up
  • Swipe
  • Onion skin
static/img/logo-storage.png

1.43 KB | W: | H:

static/img/logo-storage.png

2.09 KB | W: | H:

static/img/logo-storage.png
static/img/logo-storage.png
static/img/logo-storage.png
static/img/logo-storage.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment