Skip to content
OverviewSolutions
3
Comments
3

João Textor

@joaotextorErechim, Brazil80 points

Bachelor of Law working hard on a career transition.

Latest solutions

Latest comments

  • João Textor•80
    @joaotextor

    Update: figured out a solution on the technology page problem. Simply added a <picture> element inside HTML with a picture for desktop screens. No need for CSS nor JS. Thank you Kevin Powell for today's YouTube short for this advice ;-)

    Kevil Powell video that solved my problem: https://www.youtube.com/shorts/d9i68C628Nk

  • João Textor•80
    @joaotextor

    Congratulations on your first challenge :-)

    You can try using a padding on a <article> tag to create a border on your text content, or a margin-right to fix the position.

    To change color of social icons on hover, use SVG files on <img src> and then, on :hover, use the 'filter' property to change colors.

    Here's a good tool to convert hex colors to filter: https://codepen.io/sosuke/pen/Pjoqqp

    Marked as helpful
  • João Textor•80
    @joaotextor

    Hello, Marsha. I hope you had a good time making this solution. I know I did making mine. So, I noticed something that could be a very good tip for your project, and it will help the elements in getting straight in line with each others.

    When creating elements that should stay side by side and be responsive, it's a good idea to put them inside a div (just like you did in <aside> tag).

    To better exemplify, here's a screenshot: https://imgur.com/a/2Sjw5Zt

    You see that, in this screenshot, I created a <div> to put the other elements. It's easier to organize all the elements inside a div using flex/grid display. So, in the first div group you can use flex-direction row (which is default).

    The second group of divs (blue) will stay side by side because of div 1 (green) being flex.

    On the third group of divs (pink) you will accommodate the remaining objects. The first pink div (which has the image) can have a flex-basis of 100% so it always remain on top of the other 2 (using the row direction), as long as you have your flex-wrap set to "wrap".

    In my project, I used flex display on all of those divs, but I suppose you can play with grid display to have the same effect.

    You can also use divs organize your other elements below (the number 1, 2 and 3 headlines and images.)

    I hope I could make myself useful. Good job and keep going :-)