https://github.com/code-beaker/profile-card-code-beaker

https://github.com/code-beaker/profile-card-code-beaker

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/code-beaker/profile-card-code-beaker
• Owner: Code-Beaker
• Created: 2024-06-21T13:22:38.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-21T13:41:55.000Z (7 months ago)
• Last Synced: 2024-06-22T06:19:26.712Z (7 months ago)
• Language: HTML
• Size: 25.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Profile Card Component Solution 🎉

This is a solution to the **Profile Card Component** challenge from [Frontend Mentor](htt[ps://frontendmentor.io])

## Preview 👀

Mockup image representing the preview for the solution.

![Preview Image](./profile-card.jpg)

## Built With 🛠️

- Visual Studio Code

- HTML

- CSS

- Vite

## What I learned 📚

I learned to make use of `position: absolute` in positioning the profile image and also for the divider. Used responsive `clamp()` values for typography and CSS custom properties to make my code better and easier to use.

Used `npm run build` to make a production build of my project that is minified for better performance by Vite.

## Links 🔗

- GitHub Repository: **[Visit ▶️](https://github.com/Code-Beaker/profile-card-code-beaker)**

- Netlify Deploy: **[Visit ▶️](https://profile-card-code-beaker.netlify.app/)**

## Thank you 🙏

Thank you for checking out this solution. If you wish to see all the challenges that I have completed, visit my **[Frontend Mentor profile](https://frontendmentor.io/profile/Code-Beaker)**.