Skip to content
OverviewSolutions
8
Comments
7
Maria
@itsfedoruk

All comments

  • aayushi simzia•355
    @iucsimSubmitted almost 4 years ago

    Hello everyone! It was awesome challenge in which i learned a lot! Forsome change I have used hover effect on profile picture image.

    And for complicated background image i take reference from @ApplePieGiraffe's solution.

    Feedback are appreciated!

    Profile card challenge using html and css

    2
    Maria•290
    @itsfedorukPosted almost 4 years ago

    Hi Aayushi, great job with the challenge! Indeed, it looks great and responsive, and your code is so well-organised and easy to read.

    One minor suggestion I'd add if you don't mind is having box-shadow for your profile card so that it corresponds with the design mock-up 100%.

    Otherwise, well done! Enjoy your day ☺️

    3
  • Abraham Gutierrez•25
    @abgutierrez507Submitted almost 4 years ago

    Guys, i will definetely appreciate ur' feedbacks. This is my third try time performing code with HTML+CSS. It was impossible to center the two circle into the card. Thanks guys.

    LandingpagewithCSS+HTML

    4
    Maria•290
    @itsfedorukPosted almost 4 years ago

    Hi Abraham, well done on your first challenge ☺️ To add on previous comments about changing the container property of height: 100vh, I'd also suggest moving two circles from HTML images to CSS as background images for body. It'll remove extra overflow, and you'll have more control over styling and positioning of circles as well.

    Hope it helps, and enjoy your day 🙌

    1
  • Maria•290
    @itsfedorukPosted almost 4 years ago

    Hi Camillo, your challenge solution looks great! To your question – both "London" and stats look centered and placed well.

    The structure generally is very clear and neat, and styles are well-organised. Well done 🙌

    0
  • Maria•290
    @itsfedorukPosted almost 4 years ago

    Hi @BowonKim, congrats on your first challenge, well done ☺️

    I'd have one suggestion for you though – to keep the structure neat, it's a good practice to have a div for an element, e.g. a profile card, that would contain all elements inside, e.g. top part, bottom part etc. This way it's easier to center an element altogether, create a drop-shadow, style and so on.

    Hope it helps, and enjoy your day 🙌

    1
  • Maria•290
    @itsfedorukPosted almost 4 years ago

    Hi Hamza, well done on your first challenge! I'd have just two suggestions for you if you don't mind ☺️

    • I'd put two circles as background-image to body since it's not necessarily part of the content but just images for the background, behind the profile card. It also means more control over styling, so you can be more flexible with positioning by using background-position.
    • This one is rather a design point: In a mock-up, inside the stats blocks, there's more space between the numbers and labels (e.g. "Followers") --> you can increase a bit your margin-top there, and the label font size has more space between letters, something you can achieve with letter-spacing.

    Hope it helps, and enjoy your day 🙌

    2
  • Maria•290
    @itsfedorukPosted almost 4 years ago

    Hi Binaya, your result looks good! I have just one suggestion though – I'd put two circles as background-image to body since it's not necessarily part of the content but just images for the background, behind the profile card. Also, it'd give you more control over styling it in CSS, e.g. you can then fix the position with background-position and indicate horizontal and vertical values for each image.

    Hope it helps, and enjoy your day ☺️

    4
  • Maria•290
    @itsfedorukPosted almost 4 years ago

    Hi Candelaria, you've done a great job with the challenge outcome ☺️

    I like that the background circles are not "jumpy" and have the right positioning in all views – this seems one of the most challenging aspects of the task.

    While going through your code, I noticed one thing: the hr element has an invalid property value --> border-color: hsl(0, 0%, 59%) 1px. Since border-color property accepts only colour values, the line doesn't really change its colour, as a result. You can either remove 1px, or change the property name to border and list values for colour, size, and style.

    Hope it helps! Enjoy your day and happy coding 🙌

    0