do you think there is something i should add or remove ? do you think there is something i could have done better ? rate my work 1 - 10 ?
Jiro Ricaro
@jiroRiAll comments
- @iam-omer-mahdiSubmitted over 3 years ago@jiroRiPosted over 3 years ago
Great work especially the animations! Looks really fluid π
I just found an issue though, if you refresh a page on a subpage, it returns an error. It would be great if you can find a solution to this.
Other than that, overall this is an excellent work! Keep it up πͺβ¨
1 - @manoj-jayapprakashSubmitted over 3 years ago
Updated solution with background images
@jiroRiPosted over 3 years agoHi Manoj!
You can add them as is(svg) or using a
div
but the most important part is to learn all about theposition
property in CSS. I also recommend you to look up and learn how to implementbox-shadows
in CSS.These are my preferred sources(the CSS
position
property topic):- Fun and Easy-to-learn from: Dev Ed
- Straightforward and Serious: Web Dev Simplified
- Learn from the CSS Master: Kevin Powell
You can also pick out a resource of your choice in the Frontend Mentor's Resources page. There are quite a lot to choose from π Above mentioned are just my preferences.
Let me know if you need more help! Keep at it πͺ
0 - @makarensalayogSubmitted over 3 years ago
Any feedback would be greatly appreciated β‘
- @FranciscoFrontEndDeveloperSubmitted over 3 years ago
For me, the most difficult thing was to give that violet filter to the image. I tried several things but I didn't get it, but I chose to modify the image in an image editor.
@jiroRiPosted over 3 years agoHi, Great solution you have there! Especially on the responsiveness, it just needs a little bit of polishing(especially the image size on mobile) and you're good to go.
Suggestion:
- As for the image with the violet filter. One way to do it is to learn/use the
position
property (relative
andabsolute
), I suggest you look this up if you haven't learned this yet.
Cheatsheet:
- The filter(violet) div will overlap your image element and it will have its opacity toned down a bit. Take a look at this example if you're using an
<img />
element: https://codepen.io/JiroRi/pen/yLgGMwW
I also included a workaround using the
background-image
property instead.Again, great work and just keep at it! Let us know if you need further help! π
0 - As for the image with the violet filter. One way to do it is to learn/use the
- @Jonie23Submitted over 4 years ago
I attempted Frontend Mentor's Challenge on the four card feature section. I'd be glad to receive feedback on my code. Thank you
@jiroRiPosted over 4 years agoHi! A very neat solution you have there β¨ Especially on screens below 1440px.
I have a few tips, albeit minor, but would really help with the overall aesthetic and accuracy(?).
-
I suggest for you to set a max width inside your
.container
. This can be a quick and temporary solution(until you figure out a better one) so you won't have any trouble with the elements'flex-wrap
behaviour in larger screens(more than 1440px) e.g:max-width: 1366px;
-
As for the colors.. It is best for you to look thoroughly into the
styles-guide.md
file(included within the Starter Pack) and identify which elements need to use which before doing everything else.
Overall, you really did a good job particularly on the β¨responsiveness β¨!! No issues too!
Keep at it bro! πͺ
Edit: (I apologize if I don't know why I am being downvoted. I humbly ask someone to correct me or let me be aware of what I did wrong, so I can learn a very valueble lesson.)
1 -
- @san794Submitted over 4 years ago
How can I style the sides and bottom divs border? I noticed they've got like a sort of transparent border but looks a bit grey.
The footer didn't show up at the bottom of the page so I had to position it as absolute and be able to show it at the bottom of the page. It was showing at the very top.
@jiroRiPosted over 4 years agoHi! Great attempt/solution you have there!
As for your first question, I believe you are looking for the
box-shadow
shorthand property. Put this inside your.team-builder-container
class selector:box-shadow: 0px 10px 20px rgba(40, 40, 40, 0.15);
learn more about the
box-shadow
shorthand property from here- and you might as well remove your card's(.team-builder-container) bottom border by setting
border-bottom: 0;
and removing this lineborder-bottom-width: 1px;
As for the footer, great idea on the workaround. But I strongly suggest for you to utilize
Flexbox
or learn it if you haven't done so already. It will greatly improve your solution and especially your footer problem(you won't have to do it in a hacky way if ever). We have a lot of resources here where you can dive deeper intoFlexbox
.Still, good job and keep at it bro! πͺ
2 - @blade-01Submitted over 4 years ago
A feedback would be nice
@jiroRiPosted over 4 years agoNice job especially on the desktop version!!! β¨
I have a few quick fix that may help improve your work on the desktop version:
- add the following properties to the
.attribution
class selector inside yourstyle
tag in yourindex.html
file:
position: absolute; bottom: 0; left: calc(50% - 308.56px/2);
makes it so that your attribution won't add up to the total height of your page
- change the following properties for the
.showcase
class selector withinstyle.css
:
background-position-y: 100%; background-size: 100% 50%;
Your mobile version definitely needs a lot of work. Moving forward, I suggest and it will be a good practice for you to start doing everything on mobile first then just use media queries and min-width to adjust for bigger screens. Ex:
@media(min-width: 768px)
,@media(min-width: 1024px)
..Still, you did a great job and keep at it!! πͺπ
1 - add the following properties to the
- @recklessbossSubmitted over 4 years ago
i am new to css and html ..so please take a look at this and see what you think about it and the areas i should improve,Thank you :)
@jiroRiPosted over 4 years agoHi @uzumakiabba! You have a great solution considering that you are very new to css and html! π€©π―
I have a few suggestions that may be able to help you:
-
Use the neutral | dark color provided in the
style-guide.md
for your.heading-sub
and yourh3
elements. -
You should dive deeper in
Flexbox
and learn more about it. It will definitely improve your current solution. -
With regards to flexbox, try adding a property of it:
align-items: center
to your.container
div, you will already see a huge improvement after doing so.
Now to expound on what made such a nice change.. by adding the
display: flex;
property, you will have a property offlex-direction: row;
by default(even if you didn't explicitly type it). This means that your main-axis goes horizontally and your cross-axis will go vertically. Whatalign-items: center;
does is it aligns the flex items on the cross-axis.So, going by your solution, it should center your flex items vertically. Btw,
center
is one of the property values ofalign-items
and there are more you should look into.There are a lot of great things to learn in Flexbox and you should definitely check the Resources Page to dive deeper.
But overall, you really did a great job!
Good luck and Keep at it! πͺ - Jiro
1 -
- @recklessbossSubmitted over 4 years ago
Feedbacks please and what you think i should improve....this was a bit hard for me..i had difficulty positioning background image ....
@jiroRiPosted over 4 years agoQuite a nice output you have there considering that you are very new at this!
Some suggestions I have that may be able to help you:
-
it seems like your background image doesn't have the correct path that's why it doesn't load for the preview site. It should be something like
background-image: url(/images/bg-desktop.png);
. -
For the 3 buttons, your idea is kinda close but instead of putting most of the styling in the
nav-pic
.. you should put them in the parent or its containerdiv
and add the ff. properties:
display: flex; justify-content: center; align-items: center;
and adjust from thereon.. also, your
.nav-pic
class should almost only contain properties for the size of the logo itself within the parentdiv
.- most of the things in your solution can be improved via learning how to properly utilize
flexbox
. There are a lot of awesome websites you can select from in the Resources page where you can dive deeper inflexbox
and practice utilizing it.
Still, great job! What matters most is that you never stop learning.. no matter how fast, just keep a steady pace and you will definitely improve.
Keep at it! ππͺ
1 -
- @linzhangcsSubmitted over 4 years ago
What's your take on the background? Do you position it on the bottom of page?
@jiroRiPosted over 4 years agoYour work pretty much on the component itself is really great!
However, here's a workaround I tried to be able to fix your solution's responsiveness, mainly the background for desktop version and multiple screensizes especially for bigger screens:
.body
- added
height: 100vh;
anddisplay: flex;
.
.background
- changed
position: absolute;
toposition: fixed;
- added
background-size: 100% 50%;
- changed
height: 420px;
to100%;
- added
background-position-y: 100%;
.main-container
- remove the
height: 800px;
or just set it toheight: auto;
.data-storage
- from
margin: 45px auto 60px
tomargin: 0 auto;
Let me know if I were able to be of help. Best of luck bro and keep at it! πͺ
1 - added
- @mistajideSubmitted over 4 years ago
I'll like to make the gradient top border for the instagram followers card have a border radius like the other card. how do I fix this?
@jiroRiPosted over 4 years agoHi! Awesome and neat Solution you have there!! β¨
I think this thread can be the workaround you are looking for. The one with the
::after
pseudo-element answer.2 - @drebeatSubmitted over 4 years ago
I am open to correction and critics. Kindly give a feedback on my project. Thanks
@jiroRiPosted over 4 years agoThe desktop version looks really nice!
I have a few suggestions that may be able to help you:
-
Put this
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
at the top in yourstyle.css
file so as to make the Raleway font family work inside thebody
element. -
Inside your
@media screen and (max-width:890px)
. Set amax-width
for the.body-content
class so that your component won't stretch too much especially on the iPad/Tablet port. The stretching also affects some elements inside your component so this may be a quick and temporary solution to the responsiveness problem. -
Learn SASS/SCSS (if you haven't done so already), Discover its advantages, and utilize it. It will hugely help with your CSS.
-
I also suggest to re-adjust the three sibling buttons'
border-radius
to around10px
.
Still, Great Job and keep at it bro! πͺ
1 -