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 berwltigende </p>                <p style=color:#fff;font-family:Fauna One>positive Gefhl 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>Fr 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 Qualitt 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>
How to optimize a section in HTML/CSS
html;css
            <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-serifThen 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!  