https://github.com/benhyh/social-links-profile
https://github.com/benhyh/social-links-profile
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/benhyh/social-links-profile
- Owner: benhyh
- Created: 2024-05-04T06:48:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-08T19:08:20.000Z (about 1 year ago)
- Last Synced: 2025-02-17T07:34:08.782Z (3 months ago)
- Language: HTML
- Size: 1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Social links profile solution
This is a solution to the [Social links profile challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/social-links-profile-UG32l9m6dQ). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## 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)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- See hover and focus states for all interactive elements on the page
### Links
- Solution URL: [https://www.frontendmentor.io/solutions/social-links-profile-7BILeMZPa2]
- Live Site URL: [https://benhyh.github.io/Social-Links-Profile/]
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Anchor tags
### What I learned
Anchor tags & pseudo-elements and its active state to achieve interactivity.
```css
.social-links a {
text-decoration: none;
color: white;
}
.social-links a:hover {
color: black;
transition: 0.5s ease;
}
.social-links:hover {
background-color: hsl(75, 94%, 57%);
cursor: pointer;
transition: 0.5s ease;
}
```
### Continued development
- The link is only active when the user cursor is directly on the anchor tags and I can't seem to work around that without messing up the dimensions of the element. Future development will take in consideration of that feature where users are able to access the link wherever the cursor position is at of the element.
## Author
- Frontend Mentor: [https://www.frontendmentor.io/profile/benhuynh003]