Skip to content
OverviewSolutions
52
Comments
27
Fat
@Fahatmah

All comments

  • Fat•910
    @Fahatmah

    Hello @elaineleung, you inspire me a lot hehe 😁 but I want to ask how do you make like a tree repository in github and then add new repo where you can make them their own github page just like what you did in your main repo frondentmentor

  • Fat•910
    @Fahatmah

    I like the animation on the text ☺ like one of the best way to make users see that there is something changed after they clicked the button.

  • Fat•910
    @Fahatmah

    Hello @JannieLhynn 👋

    I think your solution is not being rendered because in your Github repo, the index.html can not be accessed because it is inside of a folder. Try to separate it from that folder and let me know if it works. Hope it helps 😁✌🏼

  • Fat•910
    @Fahatmah

    Hello Kegan! 👋

    To answer you first question, you can try flexbox when the screen is in the desktop size, you see in the designs the first three elements which are the img, h2, and p, you can set the alignment to flex-start or you can just set the a to flex-end

    This is what I mean:

    .card {
   display: flex;
   flex-direction: column;
}

.card a {
   align-self: flex-end;
}

    If the .card a won't work, just add justify-self: flex-end;

    Hope that works. 😁

  • Fat•910
    @Fahatmah

    Hello Nicholas Albuquerque! 😊

    I think you just need your .card-banner give a position: relative; and then you can try this:

    .card-banner::before {
   content: url(images/icon-view.svg);
    background-color: var(--Cyan);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    opacity: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    cursor: pointer;
}

    This was what I did to mine. Hope it helps you! 😊

  • Fat•910
    @Fahatmah

    Hello Lucas! Great work! The second and last also happened to me but I just let that way 😄 About the hero image, we almost have the same approach as I made an image wrapper then set a max-width on it then the image will be 100% of its width.

    For the use of tags, I think it would be better if you use div tag rather than another ul inside of li which has a parent of ul. When I did that ul, I ran into issues such as hovering links. This is all 😅

    Marked as helpful
  • Fat•910
    @Fahatmah

    Congrats on completing this challenge Mehemmed!

    The obvious suggestion here is adding margins between the containers 😄 and then improving your accessibility and html validations. For accessibility you can put an aria-label inside of the starting tag of the anchor tag. For example, <a href="#" aria-label="Some text here related to what's inside of this tag"></a>. Lastly for the validations in HTML, add some headings on where you need to add. And I will give it a 7 over 10

    Hope this helps. Keep Coding!

    Marked as helpful
  • Fat•910
    @Fahatmah

    Hi there Frank! Nice work done there! Base on the comparison, you can improve your layout by adding margins between each sections to make spaces and setting some max-width in each container and the logo is already provided which means you don't need to write the logo, just link the image of it and style it.

    Hope this helps. Keep Coding!

  • Fat•910
    @Fahatmah

    Awesome Work!

    I am currently working on this challenge since these past few days and right now I am still stuck 😅. I kind of did the same markup structure but I thought it was inconsistent or like it would not work in that way so I entirely changed it 😣. Then I saw your work and I realized I should have continue my markup because I was also styling that and the background images and the buttons was working fine but now is a big mess 😄.

  • Fat•910
    @Fahatmah

    Hey there! Nice work!

    I see in your code that your body is having height: 100%;, instead of that min-height: 100vh; and use flexbox or grid layout. This layout are used when you want to center your card. For example you can do

    display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;

    And then you can give size or padding in your card. I don't think vh unit are suit to size your card because it is basing on the screen size, that is why it gets bigger and not responsive or fluid. I use % and then giving it a max-width or max-height. Or I use rem unit.

    Hope this helps! Keep Coding!

    Marked as helpful
  • Fat•910
    @Fahatmah

    Good Job Done there!

    But the body lacks height in order to make the content centered in all screen sizes. As you can see the desktop view is a little off from the center. You can add min-height: 100vh; in the body tag.

    Keep Coding!

  • Fat•910
    @Fahatmah

    Hey, it is okay! And that is really normal. And do not overthink of it. Just think of it as a progress. And if you are persistent and consistent to learn, you will see improvements.

    I see in your code that your card is having the width of 1440 pixels and that would fill up the entire screen of a desktop screen. If you base on the design, you see it should have a width of around 20rem and 30rem which 1rem is equal to 16px.

    You made out the design and that is good. What really challenges us here is the sizes or the width of the designs or making the perfect pixels and that where we learn and improve.

    Keep it up!

    Marked as helpful
  • Fat•910
    @Fahatmah

    KEEP UP THE GOOD WORK THERE!

    But hey I saw you got some accessibility issues and it is said in your report is about your markup. It is recommended to practice of using Semantic HTML when you are writing your markup or your HTML file.

    Nice work there. Keep it up!

  • Fat•910
    @Fahatmah

    GREAT JOB DONE THERE! KEEP IT UP

  • Fat•910
    @Fahatmah

    Good Job there!

    Almost got it there. Keep it up But wait, you got some accessibility issues and what is says is about your markup or your html file. It is recommended to practice Semantic HTML when you are writing your markup. Read that and you will get nothing issues related to it but another issue haha seriously if you encounter another issue, just check and read you report and fix it next time you will go again.

  • Fat•910
    @Fahatmah

    Salam!

    Nice Work there! You almost got the design! You just have to make the attribution position: absolute; and there you go, your card will be centered.

    And you got some accessibility issues. You can read this article about semantic HTML which is a good practice in writing markup.

    Keep up the work!

  • Fat•910
    @Fahatmah

    Hey there. It is by progress and focusing to improve and having persistence to learn more makes you do it easier eventually. By the way, I see that your output is not in the center, you can use either grid layout or flexbox and the background-color of the second column should be darker. And nice work done there!

  • Fat•910
    @Fahatmah

    Hello there!

    Atleast you completed the design. Here are some of my tips to layout or do a markup in your code:

    • Visualize the design and then make section and dividers on it. For example, the whole body is the screen and the section is the card which will contain many div element or container for the texts or images. I usually make the main tag as the body and then section tag as the container of the design and inside of the section are div elements. Just like this:

    <main><section><div></div><div></div><div></div></section ></main>

    • And that is where you are going to base your css code. Inside of the first tag for example, <section class="card_container"><section>

    Lastly, your card is not in the center of the screen. You can use these following but the body should have a min-height: 100vh;

    1. display: flex; align-items: center; justify-content: center;

    2. display: grid; place-items: center;

    3. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); this last number, you can use it in the card container.

    Hope this helps you!

    Marked as helpful