I'm having some issues creating the Avatar's profile picture border, once the png is a square and all I want is creating a rounded border. trying to create a ::before circle content, 1px bigger than the img, and put it bellow , but this function didn't work for img elements .
Would be great to have some help here.
Hey @patricksanto, for creating a circular border you can follow these steps:
.user .avatar border: 2px solid white;border-radius of 50 px border-radius: 50px;Happy Coding😄
If you have any suggestions Always welcome :)
Hello @rdghostmann, first of all, congrats on completing this challenge.
Here are some suggestions to improve your code:
In this challenge, there is a shadow to download button.
Here is the preview(look closely at the download button): https://ojaswishivam.github.io/order-summary/#
you can do so by using Drop Shadow, Here is the code:
filter: drop-shadow(0 12px 7px rgba(7, 23, 255, .245));
Helpful Link: Drop-Shadow
Happy Coding!! 👻🎃
Hi everybody.. I look forward to perfecting my skills especially with semantics and accessibility and I will love ❤ to get your suggestions to be better.
Hello @rdghostmann, first of all, congrats on completing this challenge.
Here are some suggestions to improve your code:
In this challenge, there is a shadow to download button.
Here is the preview(look closely at the download button): https://ojaswishivam.github.io/order-summary/#
you can do so by using Drop Shadow, Here is the code:
filter: drop-shadow(0 12px 7px rgba(7, 23, 255, .245));
Helpful Link: Drop-Shadow
Happy Coding!! 👻🎃
Hello @02fede02, first of all, congrats on completing this challenge.
Here are some suggestions to improve your code:
In this challenge, there is a shadow to download button.
Here is the preview(look closely at the download button): https://ojaswishivam.github.io/order-summary/#
you can do so by using Drop Shadow, Here is the code:
filter: drop-shadow(0 12px 7px rgba(7, 23, 255, .245));
Helpful Link: Drop-Shadow
<a> tag and change the text-decoration to nonetext-decoration: none;
Happy Coding!! 👻🎃
Re-uploading after doing the hover effect. Open to all suggestions and criticisms.
Hey @nhaux, congrats on completing the project
Here are some suggestions:
<background-color> of your line class to this background-color: hsl(215, 32%, 27%);
transition: opacity 0.3s ease-in-out; Happy coding! 👻🎃
Nice project
Hello @Jairth, first of all, congrats on completing this challenge.
Here are some suggestions to improve your code:
In this challenge, there is a shadow to download button.
Here is the preview(look closely at the download button): https://ojaswishivam.github.io/order-summary/#
you can do so by using Drop Shadow, Here is the code:
filter: drop-shadow(0 12px 7px rgba(7, 23, 255, .245));
Helpful Link: Drop-Shadow
Happy Coding!! 👻🎃
What are the best resources to learn javascript?
Hello @vinayak912002
For learning JavaScript you can learn it from a (Youtube Channel)Code with Harry (language- Hindi). Here is the link: https://youtube.com/playlist?list=PLu0W_9lII9ahR1blWXxgSlL4y9iQBnLpR
You can also learn it from W3Schools website. Here is the link: https://www.w3schools.com/js/
I encountered challenges in implementing the media screen sizes using CSS. I would appreciate being assisted with that.
Hey @Sanderson-Nyange, here are some suggestions to improve your code:
auto is not a valid value for padding property, but you can use auto in margin property
The Alt Tag Description for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume you’re describing the image to someone.
You have import Google Fonts of weight 400 and 700 in your project, Here is an example of how you can do it:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Outfit:wght@400;700&display=swap"
rel="stylesheet">
Use External CSS in your code.
Use Flexbox or CSS Grid for the alignment Helpful Links: CSS Grid Flexbox
For Media Queries, you can visit this helpful website: Media Query
This is how the same challenge done by me looks! https://ojaswishivam.github.io/qr-code-component-solution-/
The Media Query used by me:
@media only screen and (max-width:629px)
Happy Coding! 👻🎃