I still don't know what is what in box-shadow's value, what's the first, second, third and forth value does (0, 0, 0, 0), I only play the value to get that box-shadow and I don't have any idea xD. And about the :focus-visible why only the :focus worked for me. Thank you in advance!
So, for box-shadow: 1px 5px 10px red; 1px is the width of the shadow horizontally, 5px its height vertically, 10px is the bluriness of the shadow (the lowest you go, the more blocky it is), and obviously, red is its color.
Just copy " box-shadow: 1px 5px 10px red; ", play with the values for a while, and you'll get the basics. You can add to this later on, there are a lot of ressources around for you to do so!
Responsive Clipboard Landing Page using HTML & CSS Flexbox. My first Landing Page project. Please I will really appreciate feedback on this project, they are very important to me. Thanks.
Hi Daniel!
This looks great! The responsiveness is top-notch, I need to take some notes.
If you are a bit of a perfectionist though, you might like to use the PerfectPixel extension by WellDoneCode. You can then play with width, height, font-size, word-spacing, letter-spacing, line-height etc. to get a perfect match.
Suggestions on your solution for now: you can add a second shadow to your buttons.There's indeed the small one to create a 3d effect, but there a blurry second one you might want to add.
Your footer is a bit tall too, you could shorten it, or at least center its content.
It's not much, but I hope it helps at least a little!
How do I create a fill hover for SVGs?... I got stuck while trying to figure it out
Hi Abiala!
I'm not sure how to do it over SVGs, but there are icon libraries listed in the style guide, like "font-awesome" and a couple more. It's quite convenient because the icons you get from them act like normal font, meaning you can change color, size, weight with color, font-size, font-weight, etc.
i find it difficult creating the hover effect on the image
Hi Moruf!
There might be a more effective way to do the hover effect, but this is how I did it:
I created a <div> the exact same size as the image, with a background-color of the bright cyan color listed in the style guide, and placed it over the image.
I used position: absolute; to place the eye icon in the middle of said <div>.
I then set the opacity of both the div and the icon to 0, so that they don't normally appear.
I changed the opacity to 0.5 for div:hover and to 1 for icon:hover.
I hope this helps in any way!
how to add button shadows in proceed payments?
Hi!
I think the spreadSizes of your button's box-shadow (the fourth value, in your case, -30px and -20px) are way too low considering the size of your button. Try 0, and chances are a shadow will appear, you can then change it from there.
Also, don't forget there are active states to the buttons and the "change" link. And you can set the background-color of the body to the light blue color listed in the style guide so that underneath the wave isn't white, and it matches the design.
Good luck!
i do need some help with some wierd behaviour from my code when viewed from half screen; any suggestion on what the problem is or better still, the solution would be greatly appreciated. Any other suggestions on improvements are greatly welcome..
Hi Manuel!
You could try to apply display: flex;, flex-direction: column; and align-items; to your <body>/<html>. That's how I got everthing to be centered. You would have to get rid of the margin-left you applied to your sections for it to truly work though.
You can fix 6 of your accessibility issues by wrapping your sections in a <main>tag. (Everything between your <header> and your <footer>). You can fix another one by adding a lang="en" attribute to your <html>.
As for suggestions: the titles are supposed to be "Dark Grayish Blue" and the remaining text "Light Grayish Blue", both colors are in the style guide. Now, if it's a design choice, please just ignore that. But your titles could use a bit of margin-bottom though.
Also, when there's a lot of text on a page, I like to use the "index.htlm" file of the starter files, the one you renamed "text-file" (You don't need to put it in your repository btw.) to copy and paste everything, it prevents typos. I didn't read everything but for example you're missing a c in "Access Clipboard".
You can also use position: absolute; and top: 0; on your header to make sure it starts at the very beginning of the webpage.
Last thing, for the 3d effect of the buttons: get the blur size of the box-shadow to a bare minimum (like 1px), and the color of the shadow a bit darker than the colors used for the buttons.
I hope this helps, good luck!
Hello everyone!
The report says I have some HTML issues. The thing is, I'm just a month into html/css, and english isn't my mother tongue. Does anybody know what those mean:
"CSS: transform: too few values for the property transform."
"CSS: Unknown pseudo-element or pseudo-class :host"
Thank you very much!
