Blog preview card

This is a website that shows a blog article preview using dynamic font sizing and global colors.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

Screenshot

Links

• Live Site URL: Blog preview

My process

Built with

• Semantic HTML5 markup
• CSS custom properties and fonts
• CSS responsive transition animations
• Flexbox
• Web-first workflow

What I learned

I learned how to add custom fonts in CSS which are defined in my project folder using the @font-face rule.

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/Figtree-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
}

@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/Figtree-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
}

Author

• LinkedIn - Geylan Kalaf Mohe