Moin,
Wie im Bild zu sehen sind beider Blöcke gleich. Ich würde gerne den unteren Block tauschen. Sprich das Bild nach rechts und die 2 Textblöcke nach links. Der Text in den Textblöcken soll dann rechts ausgerichtet werden.
Der folgende Code sieht nach einer Art „Template“ aus, die in Deinem Beispiel zweimal verwendet wird. Damit die unterschiedlich sind, musst Du
- entweder zwei Templates daraus machen, die Du verwendest,
- oder mit CSS die Reihenfolge tauschen; @Rolf B hat dazu schon einen Tipp in Richtung CSS gegeben.
Unabhängig davon möchte dieser Code aufgeräumt und modernisiert werden:
<!-- ABOUT ME2 --> <section id="about" class="block-section">
Eine ID muss – das sagt schon der Name – eindeutig sein. Sofern das Template nicht noch irgendwie verarbeitet wird, gibt es in Deinem Beispiel anschließend zwei Sections mit der gleichen ID.
<div class="clearfix my-profile">
Dieses div
ist das einzige Kind der section
, d.h. es ist sehr wahrscheinlich überflüssig.
<div class="my-pict" > <div class="overfly"> <div class="text-botttom"> <h2 class="text-uppercase color-dark text-bold">Mister Mustermann</h2> </div> </div> </div>
Hierzu fällt mit das Zitat #2613 ein.
<div class="my-desc"> <div class="bg-secondary clearfix"> <div class="inner-text"> <p >Gemeinsam möchten wir dazu beitragen, dass sich jeder Tag für unsere Kunden besser anfühlt. Wir glauben daran, dass wahre Schönheit von innen kommt und dass ein gepflegtes Äußeres das Selbstbewusstsein stärkt. Deshalb nehmen wir uns die Zeit, zuzuhören und auf die Wünsche jedes Einzelnen einzugehen. Unser Ziel ist es, eine Atmosphäre zu schaffen, in der sich jeder wohl und verstanden fühlt. Ob bei einer Beratung, Behandlung oder einfach nur beim Austausch – wir möchten, dass unsere Kunden sich bei uns gut aufgehoben und inspiriert fühlen. Denn nur so können wir gemeinsam das Beste aus jedem Menschen herausholen und ihn auf seinem individuellen Weg begleiten.</p> </div> </div>
Noch mehr Matroschka-Code … Ist das dort eigentlich Dein Text oder ein Beispiel?
<div class="bg-dark clearfix"> <div class="inner-text"> <p class="no-margin color-light "> <strong class="fix-width-100"><i class="fa fa-calendar margin-right-5"></i> Geburtstag</strong> : 29.08.1978<br/> <strong class="fix-width-100"><i class="fa fa-phone margin-right-5"></i> Telefon</strong> : +49 176 311 62 930<br/> <strong class="fix-width-100"><i class="fa fa-envelope margin-right-5"></i> E-Mail</strong> : mustermann@example.com<br/> <!--<strong class="fix-width-100"><i class="fa fa-location-arrow margin-right-5"></i> Adresse</strong> : 1234 Jalan Road, Fake City, IS 421 123.<--><br/> </p> </div> </div>
Mir scheint, dass dieser Text gerne eine Liste sein möchte (vielleichte eine dl
). Dann kannst Du auch die Icons per CSS an die gewünschte Stelle generieren lassen ohne das i
-Element von Font [not really] Awesome missbrauchen zu lassen. „Bei dem Aufwasch“ können dann auch die Leerzeichen vor den Doppelpunkten entfernt und eventuell Telefonnummer und Email verlinkt werden.
Interessant ist übrigens, dass die Adresse eine „Fake City“ angibt, die Email-Adresse allerdings anscheinend nicht.
</div> </div> </section><!-- END ABOUT ME2 -->
Habt vielen Dank
Wofür auch immer 😉
Viele Grüße
Robert