Basic Interactive Elements

In-text Link

This is a link within a paragraph.

HTML Code

<p>This is a <a href="#0">link</a> withing a paragraph.</p>

CSS Code

a{
							color:#001AFF;
							display:inline-block;
							transition: transform .2s; /* Animation */
							}

							a:hover{
								transform:scale(1.05);
							}

CTA Button

HTML Code

<a href="#0"><button class="cta-button">Order Now</button></a>

CSS Code

button{
								font-family:"ubuntu mono", monospace;
								font-weight:bold;
								font-size:1rem;

								color:black;
								border-radius: 0;
								border-style:solid;
								border-color:black;
								border-width:3px;
								padding:1rem 2rem;

								box-shadow: .5rem .5rem black;
								background-color:#FED10A;
								margin-right:1rem;

								transition: transform .2s; /* Animation */
							}

							button[type]:hover{
								transform:scale(1.05);
							}

							button.cta-button:focus{
							outline:0rem;
							}

							button[type]:focus{
								outline:0rem;
							}

Form Submit and Reset Buttons

HTML Code

<button type="submit">Submit</button>
						<button type="reset">Reset</button>

CSS Code

button[type="reset"]{
							background-color:#c6c6c6
							}

Text Input Field and Label

Address

HTML Code

<label for="address">Address</label>
						<input type="text" placeholder="Placeholder Text">

CSS Code

input{
							font-family:"ubuntu mono", monospace;

							margin-top:.5rem;
							padding:.75rem;
							
							border-radius:10px;
							border-color:#CCC;
							border-width: 1px;

							box-shadow: .5rem .5rem;
						}

						input[type]:focus{
							outline:0rem;
						}

						input[type="address"]::placeholder{
							color:#ddd;
						}

Colors

Primary

gold

#FED10A

R: 254
						G: 209
						B: 10

violet

#6339A1

R: 99
						G: 57
						B: 161

white

#FFFFFF

R: 255
						G: 255
						B: 255

black

#000000

R: 0
							G: 0
							B: 0

Information Content Pages

teal

#2D6E62

R: 45
						G: 110
						B: 98

teal-dark

#194940

R: 25
						G: 73
						B: 64

teal-light

#55D1B9

R: 85
						G: 209
						B: 185

teal-white

#D5F3ED

R: 213
						G: 243
						B: 237

Shop Content Pages

burgundy

#B92575

R: 185
						G: 37
						B: 117

burgundy-dark

#84124F

R: 132
						G: 18
						B: 79

burgundy-light

#E04B8A

R: 224
						G: 75
						B: 138

burgundy-white

#FFB6D0

R: 255
						G: 182
						B: 208

Typography

Headings

Montserrat. This is our heading typeface.

HTML Code

<h1>H1 Heading</h1>

CSS Code

h1{
						font-size:4rem;
					}

Still Montserrat, but smaller

HTML Code

<h2>H2 Heading</h2>

CSS Code

h4{
						font-size:2rem;
					}

Montserrat is now at regular weight

HTML Code

<h3>H3 Heading</h3>

CSS Code

h3{
						font-size:1.5rem;
						font-weight: normal;
					}

Regular weight Montserrat and smaller

HTML Code

<h4>H4 Heading</h4>

CSS Code

h4{
						font-size:1.25rem;
						font-weight: normal;
					}

Kinda cute now, it's used for hierarchy in tight spaces such as the footer

HTML Code

<h5>H5 Heading</h5>

CSS Code

h5{
						margin:0;
					}

Paragraph

This is Ubuntu Mono. Meet our typeface for our paragraphs.

HTML Code

<p>Enter paragraph here.</p>

CSS Code

p{
						font-size:1rem;
						font-family: "ubuntu mono", monospace;
						font-weight: lighter;
					}

Bullet List

Item no.1
Item no.2
Item no.3

HTML Code

<ul>
					<li>Item no.1</li>
					<li>Item no.2</li>
					<li>Item no.3</li>
					</ul>

CSS Code

/*For Regular Bullet Lists*/

						/*DEFAULT*/


						/*For Footer Lists*/
						
						.footer-grid-wrapper ul{
						list-style-type:none;
						margin:1rem 0;
						padding:0;
					}

Number List

HTML Code

