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:
CreatiqueMedia LLC | Ron The Web Dev | Post-0006-20220927 - Order Summary
Card
Order Summary
You can now listen to millions of songs, audiobooks, and podcasts on
any device anywhere you like!
Annual Plan
$59.99/year
Change
Cancel Order
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