Interactive Elements

In-Text Link

CSS Selector:

Sample Code:

<a href="#listings">our selection</a>

Rendered Element:

All your pet sitting needs in one place! Whether you're working full-time or in need of a pet sitter for vacation, Pawsitively Pals can help you find the right type of pet-sitter for your furry friends and family. Check out our selection of pet sitting services today!

Text Input Field with Label

CSS Selector:

.form-info

Sample Code:

<label for="form-name">Name:</label>

Rendered Element:

Image as a Link

CSS Selector:

.element a:hover img

Sample Code:

<a href="https://www.akc.org/expert-advice/dog-breeds/french-bulldog-became-2-popular-dog/"><img src="img/frenchie.jpg" alt="Three French bulldogs on a walk with a woman width="729" height="424"></a>

Rendered Element:

Three French bulldogs on a walk with a woman

Text Styling

Four Levels of Headings

CSS Selector:

.element h1

Sample Code:

<h1>Pawsitively Paws</h1>

Rendered Element:

Pawsitively Pals

Who We Are

Service Listings

Dog Sitting - Half Day

Paragraph

CSS Selector:

.element

Sample Code:

<p>All your pet sitting needs in one place!</p>

Rendered Element:

Numbered List

CSS Selector:

.element

Sample Code:

<ol><li>Item 1</li></ol>

Rendered Element:

Item 1
Item 2
Item 3

Combined Elements

Main Navigation

CSS Selector:

.element, .main-nav.grid, .main-nav-item

Sample Code:

<a href="#interactive-elements" class="main-nav-item">Interactive Elements</a>

Rendered Element:

Service Listings

Dog Sitting - Half Day

Four dogs on a walk in the park with a woman

$10/hour/pet

Dog sitting for up to 12 hours.

Book Now

Dog Sitting - Full Day

$20/hour/pet

Dog sitting for up to 24 hours.

Book Now

Vacation Pet Boarding - Dogs Only

$20/day/pet

Dog sitting and boarding services for vacation.

Book Now

Vacation Pet Boarding - Cats Only

$20/day/pet

Cat sitting and boarding services for vacation.

Book Now

Vacation Pet Boarding - Dogs and Cats

$20/day/pet

Dog and cat sitting and boarding services for vacation.

Book Now

Who We Are

Color Palettes and Fonts

Cream - RGB(255, 235, 208)

H1, background color, navigation menu links, text input fields (hovered) and labels

Brown - RGB(126, 98, 70)

H2, H3, form background, service listing card background

White - RGB(255, 255, 255)

Text input field (normal state), alt. background color, service listing card H4 and p

Teal - RGB(0, 128, 128)

Base color, navigation links and buttons

Teal (hovered) - RGB(0, 202, 202)

Hovered links

Fonts

Sacramento

Alata

Lato

Arial, Helvetica, Verdana, sans-serif

Citations

Code

n.d. HTML <button> Tag [Webpage]. Retrived from https://www.w3schools.com/tags/tag_button.asp
n.d. HTML <fieldset> Tag [Webpage]. Retrived from https://www.w3schools.com/tags/tag_fieldset.asp
n.d. Display Text Input Fields [Webpage] Retrived from https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_text
n.d. Image as a Link [Webpage]. Retrived from https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_image
n.d. How to Add an Anchor Link to Jump to a Specific Part of a Page [Webpage]. Retrieved from https://www.w3docs.com/snippets/html/how-to-create-an-anchor-link-to-jump-to-a-specific-part-of-a-page.html
n.d. Card [Webpage]. Retrived from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_cards
n.d. Responsive Column Cards [Webpage]. Retrived from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_column_cards
Coding Artist. 2021. Draw Underline Link Hover Effect | CSS Menu Hover Effect [Video]. Retrived from https://www.youtube.com/watch?v=aswRKAjjWuE
n.d. How to display html tags as plain text in HTML [Webpage]. Retrived from https://devpractical.com/display-html-tags-as-plain-text/

Fonts

Bonislawsky, Brian J. Astigmatic. Designer. n.d. Sacramento [Font]. Retrived from https://fonts.google.com/specimen/Sacramento
Zevelakis, Spyros, and Sorkin, Eben. Designer. 2018. Alata [Font]. Retrieved from https://fonts.google.com/specimen/Alata
Twardoch, Adam, Nikoltchev, Botio, and Dziedzic, Łukasz. Designers. 2010. Lato [Font]. Retrvied from https://fonts.adobe.com/fonts/lato