<ol>
						<li>Item Number One</li>
						<li>Item Number Two</li>
						<li>Item Number Three</li>
						</ol>

CSS Code

ol{
							font-family: balloon-urw-drop-shadow, sans-serif;
							font-weight: 400;
							font-style: normal;
						}

Website Grid Structure

12 Column Grid

For flexible layouts the 12 column grid is the foundation for the site's overall structure

1

2

3

4

5

6

7

8

9

10

11

12

HTML Code

<div class="grid-structure">
						<div class="placeholder-content">1</div>
						<div class="placeholder-content">2</div>
						<div class="placeholder-content">3</div>
						<div class="placeholder-content">4</div>
						<div class="placeholder-content">5</div>
						<div class="placeholder-content">6</div>
						<div class="placeholder-content">7</div>
						<div class="placeholder-content">8</div>
						<div class="placeholder-content">9</div>
						<div class="placeholder-content">10</div>
						<div class="placeholder-content">11</div>
						<div class="placeholder-content">12</div>
						</div>

CSS Code

.grid-structure{
						display:grid;
						grid-template-columns:repeat(12, 1fr);
						}

2 Column Grid

Use Cases: Cart Overview Page

50%

HTML Code

<div class="grid-structure">
						<div class="placeholder-content half">1</div>
						<div class="placeholder-content half">2</div>
						</div>

CSS Code

.grid-structure{
						display:grid;
						grid-template-columns:repeat(12, 1fr);
						}

						.third{
						grid-column:span 6;
						}

3 Column Grid

Use Cases: Featured Products Section

33%

HTML Code

<div class="grid-structure">
						<div class="placeholder-content third">1</div>
						<div class="placeholder-content third">2</div>
						<div class="placeholder-content third">3</div>
						</div>

CSS Code

.grid-structure{
							display:grid;
							grid-template-columns:repeat(12, 1fr);
						}

						.third{
							grid-column:span 4;
						}

4 column grid

Use Cases: Product Page

25%

HTML Code

<div class="grid-structure">
						<div class="placeholder-content quarter">1</div>
						<div class="placeholder-content quarter">2</div>
						<div class="placeholder-content quarter">3</div>
						<div class="placeholder-content quarter">4</div>
						</div>

CSS Code

.grid-structure{
							display:grid;
							grid-template-columns:repeat(12, 1fr);
						}

						.quarter{
							grid-column:span 3;
						}

Modular Pattern Elements

Main Navigation

Navigation bar at the top that will be used to navigate through the main pages of the site.

HTML Code

<div class="main-nav-wrapper">
						<a href=index.html><img class="dippd-logo" src="img/dippd-logo.png" alt="dippd donuts branding logo"></a>

						<nav class="main-nav-links>
						<a href="index.html"><img src="directory.png" alt="Dipp'd shop logo"></a>
						<a href="products.html">Shop</a>
						<a href="about.html">About Us</a>
						<a href="cart.html"><div class="cart-icon"></div></a>
						</nav>
						</div>

CSS Code

.main-nav-wrapper{
							width:100%;
							background-color:#6339A1;	
							display:flex;
							justify-content: space-between;
							align-items:center;
							padding: 1rem 2rem;
						}

						.main-nav-links{
							display:flex;
							justify-content: space-between;
							align-items:center;
						}

Product Grid Item

Product grid for the shopping page. Each item will have a photo, description, name, and dietary information. Users will be able to add or remove quantities through interacting with the buttons.

Wine glaze topped with a sprinkle of rose petals.

Vegan

+

Gluten-free

Petals

symbol to categorize this donut as vegan

symbol to categorize this donut as glueten-free

A pillowy glazed donut encircled with delicate coconut shavings. Formed for all coconut lovers, you will be going “coco” for this.

Vegan

+

Gluten-free

Coconut

Layered chocolately goodness encase our original blend. With a double ganache glaze and chocolate bits, there’s cocoa in every bite.

Vegan

+

Gluten-free

Choco

HTML Code

