Skip to content
OverviewSolutions
10
Comments
11
Zeynal Mardanli
@Lshiroc

All comments

  • Mick•300
    @Mick-2097Submitted over 2 years ago

    Is it just me or is the style-guide.md missing a colour on this one, or is it more set out to get us to match the colour ourselves?

    Price noGrid

    2
    Zeynal Mardanli•180
    @LshirocPosted over 2 years ago

    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.

    1
  • Zeynal Mardanli•180
    @LshirocPosted over 2 years ago

    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
    1
  • Zeynal Mardanli•180
    @LshirocPosted over 2 years ago

    I like it some much great job!

    0
  • Zeynal Mardanli•180
    @LshirocPosted almost 3 years ago

    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
    0
  • Sushank49•60
    @Sushank49Submitted almost 3 years ago

    Overlay on the image is not polished, would love feedback on how to do it in a better and more efficient way. My code on that overlay is dirty.

    CSS Flexbox, insets, positioning

    3
    Zeynal Mardanli•180
    @LshirocPosted almost 3 years ago

    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

    0
  • Zeynal Mardanli•180
    @LshirocPosted almost 3 years ago

    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 :)

    1
  • Zeynal Mardanli•180
    @LshirocPosted almost 3 years ago

    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

    1
  • Samsoor•120
    @Samsoor-nanSubmitted almost 3 years ago

    Dear All,

    I tried my best to complete this solution, however the image at the top seems to get reduced from right when screen size reduced. while I have set the image width to 100%. kindly guide.

    Thanks,

    HTML,CSS

    2
    Zeynal Mardanli•180
    @LshirocPosted almost 3 years ago

    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

    0
  • Zeynal Mardanli•180
    @LshirocPosted almost 3 years ago

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

    0
  • Zeynal Mardanli•180
    @LshirocPosted almost 3 years ago

    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.

    0
  • Aviraj Walunj•80
    @avirajwalunjSubmitted almost 3 years ago

    This is my first project and spent about a day figuring this out. my question is what problems do you see in my code and on what things should i focus? i am lacking at understanding position tab and i feel like i just used same thing everywhere? feel free to give any opinion. thank you in advance.

    NFT preview card using css and html

    4
    Zeynal Mardanli•180
    @LshirocPosted almost 3 years ago

    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

    1