Skip to content
OverviewSolutions
4
Comments
4
Noela Ost
@NoelaOst

All comments

  • Noela Ost•150
    @NoelaOstPosted about 2 years ago

    Hi! Nice work there! Good job. I see you struggled with a logo svg there and I hope I can help. If your svg file is not working you can try this:

    1. Open svg file with code editor and copy whole <svg> tag including path and other attributes.
    2. Since this is logo you can put it in anchor tag <a> <svg> ... </svg> </a>
    3. To change color of the svg change attribute fill="..." to desired color, or simply remove it and use CSS to style it.

    Hope you find this comment helpul! :)

    Happy coding and good luck :)

    Marked as helpful
    0
  • Noela Ost•150
    @NoelaOstPosted about 2 years ago

    Hi Eman, love how your solution turned out.

    I saw that you are missing background styling. Here is some advice how you can add it.

    On your body tag add bg-tablet-pattern.svg as background-image two times, separating it with comma. After that change background position for both svgs also by separating it with comma. For example:

    background-position: 50px -350px, 300px 600px;

    Also, add background repeat and background size an voila! Hope you find it helpful.

    Happy coding:)

    Marked as helpful
    0
  • Noela Ost•150
    @NoelaOstPosted about 2 years ago

    Hi, love how your solution turned out. Great job!

    I have some advice for you that could help fix some small things on your styling.

    On your background you an easily add another bg-tablet.svg simply by adding another background-image and background position and separating it with comma. For example: background-position: 50px -350px, 300px 600px;

    Another thing is light red background that appears on 3 sub headings on the smaller screens sizes. Notice how on the right side they go all the way to the end of the screen. There is actually very easy solution for that. You simply add box shadow in the same color as background, e.g. : box-shadow: 5em 0 0 var(--pale-red);

    Good thing is, box shadow cannot overflow.

    Happy coding:)

    Marked as helpful
    0
  • Noela Ost•150
    @NoelaOstPosted about 2 years ago

    Hi Haroon! Love your project result. Great job!

    I have some advice for you that could help fix some small things on your styling.

    • On your background you an easily add another bg-tablet.svg simply by adding another background position and separating it with comma. Like so:

    background-position: 50px -350px, 300px 600px;

    • Another thing is light red background that appears on 3 sub headings on the smaller screens sizes. Notice how on the right side they go all the way to the end of the screen. There is actually very easy solution for that. You simply add box shadow in the same color as background, e.g. :

    box-shadow: 5em 0 0 var(--pale-red);

    It will fill up desired space without spilling out of its container.

    Also, I really like how you did your readme file. How did you make those screenshots of different screen sizes? I'd like to do the same for my project. Thanks in advance.

    Happy coding:)

    Marked as helpful
    0