/Profile-card

Primary LanguageCSS

Frontend Mentor - Profile card component

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

I am a newbie in world of front-end developer. I have a basic understanding of HTML, CSS and Js. So I started out this amazing challenge to build out this profile card component and get it looking as close to the design as possible. So if you've got something you'd like to practice, feel free to give it a go.

Design preview for the Profile card component coding challenge

Welcome! 👋

Thanks for checking out this front-end coding challenge.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

To do this challenge, you need a basic understanding of HTML and CSS.

Frontend Mentor - Profile card component solution

This is a solution to the Profile card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

The challenge

  • Build out the project to the designs provided and it should look as close to the design as possible.

Screenshot

This is a desktop view

desktop view

This is a mobile view

mobile view

Links

My process

  1. Firstly, gave a close look to the design provided. Divided UI design into different components.
  2. Set the main/parent div called card which has child classes called card-top for placing top image inside card and card-content for all the hearder and dp
  3. A div class class called card-footer for placing values and aliging this using flex, setting flex-direction to column.
  4. Providing other styling properties for each class.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • media

What I learned

I learnt how to use divs and styling components like - flex, transform, position, how to align items, how to handle text font size and color, how to use border and how to play with background - images, url etc.

Snippet of Code

. {
  display: flex;
  flex-direction: column;
}
. {
  @media (max-width:480px){
    
  }
 }

Author