Hello Everyone! I just completed my first challenge. I don't know how my code is working 😆. And I want to know why my GitHub pages don't show images. Please take a look and tell me how to fix it. And any other suggestions will be appreciated.
Hi @Akhil-Nagpal,
Good job completing the exercise 👌
With regards to changes that can be made:
body {display: flex; min-height: 100vh; justify-content: center; align-items: center}Otherwise, good job 👌
I hope this was helpful
Hello Everyone!
I find the backgrounds challenging. I know there's a better way of doing it in CSS instead of using it as HTML image but it's not working for me. If you have better solutions, I would appreciate it if you'd give me feedback and tips on how to make it better. Thank you!
Hi there @generieyyc,
Good job with completing the challenge.
With regards to how you could do it better:
I am aware negative margins are not always the solution, but if it does not heavily affect the design with regards to responsive design, then I do not personally think it is a problem.
I hope this helpful. Happy coding ✌️
In this project, I had problem with the image's border radius although I made it the same as expected, but the border-bottom-left and border-bottom-right were getting extra range. Any recommendation regarding to the project would be appreciated, plus I have started Java script but I do not know how to go on except from (w3schools) can you recommend me any other fun and useful source? Thanks!
Congrats on completing the challenge!
Wes Bos has some good practice exercises on JavaScript, and so does JSChallenger:
https://www.jschallenger.com https://javascript30.com/?ref=steemhunt
I hope I could help you. Happy Coding!
Some tips? :)
@tuliovini13 Hi there,
Good job on the project! Here are some tips that you could work on if you'd like:
You can set max-widths for the <p> text and the bold title. This will limit the width of the element and will result in more whitespace on either side of the element.
You can reduce the size of the blue <div> and the qr <img/>
You can slightly increase the border radius
Other than that, good job!
I hope this was useful 👌
I think in this project one thing that I learned the most is related to <div> management in HTML and border-rounded in CSS.
the thing that still makes me curious is how to place the object right in the middle, isn't there a special way? because I manually set margin width, left and top only.
Hi @Agus2711,
Yes there is another way, instead of using margin. You can set your body element to be:
/* CSS */
body { display: flex; height: 100vh; justify-content: center; align-items: center; margin: 0 auto; }
This should center align the item, whether you are on Desktop or Mobile.
I hope this has helped 👌
Hey, i had problem adding the hover function please i woud appreciate comment on how to acheive that. let me know what you also think generally. how can i improve writting code in the rightful way.
Hey @kingchoffy,
To achieve the hover effect, you need to put a <div> below the image, and wrap the image and the <div> in another <div>, an example would be:
<div className="card__container">
<img src="NFTImage" alt="card image" />
<div className="overlay"></div>
</div>
You then need to make the overlay <div> position:absolute and the image position:relative. This will remove the overlay <div> from the DOM. Set top:0 and left:0, this will make the overlay <div> appear on top of the image.
Here is an example of how I achieved it the end goal:
.card__top_wrapper { position: relative; } .card__top_image { position: relative; margin-top: 1rem; height: 302px; width: 302px; } .overlay { position: absolute; height: 302px; width: 302px; background-color: white; opacity: 0; border-radius:10px; top: 0; left: 0; margin-top: 1rem; transition: all 0.2s ease-in-out; } .overlay:hover { background: radial-gradient(50% 50% at 50% 50%, rgba(0, 255, 248, 0) 0%, #00FFF8 100%); opacity: 50%; cursor: pointer; }
I hope this helps. For other hover effect - where it changes to Equilibrium #number on hover, you will need to:
Write the NFT number in a <p> element, and within that <p> element you must place a <span> element, like so:
/* html */
<p><span className="extra">Equilibrium </span>#3117</p>
/css/
.extra { display: none; } p:hover .extra { display: inline-block }
Note: you probably will be able to do it with display: inline-flex, instead of inline-block.
I hope this helps 👌
Centering and putting the image aside of the white box, then centering the text in the right-sided white box.
I tried adding Bootstrap coding, but it broke my codes every time. I need more practice.
What do you recommend to do these kinds of positioning and sizing without using so many codes? I really appreciate any help you can provide.
hello, just for some extra feedback:
If you want to centre the card - for desktop and mobile - you can use /* display: flex; height: 100vh; justify-content: center; align-items: center; */
This for the body element, you can target directly in css:
body {
}
I hope this has helped!
I'd like to ask if where to deploy dynamic sites since I'd like to apply it on my solutions. GitHub is for static sites only. For the meantime, this challenge has hard-coded values. Hope you could suggest one. Thank you!
Yes there are more dynamic challenges as you progress.
The difficulty is easy because the challenge is a basic of HTML and CSS only. I think it's funny because it's challenging for me.
It gets better with time. Continue learning! I also started out with html and css, thinking it is tricky. Just be patient and take your time. Everyone progresses at a different pace
