All solutions

This was a fun and challenging project. Got more familiar with Grid, and used a little bit of JS to make it interactive. For some reason, hover and pointer: cursor were not working properly. I found out that the .hamburger-menu was causing this, not sure why, I commented that part out.

I managed to create a menu that pops up when you click on the hamburger menu, and making the background blurry & lowering the opacity. By using % instead of px it made the website more interactive and fun to play around with.

Unfortunately, the page is not centered in desktop mode, I believe it has to do with my grid formation. If you have any feedback on that, please let me know :)

What did you find difficult while building the project? -first time starting a project with mobile-first in mind, this gave me some issues when translating it to the desktop version

• Creating a proper grid layout in combination with flex

Fun little project that took longer than expected, it tested more mine flex and grid skills.

What did you find difficult while building the project?

• Figuring out how to approach this layout
• shifting elements slightly
• keep the top 2 text elements centered
• could not figure out how to duplicate the stars, so I added an icon font ("fa fa-star" ) instead

What did I learn? -how to combine flex with grid (the top part is in flex, the bottom part is displayed in grid)

• how to use the transform property to slightly shift elements on the X & Y -Experimenting with % instead of px, this makes the website more responsive

I'm open for feedback!

What did I learn?

• Learning how to use diplay: grid, grid-template-columns / rows (repeat)
• Using grid-column and grid-row for the necessary items in the container
• using float and clear: both
• Using position absolute and relative

What did I find difficult while building the project?

• Making the same layout for smaller screens, my simple solution was to just add @media and use flex-direction: column. Any feedback on solving this is welcome :)

A fun little project on which I tested my basic HTML and CSS skills. Started this project 1 year ago, feeling frustrated, and unfortunately gave up on it. Now I have a better understanding of how to go step by step to create something like this. The key element I've learned during this project is to keep a cool head when things aren't going your way and look things up if you don't know for certain.

What did I find Difficult?

• Display the card formation properly at screen size from 1110px to 740px.

Which Area of your code are you unsure of? -I used in the div 'container' 3 extra divs that represent columns in which the cards are displayed.

I'm open to feedback :)

Updated my CSS skills by using @media for smaller screens.

Getting a better grasp on using JS DOM. The main issue I ran into was figuring out when to type an email address to show it on the next page. When it worked, the solution was rather easy.

I'm happy to receive any feedback on this project :)

During my first try with this project, I did not follow a straight structure from top to bottom and was randomly adding stuff in the hopes it would work. This was especially at the JS part in which I was trying to use mouseover events. It got me stuck. When checking a video about this solution it gave me more clarity on how to approach this project better and solve the issues in CSS for example: hover, focus, and hidden. This made it a lot easier.

I also used the button element in HTML instead of creating custom buttons via div.

I learned the following: using 'hidden' in a class and changing display = none in CSS I can hide one part and show only the necessary part on the screen.

Better understanding using querySelector and getElementById. Using the method for.Each()

By changing the rate I can use textContent or innerHTML. By doing some research, textContent is more suitable here because it's only using plain text.

Fun challenge to experiment with flexbox more and making the website responsive on mobile phone. 2 main struggles I had with this one:

• when the screen got smaller horizontaly the buttons got pushed further down outside the frame of their own section.
• the footer pushed the container class to the left of the screen causing it not to be centered anymore,(luckily by using flex-direction column in "body" this solved the issue).

When researching regarding the "button" type, apparently flexbox can´t be used on it. Any advice how to tackle this one is welcoming. i saw you could also use grid for this. My default answer was using position absolute :).

Any other advice or tips are most appreciated!

Getting a better grasp of flexbox and first time using qmedia, which was not working at the beginning because of not using the proper @media screen and syntax. Also I forgot to implement flexbox in Qmedia.

When changing the height of my image in "body", the width automatically adjust as well so I could not get the image to get the right size on a smaller screen.

Any tips or advice on my css coding is welcoming!

This project was a fun way to experiment with flexbox. The issue I came across during this project was getting the background image to stretch fully. Theres a gap on the left and right. Any tips how to fix this issue?

Any other advice regarding my code would be also welcoming.

Q1. How can I implement the right layout display for mobile(375px) and destop (1440px)?

Q2. I used "position: absolute" for positioning my div and img classes. Is there a better way for positioning my divs and img? Because when I check the website on desktop and phone, the img and div are not displaying fully in the center.