CREATE A RESPONSIVE
STATS PREVIEW
CARD COMPONENT!
Index
1 - Description
Here is a nifty lil stats preview card component I built using HTML and CSS following the BEM method.
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
- Very dark blue (main background): hsl(233, 47%, 7%)
- Dark desaturated blue (card background): hsl(244, 38%, 16%)
- Soft violet (accent): hsl(277, 64%, 61%)
### Neutral
- White (main heading, stats): hsl(0, 0%, 100%)
- Slightly transparent white (main paragraph): hsla(0, 0%, 100%, 0.75)
- Slightly transparent white (stat headings): hsla(0, 0%, 100%, 0.6)
## Typography
### Body Copy
- Font size: 15px
### Font
- Family: [Inter](https://fonts.google.com/specimen/Inter)
- Weights: 400, 700
- Family: [Lexend Deca](https://fonts.google.com/specimen/Lexend+Deca)
- Weights: 400
4 - Project Folder Structure
5 - HTML
Here is my typical markup following the BEM method for CSS structure!
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-20221009-Stats-Preview-Card-Component
</title>
</head>
<body>
<main>
<div class="card--container">
<section class="card--sec--left">
<h1 class="card--sec--left--1--hdng">
Get
<span class="card--sec--left--1--hdng--span">insights</span> that
help your business grow.
</h1>
<p class="card--sec--left--1--txt">
Discover the benefits of data analytics and make better decisions
regarding revenue, customer experience, and overall efficiency.
</p>
<section class="card--sec--left--2--stats">
<div class="card--sec--left--2--stats--left--wrapper">
<h1 class="card--sec--left--2--stats--left--num">10K+</h1>
<h4 class="card--sec--left--2--stats--left--txt">companies</h4>
</div>
<div class="card--sec--left--2--stats--center--wrapper">
<h1 class="card--sec--left--2--stats--center--num">314</h1>
<h4 class="card--sec--left--2--stats--center--txt">templates</h4>
</div>
<div class="card--sec--left--2--stats--right--wrapper">
<h1 class="card--sec--left--2--stats--right--num">12M+</h1>
<h4 class="card--sec--left--2--stats--right--txt">queries</h4>
</div>
</section>
</section>
<section class="card--sec--right">
<picture class="card--sec--right--img">
<source
class="card--sec--right--img__desktop"
media="(min-width: 375px)"
srcset="./assets/image-product-desktop.jpg"
/>
<img
class="card--sec--right--img__mobile lazyload"
src="./assets/image-product-mobile.jpg"
alt=""
/>
</picture>
</section>
</div>
</main>
<footer>
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by CreatiqueMedia LLC | Ron The Web Dev<a
href="https://Blog.CreatiqueMedia.com"
>CreatiqueMedia LLC | Ron The Web Dev Blog</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
Here in my stylesheet I used FlexBox instead of CSS Grid to flip right section on top of the left section by using the following in my media query:
.card--container {
flex-direction: column-reverse;
}
Here is my full main.css:
/*
# Front-end Style Guide
## Layout
The designs were created to the following widths:
- Mobile: 375px
- Desktop: 1440px
## Colors
### Primary
- Very dark blue (main background): hsl(233, 47%, 7%)
- Dark desaturated blue (card background): hsl(244, 38%, 16%)
- Soft violet (accent): hsl(277, 64%, 61%)
### Neutral
- White (main heading, stats): hsl(0, 0%, 100%)
- Slightly transparent white (main paragraph): hsla(0, 0%, 100%, 0.75)
- Slightly transparent white (stat headings): hsla(0, 0%, 100%, 0.6)
## Typography
### Body Copy
- Font size: 15px
### Font
- Family: [Inter](https://fonts.google.com/specimen/Inter)
- Weights: 400, 700
- Family: [Lexend Deca](https://fonts.google.com/specimen/Lexend+Deca)
- Weights: 400
*/
/* Global Styles Here */
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Primary Colors */
--PrimaryColorVeryDarkBlue: hsl(233, 47%, 7%); /* main background */
--PrimaryColorDarkDesaturatedBlue: hsl(244, 38%, 16%); /* card background */
--PrimaryColorSoftViolet: hsl(277, 64%, 61%); /* accent */
/* Neutral Colors */
--NeutralColorWhite: hsl(0, 0%, 100%); /* main heading, stats */
--NeutralColorLightTransparentWhite: hsla(
0,
0%,
100%,
0.75
); /* main paragraph */
--NeutralColorMedTransparentWhite: hsla(0, 0%, 100%, 0.6); /* stat headings */
/* Typography */
--TypographyFontSize: 15px;
--TypographyFontFamilyInter: "Inter", sans-serif;
--TypographyFontWeightInterMedBold: 400;
--TypographyFontWeightInterDarkBold: 700;
--TypographyFontFamilyLexendDeca: "Lexend Deca", sans-serif;
--TypographyFontWeightLexendDecaMedBold: 400;
/* Images */
--RightSecBgImage: url("../assets/image-header-desktop.jpg");
}
body {
background-color: var(--PrimaryColorVeryDarkBlue);
flex: display;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
main {
font-size: var(--TypographyFontSize);
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--TypographyFontFamilyLexendDeca);
}
/* Specific Section Styless Here */
.card--container {
width: 70%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.card--sec--left {
width: 50%;
height: 100%;
border-radius: 1em 0 0 1em;
background-color: var(--PrimaryColorDarkDesaturatedBlue);
text-align: center;
padding: 10%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-width: 375px;
}
.card--sec--left--1--hdng {
color: var(--NeutralColorWhite);
margin: 4em 0 1em 0;
font-size: 2em;
text-align: left;
}
.card--sec--left--1--hdng--span {
color: var(--PrimaryColorSoftViolet);
}
.card--sec--left--1--txt {
color: var(--NeutralColorMedTransparentWhite);
text-align: left;
font-family: var(--TypographyFontFamilyInter);
font-weight: var(--TypographyFontWeightInterMedBold);
line-height: 2;
}
.card--sec--left--2--stats {
margin: 6em 0 0 0;
color: var(--NeutralColorWhite);
display: flex;
margin: 4em 0 2em 0;
}
.card--sec--left--2--stats h1 {
font-size: 2em;
text-align: left;
font-family: var(--TypographyFontFamilyInter);
}
.card--sec--left--2--stats h4 {
color: var(--NeutralColorMedTransparentWhite);
text-align: left;
font-family: var(--TypographyFontFamilyLexendDeca);
font-weight: var(--TypographyFontWeightInterMedBold);
text-transform: uppercase;
}
.card--sec--left--2--stats--left--wrapper {
margin: 0 4em 0 0;
}
.card--sec--left--2--stats--center--wrapper {
margin: 0 4em 0 0;
}
.card--sec--left--2--stats--right--wrapper {
margin: 0 0 4em 0;
}
.card--sec--left--2--stats--left--txt {
margin: 0.5em 0 0 0;
}
.card--sec--left--2--stats--center--txt {
margin: 0.5em 0 0 0;
}
.card--sec--left--2--stats--right--txt {
margin: 0.5em 0 0 0;
}
.card--sec--right {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
width: 50%;
height: 100%;
min-width: 375px;
object-fit: cover;
border-radius: 0 1em 1em 0;
background: var(--RightSecBgImage) center center;
background: linear-gradient(
0deg,
rgba(64, 84, 165, 0.6),
rgba(64, 84, 165, 0.6)
),
var(--RightSecBgImage) center center;
}
.card--sec--right {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
.card--sec--right--img__desktop {
width: 100%;
height: auto;
object-fit: fill;
max-width: 100%;
max-height: 100vh;
margin: auto;
}
.card--sec--right--img__mobile {
width: 100%;
height: auto;
object-fit: fill;
max-width: 100%;
max-height: 100vh;
margin: auto;
}
footer {
display: flex;
justify-content: center;
align-items: center;
font-size: 11px;
text-align: center;
color: white;
margin: -4em 0 4em 0;
}
footer a {
color: hsl(228, 45%, 44%);
}
/* Media Queries */
@media only screen and (min-width: 375px) and (max-width: 1440px) {
.card--container {
flex-direction: column-reverse;
}
.card--container h1 {
text-align: center;
}
.card--container p {
text-align: center;
}
.card--sec--left {
border-radius: 0 0 1em 1em;
padding: 2%;
height: 80vh;
margin: 0 0 4em 0;
}
.card--sec--left--1--hdng {
margin: 1em 0 1em 0;
}
.card--sec--left--2--stats {
flex-direction: column;
}
.card--sec--left--2--stats--left--wrapper h4 {
margin: auto;
text-align: center;
margin: auto;
}
.card--sec--left--2--stats--center--wrapper h4 {
margin: auto;
text-align: center;
margin: auto;
}
.card--sec--left--2--stats--right--wrapper h4 {
margin: auto;
text-align: center;
margin: auto;
}
.card--sec--left--2--stats--left--wrapper {
margin: auto;
}
.card--sec--left--2--stats--center--wrapper {
margin: 2em 0 0 0;
}
.card--sec--left--2--stats--right--wrapper {
margin: 2em 0 0 0;
}
.card--sec--right {
border-radius: 1em 1em 0 0;
margin: 18em 0 0 0;
height: 50vh;
}
.card--sec--right--img {
padding: 40%;
}
.card--sec--right--img__mobile {
margin: 6em 0 0 0;
}
footer {
margin: 18em 0 0 0;
padding: 0 0 4em 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
7 - Github Repo, GitHub Page Live Website, and frontend solution page
GitHub Repo: https://github.com/CreatiqueMedia/CM-GHP-Post-0007-20221009-Stats-Preview-Card-Component
GitHub Page Live Website: https://creatiquemedia.github.io/CM-GHP-Post-0007-20221009-Stats-Preview-Card-Component/
Frontend Mentor Solution Page: https://www.frontendmentor.io/solutions/create-a-stats-preview-card-component-6f2Tp_BPlE
8 - Conclusion
Hey folks!
Thanks for stopping by to check out this post!
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