@konji85
Posted
generally the design is ok . you can make it even better. my first notice that you made all the borders rounded. you could select any corner you wanted and set the border radius. for example:
border-top-left-radius: 10px;
border-top-right-radius: 10px;
for the mobile design it is ok. when changing the width the ratio between the image and the content is not as shown in the design. one option is to set the containers: .text and .images widths to 50% for each
.text{width:50%;}
.images{width:50%;}
and then adjust the elements inside it to the suitable ratio
another option which i think is better is to change the display to grid
main{
display:grid;
grid-template-columns: repeat(2,1fr);
}
this will split the main container into two columns with the same width.then set the images container to fit in the grid width (width:100% and height:100%) and finally set the image and the alternative image to
height:100%;
max-width:100%;
i hope this could help in making some changes and i wish you happy journey
Marked as helpful
