Skip to content

Lescano713/blog-preview-card

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Mentor - Blog preview card solution

Table of contents

Overview

The challenge

Users should be able to:

  • See hover and focus states for all interactive elements on the page.
  • The card is responsive to different screen sizes.

Screenshot

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox

What I learned

I learned how to use CSS custom properties (--colorBackground, --colorCard, etc.) to create a more maintainable and flexible styling system. Defining color values in one place allows for easy adjustments across the entire project. Additionally, I gained experience with @font-face to incorporate custom fonts with different weights, improving the typography of my design.

:root{
    --colorBackground: hsl(47, 88%, 63%);
    --colorCard: hsl(0, 0%, 100%);
    --colorParagraph: hsl(0, 0%, 50%);
    --colorTitles: hsl(0, 0%, 7%);
}
@font-face {
    font-family: 'Figtree';
    src: url('./assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
}

The hover and active states applied to .card demonstrate how to add interactive effects, such as scaling and changing box shadows, to enhance user experience.

.card:hover{
    transform: scale(0.9);
    cursor: pointer;
}
.card:active{
    box-shadow: -8px -9px 0 0 var(--colorTitles);
}

Continued development

Going forward, I plan to:

Improve Font Handling: Explore font formats and loading techniques to enhance performance and compatibility. Refine Responsive Design: Ensure that the card and other components adapt seamlessly to various screen sizes and devices. Leverage Advanced CSS Layouts: Experiment with CSS Grid for more complex and responsive layouts. Enhance User Interactions: Continue to improve interactive elements with animations and transitions for a more dynamic user experience.

About

This is a solution to the Blog preview card challenge on Frontend Mentor.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published