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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

Overview

The challenge

• Build out the project to the designs provided

Screenshot

 Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.

Alternatively, you can use a tool like FireShot to take the screenshot. FireShot has a free option, so you don't need to purchase it.

Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.

Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Desktop-first workflow

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

i learnt how to place different elements in a card using the display grid. i also learnt how to stack the profile photo on top of another element using position relative and z-index.

To see how you can add code snippets, see below:

section class=" card">
        <section class="card-header"></section>
        <section class="card-body">
          <img src="images/image-victor.jpg" alt="Victor" id="image">
          <section class="text">
            <h1> Victor Crest  <span>26</span></h1>
  
            <p>London</p>
          </section>
         
        </section>

.card-body #image{
   position:relative;
   z-index: 1;
   top:-52px;
   border:5px solid white;
   border-radius: 50%;
}

If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.

Note: Delete this note and the content within this section and replace with your own learnings.

Continued development

i want to continue to learn how to place background patterns properly.

Note: Delete this note and the content within this section and replace with your own plans for continued development.

Useful resources

• Example resource 1 - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
• Example resource 2 - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.

Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.

Author

• Website - Add your name here
• Frontend Mentor - @neetauka
• Twitter - @Anitauka3

Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.

Acknowledgments

i want to thank the helper, the Holy Spirit for his assistance through the start and finish of this project. Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.