Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
28
Comments
30

Juan Camilo Botero

@jcboteroIbagué/Colombia970 points

Looking for the opportunity to improve my skills as a Front-End Developer

I’m currently learning...

Next Js.

Latest solutions

  • Multi-step Form

    #next

    Juan Camilo Botero•970
    Submitted over 1 year ago

    0 comments
  • Next JS. Made the bonus project.


    Juan Camilo Botero•970
    Submitted over 1 year ago

    0 comments
  • Responsive CountDown app. React-js . Next js. UseStates.


    Juan Camilo Botero•970
    Submitted over 1 year ago

    0 comments
  • Next-js. React-Js. useffect. Darkmode. Grid & Flex-box

    #next#sass/scss#react

    Juan Camilo Botero•970
    Submitted over 1 year ago

    0 comments
  • Next js - useState - loops. Any advice or comment is totally welcome.


    Juan Camilo Botero•970
    Submitted over 1 year ago

    0 comments
  • Next js. Api fetch. Use States. Grid Design.

    #next#react

    Juan Camilo Botero•970
    Submitted over 1 year ago

    0 comments
View more solutions

Latest comments

  • rikku08•70
    @rikku08
    Submitted over 1 year ago

    Stats Preview Card Component

    3
    Juan Camilo Botero•970
    @jcbotero
    Posted over 1 year ago

    Hi rikku08!. Nice code!. If you don't mind I would like to make a suggestion. I think you forgot to do the background effect to the main image. You can achieve this in your css sheet like this:

    .img { mix-blend-mode: multiply; opacity: 0.8; }

    In this way, the image achieves the violet color that the challenge asks us for.

    If you think this helped you, please mark the comment as helpful. Thank you!

    Marked as helpful
  • nade12209•70
    @nade12209
    Submitted over 1 year ago

    1day

    1
    Juan Camilo Botero•970
    @jcbotero
    Posted over 1 year ago

    Hi nade12209!!. I think you did a great job with the organization and internal design of the challenge. What I could add is that your container or main div is not well centered, it is quite shifted to the right.

    This error is caused by:

    .okvir{ margin-left: 500px; } .lijepo{ width: 1440px; }

    The values ​​are too large, which makes the layout shift to the left. It would be good not to put values ​​in px since it is not very responsive, you could better put %. In the case of the width of the main container, it may be better to use 100vw. It is more flexible and responsive.

    If you think this helped you, please mark the comment as helpful. Thank you!

  • Federico Salerno•210
    @Federico-Salerno
    Submitted over 1 year ago

    Accordion responsive menu using javascript

    1
    Juan Camilo Botero•970
    @jcbotero
    Posted over 1 year ago

    Hello Federico. Good code. If you don't mind, the only thing I would have to add is that I think you forgot to cut the image that comes out of the div with a white background. You can do this like this in css:

    div containing the image { overflow: hidden }

    If you think this helped you, please mark the comment as helpful. Thank you!

    Marked as helpful
  • DavidR•20
    @DavidRM077
    Submitted over 1 year ago

    Css puro Flexbox HTML Simple

    2
    Juan Camilo Botero•970
    @jcbotero
    Posted over 1 year ago

    Hola David. Muy bien resuelto el challenge. Sobre posicionar/mover elementos, quizás lo que más me guste es usar el Flex-Box. No sé si lo usaste porque está caído el link de tu repositorio, pero sería algo así :

    A tu contenedor principal, le pones = display: flex ; Justifiy-content : center

    La segunda propiedad te da muchas más opciones, puede ser space-between si quieres que se separen a los largo del contener, o space-around para separarlos copando mejor los espacios, entre otras. También puedes organizar todo lo que está dentro del contenedor principal en formal de columna o filas. Es una gran herramienta para explorar

    Es si, tengo cuidado en no usar mucho el margin para posicionar elementos. Es mejor usar en el width : vw, o sino el rem. Son más responsive y se adaptan mejor a diferentes tamaños de pantallas.

    Espero te haya sido algo útil

    Saludos!!

  • rlboogey•30
    @rlboogey
    Submitted over 1 year ago

    Stats Preview Card

    1
    Juan Camilo Botero•970
    @jcbotero
    Posted over 1 year ago

    Hi rlboogey!. Nice code!. If you don't mind I would like to make a suggestion. I think you forgot to do the background effect to the main image. You can achieve this in your css sheet like this:

    .img { mix-blend-mode: multiply; opacity: 0.8; }

    In this way, the image achieves the violet color that the challenge asks us for.

    If you think this helped you, please mark the comment as helpful. Thank you!

  • Mehmet Ali Meşe•130
    @mehalimes
    Submitted over 1 year ago

    Stats Preview Card Component

    #accessibility
    1
    Juan Camilo Botero•970
    @jcbotero
    Posted over 1 year ago

    Hi Mehmet!. Nice code!. If you don't mind I would like to make a suggestion. I think you forgot to do the background effect to the main image. You can achieve this in your css sheet like this:

    .img { mix-blend-mode: multiply; opacity: 0.8; }

    In this way, the image achieves the violet color that the challenge asks us for.

    If you think this helped you, please mark the comment as helpful. Thank you!

    Marked as helpful
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

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