best way to implement for responsibility
hey! :) I need someone to tell me, whats the best and correct way to recreate this image
6 Replies
im working on website for my sister and she sent me her idea, which i have to recreate
i have no idea what would be the best way to create this, when it comes to responsibility
i've used chat gpt and it gave me idea to make two separate "layouts" one for pc screens and one for mobile. is it good approach when it comes to SEO?
that is terrible advice from ChatGPT, which is honestly expected
use grid and a media query for different sizes of display
i just dont know how to achieve it thru grid, because of the different sizes of the images
i mean the few pixels difference. for example the one on the top right, its bigger to the top and right
Isn’t that just image elements, and for the different sizes don’t u have to adjust them through a photo editor? And use css to position them? Sorry but I’m still new
And for the bottom left words isn’t that just a paragraph element with css styles border? And padding?
She would also have to send u the image files
1. Do a parent with flex/grid. It shall contain 2 children (effectively the columns), each with some padding, etc., apply gap to give tyhem some space betweeen.
2. The children will be flex or grid too for an easier placement of their content.
3. First child div shall contain the image and cta, the other the two images.
4. Utlize media queries to put the two columns side by side on wider screens
5. The images shall be set with width:100%, their height will adjust automatically (or set height:auto).
https://codepen.io/Ghloo/pen/GRLRgdj
xddd
thanks, ill try it