New Source Project: Gradient. Featuring "Super Hero" Header

TemplateRepo
1

store-gradient
store-gradient1000×550 79.9 KB

This one was quite some time to the making, but I’m super pleased with it.

Gradient follows in the footsteps of my previous template called Kitchen, using clever layouts and gradients to create a beautiful website that really catches the eye. But Gradient takes things to a whole new level, maxing out the power of the Source Addons pack, in particular Grid Plus, to produce some amazing layouts, including the “Super-hero” header: Which takes the Source trademark “Spiral” Grid design and turns it into a fully scaling responsive full height hero header.

Super Hero consists of a grid that changes layout and number of panels based on the width of the screen. Change the browser width to see it in action: https://www.templaterepo.com/demos/gradient/superhero/

If you want an impactful header on your site, you need Source, the addons pack and the Super Hero header :-)

As with all my projects I’ve focused on usability, ease of navigation and giving you lots of different layout options all using the same overall design. Use Gradient “as-is” as the basis for your next project, or drag and drop elements into your existing projects.

Gradient will be priced at the usual cost for my multi-page projects, with the usual launch discount applied.

See the demo here: https://www.templaterepo.com/demos/gradient/

Buy it today for only €14 here: https://www.templaterepo.com/store/#!/source/gradient-14.html

As well as Source and the Source addons pack Gradient also uses some free stacks from Big White Duck. Links are supplied to these stacks in the store, and don’t forget to make a donation to BWD too ;-)

EDIT: Should also mention: Gradient comes with a choice of menus. There is, of course, the regular Source menu, but I’ve also included two “manually curated” menus that use Source buttons and the regular Source menu, but in mobile mode. And Source buttons and BWD’s PopDrop menu.

10 Likes
2

Beautiful template. You are clearly getting the hang of Source. Great job.

1 Like
3

I can’t pretend, I had a lot of help from @habitualshaker at the start of that one. Grid Plus has now “clicked” with me though, and Super Hero was all my own work*

*I think. If Stuart helped me, I’ve conveniently forgotten ;-)

4

Looks like you did it a different way to the way I suggested so yes I think you can call that your own!

Project looks great!!

3 Likes
5

This is just beautiful. Well done!

2 Likes
6

Hello

I bought this beautiful template.
Where did you do the SVG colored dots? On a site where we can reproduce that? Or is it your own and we just use it as it is?

Thnank you

7

Morning. Do you mean the square dots that form part of the logo? I made them using Afinity Designer. Do you want the file to edit?

8

You could edit the colour values directly in the SVG code. e.g. the hex code in the extract below.

<path d="m0 0h25v25h-25z" fill="#5f7aaf"></path>

You could even directly tie these into your Source colour scheme by using the available Source colour variables. So the above might become:

<path d="m0 0h25v25h-25z" fill="var(--accent-color)"></path>

4 Likes
9

This is such a powerful feature.

1 Like
10

I love this template, but it is going to take me a while to work everything out! The finished pages look so simple and clean, but when I looked at the stacks…

Still, few things worthwhile are achieved without hard work

1 Like
11

I find the best way with things like that is to cut and paste the bits you like into new pages, then just start deconstructing them. If you break something, no bother, just delete it and start over.

2 Likes
12

The Manmen page is a great example of how a simple to create menu with a centred logo, can be created. Menus don’t get much more attractive than this. Also I doubt that there is any other to way using RW to build such a menu in such few steps.

13

Hello
Thank you for the answer.
I thought it was a generated SVG by a site like a background or so :-)
I can’t use such an app.
Regards,

14

Hi folks, just a heads up that all good things have to come to an end, and so the launch special pricing will end in a few days.

If you want to join the loads of people who have already bought this project at the cheap price, get it bought asap!

Cheers.

15

Hi
I want to buy this but apparently my password doesn’t match!! How do I find what I used last time to purchase. I get Email is already taken (password doesn’t match).
PS Why do we need a password to purchase??
W

16

Hi, why? I’m not sure! I’ve never had this before.

Leave it with me.