Skip to content
OverviewSolutions
43
Comments
4

pierre-pellegrino

@pierre-pellegrino970 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • pierre-pellegrino•970
    @pierre-pellegrino

    Hey, it looks nice, great job 😊

    I just finished mine and struggled on the same thing, in fact it is pretty easy to fix :

    Give your header a high z-index and a position :

    header {
position: relative;
z-index: 10

    Give your img a positive z-index below 10, and remove overflow: hidden from your #home section.

    I tried on your project, it works like a charm.

    Keep it up ! 👌

    Marked as helpful
  • pierre-pellegrino•970
    @pierre-pellegrino

    Hey, great job it looks really good !

    I don't think I did it the best way but I just made a second menu that only displays when you click on the hamburger icon.

    Keep it up !

  • pierre-pellegrino•970
    @pierre-pellegrino

    Hey, it looks nice ! I'm kind of a newbie and I don't know SCSS but I did it another way with my fonts :

    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600&display=swap" rel="stylesheet"> in my HTML file.

    h1, p {
  font-family: 'Josefin Sans', sans-serif;
}

    And this in my CSS, and you can just change the font-weight as you wish for each.

    I don't know if it is a better way but it is a bit shorter. Good job !

  • pierre-pellegrino•970
    @pierre-pellegrino

    Hey, This is looking great !

    First issue, you forgot to include 'images' folder on your Github repo, that's why it's not showing. :)

    For adding color to the picture, I did something a bit different than you : I created an empty div in my html called <div class="bg-img">, and added this in my css :

    .bg-img {
  background-image: linear-gradient( rgba(79, 2, 137, 0.6), rgba(79, 2, 137, 0.6) ), url('images/image-header-desktop.jpg');
  background-size: cover;
}

    It ends up with a filter of rgba(79, 2, 137) (violet) color to apply on my picture with an opacity of 0.6. I don't know if it's the best way of doing it but I think it does the job pretty well.

    Good luck and happy coding !