@ojaswishivam
@patricksanto
Submitted
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.
@ojaswishivam
Posted
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😄
Marked as helpful
@varunUk09
Submitted
If you have any suggestions Always welcome :)
@ojaswishivam
Posted
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!! 👻🎃
Marked as helpful
@rdghostmann
Submitted
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.
@ojaswishivam
Posted
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!! 👻🎃
@02fede02
Submitted
@ojaswishivam
Posted
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!! 👻🎃
Marked as helpful
@nhaux
Submitted
Re-uploading after doing the hover effect. Open to all suggestions and criticisms.
@ojaswishivam
Posted
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! 👻🎃
@Jairth
Submitted
Nice project
@ojaswishivam
Posted
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!! 👻🎃
Marked as helpful
@vinayak912002
Submitted
What are the best resources to learn javascript?
@ojaswishivam
Posted
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/
@Sanderson-Nyange
Submitted
I encountered challenges in implementing the media screen sizes using CSS. I would appreciate being assisted with that.
@ojaswishivam
Posted
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! 👻🎃
Marked as helpful