Submitted
gomezlucas
@gomezlucas
All solutions
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
Submitted
I'd like to ask about the background figures. What i did was set up a div with an absolute position, and then moved it around. Like this: .header-figure { background: var(--softBlue); position: absolute; bottom: -18px; right: 0; width: 40%; height: 55%; border-top-left-radius: 40%; border-bottom-left-radius: 40%; z-index: -1;
any other or better option? thanks!
Submitted
I m not sure about the strategy i used to set the sizes in the body and in the item to made them responsive. Is there a better way?
body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
.main-header { min-height: 80vh; width: 50%; margin: 0 auto; display: grid; grid-template-areas: "title title" "price info"; grid-template-rows: 45% 55%; grid-template-columns: 50% 50%; }
Submitted
I thought this one was going to be quite easy, but I found it very challenging. The main issue was the image, I didnt want to set it as a background image but use the <img> tag instead, so I struggle to set the size for the responsive design. Even though I came up with a solution I am not 100% happy with it, so if anybody has a better idea or any advice to set the property to images in general just let me know. Thanks! :)
*/container .hero-imagen { height: 100vh; width: 100%; overflow: hidden; }
/*image .hero-imagen-xl { width: 100%; height: 100%; object-fit: cover; }
Submitted
Submitted
Clipboard landing page
- HTML
- CSS
Submitted
Submitted
Submitted