CM-Post-0004-20220901-Rating-Component-1
CREATE A RATING AN NFT CARD COMPONENT USING HTML AND CSS!
NO MEDIA QUERIES NEEDED!
I won’t be going into detail here at all. But, this was a fun project and the fun part was working on the hover element where the eye ball icon shows through!
Here is my code for this project!
ENJOY!
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
As usual, 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!
Okay, let’s get started!
2 - What We're Building!

3 - Style Guide
# Front-end Style Guide
## Layout
The designs were created to the following widths:
- Mobile: 375px
- Desktop: 1440px
## Colors
### Primary
- Soft blue: hsl(215, 51%, 70%)
- Cyan: hsl(178, 100%, 50%)
### Neutral
- Very dark blue (main BG): hsl(217, 54%, 11%)
- Very dark blue (card BG): hsl(216, 50%, 16%)
- Very dark blue (line): hsl(215, 32%, 27%)
- White: hsl(0, 0%, 100%)
## Typography
### Body Copy
- Font size (paragraph): 18px
### Font
- Family: [Outfit](https://fonts.google.com/specimen/Outfit)
- Weights: 300, 400, 600
4 - Project Folder Structure

5 - HTML
CreatiqueMedia | Ron The Web Dev | Post 0005-20220910 - Card Component 4
Equilibrium #3429
Our Equilibrium collection promotes balance and calm.
0.041 ETH
3 days left
Creation of
Jules Wyvern
6 - CSS
/*
# Front-end Style Guide
## Layout
The designs were created to the following widths:
- Mobile: 375px
- Desktop: 1440px
## Colors
### Primary
- Soft Blue: hsl(215, 51%, 70%)
- Cyan: hsl(178, 100%, 50%)
### Neutral
- Very dark blue (main BG): hsl(217, 54%, 11%)
- Very dark blue (card BG): hsl(216, 50%, 16%)
- Very dark blue (line): hsl(215, 32%, 27%)
- White: hsl(0, 0%, 100%)
## Typography
### Body Copy
- Font size (paragraph): 18px
### Font
- Family: [Outfit](https://fonts.google.com/specimen/Outfit)
- Weights: 300, 400, 600
*/
/**** All Universal Styles Go Here ****/
:root {
--BodyBackgroundColor: hsl(217, 54%, 11%);
--CardContainerBackground: hsl(216, 50%, 16%);
--CardNeutralWhite: hsl(0, 0%, 100%);
--CardPrimarySoftBlue: hsl(215, 51%, 70%);
--CardPrimaryCyan: hsl(178, 100%, 50%);
--CardFont: "Outfit";
--CardSec3Border: hsl(215, 32%, 27%);
--CardFooterLinks: hsl(228, 45%, 44%);
}
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--BodyBackgroundColor);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: "Outfit", sans-serif;
font-size: 18px;
}
/* ++++ Specific Section Styles Go Here ++++ */
/**** Card Container Styles ****/
.card--container {
background-color: var(--CardContainerBackground);
max-width: 100%;
border-radius: 24px;
margin: 6% 0 40px 0;
width: 400px;
line-height: 2;
}
/**** Section 1 Styles ****/
.card--container--sec--1 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: auto;
}
.card--container--sec--1--img {
max-width: 100%;
width: 90%;
border-radius: 12px;
margin: 6%;
}
.card--container--sec--1--img--overlay {
position: relative;
max-width: 100%;
width: 360px;
height: 360px;
opacity: 0;
transition: 0.5s ease;
border-radius: 12px;
top: -385px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.card--container--sec--1--img--overlay--icon {
opacity: 0.9;
}
.card--container--sec--1--img--overlay:hover {
opacity: 1;
transition: 0.5s ease;
background-color: rgba(0, 255, 247, 0.6);
}
.card--container--sec--1--heading {
color: var(--CardNeutralWhite);
display: block;
text-align: left;
margin: -350px 5% 0 5%;
width: 87%;
}
.card--container--sec--1--text {
color: var(--CardPrimarySoftBlue);
line-height: 1;
margin: 5%;
width: 87%;
}
/**** Section 2 Styles ****/
.card--container--sec--2--icon--wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0 0 20px 0;
}
.card--container--sec--2--icon--1 {
margin: 0 6px 0 -36px;
}
.card--container--sec--2--icon--1--text {
color: var(--CardPrimaryCyan);
margin: 0 20% 0 0;
}
.card--container--sec--2--icon--2 {
margin: 0 6px 0 0;
}
.card--container--sec--2--icon--2--text {
color: var(--CardPrimarySoftBlue);
margin: 0 -20px 0 0;
}
.card--container--sec--2__partial--border {
width: 85%;
border-bottom: 1px solid hsl(215, 32%, 27%);
position: relative;
left: 7%;
}
/**** Section 3 Styles ****/
.card--container--sec--3--grid--wrapper {
display: grid;
grid-template-columns: auto auto auto;
padding: 10px;
}
.card--container--sec--3--grid--item {
text-align: center;
padding: 20px 0 0 0;
}
.card--container--sec--3--grid--item--img {
border: solid var(--CardNeutralWhite);
border-radius: 50%;
width: 25%;
margin: 0 0 0 -45%;
}
.card--container--sec--3--grid--item--text--1 {
color: var(--CardPrimarySoftBlue);
margin: 20px 2px 0 -60%;
}
.card--container--sec--3--grid--item--text--2 {
color: var(--CardPrimaryCyan);
}
/**** Footer Styles ****/
footer {
font-size: 11px;
text-align: center;
color: var(--CardNeutralWhite);
margin: 0 0 20px 0;
}
footer a {
color: var(--CardFooterLinks);
}
7 - Github Repo and Live Website
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