Concordia Projects Website Launched


Following the Nest Kitchens website that I recently worked on, this week I’ve just finished the website for Nest’s sister company Concordia Projects.

Concordia are a construction project management and property development business with a fantastic portfolio of projects. I’ve visited some of Concordia’s completed development projects in the past and they’re really impressive, the level of detail throughout is fantastic.

Concordia Website

As with Nest, the site was a really enjoyable project to design and develop and I’m pleased with the way the site turned out and I learned a few new CSS tricks along the way.

CSS Masking

The rounded edged hexagons gave me a great opportunity to play with CSS masks. As the site is content managed I needed some way of allowing the client to upload their own images and keep the hexagon style. CSS masks are really easily implemented, you can either effectively plot the points of your mask or use an image. I went with an SVG for the mask as I needed to use it at multiple sizes.


.mask{
	-webkit-mask: url('../images/hexagon-mask-01.svg') no-repeat;
}

Support for CSS masks is generally pretty good although falls apart in all versions of Internet Explorer (typical!). I’ve used Modernizr to fall back to a much simpler border-radius based solution in those instances.

Those of you that are sniffing around the code will spot that I haven’t used masks for all the hexagons, some are just a simple image based solution. There are a number of reasons for this but I won’t go into those here (partly because they’re pretty boring reasons).

Fixed Backgrounds

Part of the site that I really like is the way the outlined hexagons in the background work on both the black and the white sections of the site staying in exactly the same place throughout (I have to confess this was an idea from the very talented front end developer Dave Sellers). The code is really, really simple for this but it’s a nice effect. The background image is set to fixed on both the body and the inverted <section>.

Fixed Background Movement


body, section.invert{
	background-image: url('../images/hexagons-bg.png');
	background-attachment: fixed;
}
section.invert{
	background-color: #1d1d1b;
}

For such a simple piece of code, I think it gives a lot and is a nice little piece of attention to detail.

I hope you like the site! Let me know what you think.

Take a look at the site

Don't be shy! Leave a comment…