Images

n.d. French Bulldog Dog Breed Information, Pictures, Characteristics & Facts [Webpage]. Retrieved from https://dogtime.com/dog-breeds/french-bulldog#/
Bovsun, Mara. Author. 2021. The Bon Vivant: How the French Bulldog became the No. 2 Most Popular Dog [Image]. Retrieved from https://www.akc.org/expert-advice/dog-breeds/french-bulldog-became-2-popular-dog/
2021. Three French bulldogs on a walk with a woman [Image]. Retrieved from https://www.akc.org/expert-advice/dog-breeds/french-bulldog-became-2-popular-dog/
Curran, Erica Jackson. Author. 2020. 7 interview questions to ask a potential pet sitter [Webpage]. Retrieved from https://www.care.com/c/how-to-interview-a-pet-sitter/
2020. Four dogs on a walk in the park with a woman [Image]. Retrieved from https://www.care.com/c/how-to-interview-a-pet-sitter/
Morrison, Kristin. Author. 2019. Adding In-home Pet Sitting to Your Existing Pet Care Business [Article]. Retrived from https://www.ibpsa.com/blog/2019/11/18/adding-in-home-pet-sitting-to-your-existing-pet-care-business-for-extra-profit/
Morrison, Kristin. Author. 2019. Adding Pet Sitting to Existing Pet Care Business [Image]. Retrived from https://www.ibpsa.com/blog/2019/11/18/adding-in-home-pet-sitting-to-your-existing-pet-care-business-for-extra-profit/
n.d. Overnight Away Without Your Dog? Get A Dog Sitter [Webpage]. Retrived from https://www.strutthepup.com/leaving-dog-overnight-sitter/
n.d. Dog sleeping under a blanket [Image]. Retrived from https://www.strutthepup.com/leaving-dog-overnight-sitter/
Vader, Julie. Author. n.d. Cat and dog friends nap together on a bed [Image]. Retrived from https://www.companionanimalpsychology.com/2018/12/dogs-cats-and-humans-best-sleep-partner.html
n.d. How Long Do Cats Sleep? [Article] Retrived from https://www.purina.co.uk/articles/cats/behaviour/common-questions/cat-sleeping-habits

Color Palette Inspirations

n.d. Cream And Teal Color Scheme [Webpage]. Retrived from https://www.schemecolor.com/cream-and-teal-color-scheme.php
Cary, Josh. Author. 2017. 7 Examples of Pet Sitter Websites That Perfectly Connect With Visitors [Blog Post]. Retrived from https://petsittingology.com/7-examples-of-pet-sitter-websites-that-perfectly-connect-with-visitors/
Morrison, Jamie. Author. n.d. 100+ Best Pet Care, Grooming & Petsitting Websites [Webpage]. Retrived from https://whatpixel.com/petcare-website-gallery/, as cited from http://www.katescanineresort.com/

Interactive Elements

In-Text Link

CSS Selector:

Sample Code:

Rendered Element:

Text Input Field with Label

CSS Selector:

Sample Code:

Rendered Element:

Contact Us

Image as a Link

CSS Selector:

Sample Code:

Rendered Element:

Text Styling

Four Levels of Headings

CSS Selector:

Sample Code:

Rendered Element:

Pawsitively Pals

Who We Are

Service Listings

Dog Sitting - Half Day

Paragraph

CSS Selector:

Sample Code:

Rendered Element:

Numbered List

CSS Selector:

Sample Code:

Rendered Element:

Combined Elements

Main Navigation

CSS Selector:

Sample Code:

Rendered Element:

Service Listings

Dog Sitting - Half Day

$10/hour/pet

Dog Sitting - Full Day

$20/hour/pet

Vacation Pet Boarding - Dogs Only

$20/day/pet

Vacation Pet Boarding - Cats Only

$20/day/pet

Vacation Pet Boarding - Dogs and Cats

$20/day/pet

Who We Are

Color Palettes and Fonts

Cream - RGB(255, 235, 208)

Brown - RGB(126, 98, 70)

White - RGB(255, 255, 255)

Teal - RGB(0, 128, 128)

Teal (hovered) - RGB(0, 202, 202)

Fonts

Sacramento

Alata

Lato

Arial, Helvetica, Verdana, sans-serif

Citations

Code

Fonts

Images

Color Palette Inspirations