Skip to content
OverviewSolutions
9
Comments
3
Dennis Herrera
@Klonnister

All comments

  • swiTTcHH•30
    @swiTTcHHSubmitted over 1 year ago

    if i could get some guides to using semantic html and github, that'll be much appreciated

    News homepage

    2
    Dennis Herrera•150
    @KlonnisterPosted over 1 year ago

    Hello there! I hope you're doing fine. I really like your solution, well done!

    Regarding to your requests, here are some links I can share with you that helped me out a lot to understand Semantic HTML and github:

    Regarding to github, I was going to recommend the W3Schools page as well. That one is cool. I'll leave this Git tutorial just in case you have any doubts about using git, this guy explains it very well. Programming with Mosh Git tutorial

    That's all from me, I hope this is helpful and happy coding!!

    0
  • MeghaS4831•30
    @MeghaS4831Submitted over 1 year ago

    Hi, Could anyone help me understand how we can create this website for a mobile version? Do we used media queries? In the readme file it mentions that the designs were created to the following widths:

    • Mobile: 375px
    • Desktop: 1440px I have just coded for a desktop version.

    QR CODE

    4
    Dennis Herrera•150
    @KlonnisterPosted over 1 year ago

    Hello! I hope you're doing fine. Your solution looks good, though regarding to your question, here are some recommendations that I think might help :).

    Regarding to responsiveness, for this exercise you don't need to use any media queries as the component is small and it doesn't change for the desktop version. But here's a tip to make your website adapt to any screen sizes:

    First I'd recommend setting all elements' box sizing to border box:

    * {
box-sizing: border-box
}

    A brief explanation of what this does is that any element with border box set will respect its size regardless of the padding or margin you add and a scroll bar won't appear. You can read more about it in W3Schools CSS Box Sizing

    Then, I'd advise to delete the div with class "outer", and style your body tag instead to make it occupy the whole screen and center your component:

    body {
max-width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: hsl(212, 45%, 89%);
}

    Then <body> will always ocuppy 100% of width and 100% of the viewport height. Then, display flex will do the job of centering your component regardless of the screen size.

    Here are a some links that can help you understand this better:

    Now regarding to accessibility, I think you did great by adding an <h1> as it describes the title of the page and every page needs one. The only thing that I'd say you can improve is to add a main tag. The main tag basically tells the browser or screen readers what is the main content of the page.

    You can change the tag <div> with class "whitediv to <main> and keep all attributes and classes on it.

    <main class="whitediv" style="background-color: hsl(0, 0%, 100%);">

    This is called semantic HTML. Here are some links to read more about accessibility and Semantic HTML

    I know it is a lot, just take your time reading and practicing with them, you'll see it'll be easy peasy. Anyways, I hope I was helpful, happy coding!

    Marked as helpful
    0
  • Bryan Li•3,530
    @Zy8712Submitted over 1 year ago

    I wasn't able to get the hover over the main image to work. Hope someone can teach me how I could integrate this feature into my code. Thanks.

    NFT Preview Card Component

    3
    Dennis Herrera•150
    @KlonnisterPosted over 1 year ago

    Hey there! And very well done, I like your solution aside from the hover over the image problem, it looks really cool.

    I'll do my best to help you out with the hover effect on the image (this is what I did):

    First I created a container for:

    1. The NFT image.
    2. The curtain (that's what I called the cyan hover effect).
    3. The curtain icon (the little eye icon which is shown as well).

    We have three elements in total.

    <div class="image-div">
<img src="./images/image-equilibrium.jpg">
<div class="curtain"></div>
<img src="./images/icon-view.svg" alt="" class="curtain-icon">
</div>
    1. These are the properties I settled for the container (this can apply to your .image-div class):
    .image-div {
width: 100%;
border-radius: 0.60rem;
overflow: hidden; 
position: relative;
}

    (Position relative is settled because we need to add position absolute to the curtain icon).

    1. I applied this css code to the NFT image:
    .image-div img {
max-width: 100%;
height: auto;
display: block;
}
    1. Then, I added the cyan curtain as a div with background-color:
    .curtain {
background-color: var(--Cyan);
width: 100%;
height: 100%;
position: absolute;
opacity: 0%;
transition: opacity 0.25s;
}

    I added opacity: 0% so that when you hover over the image container (image-div), a transition will be done:

    .img-div:hover .curtain {
opacity: 50%;
}

    This will basically create the hover effect, the cyan div will be shown everytime you hover over the container. Read more about CSS Transitions

    1. Now we need to set the properties to the curtain icon which should also be shown on hover:
    .curtain-icon {
position: absolute;
inset: 0;
margin: auto;
opacity: 0%;
transition: opacity 0.25s;
}

    Just in case: inset: 0 is used to set the top, right, left and bottom properties to 0 (position: absolute), and margin: auto will automatically center the icon in the container.

    Finally, we can set a transition for the curtain icon to show it everytime we hover:

    .img-container:hover > a > .view-img {
opacity: 100%;
}

    You can learn more about these efects here: W3S CSS Styling Images. Scroll down to the Image Hover Overlay section.

    Hope I was helpful and happy coding!

    Marked as helpful
    2