Looking to hire developers?
@pierre-pellegrino
@yasserbaragh
Submitted
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.
@pierre-pellegrino
Posted
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
@foolhardy21
Submitted
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!
@pierre-pellegrino
Posted
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 !
@Alex-AR-LR
Submitted
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
@pierre-pellegrino
Posted
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 !
@maddy1381
Submitted
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.
@pierre-pellegrino
Posted
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 !