Headings
CSS selector
.heading1
Sample code:
<h1 class="heading1">Heading 1</h1>
Rendered element:
Heading 1
CSS selector
.heading2
Sample code:
<h2 class="heading2">Heading 2</h2>
Rendered element:
Heading 2
CSS selector
.heading3
Sample code:
<h3 class="heading3">Heading 3</h3>
Rendered element:
Heading 3
Paragraphs / Product Description Text
CSS selector
.paragraph
Sample code:
<p class="paragraph">Topped with maple bacon, guacamole, mayo, lettuce, and tomato with double slices of pepper jack cheese.</p>
Rendered element:
Topped with maple bacon, guacamole, mayo, lettuce, and tomato with double slices of pepper jack cheese.
Prices
CSS selector
.plan-price
Sample code:
<h4 class="plan-price">$115.00</h4>
Rendered element:
$115.00
Progress Bar
CSS selector
.progress-bar-container
.progress-bar
.active
Sample code:
<div class="progress-bar-container">
<ul class="progress-bar">
<li class="active"><p>Order</li>
<li>Review</li>
<li>Done!</li>
</ul>
</div>
Rendered element:
Plan Cards
CSS selector
.content-box
.plan-description/p>
Sample code:
<div class="content-box">
<h3 class="heading3"<1 Month Plan</h3<
<h4 class="plan-price"<$445.00</h4<
<p class="plan-description body"<Don’t have time to cook for the next month? Select this short 1 month plan to receive meal boxes and not worry about cooking.</p>
<button class="default-button" onclick="window.location.href='register-plan-2.html'">Select Plan</button>
</div>
Rendered element:
1 Month Plan
$445.00
Don’t have time to cook for the next month? Select this short 1 month plan to receive meal boxes and not worry about cooking.
Main Navigation
CSS selector
.navigation
.wrapper
.nav-logo
.button-nav
Sample code:
<nav class="navigation">
<nav class="wrapper">
<a class="nav-logo" href="index.html">MealBox</a>
<ul>
<li><a class="button-nav" href="menu.html">Menu</a></li>
<li><a class="button-nav" href="our-plans.html">Our Plans</a></li>
<li><a class="button-nav" href="contact.html">Contact</a></li>
<li><a class="button-nav" href="account.html">My Account</a></li>
</nav>
</nav>
Rendered element:
Product Listing
CSS selector
.grid-item
.menu-item
.container
.item-content
#foodContent-1
.heading3
.item-title
.inText-Link
.review-link
.rating
.paragraph
.default-button
.add-item
.item-reviews
#itemReview-1
.review-back
.back-icon
.review-title
.user-reviews
.comment
Sample code:
<div class="p-listing">
<div class="grid-item menu-item container">
<div class="item-content" id="foodContent-1">
<h3 class="heading3 item-title">California Burger
<p class="paragraph">Topped with maple bacon, guacamole, mayo, lettuce, and tomato with double slices of pepper jack cheese.</p>
<button class="default-button add-item" onclick="">Add</button>
</div>
<img class="image" src="img/burger.jpg" alt="">
</div>
</div>
Rendered element:
California Burger
Topped with maple bacon, guacamole, mayo, lettuce, and tomato with double slices of pepper jack cheese.
Contact
CSS selector
.form-container
.form
Sample code:
<div class="form-container">
<h2 class="heading2">Contact Form</h2>
<form class="form" action="/action_page.php">
<label for="name">Your Name</label>
<input type="text" id="name" class="textInput-field" placeholder="Enter your full name">
<label for="email">Your E-mail</label>
<input type="text" id="email" class="textInput-field" placeholder="Enter your e-mail">
<label for="message">Message</label>
<textarea id="message" class="textInput-field" placeholder="Type your message here"></textarea>>
<button class="default-button">submit</button>
</form>
</div>
Rendered element:
Grid
CSS selector
.grid
.grid-item
Sample code:
<div class="grid">
<div class="grid-item">column 1</div>
<div class="grid-item">column 2</div>
<div class="grid-item">column 3</div>
<div class="grid-item">column 4</div>
<div class="grid-item">column 5</div>
<div class="grid-item">column 6</div>
<div class="grid-item">column 7</div>
<div class="grid-item">column 8</div>
</div>
Rendered element:
column 1
column 2
column 3
column 4
column 5
column 6
column 7
column 8
Colour Scheme
Primary Colours
#8acb88
#e4fde1
#70B481
Secondary Colours
#cf5c36
#efc88b
Grayscale Colours
#07080a
#24272b
#596068
#d4d9df