<div class="product-grid-item-wrapper">
					<div class="product-grid-item">
						<img src="img/donut.png" alt="red berry donut with three stripes across the upper left corner">
						<div class="product-grid-item-description">
							<p>Wine glaze topped with a sprinkle of rose petals.</p>
							<div class="product-grid-item-dietary">
								<p class="vegan">Vegan</p> + <p class="gluten-free">Gluten-free</p>
							</div> 
						</div> 
					</div> 

					<div class="product-grid-item-info">
						<h4>Petals</h4>
						<img src="img/vegan.png" alt="symbol to categorize this donut as vegan">
						<img src="img/gluten-free.png" alt="symbol to categorize this donut as glueten-free">
					</div>
					
					<div class="product-grid-item-quantity">
						<button type="quantity">-</button>
						<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0">
						<button type="quantity">+</button>
					</div>
				</div>

CSS Code

.product-grid-item-quantity input[type=number]::-webkit-inner-spin-button, 
						.product-grid-item-quantity input[type=number]::-webkit-outer-spin-button { 
						  -webkit-appearance: none;
						}
								.product-grid-item{
								margin:2.5rem 2.5rem 2.5rem 2.5rem;
								}

								#product-grid-item{
									background-color:#FFB6D0;
								}

								.product-grid-wrapper{
									display:grid;
									grid-template-columns: repeat(3, 1fr);
								}

								.product-grid-item-wrapper{
									display:flex;
									flex-direction: column;
									justify-content: center;
									align-self: center;
								}

								.product-grid-item{
									position:relative;
									display:flex;
									flex-direction: column;
									justify-content: center;
									align-content: center;
									z-index: 0;
								}

								.product-grid-item img{
									width: clamp(10vw,100%,50vw);
									max-height: 100%;
									margin:auto;
								}

								.product-grid-item-description{
									position:absolute;
									color:white;
									width:100%;
									height:100%;
									border-radius: 10px;
									text-align: center;
									padding:5%;

									display:flex;
									flex-direction: column;
									align-content: center;
									justify-content: center;

									opacity: 0;
									transition: opacity .2s;
								}

								.product-grid-item-description p{
									margin-top:0;
								}

								.product-grid-item-description:hover{
									opacity: 1;

									display:flex;
									flex-direction: column;
									align-content: center;
									justify-content: center;

									background-color: rgba(0,0,0,0.7);
								}

								.product-grid-item-dietary{
									display:inline;
								}

								.vegan{
									display:inline;
									color:#64D9C2;
								}

								.gluten-free{
									display:inline;
									color:#FFF5C0;
								}

								.product-grid-item-info{
									display:flex;
									justify-content: center;
									align-content: center;
								}
								.product-grid-item-info img{
									align-self: center;
									margin-left:.5rem;
								}

								.product-grid-item-quantity{
									display: flex;
									justify-content: center;
									align-items: center;
								}

								input[type="number"]{
									font-family:"ubuntu mono", monospace;

									text-align: center;

									margin-top:0;
									padding:.5rem;
									width:3rem;
									margin:0 .5rem;

									border-radius:5px;
									border: 1px solid #CCC;

									box-shadow: none;
								}

								input[type="number"]::placeholder{
									color:#ddd;
								}

								input[type=number]::-webkit-inner-spin-button, 
								input[type=number]::-webkit-outer-spin-button{ 
								  -webkit-appearance: none;
								}

								button[type="quantity"]{
									font-family:"ubuntu mono", monospace;
									font-weight:bold;
									font-size:1rem;
									color:black;

									width:2rem;
									height:2rem;
									border:none;
									border-radius: 50%;
									padding:0rem;
									background-color:#FED10A;
									box-shadow:none;
									margin-right:0;

									transition: transform .2s; /* Animation */
								}

								button[type="quantity"]:hover{
									transform:scale(1.15);
								}

Order Tracker Bar

This thing will be sticky at the bottom and keep track of the order's bill.

Subtotal $0.00

0 / 6 Donuts Selected

HTML Code

<div class="order-tracker-bar-wrapper burgundy-light">
				<div class="order-bill-wrapper">
					<h3>Subtotal $0.00</h3>
					<h4>0 / 6 Donuts Selected</h4>
				</div>
				<a href="#0"><button>Review Order</button></a>
			</div>

CSS Code

.order-tracker-bar-wrapper{
								padding: 1rem 2rem;
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;
							}

							.order-tracker-bar-wrapper h3,
							.order-tracker-bar-wrapper h4{
								margin:0;
							}

							.order-tracker-bar-wrapper h4{
								font-size:1rem;
							}

Footer

Footer navigation that will be present at the bottom of the website pages. It will include all the miscellaneous links and credentials.

HTML Code

<footer>
						<div class="container-footer-1600">
						<div class="footer-grid-wrapper">
						<div class="footer-list-wrapper">

						<div class="footer-icons-wrapper">
						<img class="dippd-logo" src="img/dippd-logo.png" alt="dippd donuts branding logo">
						<ref="http://instagram.com">
						<div class="footer-instagram-link">
						<img src="img/instagram-icon.png" alt="Instagram logo that links to the dippd Instagram page">
						<p>@dippd</p>
						</div>
						</a>
						</div>
						
						<div class="footer-location-wrapper">
						<h5>Locations</h5>
						<p>Torongo, ON</p>
						</div>
						
						<div class="footer-hours-wrapper">
						<h5>Hours</h5>
						<ul id="hours">
						<li>Mon 10AM-5PM</li>
						<li>Tue 10AM-5PM</li>
						<li>Wed 10AM-5PM</li>
						<li>Thu 10AM-5PM</li>
						<li>Fri 10AM-5PM</li>
						<li>Sat 10AM-5PM</li>
						<li>Sun 10AM-5PM</li>
						</ul>
						</div>
						
						<div class="footer-contact-wrapper">
						<h5 id="contact">Contacts</h5>
						<ul>
						<li><a href="#0">About Us</a></li>
						<li><a href="#0">Email</a></li>
						<li><a href="#0">Instagram</a></li>
						</ul>
						</div>
						
						<div class="footer-help-wrapper">
						<h5 id="help">Help</h5>
						<ul>
						<li><a href="#0">FAQ</a></li>
						<li><a href="#0">Privacy</a></li>
						<li><a href="#0">TOS</a></li>
						<li><a href="#0">References</a></li>
						</ul>
						</div>
						</div><!-- end of footer-list-wrapper div -->
						
						<div class="footer-copyright-wrapper">
						<p>© Copyright 2021 Dipp’d Donuts. All rights reserved. Website proudly created by E-Donuts Team</p>
						</div>
						</div><!-- end of footer-grid-wrapper div -->
						</div><!-- end of container-footer-1600 div -->

						</footer>

CSS Code

.footer-grid-wrapper{
							color:white;
							display:grid;
							grid-template-rows:3fr 1fr;
						}

						.footer-copyright-wrapper{
							text-align:center;
							grid-row:2;
							display:flex;
							align-items: center;
							justify-content: center;
							width:100%;
							background-color:#6339A1;
						}

						.footer-copyright-wrapper p{
							font-size:.75rem;
							width:clamp(45ch,50%,75ch);
						}

						.footer-list-wrapper{
							grid-row:1;
							display:flex;
							align-items: baseline;
							justify-content: space-between;
							width:100%;
							background-color:#6339A1;

							padding:3rem;
							font-family:"ubuntu mono", monospace;
							font-weight:lighter;
						}

						.footer-list-wrapper a:hover{
							text-decoration:underline;
						}

						.footer-icons-wrapper a:hover{
							text-decoration:none;
						}

						.footer-grid-wrapper ul{
							list-style-type:none;
							margin:1rem 0;
							padding:0;
						}

						.footer-instagram-link{
							display:flex;
							align-content: center;
							align-items: center;
						}

						.footer-icons-wrapper p{
							display:inline;
							font-family:montserrat, sans-serif;
							margin-left:10px;
						}

						.footer-list-wrapper a{
							color:white;
							text-decoration:none;
						}
						.footer-icons-wrapper, .footer-location-wrapper, .footer-hours-wrapper, .footer-contact-wrapper, .footer-help-wrapper{
							display:flex;
							flex-direction: column;
						}

						.footer-list-wrapper > .divider-line{
								background-color: white;
								display:none;
								width: 100%;
						}

Social Media Card

Used on the landing page, this social media container displays instagram posts from Dipp'd customers that provides information for newcomers on what the brand is and how others are receiving it. The container itself always contains an image, a text area and a lower "author" bar. Users are encouraged from this element to learn more and join the Dipp'd movement.

HTML Code

