Skip to content
OverviewSolutions
12
Comments
15
Siddhesh Kamble
@Sk7867

All comments

  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    Hi ANDREW GRADY, There's a small problem with all the href in your HTML code.

    1. In your stylesheet link in head it should be ./style.css due to one missing . it is not linking to your stylesheet.

    2. Your svg icons are not in images folder on github so remove ./images/ just keep ./icons-sedans.svg or icons-sedans.svg in href.

    3. Add border-radius to your container or individual divs according to design.

    Happy Coding!!

    0
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    Hi Michelle, It looks good on desktop but in mobile view and tablet view, 3rd section is not visible, in body put min-height: 100vh instead of height: 100vh and padding-top: 20px or any value you like so it doesn't stick to the top in mobile view.

    Marked as helpful
    1
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    Hi LESTER NIEL FONG, Add <div class="overlay> inside img like this:

    <div class="card image">
      <div class="overlay"></div>
      </div>

    and give following properties to overlay:

    background-color: rgba(153, 53, 216, 0.6);
  height: 400px;
  border-radius: 10px 10px 0 0;

    Happy Coding!!

    Marked as helpful
    0
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    Hi JEFFREY IZELAAR, You need to change mobile breakpoint, keep it around 768px, 376 px is kind of wrong. 768px is tablet width. It looks good in all views.

    The font design seems similar.

    0
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    Hi KASHYAP PANDYA, Along with what @Thulani Gamteni suggested, add margin: 20px or any value to section in mobile and tablet view, that way your section won't take the whole screen in those views.

    0
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    Hi Bodgan, In your .main-div keep margin: 50px auto, it will give fixed top/bottom margin as 50px.

    For the first HTML validation error put <!DOCTYPE html> at the very start of your HTML code, for others I recommend removing the role attribute.

    Happy Coding!!

    Marked as helpful
    0
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    The frontend mentor clone looks great!😃 Fix height problem with container and make it more responsive.

    0
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    Make image purple by wrapping overlay inside image, like this:

    <div class="card image">
      <div class="overlay"></div>
</div>

.image {
    background: url(images/image-header-desktop.jpg) no-repeat center/cover;
    min-width: 50%;
    border-radius: 0 10px 10px 0;

background-color: hsla(277, 64%, 61%, 0.6);
    height: 400px;
    border-radius: 0 10px 10px 0;

    By setting image through CSS you can change images using media queries. The above .image class is for laptop view. for mobile view:

    background: url(images/image-header-mobile.jpg) no-repeat center/cover;
    height: 400px;
    border-radius: 10px 10px 0 0;
}

    This way you won't have to give two <img> instead use one and change background: url().

    Also don't use body as your container, instead have separate <div class="container"> inside body.

    I hope this helps you, Happy Coding! 😄

    Marked as helpful
    1
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    Hello Deepthi-Ramesh 👋, Your solution great and is responsive on mobile and desktop view but it breaks at tablet view i.e. width: 768px to 1000px. I suggest keeping width fixed or using min-width or max-width property to prevent it from shrinking or expanding too much as width of screen changes.

    Also give box-shadow: 0px 8px 15px rgb(0 0 0 / 10%) effect to button so it pops up a bit. You can also mess with hover effects. Happy Codding😁

    Marked as helpful
    0
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    Hi @Nene16👋 You did a great job with flex-box, It looks and works well. But as @Josiah Mokobo said using grid would save a lot of time and effort. I would suggest playing with css hover effects to make it more cool, Happy Codding😁

    0
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    Hello BrendaMichellle 👋 There's a small problem with your HTML code. Start your img src link with ./images and so on. Because of single ( . ) both of your images are not accessible. Also your solution says 404 in image, when submitting live site link pass it with index.html file like this: "https://brendamichellle.github.io/profileCardComponent/index.html So others can access properly. It looks great once you fix those. Happy Codding!😁

    1
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    Looks good on desktop, as @Amanpatil-Dev said try mobile-first approach. Also in your HTML code on line 69 there h6 tav class name issue.

    0
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    It looks good but needs some fine-tuning as palgramming said. I would like to point that you missed box-shadow effect on bottom boxes and right box.

    2
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    It looks great, but there is some issue with the navbar hover. The dropdown list is visible even before you take pointer over text or button. Keeping pointer well below the text also triggers the hover effect. I suggest keeping hover effect on para tag instead of ul or giving different height value for ul. Fixed height for header is also being considered for ul. Plus button font seems a bit bolder in design, you should try increasing font-weight.

    Marked as helpful
    0
  • Siddhesh Kamble•350
    @Sk7867Posted almost 4 years ago

    It is well written, but there are some spelling mistakes. Your solution on the website and solution image here seems different, look at the right side of the solution image. remove space in img tag. Your solution is not mobile-friendly. Use media queries to make it mobile-friendly.

    0