Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lia-oliveira/blog-preview-card
This repository contains my solution to the Frontend Mentor Blog Preview Card challenge. The project was developed using HTML and CSS, focusing on responsive layout techniques with CSS Grid and Flexbox.
https://github.com/lia-oliveira/blog-preview-card
chalenge css css-flexbox css-grid css-variables development frontend-mentor html vercel
Last synced: 25 days ago
JSON representation
This repository contains my solution to the Frontend Mentor Blog Preview Card challenge. The project was developed using HTML and CSS, focusing on responsive layout techniques with CSS Grid and Flexbox.
- Host: GitHub
- URL: https://github.com/lia-oliveira/blog-preview-card
- Owner: lia-oliveira
- Created: 2024-11-12T00:10:42.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-30T22:35:18.000Z (3 months ago)
- Last Synced: 2024-11-30T23:28:22.661Z (3 months ago)
- Topics: chalenge, css, css-flexbox, css-grid, css-variables, development, frontend-mentor, html, vercel
- Language: CSS
- Homepage: https://blog-preview-card-seven-ruddy.vercel.app
- Size: 252 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Blog preview card
This is a solution to the [Blog preview card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/blog-preview-card-ckPaj01IcS). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Frontend Mentor - Blog preview card](#frontend-mentor---blog-preview-card)
- [Table of contents](#table-of-contents)
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
## Overview
### The challenge
Users should be able to:
- See hover and focus states for all interactive elements on the page
### Screenshot
Expected solution:
My solution:
### Links
- Solution URL: [Blog Card Preview Repo](https://github.com/lia-oliveira/blog-preview-card)
- Live Site URL: [Blog Card Preview Live Site](https://blog-preview-card-seven-ruddy.vercel.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- CSS Variables
- CSS Font-Faces
- Flexbox
- CSS Grid
- Mobile-first workflow
### What I learned
1. How to use the tag to center the card.
```css
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
```
2. How to make the mobile version take up the full width of the screen.
Taking into account that the card spans 4 columns in the original design.
```css
main{
grid-column: span 4;
}
```
3. How to keep the image from overflowing the container.
```css
main img {
width: 100%;
object-fit: cover;
}
```
4. How to apply states to links.
```css
main h1 a:hover{
color:var(--Yellow);
}
main h1 a:focus{
color:var(--Yellow);
}
```
### Continued development
I intend to continue studying how to position elements using a combination of CSS Grid and Flexbox.
Perhaps it would have been easier to position the elements by splitting the grid into rows rather than columns.