Frontend Mentor - 3-column preview card component solution

This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Screenshot

• Desktop View
• Mobile View

Links

• Solution URL: Solution URL here
• Live Site URL: Live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

In this challenge i learn a new things about the list item property in CSS i can select every single items on list with pseudo selector called nth-child() who stand for n'th child on list. the n value refer to the n list number property on the unordered list

li:nth-child(1) {
  background-color: var(--color-bright-orange);
}

li:nth-child(1) a {
  color: var(--color-bright-orange);
}

li:nth-child(1) a:hover {
  background-color: var(--color-bright-orange);
  color: var(--color-light-gray);
}

li:nth-child(2) {
  background-color: var(--color-dark-cyan);
}

li:nth-child(2) a {
  color: var(--color-dark-cyan);
}

li:nth-child(2) a:hover {
  background-color: var(--color-dark-cyan);
  color: var(--color-light-gray);
}

li:nth-child(3) {
  background-color: var(--color-very-dark-cyan);
}

li:nth-child(3) a {
  color: var(--color-very-dark-cyan);
}

li:nth-child(3) a:hover {
  background-color: var(--color-very-dark-cyan);
  color: var(--color-light-gray);
}

Author

• Frontend Mentor - @ddky16
• Twitter - @code_ddky