CM-Post-0006-20220927-Order-Summary-Component
CREATE A RESPONSIVE
ORDER SUMMARY
COMPONENT!
Index
1 – Description
2 – What We’re Building!
3 – Style Guide
4 – Project Folder Structure
5 – HTML
6 – CSS
7 – Github Repo and Live Website
8 – Conclusion
1 - Description
Here is a really cool rating card component I built using HTML and CSS following the BEM method. The really AWESOME part about this card component is that I only had to use one simple medial query to the change the background on mobile views and the component automatically shrinks to fit the viewport as well also on mobile views due to the responsive nature of the component!
This was a FlexBox heavy component, but you could also use CSS Grid as well, but I choose to use FlexBox whenever posssible first and CSS Grid wasn’t necessary.
And, of course, I got this card component from Frontend Mentor as a challenge!
If you have not checked out Frontend Mentor yet, you definitely need to because it’s a fantastic tool to help learn web development and to hone in on your skills!
They are a great resource to use to help with offering free challenges that you can submit solutions too!
And by the way, there are many ways to achieve a solution for these challenges, so you don’t have to use the code I provide, but it gives you way to see how others can arrive at a particular way of solving them!
So, check out Frontend Mentor here, there are one of MOST favorite web dev tools to utilize!
2 - What We're Building!
Desktop View
Mobile View
3 - Style Guide
# Front-end Style Guide
## Layout
The designs were created to the following widths:
- Mobile: 375px
- Desktop: 1440px
## Colors
### Primary
- Pale blue: hsl(225, 100%, 94%)
- Bright blue: hsl(245, 75%, 52%)
### Neutral
- Very pale blue: hsl(225, 100%, 98%)
- Desaturated blue: hsl(224, 23%, 55%)
- Dark blue: hsl(223, 47%, 23%)
## Typography
### Body Copy
- Font size (paragraph): 16px
### Font
- Family: [Red Hat Display](https://fonts.google.com/specimen/Red+Hat+Display)
- Weights: 500, 700, 900
4 - Project Folder Structure
5 - HTML
Here is my typical markup following the BEM method for CSS structure!
You will notice that in my markup I am using the actual <svg> tag instead of the <img> tag and using the svg file as a source. This is because I was having an issue on GitHub Pages for the images to show up, so decided to use the <svg> tag instead within my markup.
Here’s the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="./css/main.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<title>
CreatiqueMedia LLC | Ron The Web Dev | Post-0006-20220927 - Order Summary
Card
</title>
</head>
<body>
<div class="card--container">
<section class="card--sec--1">
<svg
class="card--sec--1--hero"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="450"
height="220"
>
<defs><path id="a" d="M0 0h450v220H0z" /></defs>
<g fill="none" fill-rule="evenodd">
<mask id="b" fill="#fff"><use xlink:href="#a" /></mask>
<use fill="#382AE1" xlink:href="#a" />
<path
fill="#1E1FCD"
fill-rule="nonzero"
d="M218.812 46v13.368h1.685v3.623h6.303v77.983l12.758 6.699v-12.891h3.046v14.545l2.984 1.543v112.908L31.9 266.214v-72.237h7.013V124.52h2.548v-9.55h3.045v9.55h14.15l-.001.014v.196c-.01 2.072-.088 19.036-.094 31.525v3.018c.003 5.998.028 10.37.094 10.445.066.075.784.104 1.747.108h.5c2.152-.008 5.071-.108 5.071-.108v36.439h5.786V76.399h7.379v-7.156h3.045V76.4h23.111v6.395h8.79v-13.55h3.045v13.55h4.314v23.771h10.353v42.63h12.18v38.692h6.384v-80.419h8.04V95.156h3.044v12.312h22.117V63.022h6.455v-3.654h25.75V46h3.046zM15.842 147.489v4.151h3.198L25.475 265.9H-8l6.445-114.259H.962v-4.151h14.88z"
mask="url(#b)"
/>
<path
fill="#1E1FCD"
fill-rule="nonzero"
d="M422.812 82v13.368h1.685v3.623h6.303v77.983l12.758 6.699v-12.891h3.046v14.545l2.984 1.543v112.908L235.9 302.214v-72.237h7.013V160.52h2.548v-9.55h3.045v9.55h14.15l-.001.014v.196c-.01 2.072-.088 19.036-.094 31.525v3.018c.003 5.998.028 10.37.094 10.445.066.075.784.104 1.747.108h.5c2.152-.008 5.071-.108 5.071-.108v36.439h5.786V112.399h7.379v-7.156h3.045v7.156h23.111v6.395h8.79v-13.55h3.045v13.55h4.314v23.771h10.353v42.63h12.18v38.692h6.384v-80.419h8.04v-12.312h3.044v12.312h22.117V99.022h6.455v-3.654h25.75V82h3.046zm-202.97 101.489v4.151h3.198l6.435 114.259H196l6.445-114.259h2.517v-4.151h14.88z"
mask="url(#b)"
/>
<g fill-rule="nonzero" mask="url(#b)">
<path
fill="#FFF"
d="M224.743 27.894c-.147-2.117-9.625 4.042-9.625 4.042s8.029-6.159 7.34-7.698c-.688-1.54-9.734 5.196-9.734 5.196s8.257-6.351 6.982-7.707c-1.275-1.357-10.093 5.782-10.093 5.782s8.992-7.9 5.56-8.092c-1.541-.082-13.643 8.138-26.754 18.008 3.67 4.582 7.34 9.008 11.304 13.288 4.202-4.344 7.514-7.799 7.964-8.376 1.348-1.732 14.744-.577 14.799-2.694.055-2.117-8.826-3.08-8.826-3.08s11.23-6.552 11.083-8.669z"
/>
<path
fill="#231F20"
d="M199.667 51.125a.404.404 0 01-.302-.128c-3.524-3.812-7.12-8.037-11.332-13.316a.421.421 0 01-.091-.311.458.458 0 01.165-.284c9.698-7.332 24.837-18.081 27.002-18.081.485-.046.942.234 1.12.687.293.825-.734 2.346-2.083 3.877 2.514-1.677 5.028-2.97 5.817-2.126.186.2.273.471.238.742-.064.751-.917 1.833-2.055 3.033 1.725-1.017 3.34-1.787 4.083-1.594a.77.77 0 01.55.43c.45.963-1.275 2.924-3.284 4.766 2.156-1.155 4.34-2.09 5.175-1.668a.834.834 0 01.468.715c.137 1.98-7.157 6.561-10.286 8.43 2.863.395 8.01 1.375 7.964 3.355 0 1.439-3.037 1.677-7.945 1.933-2.863.156-6.423.349-6.937 1.008-.514.66-3.028 3.281-7.991 8.413a.45.45 0 01-.276.12zM188.96 37.498c3.955 4.949 7.34 8.972 10.717 12.6 5.817-6.01 7.34-7.679 7.624-8.018.697-.916 3.322-1.1 7.551-1.329 2.496-.137 7.139-.384 7.157-1.118 0-1.072-4.367-2.208-8.45-2.657a.413.413 0 01-.358-.33.421.421 0 01.192-.45c5.441-3.152 11.01-7.11 10.937-8.247-.569-.394-4.68 1.613-8.982 4.408a.422.422 0 01-.477-.687c4.138-3.171 7.496-6.534 7.184-7.194-.615-.303-4.799 2.144-9.093 5.36a.422.422 0 01-.514-.668c2.634-2.034 6.845-5.728 6.955-6.983v-.1c-.514-.57-5.074 2.208-9.551 5.818a.432.432 0 01-.587-.064.403.403 0 010-.577c3.202-2.823 6.477-6.415 6.184-7.23 0-.083-.211-.12-.376-.129-1.257-.064-11.543 6.653-26.113 17.595z"
/>
<path
fill="#231F20"
d="M153.058 68.876c-2.698 8.514 13.597 47.837 13.597 47.837l20.186-24.917c-.45-.77-10.653-18.493-10.653-18.493s15.057-13.92 23.452-22.59c-3.945-4.28-7.67-8.743-11.304-13.288-16.111 12.133-33.792 26.76-35.278 31.451z"
/>
<path
fill="#231F20"
d="M166.655 117.117h-.1a.394.394 0 01-.313-.248c-.67-1.604-16.322-39.543-13.606-48.103 1.532-4.83 19.268-19.52 35.443-31.653a.404.404 0 01.56.064c4.193 5.26 7.78 9.476 11.295 13.27.14.157.14.393 0 .55-7.735 7.991-21.287 20.583-23.241 22.388a54892.79 54892.79 0 0010.505 18.218c.09.14.09.32 0 .459l-20.185 24.908a.404.404 0 01-.358.147zm21.635-79.133c-15.23 11.473-33.379 26.393-34.865 31.011-2.44 7.698 11.258 41.853 13.322 46.93l19.617-24.166-10.506-18.255a.421.421 0 01.083-.504c.146-.137 14.827-13.746 23.176-22.296-3.376-3.666-6.826-7.716-10.827-12.72z"
/>
<path
fill="#FFF"
d="M201.044 109.529c1.651 11.418 9.257 21.077 17.515 29.902 4.945 5.242 11.01 10.576 18.25 10.237 3.458-.174 6.706-1.66 9.725-3.345a73.677 73.677 0 0019.974-16.212 4.476 4.476 0 01-4.468-3.995 8.854 8.854 0 009.175-1.027c5.615-4.453 2.89-8.385-1.404-11.702a51.724 51.724 0 01-15.551-19.62c-5.359-11.97-16.002-27.96-31.765-24.313-15.157 3.5-19.268 17.082-21.36 30.553a31.9 31.9 0 00-.091 9.522z"
/>
<path
fill="#231F20"
d="M236.13 150.098c-7.111 0-13.02-5.223-17.874-10.383-7.753-8.247-15.91-18.264-17.625-30.122a32.412 32.412 0 01.064-9.696c.918-5.773 2.376-13.169 5.835-19.162a23.56 23.56 0 0115.837-11.74c7.193-1.658 20.937-.678 32.25 24.551a51.119 51.119 0 0015.424 19.465c3.211 2.483 4.716 4.665 4.734 6.882 0 1.833-1.11 3.72-3.33 5.499a9.276 9.276 0 01-8.854 1.384 4.12 4.12 0 003.899 2.886.413.413 0 01.395.239.403.403 0 01-.065.449 73.292 73.292 0 01-20.084 16.358c-2.835 1.576-6.24 3.216-9.91 3.39h-.697zm-9.295-80.773c-1.439 0-2.873.164-4.276.486-14.89 3.446-18.91 16.55-21.038 30.242a31.616 31.616 0 00-.064 9.439c1.679 11.638 9.744 21.536 17.432 29.674 4.882 5.186 10.818 10.447 17.92 10.08 3.495-.165 6.789-1.76 9.542-3.29a72.532 72.532 0 0019.267-15.533 4.924 4.924 0 01-4.018-4.316.403.403 0 01.183-.376.395.395 0 01.413 0 8.431 8.431 0 008.707-.972c2.01-1.603 3.028-3.225 3.01-4.83 0-1.905-1.45-3.94-4.404-6.222a52.017 52.017 0 01-15.672-19.776c-9.074-20.308-19.662-24.606-27.002-24.606z"
/>
<path
fill="#FFF"
d="M305.851 145.37c-.642 2.538-11.184 21.343-11.184 21.343l13.763 7.432s12.45-20.84 13.514-22.223c1.065-1.384 10.093-13.398 11.323-17.613 1.23-4.216-7.45-7.332-11.01-6.993-3.56.34-15.763 15.515-16.406 18.054z"
/>
<path
fill="#231F20"
d="M308.411 174.567a.361.361 0 01-.193-.055l-13.762-7.432a.403.403 0 01-.202-.257.394.394 0 010-.32c3.67-6.48 10.634-19.246 11.139-21.234.679-2.694 13.02-18.044 16.744-18.328 2.707-.23 8.35 1.41 10.616 4.15a3.598 3.598 0 01.844 3.373c-1.312 4.582-11.295 17.632-11.386 17.76-1.046 1.348-13.369 21.994-13.497 22.178a.395.395 0 01-.303.165zm-13.166-8.028l13.02 7.047c1.678-2.813 12.33-20.62 13.33-21.92 2.102-2.75 10.149-13.637 11.25-17.477a2.747 2.747 0 00-.689-2.611c-2.064-2.502-7.431-4.06-9.89-3.85-3.358.294-15.451 15.58-16.011 17.742-.606 2.392-9.487 18.347-11.01 21.069z"
/>
<path
fill="#231F20"
d="M301.897 153.498l-12.295 14.975-26.516-17.751-11.295 21.004s37.554 28.161 42.876 25.467c5.321-2.694 21.442-35.924 21.442-35.924l-14.212-7.77z"
/>
<path
fill="#231F20"
d="M293.814 197.761c-7.744 0-38.6-22.965-42.27-25.714a.412.412 0 01-.11-.514l11.294-21.004a.404.404 0 01.578-.147l26.195 17.55 12.066-14.663a.395.395 0 01.504-.1l14.258 7.77a.412.412 0 01.165.532c-.66 1.366-16.267 33.385-21.662 36.107-.32.141-.67.204-1.018.183zm-41.509-26.154c10.607 7.927 38.031 27.327 42.206 25.229 4.853-2.466 19.387-31.855 21.103-35.392l-13.616-7.433-12.084 14.718a.386.386 0 01-.532.083l-26.158-17.513-10.919 20.308zM313.155 116.878l-.12 36.62h17.351v-36.62z"
/>
<path
fill="#231F20"
d="M330.386 153.938h-17.35a.404.404 0 01-.404-.412l.11-36.657a.413.413 0 01.413-.403h17.23c.224 0 .404.18.404.403v36.657a.403.403 0 01-.403.412zm-16.938-.806h16.516v-35.85H313.54l-.092 35.85z"
/>
<path
fill="#FFF"
d="M314.916 120.113l-.091 28.776h13.781v-28.776z"
/>
<path
fill="#231F20"
d="M328.606 149.301h-13.763a.404.404 0 01-.294-.119.403.403 0 01-.119-.302l.083-28.767a.422.422 0 01.422-.412h13.689c.228 0 .413.184.413.412v28.776a.413.413 0 01-.431.412zm-13.36-.861h12.938v-27.905h-12.846l-.091 27.905z"
/>
<path
fill="#FFF"
d="M305.099 147.276s-2.587-12.335 1.294-14.269c3.88-1.933 17.221-4.197 15.157-1.173s-9.294 4.894-9.294 4.894 1.486 4.316-.147 7.377"
/>
<path
fill="#231F20"
d="M305.099 147.688a.404.404 0 01-.404-.33c-.11-.513-2.615-12.674 1.514-14.727 3.35-1.658 14.157-3.794 15.735-1.997a1.09 1.09 0 01-.055 1.438c-1.835 2.75-7.496 4.49-9.11 4.95.339 1.2 1.11 4.636-.303 7.33a.422.422 0 01-.57.165.43.43 0 01-.173-.568c1.532-2.859.137-6.992.119-7.038a.412.412 0 010-.33.44.44 0 01.266-.21c.073 0 7.101-1.833 9.056-4.72.137-.202.174-.348.11-.422-.991-1.136-11.01.367-14.735 2.2-2.946 1.466-1.762 10.456-1.065 13.801a.412.412 0 01-.32.495l-.065-.037z"
/>
<path
fill="#75ECCA"
d="M209.173 123.32l-22.855-39.185-25.69 28.491 9.541 20.546s-14.68 34.705-14.68 102.73c0 0 78.154-.339 97.825-.339l-25.69-39.91s6.423-18.493 9.735-23.112l19.13 10.402 22.37-30.434-69.686-29.188z"
/>
<path
fill="#231F20"
d="M208.843 160.674c12.615 7.331 15.597-22.47 16.157-28.922.256-1.775.15-3.583-.312-5.316-.725-2.199-2.422-3.903-4.12-5.498-2.027-1.833-4.367-3.757-7.129-3.876a8.26 8.26 0 00-6.578 3.436 20.15 20.15 0 00-3.156 6.983c-2.973 10.365-2.863 21.307 2.871 30.728a6.591 6.591 0 001.991 2.263l.276.202z"
/>
<path
fill="#231F20"
d="M212.614 162.232a7.934 7.934 0 01-3.973-1.21l-.285-.174a6.903 6.903 0 01-2.12-2.401c-5.256-8.642-6.266-19.373-2.917-31.048a20.562 20.562 0 013.22-7.12 8.6 8.6 0 016.919-3.593c2.826.119 5.22 1.988 7.34 3.986 1.725 1.586 3.468 3.336 4.23 5.636.473 1.793.586 3.662.33 5.499-.853 9.613-3.303 26.264-10.093 29.774a5.725 5.725 0 01-2.651.65zm.568-44.74a7.875 7.875 0 00-6.01 3.281 19.801 19.801 0 00-3.073 6.846c-3.294 11.455-2.312 21.994 2.826 30.406a6.17 6.17 0 001.835 2.136l.266.155c2.184 1.274 4.11 1.448 5.881.532 4.716-2.438 8.258-13.05 9.671-29.133a13.135 13.135 0 00-.294-5.16c-.697-2.116-2.358-3.775-4.01-5.296-2.054-1.888-4.302-3.666-6.871-3.767h-.22zm33.306-12.701c1.165 4.224-.743 9.604-3.606 12.729-1.908 2.062-6.092 2.612-6.936-.743a17 17 0 012.174-13.04c1.835-3.015 5.35-4.738 7.607-.862.335.603.591 1.247.761 1.916z"
/>
<path
fill="#231F20"
d="M239.084 119.582a4.414 4.414 0 01-1.046-.12 3.393 3.393 0 01-2.487-2.593 17.477 17.477 0 012.184-13.334c1.285-2.062 3.101-3.308 4.799-3.299.963 0 2.349.45 3.505 2.447.364.63.648 1.305.844 2.007 1.266 4.582-.918 10.08-3.67 13.105a5.729 5.729 0 01-4.13 1.787zm3.404-18.54c-1.395 0-2.945 1.11-4.065 2.906a16.634 16.634 0 00-2.083 12.729c.19.978.93 1.758 1.9 1.997a4.765 4.765 0 004.34-1.43c2.587-2.803 4.697-8.091 3.523-12.343a7.711 7.711 0 00-.762-1.833c-.78-1.338-1.725-2.025-2.816-2.035l-.037.01z"
/>
<path
fill="#FFF"
d="M226.808 123.696c-1.836 7.03-3.67 23.04-15.369 14.663a14.835 14.835 0 01-3.101-3.317c-5.762-7.67-4.12-12.51-1.138-20.931 1.285-3.666 2.395-7.332 3.67-10.997 1.276-3.666 3.377-7.112 5.12-10.585-.064.12 5.734.916 11.533-1.714 5.799-2.63 10.597-5.36 10.597-5.36 1.57 2.345 3.267 4.123 4.102 6.91.77 2.702.992 5.53.651 8.32-.734 6.846-3.477 14.25-6.588 20.363-3.11 6.112-9.477 2.648-9.477 2.648z"
/>
<path
fill="#231F20"
d="M217.348 141.172c-1.835 0-3.881-.824-6.157-2.456a15.32 15.32 0 01-3.193-3.409c-5.936-7.908-4.147-12.958-1.192-21.315.614-1.76 1.202-3.565 1.77-5.307.615-1.878 1.248-3.812 1.927-5.709a60.45 60.45 0 013.624-7.725c.514-.972 1.028-1.943 1.514-2.914a.413.413 0 01.56-.184 21.125 21.125 0 0011.148-1.723 155.555 155.555 0 0010.56-5.351.432.432 0 01.56.137c.395.587.79 1.136 1.184 1.677a17.241 17.241 0 012.972 5.334c.783 2.76 1.01 5.647.67 8.495-.67 6.13-3.018 13.416-6.633 20.5a6.695 6.695 0 01-3.973 3.602 8.515 8.515 0 01-5.625-.504 96.92 96.92 0 00-.568 2.391c-1.212 5.251-2.863 12.455-7.24 14.104a5.51 5.51 0 01-1.908.357zm-1.101-48.176c-.44.917-.918 1.76-1.376 2.64a60.01 60.01 0 00-3.579 7.624c-.67 1.833-1.302 3.813-1.917 5.682-.615 1.87-1.156 3.556-1.78 5.324-2.964 8.377-4.588 12.986 1.082 20.537a14.55 14.55 0 003.01 3.235c2.88 2.071 5.34 2.75 7.34 1.998 3.954-1.494 5.505-8.43 6.716-13.499.248-1.063.468-2.062.698-2.914a.43.43 0 01.605-.266 8.01 8.01 0 005.505.67 5.842 5.842 0 003.46-3.172c3.568-7 5.899-14.186 6.55-20.216a20.66 20.66 0 00-.642-8.156 16.573 16.573 0 00-2.881-5.086c-.33-.449-.67-.916-.99-1.384a164.07 164.07 0 01-10.295 5.187 22.044 22.044 0 01-11.506 1.796z"
/>
<path
fill="#231F20"
d="M224.88 130.496s-5.679-1.292-8.257-6.011c-2.578-4.72-1.018-8.34-1.018-8.34s4.954 5.728 11.22 7.579l-1.944 6.772z"
/>
<path
fill="#231F20"
d="M224.88 130.9h-.091c-.239-.056-5.89-1.384-8.533-6.205-2.642-4.82-1.11-8.54-1.046-8.697a.404.404 0 01.312-.238.422.422 0 01.367.129c0 .055 4.964 5.663 11.01 7.46a.404.404 0 01.276.503l-1.9 6.754a.404.404 0 01-.394.293zm-9.12-13.958a10.217 10.217 0 001.203 7.332c2.1 3.83 6.358 5.333 7.633 5.709l1.716-6.003c-5.074-1.622-9.184-5.599-10.551-7.038zm12.598-4.792a7.64 7.64 0 01-3.275-1.027.406.406 0 11.403-.705c.707.403 2.753 1.32 3.67.723.597-.384-.055-4.15-1.431-8.247a.406.406 0 11.77-.257c.827 2.447 2.579 8.248 1.093 9.164-.369.23-.795.351-1.23.349z"
/>
<path
fill="#231F20"
d="M226.68 117.117a6.135 6.135 0 01-2.753-.605c-2.294-1.137-3.67-3.803-4.148-7.927a.413.413 0 01.358-.45.404.404 0 01.45.358c.431 3.83 1.67 6.287 3.67 7.331 3.055 1.512 6.955-.779 6.991-.797a.404.404 0 01.56.138.412.412 0 01-.138.559 11.02 11.02 0 01-4.99 1.393zm.43-18.292a.404.404 0 01-.403-.376c-.065-.916-.33-1.475-.808-1.714-.917-.476-2.633.385-3.202.761a.407.407 0 01-.45-.678c.101-.064 2.45-1.586 4.01-.807a2.611 2.611 0 011.257 2.383.403.403 0 01-.376.43h-.028zm10.176 4.545a.404.404 0 01-.404-.366s-.184-2.016-1.33-2.75c-.991-.65-2.148.834-2.157.853a.404.404 0 01-.569.073.403.403 0 01-.082-.568c.56-.733 1.954-1.888 3.257-1.036 1.477.972 1.68 3.281 1.688 3.373a.403.403 0 01-.367.44l-.036-.019zm-32.27-2.217a8.138 8.138 0 00.735 4.26c1.302 2.411 4.514 3.392 7.138 2.613 6.854-2.026 10.148-15.048 4.964-20.162-4.817-4.747-10.286 2.75-11.414 7.176-.523 2.08-1.349 4.005-1.422 6.113z"
/>
<path
fill="#231F20"
d="M211.054 108.695a6.424 6.424 0 01-5.661-3.089 8.34 8.34 0 01-.78-4.472c.126-1.534.434-3.047.917-4.509.166-.559.33-1.118.477-1.677.799-3.079 3.762-7.853 7.258-8.816a4.83 4.83 0 014.835 1.448c2.505 2.466 3.322 6.929 2.138 11.648-1.183 4.72-3.964 8.248-7.267 9.164a7.137 7.137 0 01-1.917.303zm-5.634-7.524a7.653 7.653 0 00.688 4.06 5.83 5.83 0 006.67 2.41c3.038-.917 5.607-4.197 6.708-8.605 1.1-4.408.376-8.615-1.918-10.878a4.03 4.03 0 00-4.055-1.256c-3.156.917-5.955 5.435-6.689 8.248a59.1 59.1 0 01-.477 1.705 18.63 18.63 0 00-.918 4.316h-.009z"
/>
<path
fill="#231F20"
d="M243.12 109.208a.918.918 0 01-.788-1.393c.1-.165 10.276-16.88 12.02-27.3.632-3.776-1.047-7.606-4.726-10.805-5.028-4.362-12.533-6.314-17.846-4.637-9.45 2.988-14.478 24.743-14.533 24.927a.918.918 0 01-1.79-.403c.212-.917 5.322-22.975 15.773-26.274 5.973-1.879 14.029.174 19.598 5.003 4.184 3.666 6.083 8.065 5.34 12.491-1.835 10.777-11.845 27.254-12.267 27.951a.918.918 0 01-.78.44z"
/>
<path
fill="#231F20"
d="M292.868 239a31.312 31.312 0 01-9.68-1.567 31.764 31.764 0 01-10.156-5.902c-5.092-4.115-9.579-9.027-13.919-13.746-2.752-3.015-5.597-6.13-8.57-9.008-9.312-9.018-18.56-13.82-27.525-14.26-12.056-.605-22.745 6.278-32.489 13.801-.917.733-1.908 1.494-2.881 2.264-7.881 6.24-16.818 13.306-27.828 11.648-7.505-1.128-13.332-6.296-16.892-10.43-8.762-10.18-12.845-24.743-10.817-38.865 2.147-15.212 10.634-25.934 25.232-31.873 12.083-4.911 23.488-11.785 34.526-18.429l.091-.045c6.836-4.124 14.093-9.403 16.048-17.32a.471.471 0 01.917.22c-2.037 8.247-9.469 13.663-16.47 17.878l-.082.055c-11.065 6.663-22.506 13.554-34.654 18.494-14.277 5.8-22.571 16.275-24.672 31.158-1.964 13.856 2 28.106 10.57 38.086 3.459 4.023 9.101 9.045 16.331 10.127 10.616 1.603 19.011-5.04 27.122-11.456l2.89-2.272c9.891-7.634 20.745-14.617 33.095-13.994 9.175.458 18.625 5.343 28.103 14.516 2.991 2.905 5.845 6.03 8.607 9.054 4.312 4.729 8.771 9.614 13.817 13.682a30.956 30.956 0 009.854 5.746c12.396 3.996 24.773.064 36.875-11.693 17.956-17.485 28.076-43.988 27.755-72.8-.147-13.453-2.66-23.965-7.689-32.148-2.027-3.309-4.587-6.993-8.753-8.835-2.128-.916-7.12-1.264-9.046 1.44-.734 1.035-.808 2.254-.918 3.802 0 .67-.092 1.42-.193 2.236a.463.463 0 01-.917-.119c.11-.788.147-1.493.193-2.172.1-1.63.192-3.033 1.082-4.28 2.239-3.143 7.726-2.813 10.166-1.74 4.441 1.942 7.056 5.764 9.175 9.164 5.12 8.33 7.67 18.997 7.827 32.624.32 29.032-9.891 55.81-28.03 73.46-9.194 8.99-18.617 13.49-28.095 13.499zM204.172 37.022a.477.477 0 01-.348-.156.467.467 0 010-.65c2.018-1.751 4.019-2.52 5.954-2.301a6.424 6.424 0 014.166 2.374c.145.206.1.49-.1.641a.46.46 0 01-.643-.1 5.58 5.58 0 00-3.523-2.026c-1.67-.193-3.432.513-5.249 2.09a.45.45 0 01-.257.128z"
/>
<path
fill="#231F20"
d="M231.505 185.39a.478.478 0 01-.192 0 .43.43 0 01-.184-.569l11.579-23.185a.417.417 0 01.743.376l-11.57 23.148a.413.413 0 01-.376.23zm-21.57 4.518c-13.259 0-28.838-4.29-29.7-4.528a.422.422 0 11.22-.806c.284.073 28.103 7.744 40.967 2.84.218-.08.46.031.541.248a.403.403 0 01-.239.532 34.077 34.077 0 01-11.79 1.714zM320.403 114.312h2v2.969h-2z"
/>
<path
fill="#231F20"
d="M322.403 117.685h-2a.413.413 0 01-.413-.404v-2.969a.403.403 0 01.413-.403h2c.223 0 .404.18.404.403v2.97a.403.403 0 01-.404.403zm-1.596-.816H322v-2.153h-1.193v2.153z"
/>
<path
fill="#FFF"
d="M213.026 105.661l-.66-.641a13.34 13.34 0 002.358-15.763l.789-.467a14.283 14.283 0 01-2.487 16.871zm30.278 12.024l-.853-.34c2.68-6.9 2-11.995 2-12.041l.918-.128c.018.192.706 5.36-2.065 12.509zM169.236 79.78l6.647-6.787.655.64-6.646 6.788zM289.407 168.901l.403-.823 7.062 3.453-.403.824z"
/>
<path
fill="#CD7DF3"
d="M53.797 105.082c-.386-.091-.799-.155-1.175-.284a3.503 3.503 0 01-2.514-2.392 3.662 3.662 0 01.55-2.978 6.67 6.67 0 014.423-2.896c1.184-.266 1.716-.201 3.597.257V74.72l21.727-4.343v26.988a4.58 4.58 0 01-1.606 3.666 6.777 6.777 0 01-6.634 1.631 3.366 3.366 0 01-2.514-2.383 3.552 3.552 0 01.542-2.969 6.616 6.616 0 014.44-2.896 6.301 6.301 0 013.56.257V79.496l-1.541.302a5773.252 5773.252 0 01-15.479 3.089c-.284.055-.33.165-.33.421v16.093a4.92 4.92 0 01-2.12 4.206 7.271 7.271 0 01-3.467 1.411 1.58 1.58 0 00-.193.064h-1.266zm343.808 63.248v-.523a2.802 2.802 0 00-.523-1.328 5.832 5.832 0 00-1.77-1.677 6.528 6.528 0 00-2.303-.917c-.521-.1-1.057-.1-1.578 0h-.138a1.108 1.108 0 010-.183c.092-.358.183-.706.284-1.045l1.835-6.415c.67-2.328 1.35-4.655 2.019-6.983v-.137l-.642-.055a11.426 11.426 0 00-5.13.916 7.402 7.402 0 00-3.587 3.143c-.23.404-.403.834-.596 1.265-.129.275-.23.568-.349.852a.467.467 0 000 .12l.23-.138c.728-.478 1.492-.9 2.284-1.265a8.156 8.156 0 013.9-.696 7.136 7.136 0 011.688.376.76.76 0 000 .137c-1.113 3.861-2.217 7.72-3.312 11.574a.53.53 0 000 .211c.078.682.367 1.322.825 1.833a6.045 6.045 0 002.147 1.659l.716.311.66.193h.184a4.18 4.18 0 001.652 0c.459-.065.879-.293 1.183-.642.1-.139.191-.282.276-.43l.045-.156zm-326.47 9.016c0-.22 0-.45.102-.67.16-.604.477-1.157.917-1.603a7.68 7.68 0 012.624-1.787 8.413 8.413 0 013.138-.706 5.511 5.511 0 012.028.321l.174.064c.005-.079.005-.159 0-.238 0-.467-.092-.916-.147-1.393-.348-2.89-.7-5.77-1.055-8.642-.385-3.134-.78-6.259-1.165-9.384v-.183c.284 0 .569 0 .835.064 2.281.227 4.479.977 6.423 2.19a9.643 9.643 0 013.954 4.766c.2.57.369 1.152.505 1.74.11.386.183.78.275 1.174a.293.293 0 010 .156l-.266-.23a22.815 22.815 0 00-2.68-2.089 10.44 10.44 0 00-4.853-1.677 9.241 9.241 0 00-2.248.128c.005.058.005.117 0 .175.612 5.18 1.239 10.373 1.881 15.579a.65.65 0 010 .265 4.316 4.316 0 01-1.44 2.227 7.71 7.71 0 01-3.102 1.686c-.32.101-.651.175-.972.257l-.918.11H75a5.4 5.4 0 01-2.13-.293 2.44 2.44 0 01-1.375-1.054 4.634 4.634 0 01-.276-.614l-.082-.34zm219.697-81.28c.119-.238.22-.485.357-.705a4.393 4.393 0 011.689-1.457 9.276 9.276 0 013.67-.99 10.104 10.104 0 013.817.43 6.36 6.36 0 012.165 1.165l.174.137a1.63 1.63 0 00.11-.266c.138-.54.266-1.081.386-1.631l2.202-10.172c.789-3.666 1.575-7.35 2.358-11.052l.046-.22c.32.137.624.256.917.394a17.815 17.815 0 016.368 4.985 11.484 11.484 0 012.605 6.937c0 .72-.036 1.439-.11 2.154 0 .486-.1.916-.156 1.439a.394.394 0 01-.055.165l-.22-.358a26.572 26.572 0 00-2.202-3.4 12.402 12.402 0 00-4.826-3.803 10.543 10.543 0 00-2.587-.724h-.065a1.42 1.42 0 01-.046.211l-3.963 18.274a.916.916 0 01-.12.302 5.192 5.192 0 01-2.495 1.952 9.396 9.396 0 01-4.166.687c-.403 0-.798-.055-1.202-.091l-1.055-.22-.174-.074a6.425 6.425 0 01-2.285-1.164 3.033 3.033 0 01-1.147-1.732 7.58 7.58 0 01-.064-.797l.074-.376z"
/>
<path
fill="#698DFF"
d="M38.092 50.8c-4.725 0-4.734 7.331 0 7.331 4.735 0 4.735-7.33 0-7.33zm357 8c-4.725 0-4.734 7.331 0 7.331 4.735 0 4.735-7.33 0-7.33zm-60.38-16.883a1.933 1.933 0 00-.467-.806l-.376-.284a1.837 1.837 0 00-.918-.257h-.514a1.34 1.34 0 00-.706.165c-.23.07-.435.2-.596.376a1.43 1.43 0 00-.377.586c-.115.217-.169.461-.156.706l.065.495c.086.304.247.58.468.806l.376.285c.279.161.595.246.917.247h.514c.245.014.49-.04.707-.156.226-.075.43-.204.596-.376a2.07 2.07 0 00.532-1.3c-.018-.157-.046-.322-.064-.487zm-219.15-8.568c-2.955 0-2.964 4.582 0 4.582 2.963 0 2.954-4.582 0-4.582zm264.333 44.49c-2.955 0-2.955 4.583 0 4.583 2.954 0 2.954-4.582 0-4.582z"
/>
</g>
</g>
</svg>
<h1 class="card--sec--1--heading">Order Summary</h1>
<p class="card--sec--1--text">
You can now listen to millions of songs, audiobooks, and podcasts on
any device anywhere you like!
</p>
</section>
<section class="card--sec--2">
<section class="card--sec--2--1">
<section class="card--sec--2--1--icon">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<g fill="none" fill-rule="evenodd">
<circle cx="24" cy="24" r="24" fill="#DFE6FB" />
<path
fill="#717FA6"
fill-rule="nonzero"
d="M32.574 15.198a.81.81 0 00-.646-.19L20.581 16.63a.81.81 0 00-.696.803V26.934a3.232 3.232 0 00-1.632-.44A3.257 3.257 0 0015 29.747 3.257 3.257 0 0018.253 33a3.257 3.257 0 003.253-3.253v-8.37l9.726-1.39v5.327a3.232 3.232 0 00-1.631-.441 3.257 3.257 0 00-3.254 3.253 3.257 3.257 0 003.254 3.253 3.257 3.257 0 003.253-3.253V15.81a.81.81 0 00-.28-.613z"
/>
</g>
</svg>
</section>
</section>
<section class="card--sec--2--2">
<section class="card--sec--2--2--txt">
<p class="card--sec--2--2--parg">
<span class="card--sec--2--2--parg--2--spn1">Annual Plan</span>
<span class="card--sec--2--2--parg--2--spn2">$59.99/year</span>
</p>
</section>
<section class="card--sec--2--2--link">
<a href="#">Change</a>
</section>
</section>
</section>
<section class="card--sec--3">
<button class="card--sec--3--btn">Proceed to Payment</button>
<a class="card--sec--3--link" href="#"> Cancel Order </a>
</section>
</div>
<footer>
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by
<a href="https://Blog.CreatiqueMedia.com"
>CreatiqueMedia LLC | Ron The Web Dev</a
>.
</footer>
<script defer src="https://blog.creatiquemedia.com/wp-content/uploads/siteground-optimizer-assets/siteground-optimizer-combined-js-1eafeeafdd252b63f1752a41fea14371.js"></script></body>
</html>
6 - CSS
You will notice here in the style sheet that I usedthe ” background-image” property using the url of the svg on my GitHub STG branch where I am storing my project in another branch than the branch that I am hosting the GitHub Page on. That branch for the website is CM-GHP. So, I simply copied the URL of CM-STG SVG files and pasted them as my “background-image” URL source. The reason I used the “background-image” porperty instead of the <image> tag in my markup for this is because the <image> tag uses unnecessary spacing from the card container while using the “background-image” property does not, because it’s a background on the element instead of an image within the element that adds padding and margins.
If you would prefer to use the original SVG images in your relative location instead after downloading the project, you can use the following in your style sheet:
- To use the original <body> “background-image” URL source, use the following:
body {
display: flex;
justify-content: center;
align-items: center;
background-image: url("/assets/pattern-background-desktop.svg");
background-repeat: no-repeat;
flex-direction: column;
background-size: contain;
background-color: var(--PrimaryColorPaleBlue);
font-family: var(--FontFamily);
padding: auto;
width: 100vw;
height: 100vh;
}
To use the original “card–sec–1–hero” “background-image” URL source, use the following:
.card--sec--1--hero {
background-image: url("/assets/illustration-hero.svg");
position: relative;
border-radius: 24px 24px 0 0;
top: -50px;
}
In my CSS, I always put “Global Styles” first which is anything that effects the entire styles. This could be the all elements wildcard (*) the “:root” pseudo-class to create variables to use throughout your style sheet, the <body> tag, and/or the <html> tag. Then, at the very top, I use a block comment so I can see the styles that Frontend Mentor recommends that I take from their “style-guide.md” document. At the very bottom of my style sheet, I use media queries.
These are what I call Global styles.
So here is how I break down my style sheet:
- Global Styles
- Specific Section Styles
- Card Container
- Parent Section 1 within the Card Container
- Child Sections within Section 1
- Parent Section 2 within the Card Container
- Child Sections within Section 2
- Parent Section 3 within the Card Container
- Child Sections within Section 3
- Parent Section 4 witihn the Card Container
- Child Sections within Section 4
- Parent Section 1 within the Card Container
- Footer
- Media Queries
- Card Container
Also, notice how I wrote my media query!
I use only one rule to write the media query instead of two!
To do this, I use the following:
@media only screen and (min-width: 375px) and (min-width: 1440px)
For screens larger than 1440px, I simply display the default background image which is the BODY ruleset here:
body {
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://raw.githubusercontent.com/CreatiqueMedia/CM-STG-Blog-Posts/CM-STG/CM-STG-Post-0006-20220927-Order%20Summary-Component/assets/pattern-background-desktop.svg");
background-repeat: no-repeat;
flex-direction: column;
background-size: contain;
background-color: var(--PrimaryColorPaleBlue);
font-family: var(--FontFamily);
padding: auto;
width: 100vw;
height: 100vh;
}
Then, the media query will hide this background when the screen is smaller than 1440px, but larger than 375px, like this:
@media only screen and (min-width: 375px) and (max-width: 1440px) {
body {
background-image: none;
}
}
Here’s the full “main.css” style sheet code:
/*
# Front-end Style Guide
## Layout
The designs were created to the following widths:
- Mobile: 375px
- Desktop: 1440px
## Colors
### Primary
- Pale blue: hsl(225, 100%, 94%)
- Bright blue: hsl(245, 75%, 52%)
### Neutral
- Very pale blue: hsl(225, 100%, 98%)
- Desaturated blue: hsl(224, 23%, 55%)
- Dark blue: hsl(223, 47%, 23%)
## Typography
### Body Copy
- Font size (paragraph): 16px
### Font
- Family: [Red Hat Display](https://fonts.google.com/specimen/Red+Hat+Display)
- Weights: 500, 700, 900
*/
/* Global Styles Here */
:root {
/* Primary Colors */
--PrimaryColorPaleBlue: hsl(225, 100%, 94%);
--PrimaryColorBrightBlue: hsl(245, 75%, 52%);
/* Neutral Colors */
--NeutralColorVeryPaleBlue: hsl(225, 100%, 98%);
--NeutralColorDesaturatedBlue: hsl(224, 23%, 55%);
--NeutralColorDarkBlue: hsl(223, 47%, 23%);
/* Fonts */
--FontFamily: "Red Hat Display", sans-serif;
--FontWeightLightBold: 500;
--FontWeightMediumBold: 700;
--FontWeightDarkBold: 900;
}
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://raw.githubusercontent.com/CreatiqueMedia/CM-STG-Blog-Posts/CM-STG/CM-STG-Post-0006-20220927-Order%20Summary-Component/assets/pattern-background-desktop.svg");
background-repeat: no-repeat;
flex-direction: column;
background-size: contain;
background-color: var(--PrimaryColorPaleBlue);
font-family: var(--FontFamily);
padding: auto;
width: 100vw;
min-height: 100vh;
}
/* Card Container Styles */
.card--container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
width: 375px;
height: 600px;
background-color: hsl(225, 100%, 98%);
border-radius: 24px;
margin: 2% 0 2% 0;
filter: drop-shadow(0 16px 10px rgba(26, 17, 120, 0.2));
}
/* Card Container Section 1 */
.card--sec--1--hero {
background-image: url("https://raw.githubusercontent.com/CreatiqueMedia/CM-STG-Blog-Posts/CM-STG/CM-STG-Post-0006-20220927-Order%20Summary-Component/assets/illustration-hero.svg");
position: relative;
border-radius: 24px 24px 0 0;
top: -56px;
width: 375px;
}
.card--sec--1--heading {
margin: -100px 0 24px 0;
font-weight: var(--FontWeightDarkBold);
}
.card--sec--1--text {
color: var(--NeutralColorDesaturatedBlue);
margin: 10%;
font-weight: var(--FontWeightLightBold);
}
/* Card Container Section 2 Styles */
.card--sec--2 {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--PrimaryColorPaleBlue);
border-radius: 12px;
padding: 2%;
background-color: rgba(224, 232, 255, 0.3);
}
.card--sec--2--1--icon {
margin: 0 24px 0 0;
}
.card--sec--2--2 {
display: flex;
justify-content: center;
align-items: center;
}
.card--sec--2--2--parg {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 86px 0 0;
}
.card--sec--2--2--parg--2--spn2 {
color: var(--NeutralColorDesaturatedBlue);
}
/* Card Container Section 3 Styles */
.card--sec--3 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.card--sec--3--btn {
padding: 16px 100px 16px 100px;
background-color: var(--PrimaryColorBrightBlue);
color: var(--NeutralColorVeryPaleBlue);
font-weight: var(--FontWeightMediumBold);
border-radius: 12px;
margin: 24px 0 24px 0;
filter: drop-shadow(0 16px 10px rgba(26, 17, 120, 0.2));
cursor: pointer;
}
.card--sec--3--link {
color: var(--NeutralColorDesaturatedBlue);
text-decoration: none;
}
/* Footer Section Styles */
footer {
font-size: 11px;
text-align: center;
margin: 24px 0 0 0;
}
footer a {
color: hsl(228, 45%, 44%);
}
/* Mobile Queries */
@media only screen and (min-width: 275px) and (max-width: 1440px) {
body {
background-image: none;
}
}
7 - Github Repo and Live Website
8 - Conclusion
Hey folks!
Thanks for stopping by to check out this post!
What what have we learned besides how cool FlexBox is, as usual? Another thing to keep in mind is that if you build your HTML and CSS strucutre correctly, it makes it easier to space your elements and when you space your elements correctly, you may not ever need to use media queries. If you do need to use media queries, then you won’t have use so much for spacing and positioning in a responsive nature context. Always think about width and height and using vw and vh units to help maintain a consistent size during responsive browsing.
We appreciate your readership and will keep trying to post educational material for your web dev craving to thrive on!
If you are interested in having a website, web app, or anything built related to web development for your business or personal need, please contact us today at:
OR
Call use at: 405-831-3048