Skip to content
OverviewSolutions
19
Comments
5
Francel
@Haemoffy

All comments

  • Francel•370
    @HaemoffyPosted almost 3 years ago

    Thanks, I didnt know about the header level and the use of those specific tags. Thank you for taking time to give me this very helpful feedback, I appreciate it. About the layout, I saw just now but at least in my browser which is Brave, it responded to the resize naturally same in FF but in Google thats where I found the horizontal scroll

    0
  • JFREUN•20
    @JFREUNSubmitted over 3 years ago

    Hi there! :) I would love some feedback!

    I only just started learning CSS (loving it) and this project was quite the challenge for me. I think there are a couple of things I couldn't figure out.

    How do I make the image look more like the solution? I tried applying filters but I don't think I achieved the exact look.

    How do I space out the three stats evenly while keeping them in one line? Whenever I tried spacing them out more one always moved below.

    Also I don't really know how to create this site for mobile so sorry if it looks weird in different dimensions.

    Let me know anything I could improve!

    First HTML/CSS Challenge how do I get the right look for the image??

    2
    Francel•370
    @HaemoffyPosted over 3 years ago

    About your first question: there's a property called "background-blend-mode", this property works if you have "background-color" and "background-image" present or "background-image" or "background-color" with 2 or more values that you can blend in, Info regarding "background-blend-mode" https://www.w3schools.com/cssref/pr_background-blend-mode.asp or you could use a tutorial

    Since you implement your image at the <img> tag itself, you wont achieve what was in the design,(i haven't tried this challenge myself so i could be wrong but from what im seeing, background-blend-mode might be the solution)

    For your 2nd question: you're getting that kind of issue because of the width you applied to them, the width of the container or parent affects the children's width same goes to height. In your code, you gave your parent (the left-half class)or container a width of 50%, now that would also be your children(card-text class) default width, since you applied 70% width, so you're only accepting 70% of the total container's width thus the contents gotten compressed and some of the contents moved below that you did not want to

    Removing the width will solve the issue and giving the padding: 50px to all direction will position them flawlessly without breaking the flow. Code version: .card-text { padding: 50px; text-align: left; }

    Last question: You will eventually learn as it is required Watch this: https://www.youtube.com/watch?v=bn-DQCifeQQ This will teach you how to setup for creating mobile to desktop, it might be hard to wrap around in your head first but just take time and take it slow to understand and do some practices.

    Recommend to learn: css reset box-sizing: border-box; instead of implementing <div> and set display: inline-block for most, use <span> instead, <span> is like div but difference is its default display is inline-block while <div> is block

    for layout: flexbox (first) grid so you wont be using much float since it has drawbacks

    bonus: ill give you a roadmap that I have follwed in my entire journey https://www.mediafire.com/file/0q0kg1watotme5j/2021+Frontend+Roadmap+-+Dark.pdf/file from web dev simplified but dont hesitate to watch other web dev youtubers like traversy, kevin powell

    remember to take it slow, understand firmly, apply what you learn and put into practice, and take breaks damn i wrote too much

    0
  • Francel•370
    @HaemoffyPosted over 3 years ago

    At desktop mode, tweak your font-size a little bit, small font-sizes might affect the users viewing experience. Apparently, i assume you forgot to apply color: white at your button's text content(the "Sign up") as it appears black rather white

    0
  • Francel•370
    @HaemoffyPosted over 3 years ago

    try adding overflow-x: hidden at your html avoid side scrolling

    0
  • Melvin•270
    @MelvinMelonGitSubmitted over 3 years ago

    Hi there!

    Thanks for viewing my solution and commenting :)

    1. I have done this challenge using background images in the body. I'm wondering how can I achieve this with CSS Pseudo elements? I tried using ::before and ::after to add the big circles before resorting to my current method because I could not prevent the overflow even though I set the body to overflow hidden.

    Please let me know what can be done?

    1. Please also advise how I may improve my code.

    Thanks!

    Profile Card Component with HTML and CSS

    1
    Francel•370
    @HaemoffyPosted over 3 years ago

    You receive some scrolling when you try to implements those circles at pseudos?

    0