This is a solution to the Profile card component challenge on Frontend Mentor.
- Profile card component challenge from Frontend Mentor.
- The challenge is to build out the profile card component and get it looking as close to the design (provided) as possible.
- Here is the screenshots of the profile card component that I have created, just follow the link below.
.png)
- Solution URL: solution URL
- Live Site URL: Profile-card-component
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
In this project I learned how to make different well-structured containers class in HTML, and In CSS I learned how we use its different properties like animation, tranformation, opacity, padding, margin, border etc.
Code snippets, see below:
<body>
<section class="main">
<div class="circles">
<img class="cir1" src="images/bg-pattern-top.svg" alt="">
<img class="cir2" src="images/bg-pattern-bottom.svg" alt="">
</div>
</section>
</body>.circles .cir1,
.circles .cir2{
position: absolute;
width: 800px;
animation: 2s circles forwards;
opacity: 0;
}
.circles .cir1{
top: -300px;
left: -175px;
transform: translate(-100px, -50px);
}
.circles .cir2{
bottom: -300px;
right: -175px;
transform: translate(100px, 50px);
}
@keyframes circles {
0%{
opacity: 0;
}
100%{
opacity: 1;
transform: translate(0);
}
}I want to continue focusing on my path to a full stack web developer, i already completed HTML/CSS and JavaScript functionalities and now i'm focusing on remaining onces(React.js, Node.js, Dapps, APIs and Database).
- freecodecamp - This helped me in using css properties like flex, animation etc. I really liked this platform and will use it going forward.
- Website - Harsh Raghuwanshi
- Frontend Mentor - @harsha94
- Twitter - @HarshRa19107484
I am very thankful of Coding Sections for helping me in this project. and also thankful of Dr. Angela Yu for intoducing me about the Frontend Mentor.