Skip to content
OverviewSolutions
5
Comments
56
Renszo Camacho
@RenszCamacho

All comments

  • Renszo Camacho•1,615
    @RenszCamacho

    Hiya 👋🏻 moibrahem98.

    Good job mate 👏👏👏. You have done a fantastic job on this challenge 👌, place properly the background image is quite tricky.

    Just a few suggestions IMHO.

    • Add an alternative text to your images. <img class="person" src="images/image-victor.jpg" alt="victor" />

    • I would add a CSS reset, to avoid some annoying margins.

    * { margin: 0; padding: 0; box-sizing: border-box; }

    • To place the background-images:

    body { background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg); background-position: right 50vw bottom 50vh, left 50vw top 50vh; background-repeat: no-repeat; background-color: hsl(185, 75%, 39%); display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; }

    • To center the card.

    .card__body { width: inherit; height: inherit; display: flex; justify-content: center; align-items: center; }

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hello, 👋🏻 RamosNico.

    Well done my man, in your first challenge 👏👏👏. Lovely job on this challenge, place properly the background image is quite tricky or at least it was for me.

    I've been digging into your code. And this is how I would do it.

    • I would delete the images from the Html. and places it in the Css.

    body { background-color: #19a2ae; background-repeat: no-repeat; font-family: "Kumbh Sans", sans-serif; background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg); background-repeat: no-repeat, no-repeat; background-position: right 50vw bottom 50vh, left 50vw top 50vh; }

    Regarding the alignment of the card's footer with the main body, I see it well. They have a display: flex. justify-content: space-evenly.

    I hope, it helps. Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hello, 👋🏻 edshuli. Well done my friend 👏👏👏. Lovely job on this challenge, place properly the background image is quite tricky.

    Just a suggestion in my humble newbie opinion. 😊

    I've been checking your code, I would approach that, like so.

    • I think you can avoid those media queries. Having a wrapper, wrap card, and card-bottom, and in your CSS, I would do this to center the card.

    .wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; }

    • It would still not be fully centered, so you have to remove the margins from the card.

    • To position the background-images properly and make them responsive, I would do this on your CSS body.

    background-position: right 50vw bottom 50vh, left 50vw top 50vh;

    • Add an alternative text to your images.

    <img src="/images/image-victor.jpg" alt="victor crest">

    • The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). And you have more than one with the same name.

    I hope, it helps.

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hi, do-Va.

    There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

    I recommend you, learn BEM too, it will make your life easier. You can check this video. You Probably Need BEM CSS in Your Life (Tutorial) or check the BEM website about naming Naming

    I hope, it helps.

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hiya 👋🏻 RizkyFirman.

    Good job mate 👏👏👏. You have done a fantastic job on this challenge 👌, I like the animation cards and it’s very responsive 💯.

    I have been digging into your code, you have used css-grid. Cool.

    You have a horizontal scroll on a small and medium screen. I would put on the body an overflow: hidden to fix that.

    You got many <div>. Just a suggestion in my humble newbie opinion. 😊

    • You could have a <main> tag involving your code. The <main> element represents the dominant content of the <body> of a document.

    • Your cards could be <article> instead of just <div>

    I hope, it helps.

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hi, harsh.

    I've been digging into your code. And this is how I would do it.

    • I would give your card width, height, and a box-shadow.

    .card-box { width: 353px; height: 376px; background-color: white; border-radius: 1rem; overflow: hidden; box-shadow: -30px 50px 50px #00000030; }

    • I would delete the images from the Html. and places it in the Css.

    • Now place the card in the center, so in the main it would do something like this.

    .main { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }

    • Finally to the body I would place the background-images.

    body { background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); background-repeat: no-repeat, no-repeat; background-position: right 52vw bottom 38vh, left 49vw top 51vh; }

    Hopefully, it helps.

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hello, 👋🏻 mohapatraanurag. Well done my friend 👏👏👏. Lovely job on this challenge, place properly the background image is quite tricky.

    Just a suggestion in my humble newbie opinion. 😊

    -I've been checking your code. And I would approach that, like so.

    -Try to remove all unnecessary comments.

    -Remove the bg-pattern from the Html, this way you avoid those Html issues. And in your sass file _global.scss I would place the bg images.

    body { background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-top.svg); background-repeat: no-repeat, no-repeat; background-position: right 52vw bottom 38vh, left 49vw top 51vh; }

    I know, there are many ways to place background properly, But that's how I solved it.

    I hope, it helps.

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hola, Ivet89. You have done a fantastic job on this challenge 👌, and it’s quite responsive 💯.

    You have used bootstrap 4. why not bootstrap 5.

    I have been checking your code, and you got many <div>. Just a suggestion in my humble newbie opinion. 😊

    • You could have a <main> tag involving your code. The <main> element represents the dominant content of the <body> of a document.

    • Your cards could be <article> instead of just <div>

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Good job mate 👏👏👏. You have done a fantastic job on this challenge 👌

    Just a suggestion in my humble newbie opinion. 😊

    It would be great some margin-bottom on the mobile version.

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hi 👋🏻 domihustinova. Well done 👏👏👏. You have done a fantastic job on this challenge 👌, I noticed that you did desktop-first, and it’s quite responsive 💯.

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hiya 👋🏻 yossefAlatter. Well done my friend 👏👏👏. You have done a fantastic job on this challenge 👌

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hi FilipHanzlik.

    Good job mate 👏👏👏. You have done a fantastic job on this challenge 👌, I like the animation background and it’s very responsive 💯.

    It took me a while to find the shadow's bug. 😊

    The issue is your layout and how you placed the backgrounds, what is above your cards.

    So to fix that just put a .bottom-background{ z-index: -10 }

    Hopefully, it helps.

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hiya 👋🏻 AlperMehmetOzdemir. Well done my friend 👏👏👏. You have done a fantastic job on this challenge 👌,I noticed that you did mobile-first, and it’s responsive 💯.

    I've been digging into your code, and I reckon, that removing the overflow: hidden from .hero .container { overflow-x: hidden; }

    You can fix that horrible scrollbar

    Hopefully, it helps.

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hiya 👋🏻 mariaUrda. Well done my friend 👏👏👏. You have done a fantastic job on this challenge 👌, and it’s responsive 💯.

    Just I few suggestions in my humble newbie opinion. 😊

    The backgrounds-images are not in place, at least not on my screen, so it looks good on all screens. I would give the body a min-height: 100vh

    Your user testimonial images are slightly big, I would do something like this:

    .card-bottom-picture { border-radius: 50%; width: 3rem; height: 3rem;

    Hopefully, it helps.

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hi, Eric. Well done.

    I have been checking your code and I have seen some issues.

    The first suggestion is that you do mobile-first. It's easier.

    Your layout looks weird. you have the footer in the middle of the screen. I think you can place all the items, just with flex-box. Although I have seen that you have used absolute position.

    Your images are broken, it is because you have set the path wrong, and for good practices, it would be great if you don't leave the alt="" empty at least in these cases.

    • The alt attribute holds a text description of the image, which isn't mandatory but is incredibly useful for accessibility — screen readers read this description out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot.

    This how Id solve it.

    <img src="./images/image-colton.jpg" alt="Colton Smith" />

    Hopefully, it helps.

    Happy coding, mate 🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hiya 👋🏻 luccaslopes88.

    Well done my friend 👏👏👏. You have done a fantastic job on this challenge 👌, I noticed that you did mobile-first, and it’s very responsive 💯.

    Happy coding🧑‍💻

  • Renszo Camacho•1,615
    @RenszCamacho

    Hello mate.

    You haven't placed the background-color and the background images, I just can see one. So I have gotten into your code and I did this to fix it. Check if that works for you too.

    .master-card-block { background-color: hsl(185, 75%, 39%); background-image: url("bg-pattern-top.svg"), url(./bg-pattern-bottom.svg); background-repeat: no-repeat; background-position: calc(100% - 50vw) calc(100% - 50vh), calc(0% + 50vw) calc(0% + 50vh); height: 100vh; }

    Greetings.

  • Renszo Camacho•1,615
    @RenszCamacho

    Hiya 👋🏻 benzrire.

    Good job mate 👏👏👏. You have done a fantastic job on this challenge 👌, I like the way how you sorted the backgrounds images out and it’s very responsive 💯.

    🚀Nice solution!!!! Keep coding🧑‍💻