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.
- Build out the project to the designs provided
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
This was a bit easy. The major take was using css rules to place more than one background images.
To see how you can add code snippets, see below:
<body>
<div> </div>
</body>.body {
background-image: url(bg-pattern-top.svg), url(bg-pattern-bottom.svg), linear-gradient(135deg,hsl(185, 75%, 39%) 50%, hsl(185, 75%, 39%));
background-size: 50% 70%, 50% 70%, 100% 100%;
background-position: top left , bottom right, left;
background-repeat: no-repeat, no-repeat;
}In this project, I could not place the background-images as seen from the design. So, this is what I have to work on. Also, I will still consider working on the responsiveness to screen sizes.
A lot of resources was helpful not just in this project but from the beginning of my learning of web development.
-
And lots more. Surely, I will always recommend them days in and days out
- Github - (https://github.com/SAAJEVES)
- Frontend Mentor - (https://www.frontendmentor.io/profile/SAAJEVES)
- Twitter - (https://www.twitter.com/saajeves)
- LinkedIn - (https://www.linkedin.com/in/samuel-ajagun-020283150)
I would love to acknowledge a very good friend of mine (https://github.com/wisdomosara) for his immense contribution on helping me in this project. You are well appreciated.