Hi,
6 <article> in jedem Article gibt es eine <h2> für den Titel und ein <p> für den Inhalt. Das Bild (später Font Icon) und dem Kreis hmm gute Frage, vielleicht in ein eigenes <div>?
wieso ein extra div für das Bild? Ich würde es in der jeweiligen Überschrift als Hintergrundbild setzen. Die Ausrichtung der Überschrift (h2) und des Textes (p) mit etwas margin und/oder padding im jeweiligen Container abstimmen.
Ob article hier das richtige Element ist, kann ich nicht sagen, da sich mir die Semantik von HTML 5 in weiten Bereichen noch nicht erschließt.
Im responsiven soll es später so sein, dass je nachdem wie groß der Platz ist, die Blöcke sich umbrechen bis später irgendwann nur einer pro Zeile steht. Vielleicht kann ich hier auch Flex-Box verwenden?
Es könnte auch viel einfacher gehen: Die einzelnen Blöcke als inline-Block formatieren. Dann ergibt sich das mit dem Umbruch je nach verfügbarer Breite von selbst. Eventuell für das übergeordnete Element ein max-width setzen.
So long,
Martin
Logik ist die Theorie, Chaos die Praxis.