/Profile-Card-Challenge

Solution to the Profile card component challenge on Frontend Mentor.

Primary LanguageHTML

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

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

Profile-Card-Solution

Links

My process

Mainly used this project to pratice some CSS properties, such as Position and Display.

Built with

  • Semantic HTML5 markup
  • CSS custom properties

What I learned

Manage to display the two background circles behind of the card with help of CSS propertie Positin: Absolut.

.left-circle img{
    position: absolute;
    top: -650px;
    left: -350px;
    opacity: 0.8;
    z-index: -1;
    width: 1300px;
}

.right-circle img{
    position: absolute;
    top: 500px;
    left: 900px;
    opacity: 0.8;
    z-index: -1;
    width: 1300px;
}

I also learned how to resize svg's and how to use them. Used the tag to embed the svg in order to be capable of resize it.

<div class="left-circle">
  <img alt="left background circle" src="./images/bg-pattern-top.svg">
</div>

<div class="right-circle">
  <img alt="right background circle" src="./images/bg-pattern-bottom.svg">
</div> 
.left-circle img{
    position: absolute;
    top: -650px;
    left: -350px;
    opacity: 0.8;
    z-index: -1;
    width: 1300px;
}

Learned how to use an image as a background for profile picture purpose combined with the properties display: absolute to place it where I wanted.

<div class="avatar-profile"></div>
.avatar-profile {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: white;
    border: 5px solid white;
    background-image: url(./images/image-victor.jpg);
    background-size: cover;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 100px;
}

Learned propertly how the Propertie Display (inline, block and inline-block) works. Used it to place the profile and social media info in the right place.

<div class="profile-info">

  <div class="basic-info">
    <span class="bold"> Victor Crest</span>
    <span class="grey-special">26</span>
    <p class="grey">London</p>
  </div>  

</div>

<hr>

<div class="profile-social-media">

  <div class="social-media">
    <span class="bold block">80K</span>
    <span class="grey">Followers</span>
  </div>

  <div class="social-media">
    <span class="bold block">803K</span>
    <span class="grey">Likes</span>
  </div>

  <div class="social-media">
    <span class="bold block">1.4K</span>
    <span class="grey">Photos</span>
  </div>

</div>
.profile-social-media{
    text-align: center;
    padding: 0 0 25px;
}

.social-media {
    display: inline-block;
    margin: 0px 30px;
} 

.block {
    display: block;
}

Useful resources

  • How to Scale SVG - This helped understand how to resize a svg and how svg's work.

Author