Jane Love/homepage

Color Palettes

Fonts Combination

Bellefair

Barlow Condensed

Roboto

Didact Gothic

Overview

What does the company do, or offer?

A team of professional photographers, professional make up artists based in who specialize in wedding, pre-wedding and engagement photography. Our goal is to make your special day as beautiful and memorable as it can be. A team of professional photographers, professional make up artists based in Vancouver BC Canada who specialize in wedding, pre-wedding and engagement photography. Our goal is to make your special day as beautiful and memorable as it can be.

Who is the company to potential customers?

All aged couples who are trying to plan a perfect wedding, or who just wants to take couple photos. Our price make sure most people find it affordable

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

Our price is reasonable, we offer great variety of service, an the order process is easy

Imagery

wedding imagery
wedding imagery
wedding imagery
wedding imagery
wedding imagery
wedding imagery

Interactive Elements

In-text link

This is an example of an in-text link, click here to go to Google.

CSS selector:

a:hover

Sample code:

<a href="#">Text</a>

Same Page Navigation Link

CSS selector:

.navlink

Sample code:

<nav class="navlink"> <a href="#interactive_elements">Interactive Elements</a> <a href="#text_elements">Text Elements</a> <a href="#combined_elements">Combined Elements</a> <a href="#citations">Citations</a> </nav>

Submit/Reset Buttons

CSS selector:

button

Sample code:

<button>Submit</button>

Text Input Field with Label

CSS selector:

.input

Sample code:

<form method="get" action="#"> <label class="input" for="name">Name: </label> <input id="name" type="text" placeholder="Your Name"> <label class="input" for="birthday">Birthday: </label> <input id="birthday" type="date" > <label class="input" for="comment">Comment:</label> <textarea id="comment" placeholder="Your comment here"> </textarea> <form>

Radio Button with Label

CSS selector:

.radio_button

.radio_button input

.checkmark

Sample code:

<label class="radio_button">Package A: $400 <input type="radio" checked="checked" name="radio"> <span class="checkmark"></span> </label> <label class="radio_button">Package B: $450 <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="radio_button">Package C: $600 <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="radio_button">Package D: $900 <input type="radio" name="radio"> <span class="checkmark"></span> </label>

Image as a Link

Jane Love/homepage

CSS selector:

a

Sample code:

<a href="index.html"><img src="img/logo.png" alt="Jane Love/homepage" class="logoimage"></a>

Text Elements

H1: Four levels of headings

H2: Our mission

H3: Book a time

H4: Contact us


CSS selector:

h1, h2, h3, h4

Sample code:

<h1>H1: Four levels of headings</h1> <h2>H2: Our mission</h2> <h3>H3: Book a time </h3> <h4>H4: Contact us</h4>

A paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

CSS selector:

p

Sample code:

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>

Numbered Lists

  1. Single person
  2. Couple
  3. Group
  4. Other

CSS selector:

ol

Sample code:

<ol> <li>Single person</li> <li>Couple</li> <li>Group</li> <li>Other</li> </ol>

Combined Elements

Navigation Link

CSS selector:

.navlink

Sample code:

<nav class="navlink"> <a href="#interactive_elements">Interactive Elements</a> <a href="#text_elements">Text Elements</a> <a href="#combined_elements">Combined Elements</a> <a href="#citations">Citations</a> </nav>

Product/Service Listing

wedding planning service

Wedding Planning

Pre-planned, all-inclusive, wedding packages. All you have to do is show up and say, I do. Discover more details.

makeup and hair style service

Makeup and Hair Style

We provide a professional full hair and makeup service team focused on making the most of your special day! Discover more details.

wedding style design service

Wedding Style Design

The style and design of your wedding day really help set the stage for you to tell your ultimate love story. Discover more details.

CSS selector:

.prodcontainer

Sample code:

<div class="prodcontainer" style="width:25%"> <img src="img/weddingphoto6.jpg" alt="wedding makeup & hair service" class="prodimage"> <div class="prodoverlay"> <div class="prodtext"> <h2> Wedding Makeup & Hair</h2> <p>We provide a professional full hair and makeup service team focused on making the most of your special day! Whether you’d prefer to come in our studio or have our mobile services we are here to make you shine! <a href="#">Discover more details.</a> </p> </div> </div> </div>

Payment Form

Billing Address

Payment

Choose your Payment Method

CSS selector:

.checkout1

.checkout2

Sample code:

<div class="cContainer"> <div class="payContainer"> <div class="checkout1"> <h3>Billing Address</h3> <label for="uname">First Name</label> <input type="text" id="uname" name="Firstname" placeholder="Helena"> <label for="uname">Last Name</label> <input type="text" id="lname" name="Lastname" placeholder="Wan"> <label for="email">Email</label> <input type="text" id="email" name="email" placeholder="Helena@example.com"> <label for="add">Address</label> <input type="text" id="add" name="add" placeholder="13733.15th Street"> <label for="city">City</label> <input type="text" id="city" name="city" placeholder="Burnaby"> <label for="state">State</label> <input type="text" id="state" name="state" placeholder="BC"> <label for="text">Zip Code</label> <input type="text" id="text" name="zip" placeholder="V3J 0E5"> </div> <div class="checkout2"> <h3>Payment</h3> <p>Choose your Payment Method</p> <label class="Rcontainer">Credit Card/Debit Card <input type="radio"> <span class="click"></span> </label> <label class="Rcontainer">Paypal <input type="radio"> <span class="click"></span> </label> <label for="cname">Name on Card</label> <input type="text" id="cname" name="Cardname" placeholder="Helena Wan"> <label for="cardnumber">Credit card number</label> <input type="number" id="cardnumber" name="cardnumber" placeholder="1111-2222-3333-4444"> <label for="expmonth">Exp Month</label> <input type="text" id="expmonth" name="expmonth" placeholder="October"> <label for="expyear">Exp Year</label> <input type="text" id="expyear" name="expyear" placeholder="2021"> <label for="cvv">CVV</label> <input type="text" id="cvv" name="cvv" placeholder="555"> </div> </div> </div>

Checkout Cart

Cart

Wedding Plan 1 $600

Photograph $200

Makeup $150

Wedding Decoration $500


Total:$1450

CSS selector:

.checkout3

Sample code:

<div class="checkout3"> <h3>Cart</h3> <p>Wedding Plan 1 <span class="price">$600</span></p> <p>Photograph <span class="price">$200</span></p> <p>Makeup <span class="price">$150</span></p> <p>Wedding Decoration <span class="price">$500</span></p> <hr> <p> Total:$1450 </p> <button class="pay">Pay</button> </div>

Citations

  1. Color code https://colours.neilorangepeel.com
  2. W3C Coding School Here
  3. Hamburger menu component: cubic-bezier,transition, transform-origin Property, nth-last-child() Selector, cubic-bezier from W3C
  4. Wedding Photos retrieved from Unsplash
  5. Icon used in this project Font Awesome
  6. Home page paragraph texts retrieved from Love and Confetti
  7. Document checking completed by https://validator.w3.org/
  8. Homepage photos retrieved from Blush Wedding