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
  • Screenshot
  • Links
• My process
  • Languages and Tools
  • What I learnt
  • Useful resources
• Author

Overview

Screenshot

Mobile

Desktop

Links

• Solution URL: My Solution URL
• Live Site URL: My Live Site URL

My process

Languages and Tools

• HTML5
• CSS3
• Sublime Text 3

What I learnt

Reuse of specific values throughout a document using custom CSS properties or CSS variables.

:root{
	--cardone: hsl(31, 77%, 52%);
	--cardtwo: hsl(184, 100%, 22%);
	--cardthree: hsl(179, 100%, 13%);

	--paragraph: hsla(0, 0%, 100%, 0.75);
	--bg-h-btns: hsl(0, 0%, 95%);

	--heading-font: 'Big Shoulders Display', cursive, sans-serif;
	--paragraph-font: 'Lexend Deca', sans-serif;
}

Use max-width: 100vw; and min-height: 100vh;

• to make the parent container responsive
• to center the child div horizontally as well as vertically

.container{
	max-width: 100vw;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

Create responsive cards without any media queries using CSS grid.

.cards{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

Use of transition and transform properties on images.

img:hover{
	transform: scale(1.2);
	transition: 0.5s;
	cursor: pointer;
}

Useful resources

• frontend_trend - Helped me to make responsive cards without media queries

Author

• Frontend Mentor - @iqra0001
• LinkedIn - Iqra Zaheer
• Instagram - Iqra Zaheer