Interactive Elements

In-text link

CSS Selector:

.intext-link

Sample Code:


                     <a href="#text" class="intext-link">open tour dates</a>

Rendered Element:

Interested in a tour? See our open tour dates.

Navigation Link

CSS Selector:

.button

Sample Code:


                    <a class="button" href="#brand">About Us</a>

Rendered Element:

About Us

Submit/Reset Buttons

CSS Selector:

.button

Sample Code:


                    <form> 

                        <button type="submit" class="button">Submit</button> 

                        <button type="reset" class="button">Reset</button> 

                    </form>

Rendered Element:

Text Input

CSS Selector:

#parent

Sample Code:


                    <label for="parent">Parent/Guardian Name:</label> 

                    <input type="text" id="parent" name="parent-name">

Rendered Element:

Parent/Guardian Name:

Radio Button

CSS Selector:

#button-radio

Sample Code:


                    <input type="radio" id="prog-full" class="button-radio" name="program" value="full"> 

                    <label for="prog-full">Full-time Daycare</label> 

                    <input type="radio" id="prog-infant" class="button-radio" name="program" value="infant"> 

                    <label for="prog-infant">Infant & Toddler Program</label> 

                    <input type="radio" id="prog-multi" class="button-radio" name="program" value="multi"> 

                    <label for="prog-multi">Multi-Age Care Program</label>

Rendered Element:

Full-time Daycare Infant & Toddler Program Multi-Age Care Program

Image as Link

CSS Selector:

img or .img-link

Sample Code:


                    <a href="#brand">

                        <img class="img-link" src="img/daycare.png" alt="Daycare building">

                    </a>

                    <a href="#brand">

                        <img class="img-link" src="img/img1.jpeg" alt="Children playing at 5 Corners Daycare">

                    </a>

Rendered Element:

Text Styling

Headings

CSS Selector:

h1
h2
h3
h4

Sample Code:


                    <h1> Header1: 5 Corners Daycare</h1> 

                    <h2>Header2: Licensed Childcare Services in Surrey</h2> 

                    <h3>Header3: Programs for Children Ages 0–12</h3> 

                    <h4>Header4: Full-time, Part-time, and School Pick-up Options</h4>

Rendered Element:

Header1: 5 Corners Daycare

Header2: Licensed Childcare Services in Surrey

Header3: Programs for Children Ages 0–12

Header4: Full-time, Part-time, and School Pick-up Options

Paragraphs

CSS Selector:

Sample Code:


                    <p> 5 Corners Daycare is a caring and reliable childcare centre that treats every child like family.</p>

Rendered Element:

5 Corners Daycare is a caring and reliable childcare centre that treats every child like family.

Numbered List

CSS Selector:

ol
li

Sample Code:


                    <ol> 

                        <li>Licensed daycare with over 10 years of experience.</li> 

                        <li>Programs designed for different age groups.</li> 

                        <li>Low child to teacher ratios for individual care.</li> 

                        <li>School dropoff and pick-up for Forsythe Elementary.</li> 

                        <li>Structured yet flexible daily routines.</li> 

                    </ol>

Rendered element:

Licensed daycare with over 10 years of experience.
Programs designed for different age groups.
Low child to teacher ratios for individual care.
School drop-off and pick-up for Forsythe Elementary.
Structured yet flexible daily routines.

Combined Elements

Main Navigation

CSS Selector:

.nav

Sample Code:


                    <nav class="nav"> 
 
                        <a href="#home">Home</a> 

                        <a href="#about">About</a> 

                        <a href="#programs">Programs</a> 

                        <a href="#location-hours">Location & Hours</a> 

                        <a href="#contactUs">Contact Us</a> 

                    </nav>

Rendered Element:

Product / Service Listing

CSS Selector:

article
article h4
article img
article p

