Construction Company | Renobuilding

[renobird]

This was the first full site I built with Processwire. We launched it several months ago, but I immediately got swept up in another project, and forgot to post it. In case the name didn't clue you in, it's a site for my bother's company.

http://www.renobuilding.com

[Pete]

Love it. Love the cleverness of the headline too - I was immediately wondering why the full stops were there, but it works well as a sentence and separate statements too.

Good stuff!

[arjen]

Great example of putting together a nice collection of fonts. Works really well.

[Marty Walker]

Tom,

Lovely work as always.

Regards

Marty

[Ralf]

Hi renobird,

wow looks great! It has some clear, cheerful, structured ... cool i love that.

I´m a little bit interested in your configuration?

In the area "our Exprerience" you have some subareas for the separate groups (for each group one page).

Are the different projects (entries) on this pages in PW subpages from the groups or how did you solve this?

Second question, the last and next (at the left and right) fly in of the Experiences are really cool - could you tell me with which technique you realise it??

Thanks for sharing it!

[Nico Knoll]

Just beautiful!

[renobird]

In the area "our Exprerience" you have some subareas for the separate groups (for each group one page).

Are the different projects (entries) on this pages in PW subpages from the groups or how did you solve this?

The /our-experience/ page shows the first project from each child page.

foreach($pages->get("/our-experience/")->children as $project) {
$image = $project->child->images->first()->size(286,190);;
echo "<a href='{$project->url}'><div class='thumb'>";
if ($image) {
echo "<img src='{$image->url}' width='286' height='190' alt='{$image->get('description|name')}'/>";
}
echo "<h5>{$project->title}</h5>";
echo "</div></a>";
}

Second question, the last and next (at the left and right) fly in of the Experiences are really cool - could you tell me with which technique you realise it??

Here's how I grabbed the prev/next images and titles in Processwire:

if ($page->prev->id) {
$prev = $page->prev()->child()->images->first()->size(250,175);
echo "<a href='{$page->prev->url}' class='sub-nav-left'><div class='arrow'>←</div><img src='{$prev->url}' /><br />{$page->prev->title}</a>";
}

if ($page->next->id) {
$next = $page->next()->child()->images->first()->size(250,175);
echo "<a href='{$page->next->url}' class='sub-nav-right'><div class='arrow'>→</div><img src='{$next->url}' /><br />{$page->next->title}</a>";
}

A little bit of jQuery handles the animation:

$('.sub-nav-right').hover(function() {
$(this).stop().animate({
right: '0'
}, 300)
}, function() {
$(this).stop().animate({
right: '-280'
}, 400)
});

$('.sub-nav-left').hover(function() {
$(this).stop().animate({
left: '0'
}, 300)
}, function() {
$(this).stop().animate({
left: '-280'
}, 400)
});

Edit: GAH! The code editor is a nightmare.

Hopefully you get the idea.

[Pete]

The footer link to "download our brochure" doesn't seem to do anything.

[renobird]

Good catch Pete. I'll get on them about that.

[teppo]

This is probably the most stylish construction company website I've ever seen -- not that I'd seen that many of them but I hope you get my point anyway. Awesome work!

[renobird]

Thanks teppo.

[ryan]

I agree with Teppo, this is really a great site.