Social Links Card Solution with Custom Design

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

Table of content

• Changes
  • Layout
  • Design
• Tools and Tech
• Preview
  • Desktop
  • Mobile
• 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
• Google Fonts
• Firefox
• Brave
• Semantic HTML5
• CSS
• grid layout
• CSS custom properties
• flex layout

Preview

Preview of the page on different screen sizes.

Desktop

Mobile

Links

Hosted on GitHub and deployed to Vercel and Netlify.

• Repository
• Vercel Deploy
• Netlify Deploy

Personal Links

• GitHub - GitHub/Code-Beaker
• Frontend Mentor - Frontend Mentor/Code-Beaker
• Twitter - X(Twitter)/iamtharunraj