Bonsai Haven – CSS Task

Welcome to this exciting web design programming challenge designed to enhance your CSS skills. Today you’ll be working on the home page of an online shop called Bonzai Haven, an online store specialising in selling beautiful bonsai trees.

In this challenge, you will be provided with the HTML and JavaScript code for the home page of the online shop as well as a partially completed CSS file to give the page the desired look & feel. Your task is to complete the CSS to match the provided design image. This exercise will help you practice and refine your CSS skills, including layout design, styling of text pictures and buttons, and responsiveness.

Intended Home Page Design

Here is a picture of the intended final look & feel for the home page of Bonsai Haven:

CSS Syntax

A CSS rule consists of a selector and a declaration block. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

Here’s an example of a CSS rule that uses a class selector and applies several properties:

.my-class {
    color: #ff0000;
    font-size: 16px;
    margin: 10px 20px;
    padding: 20px;
    border: 1px solid black;
}

In this example, all elements with the class my-class will have red text, a font size of 16 pixels, a margin of 10 pixels (top and bottom) and 20 pixels (left and right), padding of 20 pixels, and a solid black border.

To Do List

You will complete this task step by step by adding CSS properties to apply formatting options to the relevant sections of the page. The HTML/CSS code is provided at the bottom of this page and you will be able to edit the CSS code online.

In order to complete this task you will need to familiarise yourself and research the main CSS properties using the following CSS tutorial from w3schools.

Complete each action from the following 2 tabs:

Body and Header SectionCategories / Navigation ButtonsProduct Cards

First we will focus on the main body and the top section of the page:

• Body of the page:
  Apply a padding of 30 pixels to the body of the page
  Change the font colour to #303030
  Change the background colour to #335625
  Change the font to Raleway, sans-serif
• Shop container:
  Set the maximum width of this element to 1400 pixels
  Set the margin to 40px (top and bottom) and auto (left and right) to center the shop on the page.
• Shop header:
  Apply a white colour to the text
  Apply a bottom margin of 40 pixels
• h1 tag within the shop-header:
  Change the size of the text to 3.5rem
  Apply a bottom margin of 20 pixels
• p tag within the shop header
  Change the size of the text to 1.6rem
  Change the opacity of this element to 0.8;
  Set the maximum width attribute to 800 pixels
  Apply the Caveat, cursive font to this element

Let’s now focus on the 4 navigation buttons used to select a category of trees.

• Categories section:
  Set a margin to 20 pixels (top and bottom) and 0 pixel (left and right)
• Category buttons:
  Set a right margin of 15 pixels
  Set the padding to 10 pixels (top and bottom) and 20 pixels (left and right)
  Change the border radius to 25 pixels
  Apply a background colour using the following rgba code: (255,255,255,0.1)
  Apply a 1 p pixel solid border with a colour using the following rgba code: (255,255,255,0.2)
  Apply a white colour to the text
  Change the mouse cursor to display a pointer

Now let’s focus on formatting the product cards:

• Products Grid Section:
  Change the gap to 20 pixels
• Product Card Section:
  Change the background colour to white
  Set the border radius to 15 pixels
  Add a shadow effect using your own choice of settings for the shadow
• Product Details Section:
  Add a padding of 25 pixels
• Product Name Section:
  Change the font to Raleway, sans-serif
  Change size of the text to 1.5rem
  Add a bottom margin of 10 pixels
• Product Description Section:
  Set the colour of the text to #666
  Set the line height property to 1.4
  Add a bottom margin of 20 pixels
• Product Price Section:
  Set the colour of the text to #58873d
  Change size of the text to 1.5rem
  Set the font weight to bold
• Add to Cart button:
  Set the background colour to #58873d
  Set the padding to 12 pixels (top and bottom) and 25 pixels (left and right)
  Set the border radius to 25 pixels
  Remove the border (set the border property to none)
  Change the mouse cursor to display a pointer
  Change the background colour to #70a751 when the user hover over the button

HTML / CSS Code

Complete the CSS code by pressing the “Edit on Codepen” button in the top right corner of the below frame.

Solution...

The solution for this challenge is available to full members!
Find out how to become a member:
➤ Members' Area