This is a solution to the 3-column preview card component challenge on Frontend Mentor.

##Table of Contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

In this project the users will be able to;

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

• Solution URL: See Solution Here
• Live Site URL: View Live Site Here

This project was built using plain vanilla CSS and HTML. I also got to use custom CSS porperties like GRID to structure the layout when building the mobile and the desktop design. The design was done with a desktop-first workflow.

1. HTML

   Learnt how to use HTML to properly structure web content while using the proper semantic tags.

<main>
  <section>I am used to define the section of a document</section>
</main>

2. CSS

   Learnt how to use CSS to style the web contents alos adding some layouts as well learning how to use svg images in css and finally making use of media queries

.card-component-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 1.8rem;
  overflow: hidden;
}

.svg-img{
  margin-bottom-20px;
}

@media(max-width:28em){

}

For my continued Development I would definitely love to learn to make more layouts using grid and flexbox. Learning more custom CSS properties would also be necessary. Learning more about Grid and its properites will also be very useful in makinhg even more compex layouts.

-Freecodecamp- This is a very useful website as it got me to know to to add svg images to CSS and I would recommend reading up on this to know how I was able to achieve this to do this project.

• Frontend Mentor - @yourusername
• Twitter - @_salutDami
• Linkedin - Ikuomola Stephen