Skip to content

Instantly share code, notes, and snippets.

@Dyrits

Dyrits/--Pinpoint E-Commerce.md

Last active May 10, 2023 08:09
Show Gist options
  • Save Dyrits/264080c20f743f4361ca10be23b6f949 to your computer and use it in GitHub Desktop.
Save Dyrits/264080c20f743f4361ca10be23b6f949 to your computer and use it in GitHub Desktop.
Download ZIP
Pinpoint E-Commerce
Raw
--Pinpoint E-Commerce.md

Pinpoint E-Commerce

In this project, you will use the knowledge you gained within the Color for UI lesson and apply it to an e-commerce checkout page. You will take an existing grayscale website and apply colors to various elements and sections within the design to ensure users understand the error and active states as well as primary calls-to-action.

This means you will need to consider which elements need to be updated based on providing the user with enough information to continue adding their information to complete their checkout process.

Remember, it’s important to use colors that will help them make the right decisions and provide feedback they can adequately act on.

Please note the workspace example on the right is built to fit into the viewing area. If you increase and decrease the viewable area of the web site, the site will update and respond to the viewport’s dimensions.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Codecademy | Color For UI</title>
<!-- Meta -->
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1 user-scalable=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
<!-- Site Wide Header -->
<header role="banner" aria-label="site-wide-navigation" class="site-header">
<div class="container">
<nav role="navigation" aria-label="navigation" class="site-header-nav">
<ul class="site-nav-left">
<li>
<a href="#">
<img src="https://content.codecademy.com/programs/ui-design/pinpoint/logo.svg" alt="Pinpoint" class="logo" />
</a>
</li>
<li>
<a href="#" class="site-nav-link">Categories</a>
</li>
<li>
<a href="#" class="site-nav-link active">Your Cart</a>
</li>
</ul>
<ul class="site-nav-right">
<li>
<a href="#" class="site-nav-link" aria-label="site-wide-search-button" role="button">
<img src="https://content.codecademy.com/programs/ui-design/pinpoint/icon-search.svg" alt="Search" />
</a>
</li>
<li>
<a href="#" class="button button-secondary button-small site-nav-link">Login</a>
</li>
</ul>
<ul class="site-nav-mobile">
<li>
<a href="#" class="button button-secondary button-small site-nav-link">Menu</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Site Main Content -->
<main role="main" class="site-main">
<header aria-labelledby="page-title" class="clearfix site-main-header">
<div class="container">
<h1 id="page-title">Checkout Details</h1>
<p>Please enter your information below. All fields are required.</p>
</div>
</header>
<section role="region" aria-label="contact-form" class="site-main-section">
<div class="container">
<div class="card contact-form-container">
<div class="clearfix">
<div class="col-left col-1-2">
<figure class="alert alert-error">
<div class="alert-content">
<img src="https://content.codecademy.com/programs/ui-design/pinpoint/icon-help.svg" alt="Help indicator" />
<p>Looks like your forgot to add your Payment Method!</p>
</div>
</figure>
<h2 class="section-header">1. Billing Details</h2>
<form role="form" class="clearfix">
<fieldset>
<label for="name">Full Name</label>
<input type="text" placeholder="First Name" class=" col-1-2" id="name" />
<input type="text" placeholder="Last Name" class="col-1-2" id="name"/>
</fieldset>
<div>
<label class="col-1-2" for="email">Your Email</label>
<input type="email" class="col-1-2" id="email" />
<label for="number">Phone Number</label>
<input type="tel" class="col-1-2" id="number" />
</div>
<div>
<label for="address">Address</label>
<input type="text" id="address"/>
</div>
<div>
<div class="col-1-2">
<label for="city">City</label>
<input type="text" id="city"/>
</div>
<div class="col-1-4">
<label for="state">State</label>
<input type="tel" id="state" />
</div>
<div class="col-1-4">
<label for="zip">Zip Code</label>
<input type="text" id="zip"/>
</div>
</div>
</form>
<hr class="divider">
<h2 class="section-header">2. Shipping Details</h2>
<form role="form" class="clearfix">
<fieldset>
<label for="name">Full Name</label>
<input type="text" placeholder="First Name" class="col-1-2" id="name" />
<input type="text" placeholder="Last Name" class="col-1-2" id="name"/>
</fieldset>
<div>
<label for="address">Address</label>
<input type="text" id="address"/>
</div>
<div>
<div class="col-1-2">
<label for="city">City</label>
<input type="text" id="city"/>
</div>
<div class="col-1-4">
<label for="state">State</label>
<input type="tel" id="state" />
</div>
<div class="col-1-4">
<label for="zip">Zip Code</label>
<input type="text" id="zip"/>
</div>
</div>
</form>
<hr class="divider">
<form role="form" class="clearfix">
<fieldset>
<div class="radio-item col-1-2">
<input type="radio" id="shippingChoice1" name="contact" value="email">
<label for="shippingChoice1">Expedited</label>
<small>Disptached immediately.<br> (1-2 Business Days)</small>
</div>
<div class="radio-item col-1-2">
<input type="radio" id="shippingChoice2" name="contact" value="email">
<label for="shippingChoice2">Standard Free</label>
<small>In stock dispatched within 24 hours. <br>(5-7 Business Days)</small>
</div>
</fieldset>
<hr class="divider">
</form>
<h2 class="section-header">3. Payment Method</h2>
<form role="form" class="clearfix">
<fieldset>
<div class="col-1-2">
<label for="creditcard">Credit Card Number</label>
<input type="text" id="creditcard" class="input-error" />
</div>
<div class="col-1-4">
<label for="expiration">Exp. Date</label>
<input type="month" id="expiration" class="input-error" />
</div>
<div class="col-1-4">
<label for="cvv">CVV</label>
<input type="text" id="cvv" class="input-error"/>
</div>
</fieldset>
<hr class="divider">
<div>
<label for="notes">Order Notes</label>
<textarea placeholder="Notes about your order, e.g. special notes for delivery" id="notes"></textarea>
</div>
<input type="submit" value="Order" class="button button-primary float-right" />
</form>
</div>
<div class="col-1-2">
<h2 class="section-header">Order Summary</h2>
<hr class="divider">
<ul class="order-details">
<li class="order-item clearfix">
<div class="col-1-4">
<img src="https://content.codecademy.com/programs/ui-design/pinpoint/clothing-tshirt.png" alt="tshirt" />
</div>
<!-- <div class=""> -->
<ul class="col-1-4">
<li><b>White T-Shirt</b></li>
<li>Hanes Brand</li>
<li>size: <b>M</b></li>
</ul>
<div class="col-1-4">
<input type="number" value="1">
</div>
<div class="col-1-4 item-price">
<p>$14.99</p>
</div>
<!-- </div> -->
</li>
<li class="order-item clearfix">
<div class="col-1-4">
<img src="https://content.codecademy.com/programs/ui-design/pinpoint/clothing-leggings.png" alt="tshirt" />
</div>
<!-- <div class=""> -->
<ul class="col-1-4">
<li><b>Women's Leggings</b></li>
<li>Hanes Brand</li>
<li>size: <b>M</b></li>
</ul>
<div class="item-amount col-1-4">
<input type="number" value="1">
</div>
<div class="col-1-4 item-price">
<p>$19.99</p>
</div>
<!-- </div> -->
</li>
</ul>
<hr class="divider">
<ul class="order-charge clearfix">
<li>
<p class="order-charge-item col-1-2"><b>Subtotal(2 items)</b></p>
<p class="order-charge-item item-price col-1-2">$34.98</p>
</li>
<li>
<p class="order-charge-item col-1-2"><b>Tax</b></p>
<p class="order-charge-item item-price col-1-2">$2.49</p>
</li>
<li>
<p class="order-charge-item col-1-2"><b>Shipping</b></p>
<p class="order-charge-item item-price col-1-2">$5.00</p>
</li>
<li class="total-price">
<h3 class="order-charge-item col-1-2">Order Total</h3>
<h3 class="order-charge-item item-price col-1-2">$42.47</h3>
</li>
</ul>
<div class="clearfix help-box">
<p>Questions? or Need help to complete your order?</p>
<p>Call: <a href="tel:1-800-123-1234">1-800-123-1234</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="site-main-background" arai-hidden="true"></div>
</main>
<!-- Site Wide Footer -->
<footer role="contentinfo" class="footer">
<div class="container">
<nav role="navigation" class="clearfix">
<ul class="col-1-4 footer-section">
<li>
<img src="https://content.codecademy.com/programs/ui-design/pinpoint/logo.svg" alt="Citrus" class="logo" />
</li>
<li>
<p><smalL>All Rights Reserved | &copy; <time>2017</time></smalL></p>
</li>
</ul>
<div class="col-1-4 footer-section" aria-labelledby="product-pages">
<p id="product-pages"><b>About</b></p>
<ul>
<li>
<a href="#">Features</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
<li>
<a href="#">Schedule Demo</a>
</li>
</ul>
</div>
<div class="col-1-4 footer-section" aria-labelledby="support-pages">
<p id="support-pages"><b>Support</b></p>
<ul>
<li>
<a href="#">FAQ</a>
</li>
<li>
<a href="#">Documentation</a>
</li>
<li>
<a href="#">API Status</a>
</li>
</ul>
</div>
<div class="col-1-4 footer-section" arai-labelledby="social-links">
<p id="support-pages"><b>Stay Up To Date</b></p>
<form role="form">
<input type="email" placeholder="Your email address" class="footer-email-input">
<input type="submit" value="Submit" class="button button-primary footer-email-button"/>
</form>
</div>
</nav>
</div>
</footer>
</body>
</html>
Raw
styles.css
/* Site Stylesheet
1. Global Styles
2. Typography Styles
3. Structure Styles
4. Module Styles
5. Component Styles
======================================== */
/* 1. Global Styles
======================================== */
* {
box-sizing: border-box;
}
html {
height: 100%;
margin: 0 auto;
overflow-x: hidden;
width: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
height: 100%;
margin: 0 auto;
overflow-x: hidden;
width: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.float-right {
float: right;
}
/* 2. Typography Styles
======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
color: #414546;
font-family: 'Roboto', Helvetica, sans-serif;
font-weight: 700;
transition: font-size 0.25s ease;
}
h1 {
font-size: calc(64px / 1.5);
line-height: 1.25;
}
h2 {
font-size: calc(64px / 1.5);
}
h3 {
font-size: calc(45px / 1.5);
}
h4 {
font-size: calc(23px / 1.5);
}
@media(min-width: 720px) {
h1 {
font-size: calc(64px / 1.25);
}
h2 {
font-size: calc(45px / 1.25);
}
h3 {
font-size: calc(32px / 1.25);
}
h4 {
font-size: calc(23px / 1.25);
}
}
@media(min-width: 1024px) {
h1 {
font-size: 64px;
}
h2 {
font-size: 45px;
}
h3 {
font-size: 32px;
}
h4 {
font-size: 23px;
}
}
p {
color: #414546;
font-family: 'Roboto', Georgia, serif;
font-size: 16px;
line-height: 23px;
margin: 0 0 15px;
}
a {
color: #42A5F5;
font-family: 'Roboto', Helvetica, sans-serif;
font-size: 16px;
line-height: 23px;
}
li {
color: #414546;
font-family: 'Roboto', Helvetica, sans-serif;
font-size: 16px;
line-height: 23px;
list-style: none;
}
label {
color: #414546;
display: block;
font-family: 'Roboto', Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
line-height: 18px;
margin-bottom: 5px;
}
img {
width: 100%;
}
b,
strong {
font-weight: 700;
}
small {
font-family: 'Roboto', Helvetica, sans-serif;
font-size: 12px;
line-height: 1.25;
}
/* 3. Structure Styles
======================================== */
.container {
margin: 0 auto;
max-width: 1160px;
padding: 0 15px;
}
.divider {
border: none;
border-bottom: 1px solid #F2F3F5;
clear: both;
width: 100%;
margin: 20px;
}
@media(min-width: 720px) {
.col-1-2 {
float: left;
width: calc(97.5%/2);
}
.col-1-2:not(:last-child) {
margin-right: 2.5%;
}
.col-1-3 {
float: left;
width: calc(95%/3);
}
.col-1-3:not(:last-child) {
margin-right: 2.5%;
}
.col-1-4 {
float: left;
width: calc(92.5%/4);
}
.col-1-4:not(:last-child) {
margin-right: 2.5%;
}
}
/* 4. Modules Styles
======================================== */
/* Site Navigation */
.site-header {
background-color: #EBEBEB;
padding: 30px 15px 0;
}
.site-header-nav {
align-items: center;
display: flex;
}
.site-nav-left,
.site-nav-right {
align-items: center;
display: flex;
}
.site-nav-right {
float: right;
margin-left: auto;
}
.site-nav-left li:not(:first-child),
.site-nav-right li {
display: none;
font-weight: 700;
line-height: 0;
}
.site-nav-mobile li {
display: inline-block;
}
@media(min-width: 768px) {
.site-nav-left li:not(:first-child),
.site-nav-right li {
display: inline-block;
}
.site-nav-mobile,
.site-nav-mobile li {
display: none;
}
}
.site-nav-left li:not(:last-child),
.site-nav-right li:not(:last-child),
.site-nav-mobile li:not(:last-child) {
margin-right: 30px;
}
.site-nav-left .logo {
width: 120px;
}
.site-nav-link {
color: #FFF;
text-decoration: none;
}
.site-nav-link.active {
color: #FA0;
}
/* Site Footer */
.footer {
padding: 30px 30px 60px;
}
.footer-section {
margin-bottom: 15px;
}
@media(min-width: 720px) {
.footer-section {
margin-bottom: 0;
}
}
.footer .logo {
margin-bottom: 5px;
width: 100px;
}
.footer a {
color: #959595;
text-decoration: none;
}
.footer p {
margin-bottom: 5px;
}
.footer-email-input {
margin-right: 2.5%;
width: 68% !important;
}
.footer-email-button {
font-size: 12px !important;
padding: 10px !important;
width: 27.5% !important;
}
@media(min-width: 768px) {
.footer-email-input {
width: 57% !important;
}
.footer-email-button {
width: 37.5% !important;
}
}
/* 5. Component Styles
======================================== */
.alert {
border-radius: 3px;
margin-bottom: 15px;
padding: 10px 15px;
text-align: left;
}
.alert-content {
align-items: center;
display: flex;
}
.alert-error {
background-color: #FC472E;
}
.alert img {
display: inline-block;
height: 15px;
margin-right: 5px;
width: 15px;
}
.alert p {
color: #FFFFFF;
display: inline-block;
margin-bottom: 0;
}
.button {
border-radius: 3px;
color: #FFFFFF;
display: inline-block;
font-family: 'Roboto', Helvetica, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: normal;
padding: 15px 30px;
text-align: center;
text-decoration: none;
transition: opacity 0.5s ease;
}
.button:hover {
opacity: 0.75;
}
.button-primary {
background-color: #00CF63;
}
.button-secondary {
background-color: #FA0;
}
.button-full {
width: 100%;
}
.button-small {
font-size: 13px;
padding: 10px 30px;
}
.card {
background-color: #FFFFFF;
border-radius: 10px;
box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.1);
padding: 30px 30px 15px;
}
.chip {
display: flex;
align-items: center;
}
.chip-img-container {
border-radius: 30em;
float: left;
margin-right: 15px;
overflow: hidden;
height: 60px;
width: 60px;
}
.chip-content-container {
float: left;
}
.chip-content-title {
margin-bottom: 0;
}
.chip-content-description {
color: #8F9196;
margin-bottom: 0;
}
input,
select,
textarea {
background-color: #FFFFFF;
border: 1px solid #F2F3F5;
border-radius: 3px;
box-shadow: inset 1px 1px 3px 0 rgba(189,191,192,0.10);
height: 35px;
margin-bottom: 15px;
padding: 10px;
transition: border-color 0.5s ease;
width: 100%;
}
input[type="submit"] {
cursor: pointer;
height: auto;
width: auto;
}
input:active,
input:focus,
textarea:active,
textarea:focus {
border: 1px solid #FC472E;
outline: none;
}
textarea {
height: 100px;
}
.input-error {
border-color: #F2F3F5;
}
.radio-item {
margin-bottom: 15px;
}
.radio-item input {
box-shadow: none;
display: inline-block;
margin-bottom: 0px;
}
/* 6. Page Styles
======================================== */
.site-main {
padding: 60px 15px;
position: relative;
}
.site-main-background {
background-color: #34474F;
bottom: 0;
display: block;
height: 600px;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.site-main-header {
margin-bottom: 60px;
}
.site-main-header h1,
.site-main-header p {
color: #FFF;
}
.section-header {
font-size: 23px;
line-height: 33px;
margin-bottom: 15px;
}
.order-item {
display: block;
margin-bottom: 50px;
margin-top: 50px;
}
.item-price {
text-align: right;
}
.order-charge li {
display: block;
}
.help-box {
background-color: #FFFFFF;
border-radius: 3px;
clear: both;
display: block;
margin-top: 30px;
padding: 15px;
}
.help-box p {
margin-bottom: 0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment