@gizemnkorkmaz
Latest comments
- @DEmanderbag
Hey Gizem,
Your code looks clean and good love the use of SCSS and BEM.
I've noticed one thing that you can change for future projects. When you are creating a tags try using
<a href="#"></a>. This is a common practice for links that don't go anywhere like in this case.Your current solution is reloading the page every time you click the link, this is not a problem because the page is small and you don't even notice it.
Happy coding.
- @AthreyaG4@DEmanderbag
Hello Athreya, great solution.
Because this challenge is a component you would usually not use the footer here. Footer is used mostly for copyright data or for some useful links.
I would also look into removing the onclick event from HTML and instead of that move everything to JS. Your approach is not wrong but I think by using document.queryselector you can target any element on the page right from the JS so you can keep your HTML code separated from JS code. Most of the time it's a good idea to have everything related to JavaScript in a JavaScript file. If your code is larger, it would become much harder to follow.
Keep on coding ^^
Marked as helpful - @Pia007@DEmanderbag
Hey Pia, great solution. I really love the use of CSS custom properties.
Your solution has an image with the space at the bottom that is there because the image tag is an inline element. To remove it all you need to do is to put a display block on the image or in your class on the class group.
The code looks clean and readable I really don't have anything else to add.
Keep on coding ^^
- @nass84@DEmanderbag
Hey Becki, to align something horizontally you can use margin: 0 on top and bottom and auto on left and right.
You have a couple of options here:
- Try looking into Flexbox where you will be able to align it to center horizontally and vertically
- Or check CSS Grid
In any of these two cases, you will need to put a min-height of 100vh on your parent element in your case body after that you will need a display of flex or grid on your body as well.
- @soransh-singh@DEmanderbag
Hey, Soransh great submission.
This is what I would change. Your tablet/desktop view is not full screen. With your current code as it is try adding display flex on the body element with flex-direction column and with justify-content and align-items center.
The image is also creating some space at the bottom and in other to resolve that you can use width and height on an image tag of 100% so it can grow as much as the parent element in your case div with a class of image. But after that image can look distorted and in other to resolve that you can use
object-fit: coveragain on the same image tag.Would suggest checking Perfectly Sized Images
