Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
15

Jiro Ricaro

@jiroRiPhilippines715 points

I am a Software Engineer | Aspiring Web Designer.

I’m currently learning...

•Elixir/Phoenix •Postgresql •Web Design

Latest solutions

  • Stats Preview Card Component (React, styled-components, react-countup)


    Jiro Ricaro•715
    Submitted about 4 years ago

    1 comment
  • IP Address Tracker [hooks, styled-components, IPify API, LeafletJS]


    Jiro Ricaro•715
    Submitted about 4 years ago

    0 comments
  • Responsive URL Shortener [HTML,CSS,JS,Relink API,async,RegEx]


    Jiro Ricaro•715
    Submitted almost 5 years ago

    1 comment
  • Responsive Chat app CSS illustration[HTML, SCSS, Flexbox, Animation]


    Jiro Ricaro•715
    Submitted almost 5 years ago

    0 comments
  • Responsive [HTML, SCSS, vanilla JS(ES6 arrow and ternary), FLEXBOX]


    Jiro Ricaro•715
    Submitted almost 5 years ago

    0 comments
  • Responsive Four Card Feature Section [HTML, SCSS]


    Jiro Ricaro•715
    Submitted almost 5 years ago

    1 comment
View more solutions

Latest comments

  • Omer Mahdi•85
    @iam-omer-mahdi
    Submitted about 4 years ago

    Vue js, Vuex, Axios, Gsap, Sass

    2
    Jiro Ricaro•715
    @jiroRi
    Posted about 4 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 💪✨

  • Manoj Jayapprakash•220
    @manoj-jayapprakash
    Submitted about 4 years ago

    Mobile first approach - Flexbox

    2
    Jiro Ricaro•715
    @jiroRi
    Posted about 4 years ago

    Hi Manoj!

    You can add them as is(svg) or using a div but the most important part is to learn all about the position property in CSS. I also recommend you to look up and learn how to implement box-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 💪

  • Ma. Karen Salayog•85
    @makarensalayog
    Submitted about 4 years ago

    HTML and CSS with Bootstrap

    2
    Jiro Ricaro•715
    @jiroRi
    Posted about 4 years ago

    Nice first challenge 😁😊

  • Francisco Becerra Rodriguez•410
    @FranciscoFrontEndDeveloper
    Submitted about 4 years ago

    Stats-preview-card-component

    1
    Jiro Ricaro•715
    @jiroRi
    Posted about 4 years ago

    Hi, 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 and absolute), 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! 💖

  • Quartey Jones Oko•45
    @Jonie23
    Submitted almost 5 years ago

    Flex Box, Mobile-Responsive

    1
    Jiro Ricaro•715
    @jiroRi
    Posted almost 5 years ago

    Hi! 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.)

  • Santiago Meneses•10
    @san794
    Submitted almost 5 years ago

    Four card feature section solution using HTML and Css

    1
    Jiro Ricaro•715
    @jiroRi
    Posted almost 5 years ago

    Hi! 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 line border-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 into Flexbox.

    Still, good job and keep at it bro! 💪

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Beta Member

This badge is a shoutout to the early members of our community. They've been around since the early days, putting up with (and reporting!) bugs and adjusting to big UX overhauls!

Mentor of the Week - 2nd Place

This badge is awarded to the 2nd placed community member on the weekly Wall of Fame.

Fun fact

Keypunches were used in early computing to punch precise holes in stiff paper card. The punched cards were then used for data input, output, and storage. No code linters or auto-complete suggestions to help out back then! 😅

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub