Hi guys,
This was my first attempt at creating a mobile-first site. I specifically struggled with the use of box-shadow on the button and the responsiveness of the desktop design.
If anybody can suggest improvements within these areas or just my code in general then I would be extremely grateful! Thank you for your time.
John :)
It seems you don't fix your details section, and other 2 buttons. You can try these code on your codding. //for details section display: flex; justify-content: center; background-color: #EEE; padding: 1.5rem; border-radius: 3%; width: 80%; margin: 0 auto;
//for proceed box-shadow: 0px 5px 5px rgba(0, 0, 0, .25);
//for cancel order background-color: inherit;
You don't add background images. You can add background image easily by adding this path= body{background-image: url(./images/pattern-background-desktop.svg)}
You are adding your images like this (( <img class="card_img" src="./images/image-equilibrium.jpg" alt="image-equilibrium">".)) But this is not the way of adding images. You can add images by using this path "images/image-equilibrium.jpg.
It seems you're not adding a box shadow. By adding box shadow, you can make this card beautiful.
It seems you are adding margin instead of adding padding and box-shadow. You should add some padding and box-shadow so that it looks great.
