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.
Note: Delete this note and update the table of contents based on what sections you keep.
- Build out the project to the designs provided
- Solution URL: [https://github.com/Almopt/Profile-Card-Challenge]
- Live Site URL: [https://almopt.github.io/Profile-Card-Challenge/]
Mainly used this project to pratice some CSS properties, such as Position and Display.
- Semantic HTML5 markup
- CSS custom properties
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;
}
- How to Scale SVG - This helped understand how to resize a svg and how svg's work.
- Website - Alexandre Morgado
- Frontend Mentor - @Almopt
- Twitter - @Almo_pt