<div class="social-media-card-grid">
						<div class="social-media-card-wrapper">
							<div class="social-media-card-image">
								<img src="img/instagram-post1.png" alt="instagram post from dippd customer">
							</div>

							<div class="social-media-card-text">
								<p>London fogs & vegan donuts season is upon us 😇</p>
							</div>

							<div class="social-media-card-footer">
								<div class="social-media-card-tag">	
									<p>@moeliseismail</p>
								</div>
								<div class="social-media-card-logo">
									<img src="img/instagram-icon-social-media.png" alt="instagram logo for footer of social media card">
								</div>
							</div>

						</div>
					</div>

CSS Code

.social-media-card-grid{
						display:grid;
						grid-template-columns:repeat(3, 1fr);
						margin-bottom:2.5rem;
					}

					.social-media-card-wrapper{
						grid-column:1/2;
						display:flex;
						flex-direction:column;
						box-shadow:1.5rem 1.5rem black;
					}

					.social-media-card-text{
						height:clamp(5rem, 100vw, 8.5rem);
						margin:0.938rem 0.938rem 0.938rem 0.938rem;
					}

					.social-media-card-text p{
						font-size:1.313rem;
						margin:0rem;
					}

					.social-media-card-footer{
						display:grid;
						grid-template-columns: 4fr 0.5fr; 
						background:#55D1B9;
						align-items:center;
					}

					.social-media-card-tag{
						grid-column:1/2;
						margin-left:0.938rem;
					}

					.social-media-card-tag p{
						grid-column:1/2;
						font-size:1.313rem;
					}


					.social-media-card-logo{
						grid-column:2/3;
					}

Checkout Product Preview

This checkout product preview organism is found on the checkout page that provides users with information on their current order. An image representation of the users order (in the form of a box) is presented along with details regarding their items and price.

HTML Code

<div class="checkout-product-preview-menu">
							<div class="checkout-product-preview-wrapper">
								<div class="top-checkout">
									<img src="img/donut-box-example.png" alt="An image of a donut box order">
								</div>
								<div class="bottom-checkout">
									<div class="product-name-and-value">
										<p>Half Dozen Donuts</p>
										<p>$21.00</p>
									</div>

									<div class="divider-line"></div>

									<div class="subtotal-name-and-value">
										<p>Subtotal</p>
										<p>$21.00</p>
									</div>

									<div class="shipping-name-and-value">
										<p>Shipping</p>
										<p>--</p>
									</div>

									<div class="divider-line"></div>

									<div class="total-value">
										<p>Total</p>
										<p>$21.00</p>
									</div>
								</div>
							</div>
						</div>

CSS Code

.checkout-product-preview-menu{
							padding:2.5rem 6.25rem 2.5rem 2.5rem;
							background:#6339A1;
						}

						.checkout-product-preview-wrapper{
							display:grid;
							grid-template-columns: 1fr;
							background:#6339A1;
						}

						.bottom-checkout{
							margin-top:1.5rem;
						}

						.bottom-checkout > .divider-line{
							width:100%;
						}

						.product-name-and-value{
							display:flex;
							flex-direction:row;
							justify-content:space-between;
							margin-left:1.25rem;
						}

						.subtotal-name-and-value{
							display:flex;
							flex-direction:row;
							justify-content:space-between;
							margin-left:1.25rem;
						}

						.shipping-name-and-value{
							display:flex;
							flex-direction:row;
							justify-content:space-between;
							margin-left:1.25rem;
						}

						.total-value{
							display:flex;
							flex-direction:row;
							justify-content:space-between;
							margin-left:1.25rem;
						}

						.top-checkout img{
							width:clamp(10vw, 50%, 50vw);
							max-height:100%;
							margin:auto;
						}

						.product-name-and-value p, .subtotal-name-and-value p, .shipping-name-and-value p{
							font-family:montserrat, sans-serif;
							font-size:1.125rem;
							color:white;
							margin-top:0rem;
							margin-bottom:0.625rem;
						}

						.total-value p{
							font-family:montserrat, sans-serif;
							font-size:1.125rem;
							font-weight:bold;
							color:white;
							margin-top:0rem;
						}

FAQ UI Element

Found on the FAQ page. For the desktop version, when the user hovers over the question, the answer shows. In the mobile, when the user touches the question, the answer will show. This element will be repeated for all questions on the page.

I live in Vancouver, can I order Dipp’d donuts online?

▼

Unfortunately, Dipp’d only ships within the area of greater Toronto.

▲

HTML Code

