https://github.com/code-beaker/social-links-code-beaker

Social Links Profile | Tharun Raj
https://github.com/code-beaker/social-links-code-beaker

css frontendmentor-challenge html social-links

Last synced: about 1 month ago
JSON representation

Social Links Profile | Tharun Raj

• Host: GitHub
• URL: https://github.com/code-beaker/social-links-code-beaker
• Owner: Code-Beaker
• Created: 2024-06-06T16:15:40.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-08T02:42:46.000Z (7 months ago)
• Last Synced: 2024-06-08T18:36:28.009Z (7 months ago)
• Topics: css, frontendmentor-challenge, html, social-links
• Language: CSS
• Homepage: https://social-links-code-beaker-custom.vercel.app
• Size: 95.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Social Links Card Solution with Custom Design

This is a solution to the **Social Links Profile** challenge with custom design.

## Table of content

- [Changes](#changes)

  - [Layout](#layout)

  - [Design](#design)

- [Tools and Tech](#tools-and-tech)

- [Preview](#preview)

  - [Desktop](#desktop)

  - [Mobile](#mobile)

- [Personal Links](#personal-links)

## Changes

The design and layout changes I made in this solution.

### Layout

On bigger screens, the page has a 2-column layout and as the screen size decreases, the layout shifts to a single-column layout.

### Design

The design is different from the original design. With custom colors and fonts.

## Tools and Tech

- [Visual Studio Code](https://code.visualstudio.com)

- [Google Fonts](https://fonts.google.com)

- Firefox

- Brave

- Semantic HTML5

- CSS

- `grid` layout

- CSS **custom properties**

- `flex` layout

## Preview

Preview of the page on different screen sizes.

### Desktop

![image](https://github.com/Code-Beaker/social-links-code-beaker/assets/99812762/cbbb2725-2514-4616-a202-fa5692cbca23)

### Mobile

![image](https://github.com/Code-Beaker/social-links-code-beaker/assets/99812762/164aaa37-28a8-45de-9b30-6863d732559a)

## Links

Hosted on GitHub and deployed to Vercel and Netlify.

- [Repository](https://github.com/Code-Beaker/social-links-code-beaker)

- [Vercel Deploy](https://social-links-code-beaker-custom.vercel.app/)

- [Netlify Deploy](https://social-links-profile-code-beaker.netlify.app/)

## Personal Links

- GitHub - [GitHub/Code-Beaker](https://github.com/Code-Beaker)

- Frontend Mentor - [Frontend Mentor/Code-Beaker](https://frontendmentor.io/profile/Code-Beaker)

- Twitter - [X(Twitter)/iamtharunraj](https://x.com/@iamtharunraj)