Building a Website Page - Main Contents
Toms Main Section
So lets have a look at all the elements that have gone into making the main part of this front page starting from the top we'll look at it section by section.
Section 5. ‐ CTA & Ad Banner
CTA (call to action) is a marketing term that refers to anything designed to prompt a users immediate response to something.
The use of this term regarding websites usually refers to a action link or button e.g. login, view details, book or buy now are just a few.
I decided to make the "cta_panel" into a banner which spans across the page with the dark blue background and a high contrasting orange top/bottom border and <h2> "Top Cats Choice" to catch the users attention and make it standout as being different to any other section with a dark background.
Even though on this page I haven't actually included a button or link the banner is still advertising two unique special features of the shop. First a weekly cupcake special and secondly a recipe of the month, with free collectable recipe cards for customers.
The call to action comes in the last two sentences where it suggests what you should do and when you should do it with the words "come over, check out, collect & today". Both of these features are a great advertising gimmick designed to encourage a repeat loyal customer following.
Section 6. ‐ Photo Gallery
This last section on the front page is a photo gallery which could be adapted to any website by adding your own pictures and removing or changing the background colour. Here on Toms website I've added the dark blue background again. This not only ties it into the rest of the site, but also sits nicely against the photos.
By using CSS flex properties I'm able to position the photo's with equal space around each one. Flex will then also control the positioning of the photos depending on the width of the users screen by wrapping them from the right onto a new line as the screen gets smaller. So on mobile screens the photos will be in a column and on desktop screens in a row.