Skip to content
OverviewSolutions
4
Comments
6
Ahbideen Yusuf
@bravono

All comments

  • Ahbideen Yusuf•160
    @bravonoPosted 12 months ago

    Hi Enzmrg

    Great job!

    Something that stood out when I looked at your solution was the position of the phone mockup. I can see that is behind the "Why Choose Easybank" component.

    The property you need to fix this problem is the "position: absolute" property. Note that the parent container has to be set to "position: relative". With these changes, you should be able to position your mockup however you like.

    Also, note that it can be challenging to get it right even with the property I just mentioned.

    I almost forgot that you also need to set the "z-index: 999". The 999 is arbitrary but you want to set it to a high number to make sure that the mock moves ontop.

    I hope this helps!

    Marked as helpful
    0
  • Ahbideen Yusuf•160
    @bravonoPosted 12 months ago

    Hello Adenekan!

    You have done a great job but one thing I would like you to change is the logo in the footer. Currently, it is not visible and that is because it has the same color as the background. If you look at the reference images, you can see that the color of the logo in the footer was changed to white.

    To do this, you need to change the set "fill: white" on the footer logo.

    Please note that you will not be able to apply the fill property if you have used <img> to import the logo.

    The fill property will only work on SVG files that are imported using the SVG tags.

    I hope this helps!

    Marked as helpful
    0
  • Ahbideen Yusuf•160
    @bravonoPosted 12 months ago

    Hello Marta, I trust you are doing well.

    Weldone with your solution, you did a great job, however, there are a few things I think you can do to make your design look even closer to the original.

    First: The navigation bar is not center-aligned, you can do this by setting the text-align property of the parent container e.g text-align: center;

    Second: The hamburger button is still visible on a wider screen. What I did to solve this problem was to set "display: none" on a wider screen and "display: block" on mobile and it worked.

    Third: The hover effects of the social media icons and the footer list are absent. If you look at the references provided you can see that both have a hover effect on them.

    Fourth: The footer list is closer to the social media icon than the copyright. You can achieve this if you put the list in a container of its own and set the "text-align: start". The text will move closer to the left edge of its container, thus moving closer to the social media icons.

    Lastly: I think if you add a 3rd screen to your code it will make the design a lot better. I know that the task was only to design for 2 screens but it isn't a bad idea if you add a 3rd screen especially if you want to use this in your portfolio. Currently, your design breaks on an iPad screen (768px).

    I hope this helps!

    0
  • Ahbideen Yusuf•160
    @bravonoPosted over 1 year ago

    Hello David, nice work you have done here. There is only one thing I think you can change in your design. The height of the card has been set to 95vh. I think it is best for you not to set the height of the card at all. This means that the card will grow according to the number of text it contains.

    Also try to use semantic elements like article, section, main, etc. Instead of the generic div element. I hope this helps.

    You probably also forget to add a shadow. If you look at the example design very closely you will see that the card component has a really soft shadow. The property to set a shadow in CSS is box-shadow.

    I also suggest that you make a separate file for your CSS instead of putting it in the same HTML file. This make your project well organized and easy to manage.

    Marked as helpful
    1
  • Ahbideen Yusuf•160
    @bravonoPosted over 1 year ago

    Hello, you have done a great job here. But there are a few things you can change.

    1. The component to the right doesn't have its own visible box, instead, it's inside a box that holds both the left and the right component in it. If you look at the example, there is no border-radius on the left side of the component to the right. This means that a parent box holds both the left and right components, this box has a border-radius. The left component has a border radius while the right component doesn't.

    2. Your shadow is not quite right. Apparently, you cannot apply a box-shadow to the right component since it isn't in a visible box of its own. This means that the box-shadow property has to be applied to the parent box as explained above. The first value of the box-shadow value is the horizontal position, the next value is the vertical position the 3rd value is the softness of the shadow and this is the value I want you to experiment with. Also, remember to use the alpha channel to control the transparency of the shadow. To apply transparency you need to use RGBA OR HSLA for the colors.

    I hope that I'm clear and that my feedback helps you improve your code.

    Marked as helpful
    0
  • Ahbideen Yusuf•160
    @bravonoPosted over 1 year ago

    Great job here! I'm not an expert yet but something I noticed immediately after I saw your result is the shadow. I think the edges of the shadow are too sharp. You can control this by setting the 3rd value of the box-shadow property to something higher.

    Also, use the Alpha channel to control the transparency of the shadow. You will have to use RGBA or HSLA to access the alpha option.

    Marked as helpful
    0