How to optimize a section in HTML/CSS [closed]

Question

How to set in HTML/CSS a section just like in this picture https://snag.gy/mStL9H.jpg ? I have tried something but am not sure if it's right.

#trd-banner{
    background-color:#284c57;
    width:100%;
    height:50%;
    margin:auto;
}
#list{
    position:relative;
	left:110px;
	top:1px;
	width:200px;
	height:150px;
    margin:0px 15px 15px 0px;
}
#list img{
    margin:0px 50px 50px 15px;
}
#prah {
    position:right;
	right:610px;
	top:180px;
	width:240px;
	height:171px;
    margin:0px 0px 15px 15px;
}
#prah img{
    float:right;
    
}

    

<div id="trd-banner">
        <div class="wrapper">
            <div id="list">
        <img src="images/list.png" height="300" width="300">
            </div>
            <div  id="tekst">
                <p style="color:#fff;font-family:Fauna One">Unsere Zeolithprodukte sind reine Naturprodukte.</p>
                <p style="color:#fff;font-family:Fauna One">Sie bestehen zu 100% aus Zeolith mit einem hohen</p>
                <p style="color:#fff;font-family:Fauna One">Klinoptilolithanteil.</p><br>
                <p style="color:#fff;font-family:Fauna One">Das Produkt wurde von uns selbst 2 Jahre lang getestet,</p>
                <p style="color:#fff;font-family:Fauna One">bevor wir auf die Idee kamen, dass wir allen Menschen </p>
                <p style="color:#fff;font-family:Fauna One">diese Freude übermitteln wollen, dieses überwältigende </p>
                <p style="color:#fff;font-family:Fauna One">positive Gefühl von dessen Wirkung.</p><br>
                <p style="color:#fff;font-family:Fauna One">Da wir viel auf Reisen sind, nehmen wir Zeolith überall mit.</p>
                <p style="color:#fff;font-family:Fauna One">Für uns ist es das Wichtigste, etwas worauf man nicht</p>
                <p style="color:#fff;font-family:Fauna One">vergessen darf.</p><br>
                <p style="color:#fff;font-family:Fauna One">
Deswegen wollen wir, dass jeder der Zeolith probieren will,</p>
                <p style="color:#fff;font-family:Fauna One">sich auch ein Produkt von hochwertiger Qualität leisten kann. </p><br>
                <p style="color:#fff;font-family:Fauna One">In Liebe und Respekt,</p>
                <p style="color:#fff;font-family:Fauna One">Ihre ZeolithFit Familie</p>
            </div>
            <div id="prah">
                <img src="images/Prah.png" width="200" height="200">
            </div>
        </div>
        
    </div>

Answer 1

            <div  id="tekst">
                <p style="color:#fff;font-family:Fauna One">

You could add a new CSS style

#tekst p {
    color: #ffffff;
    font-family: Fauna One
}

I changed the color from #fff to #ffffff for consistency's sake. You use the longer form elsewhere. Might as well use it here too. You should also probably declare a more common font-family as a backup. An example from this page: font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif

Then you could just say

            <div  id="tekst">
                <p>

with identical effect.

Obviously this saves a lot of characters in the source, but that's not the real advantage. When you put the style information in the HTML like that, it overrides what the CSS says. Which means that you can't change it in the CSS, not even locally. So someone with atypical vision may have a local override avoiding certain colors to increase contrast, but this would win out and show your choice. This can be a legal problem in some places as it can run up against laws intended to improve accessibility for the disabled.

This also means that you can change the appearance of every paragraph by changing one CSS style. Much simpler!

Answer 2

If you write this by hand you should pay attention to consistent indentation and such as well because it makes things much easier to read.

The IDs "tekst" and "prah" are a bit opaque, I assume that the first one should really be "text" instead.

The major complaint I have is the repetition of the style for each and every line of text. That should be moved to the surrounding div so that it applies to all subelements instead. Also, you should probably make sure that you supply some fallback fonts in case this one can't be loaded.

The <br>s at the end of some lines shouldn't be necessary. If you want a force empty line maybe move each block of paragraphs into their own div and control it via that. The fact that you're manually doing line breaks is obviously a problem. It would be much better in terms of organisation if you just have five or six paragraphs with all the text and then control text flow by setting the boundaries of the surrounding box. You don't have any hyphenation, so that too is no excuse. N.b. take a look at how the formatting looks in different screen sizes as well as on mobile screens (i.e. using the inspector and emulating a smaller screen).

Having additional divs for the images is maybe not needed? But then again, it's really up to the CSS how that works out in the end.