@AhmadHamido
@wojocode
Submitted
Hi, my first mobile-first design. I used flex-box technology. I tried to used align-self for first and last card to center it in the container but it didn't work and finally I positioned it by using transform translate Y 50%. Maybe you guys know how to do it, or this is only possible with grid ? cheers ! Wojtek
@AhmadHamido
Posted
Hello Wojtek. -First, I would like to tell you that you did a really good job with your layout. -Second, I don't know if you have studied grid yet or have enough knowledge about it, but I would recommend you doing the layout using grid, because first it would allow you to write way less code, and second, it would be easier to place stuff in your layout. -Third, I would do something like this:
.sub-container {
max-width: 1000px;
display: grid;
grid-template: repeat(12, 30px) / repeat(3, 1fr);
grid-column-gap: 20px;
}
.box-1 {
grid-column: 1;
grid-row: 5 / span 8;
}
.box-2 {
grid-column: 2;
grid-row: span 8;
}
.box-3 {
grid-column: 2;
grid-row: 9 / span 8;
}
.box-4 {
grid-column: 3;
grid-row: 5 / span 8;
}
I hope this would help. Happy coding! :D
@Soytto
Submitted
Could be better, could be worse...
What do you think about this one and what can I do to improve my code ? I struggle with hover effect on icons in the footer tag, don't know how to do it.
Any feedback are always good !
@AhmadHamido
Posted
Hello Soytto, first I want to tell you that your layout looks really nice, and as for the hover effect on the icons, you can do something like this: .icon a:hover, .icon a:active { filter: invert(59%) sepia(68%) saturate(463%) hue-rotate(122deg) brightness(91%) contrast(86%); }
This should do the work, I did it like this. Worst case scenario, put "img" instead of "a". Hope this helps, and happy coding!
Marked as helpful
@Oluwatosin0
Submitted
I had challenges in getting this result All corrections are welcome Thank you
@AhmadHamido
Posted
-Your design looks REALLY good! By the way, I don't know if you have started grid or not yet, but personally I would do this in grid. I found it so easy to position stuff on the page, even though learning grid is a bit challenging in the beginning, but once you practice on it, it would be a great help. I studied flexbox and grid on scrimba with the famous Kevin Powell, and I learned a lot from him. I also used this website in my free time as a practice on my flexbox and grid skills, so feel free to try it out (https://mastery.games/)
-Oh and btw you could also do is using the "em" unit for border, padding, and margin, and the "rem" unit for the font sizes.
Marked as helpful
