Frontend Mentor - Blog preview Card

This is a solution to the Blog preview Card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Blog preview Card
  • Table of contents
  • Overview
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Useful resources
  • Author
  • Acknowledgments

Overview

Screenshot

Links

• Solution URL: Blog Preview Card
• Live Site URL: Blog Preview Card

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

in this project i learned how to use semantic html tags, and how to create preset font and center elements to use them

code snippets:

.center-text{
    display: flex;
    justify-content: center;
    align-items: center; 
}
.preset-1{
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 800;
}

.preset-2{
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 500;
}

.preset-3{
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 500;
}

.preset-3-b{
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 800;
}

Useful resources

• elzero - This web site helped me for learning HTML and CSS and Git. I really liked this pattern and will use it going forward.
• Frontend mentor - this website help me to init project and deal with details like margin and padding and community.

Author

• Website - Blog preview Card
• Frontend Mentor - @7A9Oo
• Facebook - Abdelhak Med

Acknowledgments

I would like to express my heartfelt gratitude to Osama Elzero and this website (frontend mentor) for invaluable assistance. his support and guidance have been tremendously helpful, and I am truly grateful for his time and effort.