Skip to content
OverviewSolutions
5
Comments
10
Freedteck
@Freedteck

All comments

  • LucasDeveloper0•10
    @LucasDeveloper0
    What are you most proud of, and what would you do differently next time?

    The responsive organization with css was the most difficult part of the project, but is a weasome tool to inclusive site for diferents dispositives

    Responsive inicial page

    1
    Freedteck•130
    @Freedteck

    Hello, well-done with your development journey. It seems you submitted a screenshot of the links instead. Because that's what I can see

  • Freedteck•130
    @Freedteck

    Hi Alper. Great work here and well-done. I'd love to know more about the book you recommend. Did you have any link for it? Kindly share

  • Freedteck•130
    @Freedteck

    Hi, this is really cool. As for the background SVG, the step is pretty straight forward.

    1. In the css body selector, apply the background-image property with url as it's value i.e background-image: url(' link to the svg '); Note that the link to the svg is a relative one (./images/pattern-background-desktop.svg);
    2. U should use the background-repeat: repeatx; if you want.
    Marked as helpful
  • Freedteck•130
    @Freedteck

    Hello, I can't find fault in ur html code, where you probably need changes is in your css code. Below are the suggestions I have:

    1. Since u used the flexbox property on ur body tag, use the flex-direction: column;. This will make ur card at the center of the page.
    2. For the font weight, it's best to apply corresponding weight to individual element such as h1 {font-weight: 700;} and p {font-weight: 400;}
    3. The flexbox has a gap property which you can apply to the card-contents to give space btw the components inside. Such as gap: 20px;
    Marked as helpful
  • Freedteck•130
    @Freedteck

    Hi, well-done with the exercise. It's very clean and clear. Concerning the question, you can use max-width: 100% instead of width property on the img tag. This will make the image responsive and fit in the div as you want.

    Again, well-done writing clean codes

    Marked as helpful
  • Freedteck•130
    @Freedteck

    Hi, well-done here. Your code is very clear and clean. From what I observed, you work a lot with margin which can create more space. Try any or all following if it'll help:

    1. Adjust the size of the margin you gave the cards,
    2. Since u used flexbox, work with the gap properties instead of using margin and apply side padding.
    3. Another thing u can try is to apply the flex layout to the body itself and try to set its min height to 100vh, justify content center, align items center.

    While some of these might not work for you, it's still good to try them out

  • Freedteck•130
    @Freedteck

    Hey! Kudos on making the design responsive without libraries. Concerning your questions, since you're using flexbox layout, specifying the height for each card class can be strategic. Instead, use the gap: value; property to specify space between elements in the layout and use padding top and bottom to make the container long.

    As for the max-width, it's useful when dealing with responsiveness. My suggestion to your code is to wrap all the card class in a div element, then in your css, give the div element a max-width value. Play around the value till you are convenient.

  • Freedteck•130
    @Freedteck

    I'm not that familiar with tailwind but I think what u need to do in ur code is to add something like overflow: hidden; with some border-radius to the card class so the rounded corners can be effective

  • Freedteck•130
    @Freedteck

    Hey! I checked your code and everything is fine, Just a little change.

    Ur qr-image should have the max-width of 100% for it to fit desired container instead of fixed width.

    Also, I suggest you use padding in the container instead of specified height. All should be good from there

    Marked as helpful
  • Freedteck•130
    @Freedteck

    Wow. Just like exact replica