Skip to content
OverviewSolutions
7
Comments
21
Zeyad Mohamed
@ZeyadMohamed1805

All comments

  • Abelardo Gomez Rodriguez•30
    @abelgmzSubmitted almost 2 years ago

    The project was good to practice my flexbox skills. The overlay effect over the image was the obstacle. I made a research and I found a solution, but I would like to know if there is a better way to do this effect.

    Any feedback is welcome, thanks :)

    Nft preview card using flexbox and scss

    2
    Zeyad Mohamed•320
    @ZeyadMohamed1805Posted almost 2 years ago

    Awesome job as always! 🔝🔝

    -It looks like the header should be a little smaller like h2 maybe, but other than that, everything looks fabulous!

    Keep up the great work! Hope you find this helpful 😁

    0
  • Abelardo Gomez Rodriguez•30
    @abelgmzSubmitted almost 2 years ago
    • I would like to know what would be the best option to work with downloaded fonts and use them...
      • Option 1 - only one folder with all fonts
        • fonts-folder
          • font1.ttf
          • font2.ttf
      • Option 2 - folder with subfolders for each font
        • fonts-folder
          • font1-folder
            • font1.ttf
          • font2-folder
            • font2.ttf

    Recomendations are welcome, thanks :)

    Responsive product preview card using flexbox and sass

    4
    Zeyad Mohamed•320
    @ZeyadMohamed1805Posted almost 2 years ago

    Great work as always! 🔝

    -About your font question, I agree with srayala42! Downloading the fonts would unnecessarily add more size to your folder! If you are new to this approach, this link shall help you with it: https://www.youtube.com/watch?v=qgmLDPLApBY

    Can't wait to see more projects from you! Keep it up 😁

    1
  • Zeyad Mohamed•320
    @ZeyadMohamed1805Posted almost 2 years ago

    Thats an amazing first project! 😎

    • Regarding your question, I would suggest slightly reducing the font-size of the h1 🧐

    • Setting the border-radius of the image and the parent element with the same value ( for example 20px) give the website a more consistent look! 🎊

    • Also don't forget to add the colors to your text 🎨

    Keep up the great work! I hope you find this helpful! 🔝🔝

    Marked as helpful
    1
  • Zeyad Mohamed•320
    @ZeyadMohamed1805Posted almost 2 years ago

    Hello there! 🤗 Awesome work on the project 😎

    • On this project, media queries are not mandatory! Simply setting the width of the QR Code to like 300px should make it look great on all devices! 🎊

    • I also would like to point out that the styles are not shown when i preview your website! I am not sure what is the cause of that problem, but probably something with the file placement in the github folder or other issue happened while uploading! 🤔

    Keep up the great work! 🔝🔝

    Marked as helpful
    0
  • Zeyad Mohamed•320
    @ZeyadMohamed1805Posted almost 2 years ago

    Awesome work there bro! 😎

    • In addition to what Hatem mentioned, consider decreasing the width & height of the main; also try to slightly decrease your font-sizes. 🎇 Keep up the great work! 🔝🔝
    2
  • Zeyad Mohamed•320
    @ZeyadMohamed1805Posted almost 2 years ago

    Hello there! 🤗 Your project looks awesome! 🎇

    • Regarding the font size and colors, make sure you check out the style-guide file within the project's downloaded zip-file! It should contain all the information you need to know about the colors & fonts. It must be one of them 🎨
    • Also for your text element, you set its (margin: 80px auto 80px auto;) If you replace that with just (margin: 80px auto), it will generate the same result! 🎊

    Keep up the great work!🔝 I hope you find this to be helpful 😁

    Marked as helpful
    0
  • Zeyad Mohamed•320
    @ZeyadMohamed1805Posted almost 2 years ago

    Hello there! 🤗 Awesome job on your project! 🔝🔝

    • Responding to your question, to center a div vertically you simply set its parent's display to flex, then you set its align-items to center; if you want to center it horizontally, set the justify-content to center. -You already used this method on your project, which is awesome!; however, there is a shorter way to center a div horizontally and vertically! Simply set its parent's display to grid, then add the (place-items: center) property to the parent! This leads to the same result with one less line of code!

    Keep up the great work! Hope you find this helpful! 😎

    Marked as helpful
    2
  • Zeyad Mohamed•320
    @ZeyadMohamed1805Posted almost 2 years ago

    Awesome work! 🔝🔝 Your hard work it clearly displayed on this project! 🤩 I have some tips for your website:

    1. Setting the footer's text-align to center; 😉
    2. When you set the max-width of the main-box to 43%, this compressed the content inside it because the width will decrease the more the screen size decreases! If you set the max-width to like 600px (300px for the media query), now the main-box will hold its ground in smaller screen sizes! 🤗
    3. When you set the height of the main-box to 25rem, the main-box cannot give more space for its content when the screen size decreases, resulting in content overflowing! If you replace the height with min-height (In desktop & in media query), it will adaptively increase the height of the main-box under pressure! 😎

    Keep up the awesome work! I hope you find this helpful 😁

    Marked as helpful
    1
  • Chayan Surana•160
    @chayansurana3Submitted almost 2 years ago

    This was my first front-end project. I have tried to build the project as per the problem statement. Always looking forward to receiving feedback.

    HTML-5, CSS

    2
    Zeyad Mohamed•320
    @ZeyadMohamed1805Posted almost 2 years ago

    For a first project, this is fabulous work! 🔝🔝 I do have some suggestions for you: 🤔

    1. Try setting the border-radius of the QR Box & the image as the same value (for example 20px) would be more consistently looking . Using pixels for border-radius is common practice! 😎
    2. Setting the image's weight and height with different values will make it look a bit uneven! try just setting the width to 100% and not setting the height to a specific value. If you follow that by removing the margins of the image, it should take the size of the QR Box! 👌
    3. To set some space between the image and the QR Box, simple add a padding (for example 1rem) to the QR Box. 😎

    I hope you would find these improvements helpful! 🎇 Keep up the awesome work! 🔝🔝

    Marked as helpful
    1
  • Albina S•130
    @albina0104Submitted almost 2 years ago

    I wonder, is it possible to position the main div in the exact center of the viewport, while keeping the row of text at the bottom of the page?

    I don't want to center it using position: absolute, as there are side effects on small screens in landscape mode - elements can overlap, and the top of the main div is hidden and it's not possible to scroll up to see the top. (The second issue happens also when centering with flexbox properties justify-content: center and align-items: center, that's why I didn't use them either.)

    Solution using CSS Flexbox centered with margin: auto

    1
    Zeyad Mohamed•320
    @ZeyadMohamed1805Posted almost 2 years ago

    Amazing work right there! 🎇 I see what you want! 🤔 It might be unnecessarily long approach;however, there is a way to implement this:

    1. Place your attribution inside of the QR Code card
    2. Set your QR Code Card's position: relative;
    3. Set your attribution's position: absolute;
    4. Position it to bottom with a negative value like -50px or other

    Keep up the great work there! 🔝 I hope you find this helpful! 😁

    0
  • Zeyad Mohamed•320
    @ZeyadMohamed1805Posted almost 2 years ago

    Looks perfect to me!👌 Awesome work there mate 👊 Keep it up! 🔝🔝

    0
  • Zeyad Mohamed•320
    @ZeyadMohamed1805Posted almost 2 years ago

    Awesome work there mate! I do have one tip for you which was very hard to recognize! In some screen sizes of the desktop version, the home section is not perfectly aligned with your nav bar. Other than that, I think your solution is one of the best I've seen so far! I also love the way your hamburger menu smoothly slides up and down XD

    0