<div class= "faq-element-grid">
							<div class= "faq-element-wrapper">
								<div class= "faq-question teal">
									<p>I live in Vancouver, can I order Dipp’d donuts online?</p>
									<p class= "down-arrow">▼</p>
								</div>
								<div class= "faq-answer gold">
									<p>Unfortunately, Dipp’d only ships within the area of greater Toronto.</p>
									<p class= "up-arrow">▲</p>
								</div>
							</div>
						</div>

CSS Code

.faq-element-grid{
							display:grid;
							grid-template-columns:repeat(9,1fr);
						}

						.faq-element-wrapper{
							grid-column:1/span 9;
							position:relative;
						}

						.faq-element-wrapper .down-arrow{
							color:#FED10A;
							grid-column-start: 9;
							padding-left:0;
							font-family: ubuntu mono, monospace;
						}

						.faq-element-wrapper .up-arrow{
							color:#11362F;
							grid-column-start: 9;
							padding-left:0;
						}

						.faq-question{
							display:grid;
							grid-template-columns:repeat(9,1fr);
							background-color:#2D6E62;
							box-shadow:0.5rem 0.5rem #11362F;
						}

						.faq-question p{
							grid-column: 1/span 8;
							font-size: 1.75rem;
							color:white;
							font-weight:500;
							font-family:montserrat, sans-serif;
							padding-left:1.75rem;
						}

						.faq-answer{
							position:absolute;
							background-color:#FED10A;
							display:grid;
							grid-template-columns:repeat(9,1fr);
							opacity:0;
							transition: 0.3s ease;
							width:100%;
							height:100%;
							top:0;
						}

						.faq-answer p{
							grid-column: 1/span 8;
							font-size: 1.75rem;
							color:black;
							font-weight:400;
							padding-left:1.75rem;
						}

						.faq-element-wrapper:hover .faq-answer{
							opacity:1;
						}

Product Order Box Overview

Found on the My Box page, this product order box overview organism displays to the user their current order at Dipp'd Donuts with a representation of their box. 6 donuts are shown at a time with the counter below detailing how many boxes are part of the order. This organism allows users to click through and see what donuts they have, or return back to the shopping page.

1 of 3 box(es)

HTML Code

<div class="product-order-box-overview-grid">
										<div class="product-order-box-overview-return">
											<p class="left-arrow"><a href="#0">◀</a></p>
											<p><a href="#0">Return to shop</a></p>
										</div>

										<div class="product-order-box-overview-donuts">
											<div class="product-order-box-overview-image">
												<img src="img/donut-box-example-big.png" alt="An image of a donut box order in larger scale">
											</div>
										</div>

										<div class="product-order-box-overview-counter">
											<p class="left-arrow"><a href="#0">◀</a></p>
											<p> 1 of 3 box(es)</p>
											<p class="right-arrow"><a href="#0">▶</a></p>
										</div>

									</div>

CSS Code

.product-order-box-overview-grid{
										display:grid;
										grid-template-columns:repeat(6,1fr);
									}

									.left-arrow{									
										grid-column-start: 9;
										padding-left:0;
										font-family: ubuntu mono, monospace;
										margin-right:0.938rem;
									}

									.right-arrow{									
										grid-column-start: 9;
										padding-left:0;
										font-family: ubuntu mono, monospace;
										margin-left:0.938rem;
									}

									.product-order-box-overview-return{										
										grid-column:1/span 6;
										margin-left:3rem;
										display:flex;
										flex-direction:row;
									}

									.product-order-box-overview-donuts{										
									grid-column:1/span 6;
									display:flex;
									flex-direction:row;
									justify-content:center;
									align-content:center;
									}

									.product-order-box-overview-counter{										
										grid-column:1/6;
										display:flex;
										flex-direction:row;
										align-content:center;
										justify-content: center;
									}

									.product-order-box-overview-donuts img{
										width:clamp(10vw, 100%, 50vw);
										max-height:100%;
										margin:auto;
									}

									.product-order-box-overview-return p{										
										margin-top:0rem;
										margin-bottom:0rem;
										font-weight:bold;
										font-scale:1.5rem;
									}
									.product-order-box-overview-counter p{
										margin-top:0rem;
									}

									.product-order-box-overview-return a, .product-order-box-overview-counter a{
										text-decoration: none;
										color:#84124F;
									}

