I need two separate codes written in HTML and CSS and inside only ( is still available):
1. Pinterest styles pin board. Containers sorted in columns, like pins, that contain image, text or both, each pin has its own height and the next pin starts right after the previous one. Responsive in a way that the smaller the screen, the less pin columns there will be and vice-versa, with a minimum of 1 column and a maximum of 5 columns.
2. Simple containers layout where there is a container which in it there are three containers, one is 50% of width and 100% of height and placed on the left and two are 50% height and 50% width and are place one above another on the right. All responsive in a way that the smaller the screen, the smaller the content (images and text) will be, with a configurable minimum size values.
The code should be compatible with eBay's item listing HTML environment. I think eBay only allows HTML and CSS so it should be done without any JS or external files and the CSS should be inside tag at the beginning of the code and not in a separate file or section like because eBay allow only naked code into the listing and not a whole structure.
The code should be neat, clean and easy to edit by me. I know the basics of HTML and CSS and I will need a short brief about how to work with it after it is ready. The things I will want to edit are: images, text, image sizes, fonts, number of containers/pins and an option to configure a fixed width and columns number and padding and gap values of and between pins.