Webdesign umsetzung

[Einfach Melissa]

Einen wunderschönen guten Abend,

ich könnte ein wenig Hilfe benötigen. Ich bin noch nicht so fit was HTML und CSS angeht. Im Web habe ich eine schöne Vorlage gefunden die mir eigentlich gefällt was aber nur zusammen mit einem CMS Design gibt. Dieses möchte ich nicht.

Hoffentlich darf ich einen Link hier posten? Sonst einfach bitte wieder löschen https://uaelementor.com/free-premium-elementor-templates/?=&portfolio=construction

Navigation und Aufmacher überspringen wir einfach mal weil mir diese zwei Bereich noch zu schwer sind. Vielleicht finde ich eine fertige Navigation inkl. Aufmacher.

Was mich interessiert ist der Über uns Abschnitt. Vom Aufbau dachte ich an folgendes Grundgerüst:

	<section id="about">
		<div class="left">
			<h2>Welcome To The Concrete Constructions</h2>
			<h3>Where We Build Your Visions</h3>
			<p>Write a warm welcoming message for visitors.You can mention all the benefits or services with some real examples. You can also state how you emphasize on their well being. This often shows your concern and increases the chances of conversion. </p>
			<p>Tell people a little more to attract.You can mention some contact details as shown below to get in touch with visitors.</p>
			<a href="tel:[phone]">040 - 0000000</a>
		</div>
		<div class="right">
			<img src="" alt="">
		</div>
	</section>

Passt dieses und könnte man den Ramen um das Bild inkl. dem Text links davon etwa ohne extra Grafik machen vielleicht mit einem Border? Im Mobilen Bereich kann dieser komplett verschwinden.

Ich bedanke mich bereits im Voraus für die Hilfe und wünsche euch noch einen schönen Abend.

[Rolf B]

Hallo Melissa,

bei Elementor wurde eine Flexbox verwendet, um die beiden Bereiche nebeneinander dazustellen. Allerdings wird die display:flex Eigenschaft je nach Breite auf das eine oder andere div gelegt, was mir merkwürdig vorkommt und meiner Meinung nach nicht nötig ist.

Was Du nicht tun solltest, sind div Element mit Klassennamen wie links und rechts. Das ist präsentationsbezogen und im Fall eines schmalen Viewports ja auch falsch. Besser wäre statt div.links das article Element und für div.rechts das aside Element.

Ramen mit Border - kein Problem. Solange sie nicht Varelse werden (Hä?)

Die Elemente kannst Du dann beispielsweise so stylen:

#about {
   max-width: 60em; margin:auto; display:flex; flex-wrap:wrap;
}
article, aside {
   flex: 1 0 20em;
}

dann wird bei einer Viewportbreite von unter 40em der wrap aktiv und das Bild unter den Text gestellt. Ganz wichtig: em, nicht px. Dein Layout sollte in Bezug auf die von Dir genutzte Schriftgröße skalieren. Pixel sind - vor allem auf hochauflösenden Geräten - eine Fiktion des Browsers - ein CSS Pixel ist viel größer als ein Bildschirmpixel.

Was mir auch merkwürdig vorkommt, ist ein HTML wie dieses:

<div>
<h3>...</h3>
<h4>...</h4>
<p>blablabla</p>

Also zwei Überschriften auf zwei Stufen für einen Textabschnitt. Hier wird h3/h4 als Tool zur Auswahl einer Schriftgröße verwendet, das ist semantisch falsch und bringt die Gliederung durcheinander. Das eine ist die Überschrift, das andere ein Untertitel. HTML bietet hierfür keine eigenen Elemente, aber bestimmte idiomatische Muster. Der HTML Standard zeigt Beispiele, wie man es machen kann. Zum Beispiel mit einem header Element (Yep! Das ist nicht nur am Seitenstart erlaubt).

<article>
<header>
<h3>Willkommen bei ConstructaWorks</h3>
<p>Auf uns können Sie bauen!<p>
<header>
<p>Ihre Wünsche für das Dach sind eine Herausforderung? Uns fällt sicher etwas ein!</p>
</article>

Rolf