Product Order Page Donut Counters

This will be on the box overview page. The user will be able to see their selections and either remove or quick add donuts to their box.

Dipp'd Box(es)

$21.00

Donut Selections

Petals

Coconut

Choco

Orange

Silver

Almond

Avocado

Berry

Grape

HTML Code

<div class= "product-order-donut-counters-wrapper">
										<div class= "product-order-donut-counters-grid">
											 <h2>Dipp'd Box(es)</h2>
											 <h4>$21.00</h4>
											 <h3>Donut Selections</h3>
											 <div class= "product-order-donut-counters-left">
												 <div class= "product-name">
												 	<label>Petals</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
												 <div class= "product-name">
												 	<label>Coconut</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
												 <div class= "product-name">
												 	<label>Choco</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
											</div>
											<div class= "product-order-donut-counters-center">
												 <div class= "product-name">
												 	<label>Orange</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
												 <div class= "product-name">
												 	<label>Silver</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
												 <div class= "product-name">
												 	<label>Almond</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
											</div>
											<div class= "product-order-donut-counters-right">
												 <div class= "product-name">
												 	<label>Avocado</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
												 <div class= "product-name">
												 	<label>Berry</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
												 <div class= "product-name">
												 	<label>Grape</label>
												 	<input type="number" placeholder="0" id="input-quantity" name="quantity" min="0" max="99">
												 </div>
											</div>
											 <a href="#0"><button class="cta-button">Checkout</button></a>
										</div>
									</div>

CSS Code

.product-order-donut-counters-wrapper{
										background:#FFB6D0;
										padding:1.5rem;
										display:grid;
										grid-template-columns:repeat(5,1fr);
									}

									.product-order-donut-counters-grid{
										grid-column: 1/span 5;
										display:grid;
										grid-template-columns:repeat(5,1fr);
										grid-template-rows:repeat(7, auto);
									}

									.product-name input[type=number]::-webkit-inner-spin-button{
									  	  opacity: .5;
									}

									.product-name input[type=number]::-webkit-inner-spin-button:hover,
									.product-name input[type=number]::-webkit-inner-spin-button:active {
										  opacity: 1;
									}

									.product-order-donut-counters-grid h2{
										grid-column: 1/span 5;
										grid-row:1;
										color:#84124F;
										margin-bottom:0.5rem;
										font-weight:bold;
									}

									.product-order-donut-counters-grid h4{
										grid-column:1;
										grid-row:2;
										margin-top:0;
										font-weight:bold;
									}

									.product-order-donut-counters-grid h3{
										grid-column:1/span 3;
										grid-row:3;
										color:#84124F;
										font-weight: bold;
										margin-top:0;
									}

									.product-order-donut-counters-left{
										grid-column:1;
										grid-row:4;
									}

									.product-order-donut-counters-center{
										grid-column:2;
										grid-row:4;
									}

									.product-order-donut-counters-right{
										grid-column:3;
										grid-row:4;
									}

									.product-order-donut-counters-grid a{
										grid-column:1/span 2;
										grid-row:5;
										margin-top:1rem;
									}

									.product-name{
										display:flex;
										margin: 0.5rem;
										justify-content: space-between;
										align-items: center;
									}

									.product-name label{
										font-family: ubuntu mono, monospace;
										padding-right: 2rem;
									}

Dipp'd Pattern Library

Basic Interactive Elements

In-text Link

CTA Button

Form Submit and Reset Buttons

Text Input Field and Label

Colors

Primary

Information Content Pages

Shop Content Pages

Typography

Headings

Montserrat. This is our heading typeface.

Still Montserrat, but smaller

Montserrat is now at regular weight

Regular weight Montserrat and smaller

Kinda cute now, it's used for hierarchy in tight spaces such as the footer

Paragraph

Bullet List

Number List

Website Grid Structure

12 Column Grid

2 Column Grid

3 Column Grid

4 column grid

Modular Pattern Elements

Main Navigation

Product Grid Item

Petals

Coconut

Choco

Order Tracker Bar

Subtotal $0.00

0 / 6 Donuts Selected

Footer

Social Media Card

Checkout Product Preview

FAQ UI Element

Product Order Box Overview

Product Order Page Donut Counters

Dipp'd Box(es)

$21.00

Donut Selections