Sample Code:


                    <article>
                        <h4>Full-Time Daycare (Ages 3–5)</h4>
                        <img src="img/preschool.jpg" alt="Preschool children doing creative activities">
                        <p>A structured preschool program that supports learning, creativity,and school readiness.</p>
                        <p>Ratio: 1 teacher for 8 children</p>
                        <p>Estimated monthly cost: $950</p>
                        <p><a href="#preschool-details">View program details</a></p>
                    </article>

Rendered Element:

Infant & Toddler Program

A nurturing program designed for infants and toddlers with a focus on early development and routine.

Ratio: 1 teacher for 4 children

Estimated monthly cost: $1200

View program details

Multi-Age Care Program

Children of different ages playing together

A flexible program where children of different ages learn and play together in a supportive environment.

Ratio: 1 teacher for 4 children

Estimated monthly cost: $1000

View program details

Full-Time Daycare (Ages 3–5)

Preschool children doing creative activities

A structured preschool program that supports learning, creativity, and school readiness.

Ratio: 1 teacher for 8 children

Estimated monthly cost: $950

View program details

Payment Form

CSS Selector:

form
input
label
button

Sample Code:

    
                <form> 

                <label for="parent-name">Parent Name</label> 

                <input type="text" id="parent-name">

                <p>Payment Method:</p>

                <input type="radio" id="credit" name="payment">

                <label for="credit">Credit Card</label>

                <input type="radio" id="etransfer" name="payment">

                <label for="etransfer">E-Transfer</label>

                <label for="card-name">Cardholder Name</label>

                <input type="text" id="card-name">

                <label for="card-number">Card Number</label>

                <input type="text" id="card-number">

                <label for="expiry">Expiry Date</label>

                <input type="text" id="expiry">

                <label for="cvv">CVV</label>

                <input type="text" id="cvv">

                <button type="submit">Pay Now</button>

                </form>

Rendered Element:

Checkout Cart

CSS selector:

table
table th
table td
.selected-program

Sample code:


                    <table> 

                    <tr> 

                    <th>Item</th> 

                    <th>Cost</th> 

                    </tr> 

                    <tr> 

                    <td>Selected Program: Full-Time Daycare (Ages 3–5)</td> 

                    <td>$950</td> 

                    </tr> 

                    <tr> 

                    <td>Registration Fee</td> 

                    <td>$75</td>
 
                    </tr> 

                    <tr> 
 
                    <td>Spot Deposit</td>

                    <td>$200</td>

                    </tr>

                    <tr>

                    <th>Total</th>

                    <th>$1225</th>

                    </tr>

                    </table>

Rendered element:

Item	Cost
Selected Program: Full-Time Daycare (Ages 3–5)	$950
Registration Fee	$75
Spot Deposit	$200
Total	$1225

The Brand

What does the company do, or offer?

5 Corners Daycare is a licensed childcare centre in Surrey that provides full-time and part-time daycare services for children in multiple age groups. The daycare offers daily programs and age-appropriate activities. Also my grandparents daycare.

Who is the company to potential customers?

As a person, 5 Corners Daycare is trustworthy. The daycare acts as second home or parents offering a welcoming environment where children feel comfortable and encouraged to learn and grow. Targeting parents as persona.

Why might this company entice someone to purchase a product or service?

Families may choose 5 Corners Daycare because it has been licensed and operating for over 10 year and offers flexible scheduling options. And most importantly run by amazing grandparents who raised generations and built the space for there grandkids.

Brand Components

Fonts

Archivo Black

Coming Soon

Sour Gummy

Nunito

Colour Palette

White

#FFFFFF

Purple

#822C91

Blue

#0053A3

Light Blue

#34C3EF

Green

#A6CA4E

Black

#000000

Imagery and Art Direction

png of hearts for love feeling in the daycare

Font Combinations

5 Corners Daycare

Our Programs

5 Corners Daycare offers nurturing, age-appropriate care for infants, toddlers, and preschoolers. Our programs balance play-based learning, routine, and a supportive environment where children feel safe, confident, and engaged.

View Programs