Submitted
Apah
@apah-dev
All solutions
Submitted
Submitted
Submitted
Submitted
Submitted
Order Summary Using Flexbox
- HTML
- CSS
Submitted
Improvements to the code are always welcomed
Submitted
Hello Guys
My only challenge in this project was placing the bg-pattern-bottom and bg-pattern-top in the top left corner and bottom right corner of the body background respectively.
I tried using background-position: left top, right bottom I also tried using the transform: translate option but it never seemed to get it in the exact position as the project.
The first option was using background-image and trying to position it.
background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg); background-repeat: no-repeat, no-repeat; background-size: contain, contain; background-position: left top, right bottom; }
The second thing i tried was using the img to place the images in the body and using transform to try and position them.
.bg-top { transform: translate(-60%, -60%); } .bg-bottom { transform: translate(60%, 60%); }
Any help toward solving this would be greatly appreciated.
Submitted
I've been having trouble turning the color of the equilibrium image to cyan using bgcolor on the div or the img element in the active hover state. Searching the internet wasn't much help but i'll keep searching. Meanwhile anyone who has a solution to that please feel free to share.
Submitted
Any help toward improving my code is highly welcomed! Thank you
Submitted
I'm still not comfortable with using min-width instead of max-width in media queries hence i haven't yet started using the Mobile first approach for my websites. Would love any advice on that too.
Submitted
Still learning about how to eliminate unwanted spaces in the body element for a centralized item within it like this card in media query when trying to make it responsive for mobile
Submitted
I'd love to know how to perfectly use the background-image gradient property to make it look just like the project. Especially for the circular button holding the result. And also on how to decide whether the main or the body should be a flex.
I'd love any advice also to better deal with problems in the code.
Submitted
Made the following changes to better my code and make it more responsive.
-
Used a flex box for the body to align all elements to the center without having to mess with the width and height.
-
Used a flex box for the main container div to align elements in columns and center too.
-
Used the recommended fonts and colors in the style guide
-