infrastructure/hugo-fresh
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Resize screenshots

Browse Source
This commit is contained in:
lucperkins
2018-08-04 14:18:24 +02:00
parent 0376f2cb37
commit 0c3f810731
8 changed files with 255 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
exampleSite/config.yaml
View File

@@ -9,7 +9,9 @@ params:
title: Manage. Deploy. title: Manage. Deploy.
# Hero subtitle (optional) # Hero subtitle (optional)
subtitle: Lorem ipsum sit dolor amet is dummy text used by the typography industry subtitle: Lorem ipsum sit dolor amet is dummy text used by the typography industry
# Button text
buttontext: Get started buttontext: Get started
# Where the main hero button links to
buttonlink: "#" buttonlink: "#"
# Hero image (from /images/___) # Hero image (from /images/___)
image: illustrations/worker.svg image: illustrations/worker.svg
@@ -36,3 +38,69 @@ params:
icon: plug-cloud icon: plug-cloud
text: This is some explanatory text that is on two rows text: This is some explanatory text that is on two rows
buttonText: Get started 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: /

BIN
images/screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 84 KiB

After

Width:  |  Height:  |  Size: 98 KiB

BIN
images/tn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 KiB

165
layouts/partials/footer.html
View File

@@ -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"> <footer class="footer footer-dark">
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="footer-logo"> <div class="footer-logo">
<img src="{{ "/images/logos/fresh-white-alt.svg" | relURL }}"> <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">
<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> </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>
</div>
</footer> </footer>

95
layouts/partials/section2.html
View File

@@ -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"> <section class="section is-medium">
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column is-centered-tablet-portrait"> <div class="column is-centered-tablet-portrait">
<h1 class="title section-title">You're here because you want the best</h1> <h1 class="title section-title">{{ $title }}</h1>
<h3 class="subtitle is-5 is-muted">And we Know it</h3> <h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
<div class="divider"></div> <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>
<div class="column is-7 mt-60"> </div>
</article>
<!-- icon block --> {{- end }}
<article class="media icon-box"> </div>
<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> </div>
</div>
</section> </section>

17
layouts/partials/section3.html
View File

@@ -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"> <section class="section section-feature-grey is-medium">
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column is-10 is-offset-1"> <div class="column is-10 is-offset-1">
<div class="has-text-centered"> <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>
</div> </div>
<div class="title-wrapper has-text-centered"> <div class="title-wrapper has-text-centered">
<h2 class="title is-2">One Platform</h2> <h2 class="title is-2">{{ $title }}</h2>
<h3 class="subtitle is-5 is-muted">To rule them All</h3> <h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
</div> </div>
<p class="has-text-centered mt-20"> <p class="has-text-centered mt-20">
<a class="button cta is-large rounded secondary-btn raised"> <a class="button cta is-large rounded secondary-btn raised" href="{{ $buttonLink }}">
Get Started {{ $buttonText }}
</a> </a>
</p> </p>
</div> </div>

73
layouts/partials/section4.html
View File

@@ -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"> <section class="section is-medium section-secondary">
<div class="container"> <div class="container">
<div class="title-wrapper has-text-centered"> <div class="title-wrapper has-text-centered">
<h2 class="title is-2 light-text is-spaced">Our Clients love us !</h2> <h2 class="title is-2 light-text is-spaced">{{ $title }}</h2>
<h3 class="subtitle is-5 light-text">Lorem ipsum sit dolor amet is a dummy text used by typography industry </h3> {{- with $subtitle }}
</div> <h3 class="subtitle is-5 light-text">{{ . }}</h3>
{{- end }}
<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> </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> </section>

50
layouts/partials/section5.html
View File

@@ -1,32 +1,32 @@
<section class="section section-light-grey is-medium"> <section class="section section-light-grey is-medium">
<div class="container"> <div class="container">
<div class="title-wrapper has-text-centered"> <div class="title-wrapper has-text-centered">
<h2 class="title is-2 is-spaced">Drop us a line or two </h2> <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> <h3 class="subtitle is-5 is-muted">We'd love to hear from you</h3>
<div class="divider is-centered"></div> <div class="divider is-centered"></div>
</div> </div>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="columns"> <div class="columns">
<div class="column is-6 is-offset-3"> <div class="column is-6 is-offset-3">
<form> <form>
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column is-6"> <div class="column is-6">
<input class="input is-medium" type="text" placeholder="Enter your Name"> <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> </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>
</div> </div>
</section> </section>