Webdesign – die besten Beiträge

2 DIV mit CSS responsiv nebeneinander platzieren?

Hallo allerseits, ich versuche gerade seit zwei Tagen verzweifelt den gleichen Look zu kriegen wie der FAQ-Bereich auf folgender Seite ganz unten: https://rlax.me/

Das heißt ich möchte auf beiden Seiten mehrere Slide-Elemente haben, die unabhängig voneinander auf und zu gehen. Auf kleineren Displays soll es dann zusammengerückt werden, sodass der rechte Bereich dann unter dem unteren angezeigt wird. Aber irgendwie bekomme ich es einfach nicht hin. Ich hoffe Ihr könntet mir vielleicht etwas auf die Sprünge helfen. Hier mein Code aktuell:

<html>
<head>
<style>
	
	#left { display:block; }
	#right { display:block; }
  
  .slides {padding:0px; margin:0px auto;} 
  
  .show {display:grid; grid-template-rows:0; overflow:hidden; transition:0.75s; width:100%; margin:5px 0;}
  .show-start {min-height:0;}
  .show-end {min-height:0; align-self:end;}
  .show p {margin:0; padding:0; text-align:justify; color:#121212;}
  details.more[open] + div {grid-template-rows:10fr; padding-bottom:10px; outline:0;} 
  details summary {cursor:pointer; -webkit-tap-highlight-color:#000000; color:#121212; background-color:lightgrey; padding:10px}
  details summary:focus {outline:none !important;}
</style>
</head>




<body>
<div class="slides" id="left">
	<details class="more"><summary>The Night Café</summary></details>
	<div class="show">
		<div class="show-start">
			<p>The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.</p>
			<br>
			<p>The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.</p>
			<p><a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikepedia</a></p>
		</div>
	</div>


	<details class="more"><summary>The Night Café</summary></details>
	<div class="show">
		<div class="show-start">
			<p>The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.</p>
			<br>
			<p>The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.</p>
			<p><a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikepedia</a></p>
		</div>
	</div>
</div>


<div class="slides" id="right">
	<details class="more"><summary>The Night Café</summary></details>
	<div class="show">
		<div class="show-start">
			<p>The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.</p>
			<br>
			<p>The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.</p>
			<p><a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikepedia</a></p>
		</div>
	</div>


	<details class="more"><summary>The Night Café</summary></details>
	<div class="show">
		<div class="show-start">
			<p>The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.</p>
			<br>
			<p>The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.</p>
			<p><a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikepedia</a></p>
		</div>
	</div>
</div>

</body>
</html>  
HTML, CSS, Webdesign, Responsive Webdesign

Wie erstelle ich eine simple HTML Website mit Github Pages?

Moin,

ich verstehs wirklich nicht. Habs jetzt online als auch mit dem Github Desktop Client versucht und ich kriegs nicht hin. Es gibt Videos von vor 3 Jahren die das erklären, dann die offizielle Erklärung von Github selbst und die Erklärung von ChatGPT und nichts scheint zu funktionieren.

Ich versuch mal zu erklären was ich versucht habe: Scheinbar muss ich meinen Benutzername als Name meines Repositories angeben und in diesem Format schreiben: username.github.io. Mein Username ist beispielsweise jetzt Johannes623, das heißt meine Repository soll johannes623.github.io heißen. Außerdem soll die Repository öffentlich sein und eine README-File enthalten. Soweit so gut.

Als nächstet aktiviert man Github Pages in den Einstellungen. Dort wählt man dann "Deploy from a branch" und dann "main und /root" als Branch aus. Jetzt geht man zurück zur README-Datei und fügt dort den Code der Website ein. Danach geht man zurück zur Github Pages Seite und schaut ob die Website unter der Domain erreichbar ist.

So wurde es mir erklärt. Problem ist nur, dass all das hier nicht funktioniert.

Kann mir jemand sehr simpel und strukturiert erklären, wie ich es hinbekomme eine Website zu erstellen? Und am besten noch dazu erklären, wie ich eine Custom Domain zu dieser Website hinzufügen kann? (Hab eine bei einem anderen Anbieter gekauft).

Vielen vielen Dank schonmal im Vorraus!!

Homepage, HTML, Webseite, CSS, JavaScript, Code, Webdesign, Webentwicklung, Webhosting, github

Meistgelesene Beiträge zum Thema Webdesign