logo

Project:
Single-Page Website
Concept

  • CLIENT: Juno Theme
  • YEAR: 2020
  • PROJECT: Website Concept
Scroll
  • HTML 5
  • CSS 3
  • FRAMEWORK: BOOTSTRAP 4
  • ADOBE PHOTOSHOP

"Juno Theme" was created to showcase a professional-looking single-page website which is great for small to medium-sized business who want to show their portfolio and services in a clean and fun animated page.

The
Brief:

Design and build a fully animated, single-page website theme utilising Bootstrap 4 in order to show off a small to medium-sized business. Sections to to include are a full-page landing area, features section, portfolio section, service pricing boxes, a "Meet The Team" section, skills counter, testimonials and a basic contact form. The theme has to be fully responsive and also work beautifully on mobile phones and tablets.

The
Process:

We approached this section by section, which is made incredibly simple by utilising Bootstrap, starting with the full-sized landing image and animated introduction text alongside a working button. Afterwards came a couple of different features sections which again are animated to catch the eye of the browser. The second features section also uses a parallax scrolling image designed to help break up the different sections, but keep the flow of the website in mind. Next up was the portfolio carousel which was designed with a tiled appearance in mind. The tiles have a pleasing slight zoom effect applied when a user hovers over them and opens a lightbox carousel when clicked. The pricing boxes have a zoom feature when hovered over, too. The team section follows using another carousel to display different members of the organisation's team. Next up is a "skills counter" which is an animated counter that can be used to display all sorts of things. The client testimonial section is next which again uses another carousel to display recent clients and their given reviews for the work done by the business. Lastly comes the contact section which contains a working contact form alongside regular contact information.

The
Conclusion:

The theme was quite easy to put together with proper planning and can easily be adapted for any kind of business startup that wants a good-looking single-page website. In the example, we used stock images for an office-based business feel and the featured team members. Instead of using "lorem ipsum" placeholder text, we tried to come up with something a bit more meaningful, but we also used the features section to show off the features of the theme in case we wanted to market the theme itself for other web developers to customise for projects. One of the other great features of this theme is writing markup that properly identifies each individual section so we could include buttons that smoothly scroll the page so a user doesn't have to scroll to locate a specific section.

Next project