Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

responsive cards

@rajnishps

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Adarsh Rai 560

@AdarshRai0

Posted

Hi Rajnish, congratulations on your new challenge!

I took a look at your code and I have some tips for you.

Always add the "!DOCTYPE"

HTML Language

<html lang="en">

Browser has a default style sheet called User Agent Stylesheet which adds margin to headings and paragraphs and applies font properties to all elements.

I usually reset all the styles and I start from scratch.

Here is my styles.css

:root{
  /* colors and fonts */
  --font: "Montserrat", sans-serif;
  --white: #ffffff;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  font-size: 62.5%;
}

html, body{
  height: 100%;
}

body{
  width: 100%;
  font-family: var(--font);
}

/* Other rule-sets */

Congratulations, since your first project, your challenges have gotten better and better.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord