Submitted
Bernard Rodrigues
@bernard-rodrigues
All solutions
Submitted
As the shrtcode API page couldn't be reached, I used Rebrandly as the URL shortener API for this application.
I made some necessary changes in the desktop layout to achieve the final design, but as my screenshots are over, I'll update it next month.
I hope you like my solution!
Submitted
Submitted
I didn't manage how to achieve the header desktop background exactly as the reference one.
I'd be glad by receiving any tip.
Submitted
Submitted
A first experience using TailwindCSS out of React
In order to achieve the hover effect over the image, I used an external div with the Equilibrium picture and another div containing the cyan background and the eye as its sibling, in order to avoid that the eye suffers the effects of the opacity applied over the div, as follows:
<div class=" w-[279px] h-[279px] relative lg:w-[274px] lg:h-[274px] "> <img class="rounded-xl lg:rounded-lg" src="images/image-equilibrium.jpg" alt="Equilibrium, by Jules Wyvern"> <div class=" absolute h-full w-full left-0 top-0 opacity-0 transition-opacity hover:opacity-100 hover:cursor-pointer "> <div class="h-full w-full bg-cyan opacity-50 rounded-xl"></div> <img class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2" src="images/icon-view.svg" alt="Icon view. An eye."> </div> </div>
I don't think this was an elegant choice and I would appreciate some tips about it.
Submitted
IP Tracker using ReactJS and TailwindCSS
- HTML
- CSS
- JS
- API
Submitted
Submitted