Hello everyone! This is my second challenge, I struggled with the transition to the view in the image. Actually, I cannot make it completely similar as I was not able to set the "eye" icon not transparent. Any feedback or suggestion will be highly appreciated!
Thank you for your time checking y challenge!
Hi Pedro, good work!
About your question of the overlay, you only need to add a opacity: 1 to the overlay on hover and change the background color from hsl to hsla.
.imgcontainer:hover .overlay {
/* opacity: 0.7; */
opacity: 1;
/* background-color: hsl(178, 100%, 50%); /*
background-color: hsla(178, 100%, 50%, 0.5); /*https://www.w3schools.com/html/html_colors_hsl.asp */
cursor: pointer;
margin-left: 20px;
}
I didn't find problems in general But What I would like to do in this challenge is to make the design as pixel perfect as possible (I am don't have pro). I used Pixel Perfect extension on Chrome but the problem I faced is that the Design Preview is 1440x1056 and the Site on my device is 1200 or less and the height is the height of the screen of the laptop I use which is less than 1056 for sure. How can I compare the Preview Design with my design if the preview layer doesn't land properly on my Solution. Sorry for the long talk 😥 but I am very eager and curios to make the challenge Pixel Perfect.
Hello, really good solution!
About your question I recommend you to use any image editor like GIMP or Photoshop or Photopea (this last one works in the browser and it's free). All of them have some kind of measure tool or ruler and with that you can see the width and height of the component that you want to design.
Second time using semantic tags, did I use them correctly? Is there a more "clean" way of positioning the stats at the bottom of its section? I wrapped the stats container in two divs in order to accomplish it and it feels wrong. Didn't find any other way by searching either.
All feedback is greatly appreciated. :)
Hello, yes you can remove the div with the class "position-to-bottom" and add to the position-helper a flex and flex-end:
.position-helper { display: flex; align-items: flex-end; height: 100%; }
With this you will get the same result. 😉
About the semantic, it's really perfect, you made a really good work with that.
what i find diffcult is to center the content on the page. I just want to know if there is another way to center the content on the page instead of using flexbox.
There are a lot of ways to center it, but the best is flexbox, another way is using grid, you can put in the container:
.container {
display: grid;
place-content: center;
}
The tricky part for me was using and overlay playing with z-index. Not sure if it's the best aproach!
Hello, about the z-index, it's better if you use the hover effect in the class "div-overlay", if you put as initial state on "div-overlay" the opacity: 0% and on hover you can increase the the opacity to 30% again. And with that you can avoid future problems with z-index like with mobile navbars.
.div-overlay {
// ...rest of code
opacity: 0%;
// ...rest of code
}
.div-overlay:hover {
opacity: 30%;
}
I'd like some feedback for the code I wrote. This is the first bigger app with more components, so I'd like to know if that's all good. Thank you!
Really nice! I would love to can delete and create comments but it is still pretty good and the animations are really interesting. I didn't know about framer motion.
In Desktop mode , I tried my best to show Social share icons , but it is not expected result ...
Hello, you should try some tutorial to can show the social share icons, here I will leave you a link: https://www.w3schools.com/howto/howto_css_tooltip.asp
Is there a problem with the font or have i done something wrong? I mean the text is not in the middle.
Hello, about your question, in the class .job__item you have an extra padding on top.
old
.job__item {
padding: 2.5rem 1.5rem 1.5rem;
}
new
.job__item {
padding: 1.5rem; // If you put only 1.5rem it will affect to the all 4 paddings.
}
Thank you for reviewing my project! This time, I tried to write a cleaner, more understandable code which will be hopefully more maintainable. I also used more semantic html elements than in my last projects.
Please let me know, if you have any suggestions on how to improve.
Nice work!.
The unique thing that I recommend you is only for readability is to use a code formatter like Prettier, because when I was trying to read some parts of the css, the indentation makes it a little harder to read.
Please help me in making this responsive!!
Hello, first remove all the style attributes that you put in your code (if not it will not work), it's not the best practice, better use classes. To make it easy the responsive, to the form add a little of flexbox:
.form {
display: flex;
flex-direction: column;
}
And in the media query remove the max-width in the .input-group
@media(max-width:768px){
// Rest of code.
.input-group{
position: relative !important;
width:80% !important; // Remove this line
}
}
The hover effect is not perfect, how to do it.
Hello, if you want to make the effect, you need to add a variable cyan-light for example and use hsla to have the transparency effect.
--cyan-light: hsla(178, 100%, 50%, 0.3);
Hello about the font bold, you need to add the font weights that you want in the link of google fonts. Replace the line 8 of your code with this:
<link
href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap"
rel="stylesheet"
/>
In the wght@ notice that in your code it is only 200, you need to put 400 and 700.