Skip to content
OverviewSolutions
10
Comments
11
Zeynal Mardanli
@Lshiroc

All comments

  • Zeynal Mardanli•180
    @Lshiroc

    Hi,, I'm not sure but sometimes yes, I also noticed that some colours aren't given in the style-guide.md. I suggest you to use a image program(like Lunacy, Adobe XD or another one). With a program you can detect the color from design images.

  • Zeynal Mardanli•180
    @Lshiroc

    Hi👋, I just took a quick look to your project. I suggest you:

    • put .img to the right side
    • to erase the extra space under the image you should give display: block; to you img tag
    • for better alignment you should give:
    .hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    and erase the min-height: 100vh; from body tag. You can give margin-top and margin-bottom to your hero for mobile design (about 15px-30px). In addition, you should put your .attribution div into main or footer tag.

    Keep coding 🙂☕!

    Marked as helpful
  • Zeynal Mardanli•180
    @Lshiroc

    I like it some much great job!

  • Zeynal Mardanli•180
    @Lshiroc

    Hi👋, I think you should not change the font-size because they already gave us the appropriate text font-size so we should use that. If you want to change the font-size while screen size changes, then I think you should take a look to fluid typography https://css-tricks.com/simplified-fluid-typography/ https://css-tricks.com/snippets/css/fluid-typography/

    Marked as helpful
  • Zeynal Mardanli•180
    @Lshiroc

    HI👋, I took a look to your project. Your sizing looks good.

    • I think you should use header(maybe h2 or h3) for Equilibrium#3429 text so it will be more big. And also headers mean the main content of the web page(these are important for google search results).
    • Border of avatar image should be white(accordingly to the given images of challange) and 1px.
    • And you should give a slight shadow to the card
    • And you should give margin-bottom to your Equilibrium#3429 text. Because now when you move your pointer to bottom of that text then hover starts. But I reccomend you to use gap property to give spaces between components(it depends on the project and design).

    Keep coding :D

  • Zeynal Mardanli•180
    @Lshiroc

    Hi, I think you should give more border-radius and shadow to the component. And also plan section needs more padding. And also component also should have more padding-bottom( or maybe you can give margin-bottom to button section). And background-image doesn't work for a reason. I think you should try to remove background-clip property(I'm not sure. I didn't know what is background-clip till now.) I wrote in my code like this:

    background: url('images/pattern-background-desktop.svg');
background-repeat: no-repeat;

    I hope it will help Keep coding :)

  • Zeynal Mardanli•180
    @Lshiroc

    Hi👋, I took a look to your project. You sizing is perfect👏. I recommend you to give transition to other texts(even though they don't want in the challange). However hover effect on image is very good👍. And also you should use the font that given in the challange. You could use border: 1px solid white; to give border to your avatar image. 0.041 ETH is must be bold. And you should fix your accessibility issues. Keep coding :D

  • Zeynal Mardanli•180
    @Lshiroc

    Hi, I took a look your code. I think you should notice the font-weight. Header and button texts are bold on the design. And in the music plan section I think it would be better to use CSS Grid or Flexbox. If you put music icon , music plan and music rate to the same div and the change text to other div, you can use flexbox. justify-content: space-around; You don't need to give 750px width. However I couldn't find why page is go down.

    I wish it'll help :D Keep coding

  • Zeynal Mardanli•180
    @Lshiroc

    And also how can I understand the sizes from the images that given us for challange?

  • Zeynal Mardanli•180
    @Lshiroc

    How did you set up your github page website? When I try to open a github page for a repository it open gh-page tree. I can't reach main.

  • Zeynal Mardanli•180
    @Lshiroc

    Hi, I took a look your code and couldn't find CSS Flexbox and Grid. If you want to create responsive layouts (in this challange they don't require any responsive design if I'm not mistaken). And also it becomes so easy to create the ethereum and time part in the challange with flexbox. For example for this you should define the direction( row or column) and the you can separate them with just one line code. So, I advise you to learn flexbox and grid. But recent result is also good although you don't know flexbox and grid :). Have a good day