🫡 Hello, Frontend Mentor Army. This is Version 2 of my solution for the Chat app CSS illustration.
Another great Challenge by Front-End Mentor #LearningByDoing
I'll be happy to hear any useful feedback and advice! 🙌
Hey Devesh shukla,
for the right background panel (.bgCardRight) i suggest using ->
.bgCardRight {
position: fixed;
right: -10rem;
bottom: 0;
}
using margin to position this panel is not ideal.
I just finished same challenge so u can check it out.
Iam open for your feedback aswell :)
En el servidor local se muestra el ojo al hacer hover sobre la imagen, no sé porque al desplegarlo en github no aparece el ojo.. no sé cómo solucionarlo
On the local server the eye is shown when hovering over the image, I don't know why when deploying it on github the eye doesn't appear. I don't know how to fix it
Hey Henni,
.capa {
width: 100%;
height: 100%;
background: url(/images/icon-view.svg),var(--CyanT);
background-repeat: no-repeat;
background-position: center center;
visibility: hidden;
}
I believe there is an extra slash “/” at the start in path to the eye icon.
It might help you solve the issue.
Also you might add this to your body element to center your card vertically and horizontally.
display:flex;
justify-content:center;
align-items:center;
min-height: 100vh;
Good job though. Keep it up.
I got really confused with deciding appropriate font sizes and had to refer to other solutions and try different sizes. Is there a better way to deal with it while we are cloning a project?
Although I have tried to make the project as responsive as I can. I did not understand or use Media Queries for Mobile's first approach. How can I do that?
I'd love to know your views on HTML Semantics and element naming in my code.
Hello,
To answer your first question. I use browser extension called perfectpixel. Which let you put the design image overlay over the page you are creating. It helps you see how accurate you are with your project.
Hope I helped 😁
Good work, keep it up.
Nice and easy challenge. Great to refresh HTML and CSS skills.
Any suggestions are welcome.
Not sure why the heading is a bit off in the screenshot. When I open the page, everything is ok.
