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!
Here is my official Frontend Mentor solution’s page for this project:
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
<!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 | Ron The Web Dev | Post 0005-20220910 - Card Component 4
</title>
</head>
<body>
<div class="card--container">
<section class="card--container--sec--1">
<img
class="card--container--sec--1--img lazyload"
src="./assets/image-equilibrium.jpg"
alt=""
loading="lazy"
decoding="async"
/>
<section class="card--container--sec--1--img--overlay">
<svg
class="card--container--sec--1--img--overlay--icon"
width="48"
height="48"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h48v48H0z" />
<path
d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z"
fill="#FFF"
fill-rule="nonzero"
/>
</g>
</svg>
</section>
<h1 class="card--container--sec--1--heading">Equilibrium #3429</h1>
<p class="card--container--sec--1--text">
Our Equilibrium collection promotes balance and calm.
</p>
</section>
<section class="card--container--sec--2">
<div class="card--container--sec--2--icon--wrapper">
<svg
class="card--container--sec--2--icon--1"
width="18"
height="18"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 10.216 5.5 18 0 10.216l5.5 3.263 5.5-3.262ZM5.5 0l5.496 9.169L5.5 12.43 0 9.17 5.5 0Z"
fill="#00FFF8"
/>
</svg>
<h3 class="card--container--sec--2--icon--1--text">0.041 ETH</h3>
<svg
class="card--container--sec--2--icon--2"
width="18"
height="18"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.305 2.007a6.667 6.667 0 1 0 0 13.334 6.667 6.667 0 0 0 0-13.334Zm2.667 7.334H8.305a.667.667 0 0 1-.667-.667V6.007a.667.667 0 0 1 1.334 0v2h2a.667.667 0 0 1 0 1.334Z"
fill="#8BACD9"
/>
</svg>
<h3 class="card--container--sec--2--icon--2--text">3 days left</h3>
</div>
<div class="card--container--sec--2__partial--border"></div>
</section>
<section class="card--container--sec--3--grid--wrapper">
<div class="card--container--sec--3--grid--item">
<img
class="card--container--sec--3--grid--item--img lazyload"
src="./assets/image-avatar.png"
alt=""
/>
</div>
<div class="card--container--sec--3--grid--item">
<h4 class="card--container--sec--3--grid--item--text">
<span class="card--container--sec--3--grid--item--text--1"
>Creation of</span
>
<span class="card--container--sec--3--grid--item--text--2"
>Jules Wyvern</span
>
</h4>
</div>
</section>
</div>
<footer>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by
<a href="https://Blog.CreatiqueMedia.com" target="_blank"
>CreatiqueMedia | Ron The Web Dev</a
>.
</div>
</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
/*
# 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