Hello Together
I would like to create the following design in bootstrap studio:
Column with an image inside. In this colum then another colum, which is only 2 columns wide, and has 10 columns offset, and is aligned in the bottom right of the colum above.
Who can help with this? How do I set this up without generating a lot of new code?
Here is an Example:
Sounds like you already know what it is you want to do, go in and give it a shot and play with it some. Run the tutorials to get familar with the app and then give it some tries and see. If that don’t work there are many designers here that would take on the job for a price, after all that’s what most of us do for a living.
Lots of us here could do this, and there are numerous ways to do it, but unless you just want it to look exactly like this, the WAY it would be created would largely depend on how you want the layout to behave as the screen size changes.
Obviously, this layout will have to be different on a phone vs a desktop, but this is why developers learn to code, and why we get paid to create websites to respond the way the customer wants.
Trying to do this without writing any code at all would be difficult, and what’s of more importance is that it could be done quickly and easily BY simply writing the correct code.
Also, putting an image inside a column and then having a second column overlap the first one with the image is completely the wrong way to go about this. The correct way would be to make the image the background of the parent container, and then either use flexbox to position the row and column inside the container, or just create an absolute positioned div with a white background and the text and arrow inside it.
I could do this in about an hour (which would include getting the original graphic of the winery, identifying the fonts used, and creating that unusual arrow as an svg object.)
I do take PayPal 
@rumede
Two divs and it’s done in two minutes
https://rumede.bss.design/
You work too slow 
, it took me two minutes
I know you’re just joking about, but did you find that exact same picture of the weingut-eulenmuehle winery, and do you know the names of the exact two fonts being used? Did you create an identical arrow to the one in the sample picture?
When I say I could create it, I mean recreate an EXACT duplication.
@kuligaposten You are VERY GOOD, but here’s the exact image, enlarged and cropped to the same dimensions as the OP’s sample and and optimized for file size.
The fonts in your list are wrong. The serif font is actually the Google font Playfair Display (ever so slightly different from Libre Baskerville, but you can see the serif on the top of the lower case “L” in the two fonts are different.) The sans serif font is definitely not Raleway. It is the Google font Karla.
I opted to create an .svg file for the arrow,
https://thelightwavegroup.com/arrow/arrow.svg
because it will scale cleanly at all sizes, and since the OP did not specify the intended behavior of the box with the copy, I accounted for the possibility that it might be enlarged to a very large monitor, in which case a png would become pixelated, while an SVG would remain crisp.
Your move 
In fairness the op only showed that as an example of what was to be achieved 
Agreed. Kuli and I are just playing around… virtually “one-upping” each other. It’s all in jest.
Hello all
Wow, thank you, always impressive how quickly and professionally answered here and also helped. I know you all earn nothing from it and do it out of pure conviction. That is really remarkable.
It was not the opinion that you all try to rebuild the same, and my example should actually only show in which direction I want to go, it should not be a 1:1 replica. Next time I will try it with a mockup.
Thanks anyway I’m really excited and will probably use @kuligaposten’s base.
One final question of an organizational nature, how do I “close” a post so you all know it’s taken care of?
@kuligaposten
Is it possible that you can me send the styles.min.css of your Example? So i dont have to create it with all the media-querries?
