Skip to content
OverviewSolutions
43
Comments
4
pierre-pellegrino
@pierre-pellegrino

All comments

  • Yasser•305
    @yasserbaraghSubmitted over 3 years ago

    Well this is my first design using sass, I had some issues and I would like you guys to give me feedback on how fix them. 1- I struggled with z-index in home section with the mockup img 2- I struggled to add the background image in sass so I had to do it with pure css

    thanks to everyone.

    Easybank landing page using sass and js vanilla

    1
    pierre-pellegrino•970
    @pierre-pellegrinoPosted over 3 years ago

    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
    0
  • Vinay•125
    @foolhardy21Submitted over 3 years ago

    Would love to know how I can display the navigation bar menu when I click the hamburger icon. Its confusing for me because the styling/formatting of this menu is different in different viewports. Thanks!

    HTML CSS JS

    1
    pierre-pellegrino•970
    @pierre-pellegrinoPosted over 3 years ago

    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 !

    0
  • E_X_E•295
    @Alex-AR-LRSubmitted over 3 years ago

    Is it necessary to use 3 @ font-face, 1 for each font weight considering that I use the same font? I hope you can answer me! Thank you

    Use SSCS

    1
    pierre-pellegrino•970
    @pierre-pellegrinoPosted over 3 years ago

    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 !

    0
  • Maddy•45
    @maddy1381Submitted over 3 years ago

    The project was great but I had some minor problems with adding color to the image. And I also don't know why the live site URL isn't working.

    Simple card using html and css.

    1
    pierre-pellegrino•970
    @pierre-pellegrinoPosted over 3 years ago

    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 !

    1