Resize screenshots
This commit is contained in:
lucperkins
@@ -9,7 +9,9 @@ params:
|
||||
title: Manage. Deploy.
|
||||
# Hero subtitle (optional)
|
||||
subtitle: Lorem ipsum sit dolor amet is dummy text used by the typography industry
|
||||
# Button text
|
||||
buttontext: Get started
|
||||
# Where the main hero button links to
|
||||
buttonlink: "#"
|
||||
# Hero image (from /images/___)
|
||||
image: illustrations/worker.svg
|
||||
@@ -36,3 +38,69 @@ params:
|
||||
icon: plug-cloud
|
||||
text: This is some explanatory text that is on two rows
|
||||
buttonText: Get started
|
||||
section2:
|
||||
title: You're here because you want the best
|
||||
subtitle: And we know it
|
||||
features:
|
||||
- title: Powerful and unified interface
|
||||
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||
# Icon (from /images/illustrations/icons/___.svg)
|
||||
icon: laptop-globe
|
||||
- title: Cross-device synchronisation
|
||||
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||
icon: doc-sync
|
||||
- title: Nomad system
|
||||
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
|
||||
icon: mobile-feed
|
||||
section3:
|
||||
title: One platform
|
||||
subtitle: To rule them all
|
||||
image: illustrations/mockups/app-mockup.png
|
||||
buttonText: Get started
|
||||
buttonLink: "#"
|
||||
section4:
|
||||
title: Our Clients love us!
|
||||
subtitle: Lorem ipsum sit dolor amet is a dummy text used by typography industry
|
||||
clients:
|
||||
- name: Irma Walters
|
||||
quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
|
||||
job: Accountant
|
||||
img: 1
|
||||
- name: John Bradley
|
||||
quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
|
||||
job: Financial Analyst
|
||||
img: 2
|
||||
- name: Gary Blackman
|
||||
quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
|
||||
job: HR Manager
|
||||
img: 3
|
||||
footer:
|
||||
# Logo (from /images/logos/___)
|
||||
logo: fresh-white-alt.svg
|
||||
product:
|
||||
- text: Discover features
|
||||
link: /
|
||||
- text: Why choose our product?
|
||||
link: /
|
||||
- text: Compare features
|
||||
link: /
|
||||
- text: Our roadmap
|
||||
link: /
|
||||
- text: Request features
|
||||
link: /
|
||||
docs:
|
||||
- text: Get started
|
||||
link: /
|
||||
- text: User guides
|
||||
link: /
|
||||
- text: Admin guide
|
||||
link: /
|
||||
- text: Developers
|
||||
link: /
|
||||
blogroll:
|
||||
- text: Latest news
|
||||
link: /
|
||||
- text: Tech articles
|
||||
link: /
|
||||
- text: Video blog
|
||||
link: /
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 98 KiB |
BIN
images/tn.png
Normal file
BIN
images/tn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
@@ -1,80 +1,93 @@
|
||||
{{- $footer := .Site.Params.footer }}
|
||||
{{- $logo := index $footer "logo" }}
|
||||
{{- $productLinks := index $footer "product" }}
|
||||
{{- $docLinks := index $footer "docs" }}
|
||||
<footer class="footer footer-dark">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="footer-logo">
|
||||
<img src="{{ "/images/logos/fresh-white-alt.svg" | relURL }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="footer-column">
|
||||
<div class="footer-header">
|
||||
<h3>Product</h3>
|
||||
</div>
|
||||
<ul class="link-list">
|
||||
<li><a href="#">Discover features</a></li>
|
||||
<li><a href="#">Why choose our Product ?</a></li>
|
||||
<li><a href="#">Compare features</a></li>
|
||||
<li><a href="#">Our Roadmap</a></li>
|
||||
<li><a href="#">Request features</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="footer-column">
|
||||
<div class="footer-header">
|
||||
<h3>Docs</h3>
|
||||
</div>
|
||||
<ul class="link-list">
|
||||
<li><a href="#">Get Started</a></li>
|
||||
<li><a href="#">User guides</a></li>
|
||||
<li><a href="#">Admin guide</a></li>
|
||||
<li><a href="#">Developers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="footer-column">
|
||||
<div class="footer-header">
|
||||
<h3>Blogroll</h3>
|
||||
</div>
|
||||
<ul class="link-list">
|
||||
<li><a href="#">Latest News</a></li>
|
||||
<li><a href="#">Tech articles</a></li>
|
||||
<li><a href="#">Video Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="footer-column">
|
||||
<div class="footer-header">
|
||||
<h3>Follow Us</h3>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item" href="https://github.com/#">
|
||||
<span class="icon"><i class="fa fa-github"></i></span>
|
||||
</a>
|
||||
<a class="level-item" href="https://dribbble.com/#">
|
||||
<span class="icon"><i class="fa fa-dribbble"></i></span>
|
||||
</a>
|
||||
<a class="level-item" href="https://fb.com/#">
|
||||
<span class="icon"><i class="fa fa-facebook"></i></span>
|
||||
</a>
|
||||
<a class="level-item" href="https://twitter.com/#">
|
||||
<span class="icon"><i class="fa fa-twitter"></i></span>
|
||||
</a>
|
||||
<a class="level-item" href="https://bitbucket.org/#">
|
||||
<span class="icon"><i class="fa fa-bitbucket"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<a href="https://bulma.io" target="_blank">
|
||||
<img src="{{ "/images/logos/made-with-bulma.png" | relURL }}" alt="Made with Bulma" width="128" height="24">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="footer-logo">
|
||||
<img src="{{ printf "/images/logos/%s" $logo | relURL }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="footer-column">
|
||||
<div class="footer-header">
|
||||
<h3>Product</h3>
|
||||
</div>
|
||||
<ul class="link-list">
|
||||
{{- range $productLinks }}
|
||||
<li>
|
||||
<a href="{{ .link }}">
|
||||
{{ .text }}
|
||||
</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="footer-column">
|
||||
<div class="footer-header">
|
||||
<h3>Docs</h3>
|
||||
</div>
|
||||
<ul class="link-list">
|
||||
{{- range $docLinks }}
|
||||
<li>
|
||||
<a href="{{ .link }}">
|
||||
{{ .text }}
|
||||
</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="footer-column">
|
||||
<div class="footer-header">
|
||||
<h3>Blogroll</h3>
|
||||
</div>
|
||||
<ul class="link-list">
|
||||
{{- range $docLinks }}
|
||||
<li>
|
||||
<a href="{{ .link }}">
|
||||
{{ .text }}
|
||||
</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="footer-column">
|
||||
<div class="footer-header">
|
||||
<h3>Follow Us</h3>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item" href="https://github.com/#">
|
||||
<span class="icon"><i class="fa fa-github"></i></span>
|
||||
</a>
|
||||
<a class="level-item" href="https://dribbble.com/#">
|
||||
<span class="icon"><i class="fa fa-dribbble"></i></span>
|
||||
</a>
|
||||
<a class="level-item" href="https://fb.com/#">
|
||||
<span class="icon"><i class="fa fa-facebook"></i></span>
|
||||
</a>
|
||||
<a class="level-item" href="https://twitter.com/#">
|
||||
<span class="icon"><i class="fa fa-twitter"></i></span>
|
||||
</a>
|
||||
<a class="level-item" href="https://bitbucket.org/#">
|
||||
<span class="icon"><i class="fa fa-bitbucket"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<a href="https://bulma.io" target="_blank">
|
||||
<img src="{{ "/images/logos/made-with-bulma.png" | relURL }}" alt="Made with Bulma" width="128" height="24">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,68 +1,35 @@
|
||||
{{- $section2 := .Site.Params.section2 }}
|
||||
{{- $title := index $section2 "title" }}
|
||||
{{- $subtitle := index $section2 "subtitle" }}
|
||||
{{- $features := index $section2 "features" }}
|
||||
<section class="section is-medium">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-centered-tablet-portrait">
|
||||
<h1 class="title section-title">You're here because you want the best</h1>
|
||||
<h3 class="subtitle is-5 is-muted">And we Know it</h3>
|
||||
<div class="divider"></div>
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-centered-tablet-portrait">
|
||||
<h1 class="title section-title">{{ $title }}</h1>
|
||||
<h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<div class="column is-7 mt-60">
|
||||
{{- range $features }}
|
||||
<article class="media icon-box">
|
||||
<figure class="media-left">
|
||||
<p class="image">
|
||||
<img src="{{ printf "/images/illustrations/icons/%s.svg" .icon | relURL }}">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content mt-50">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="icon-box-title">{{ .title }}</span>
|
||||
|
||||
<span class="icon-box-text">{{ .text }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-7 mt-60">
|
||||
|
||||
<!-- icon block -->
|
||||
<article class="media icon-box">
|
||||
<figure class="media-left">
|
||||
<p class="image">
|
||||
<img src="{{ "/images/illustrations/icons/laptop-globe.svg" | relURL }}">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content mt-50">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="icon-box-title">Powerful and unified interface</span>
|
||||
<span class="icon-box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- /icon block -->
|
||||
|
||||
<!-- icon block -->
|
||||
<article class="media icon-box">
|
||||
<figure class="media-left">
|
||||
<p class="image">
|
||||
<img src="{{ "/images/illustrations/icons/doc-sync.svg" | relURL }}">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content mt-50">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="icon-box-title">Cross device Synchronisation</span>
|
||||
<span class="icon-box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- /icon block -->
|
||||
|
||||
<!-- icon block -->
|
||||
<article class="media icon-box">
|
||||
<figure class="media-left">
|
||||
<p class="image">
|
||||
<img src="{{ "/images/illustrations/icons/mobile-feed.svg" | relURL }}">
|
||||
</p>
|
||||
</figure>
|
||||
<div class="media-content mt-50">
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="icon-box-title">Nomad System</span>
|
||||
<span class="icon-box-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<!-- /icon block -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,22 +1,27 @@
|
||||
{{- $section3 := .Site.Params.section3 }}
|
||||
{{- $title := index $section3 "title" }}
|
||||
{{- $subtitle := index $section3 "subtitle" }}
|
||||
{{- $image := index $section3 "image" }}
|
||||
{{- $buttonText := index $section3 "buttontext" }}
|
||||
{{- $buttonLink := index $section3 "buttonlink" }}
|
||||
<section class="section section-feature-grey is-medium">
|
||||
<div class="container">
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-10 is-offset-1">
|
||||
<div class="has-text-centered">
|
||||
<img class="pushed-image" src="{{ "/images/illustrations/mockups/app-mockup.png" | relURL }}">
|
||||
<img class="pushed-image" src="{{ printf "/images/%s" $image | relURL }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title-wrapper has-text-centered">
|
||||
<h2 class="title is-2">One Platform</h2>
|
||||
<h3 class="subtitle is-5 is-muted">To rule them All</h3>
|
||||
<h2 class="title is-2">{{ $title }}</h2>
|
||||
<h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
|
||||
</div>
|
||||
|
||||
<p class="has-text-centered mt-20">
|
||||
<a class="button cta is-large rounded secondary-btn raised">
|
||||
Get Started
|
||||
<a class="button cta is-large rounded secondary-btn raised" href="{{ $buttonLink }}">
|
||||
{{ $buttonText }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,47 +1,34 @@
|
||||
{{- $section4 := .Site.Params.section4 }}
|
||||
{{- $title := index $section4 "title" }}
|
||||
{{- $subtitle := index $section4 "subtitle" }}
|
||||
{{- $clients := index $section4 "clients" }}
|
||||
<section class="section is-medium section-secondary">
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
|
||||
<div class="title-wrapper has-text-centered">
|
||||
<h2 class="title is-2 light-text is-spaced">Our Clients love us !</h2>
|
||||
<h3 class="subtitle is-5 light-text">Lorem ipsum sit dolor amet is a dummy text used by typography industry </h3>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column is-4">
|
||||
<figure class="testimonial">
|
||||
<blockquote>
|
||||
Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
|
||||
</blockquote>
|
||||
<div class="author">
|
||||
<img src="{{ "/images/illustrations/faces/1.png" | relURL }}" alt=""/>
|
||||
<h5>Irma Walters</h5><span>Accountant</span>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<figure class="testimonial">
|
||||
<blockquote>
|
||||
Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
|
||||
</blockquote>
|
||||
<div class="author">
|
||||
<img src="{{ "/images/illustrations/faces/2.png" | relURL }}" alt=""/>
|
||||
<h5>John Bradley</h5><span>Financial Analyst</span>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<figure class="testimonial">
|
||||
<blockquote>
|
||||
Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
|
||||
</blockquote>
|
||||
<div class="author">
|
||||
<img src="{{ "/images/illustrations/faces/2.png" | relURL }}" alt=""/>
|
||||
<h5>Gary Blackman</h5><span>HR Manager</span>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-wrapper has-text-centered">
|
||||
<h2 class="title is-2 light-text is-spaced">{{ $title }}</h2>
|
||||
{{- with $subtitle }}
|
||||
<h3 class="subtitle is-5 light-text">{{ . }}</h3>
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="columns is-vcentered">
|
||||
{{- range $clients }}
|
||||
<div class="column is-4">
|
||||
<figure class="testimonial">
|
||||
<blockquote>
|
||||
{{ .quote }}
|
||||
</blockquote>
|
||||
<div class="author">
|
||||
<img src="{{ printf "/images/illustrations/faces/%s.png" (string .img) | relURL }}" alt=""/>
|
||||
<h5>{{ .name }}</h5>
|
||||
<span>{{ .job }}</span>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,32 +1,32 @@
|
||||
<section class="section section-light-grey is-medium">
|
||||
<div class="container">
|
||||
<div class="title-wrapper has-text-centered">
|
||||
<h2 class="title is-2 is-spaced">Drop us a line or two </h2>
|
||||
<h3 class="subtitle is-5 is-muted">We'd love to hear from You</h3>
|
||||
<div class="divider is-centered"></div>
|
||||
</div>
|
||||
<div class="title-wrapper has-text-centered">
|
||||
<h2 class="title is-2 is-spaced">Drop us a line or two </h2>
|
||||
<h3 class="subtitle is-5 is-muted">We'd love to hear from you</h3>
|
||||
<div class="divider is-centered"></div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="columns">
|
||||
<div class="column is-6 is-offset-3">
|
||||
<form>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-6">
|
||||
<input class="input is-medium" type="text" placeholder="Enter your Name">
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<input class="input is-medium" type="email" placeholder="Enter your Email">
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<textarea class="textarea" rows="10" placeholder="Write someting ..."></textarea>
|
||||
</div>
|
||||
<div class="form-footer has-text-centered mt-10">
|
||||
<button class="button cta is-large primary-btn raised is-clear">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="content-wrapper">
|
||||
<div class="columns">
|
||||
<div class="column is-6 is-offset-3">
|
||||
<form>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-6">
|
||||
<input class="input is-medium" type="text" placeholder="Enter your name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<input class="input is-medium" type="email" placeholder="Enter your email address">
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<textarea class="textarea" rows="10" placeholder="Write someting..."></textarea>
|
||||
</div>
|
||||
<div class="form-footer has-text-centered mt-10">
|
||||
<button class="button cta is-large primary-btn raised is-clear">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user