3 coloumns challenge 13.11.

In this example below you will see how to do a 3 coloumns challenge 13.11. with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by elBanauso, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright elBanauso ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>3 coloumns challenge 13.11.</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
    <div class="container border">
        <div class="title border cel-background">
            <h1> Franz Kafka - Betrachtung</h1>
        </div>
        <div class="row">
            <div class="column border cel-background">
		    <h2>Die Vorüberlaufenden</h2> 
		    <p>Wenn man in der Nacht durch eine Gasse spazieren geht, und ein Mann, von weitem schon sichtbar – denn die Gasse vor uns steigt an und es ist Vollmond – uns entgegenläuft, so werden wir ihn nicht anpacken, selbst wenn er schwach und zerlumpt ist, selbst wenn jemand hinter ihm läuft und schreit, sondern wir werden ihn weiter laufen lassen.</p>
		    <p>
		    Denn es ist Nacht, und wir können nicht dafür, daß die Gasse im Vollmond vor uns aufsteigt, und überdies, vielleicht haben diese zwei die Hetze zu ihrer Unterhaltung veranstaltet, vielleicht verfolgen beide einen dritten, vielleicht wird der erste unschuldig verfolgt, vielleicht will der zweite morden, und wir würden Mitschuldige des Mordes, vielleicht wissen die zwei nichts von einander, und es läuft nur jeder auf eigene Verantwortung in sein Bett, vielleicht sind es Nachtwandler, vielleicht hat der erste Waffen.</p>
		    <p>
Und endlich, dürfen wir nicht müde sein, haben wir nicht soviel Wein getrunken? Wir sind froh, daß wir auch den zweiten nicht mehr sehn.</p>
            </div>
            <div class="column border cel-background">
                <h2>Der Nachhauseweg</h2>
		<p>Man sehe die Überzeugungskraft der Luft nach dem Gewitter! Meine Verdienste erscheinen mir und überwältigen mich, wenn ich mich auch nicht sträube.
		<p>
		Ich marschiere und mein Tempo ist das Tempo dieser Gassenseite, dieser Gasse, dieses Viertels. Ich bin mit Recht verantwortlich für alle Schläge gegen Türen, auf die Platten der Tische, für alle Trinksprüche, für die Liebespaare in ihren Betten, in den Gerüsten der Neubauten, in dunklen Gassen an die Häusermauern gepreßt, auf den Ottomanen der Bordelle.</p>

<p>
Ich schätze meine Vergangenheit gegen meine Zukunft, finde aber beide vortrefflich, kann keiner von beiden den Vorzug geben und nur die Ungerechtigkeit der Vorsehung, die mich so begünstigt, muß ich tadeln.</p>

<p>
Nur als ich in mein Zimmer trete, bin ich ein wenig nachdenklich, aber ohne daß ich während des Treppensteigens etwas Nachdenkenswertes gefunden hätte. Es hilft mir nicht viel, daß ich das Fenster gänzlich öffne und daß in einem Garten die Musik noch spielt.</p>
            </div>
            <div class="column border cel-background">
                <h2>Der Fahrgast</h2>
		<p>Ich stehe auf der Plattform des elektrischen Wagens und bin vollständig unsicher in Rücksicht meiner Stellung in dieser Welt, in dieser Stadt, in meiner Familie. Auch nicht [60] beiläufig könnte ich angeben, welche Ansprüche ich in irgendeiner Richtung mit Recht vorbringen könnte. Ich kann es gar nicht verteidigen, daß ich auf dieser Plattform stehe, mich an dieser Schlinge halte, von diesem Wagen mich tragen lasse, daß Leute dem Wagen ausweichen oder still gehn oder vor den Schaufenstern ruhn. – Niemand verlangt es ja von mir, aber das ist gleichgültig. </p>
		<p>
		Der Wagen nähert sich einer Haltestelle, ein Mädchen stellt [61] sich nahe den Stufen, zum Aussteigen bereit. Sie erscheint mir so deutlich, als ob ich sie betastet hätte. Sie ist schwarz gekleidet, die Rockfalten bewegen sich fast nicht, die Bluse ist knapp und hat einen Kragen aus weißer kleinmaschiger Spitze, die linke Hand hält sie flach an die Wand, der Schirm in ihrer Rechten steht auf der zweitobersten Stufe. Ihr Gesicht ist braun, die Nase, an den Seiten schwach gepreßt, schließt rund und breit ab. Sie hat viel braunes Haar und verwehte [62] Härchen an der rechten Schläfe. Ihr kleines Ohr liegt eng an, doch sehe ich, da ich nahe stehe, den ganzen Rücken der rechten Ohrmuschel und den Schatten an der Wurzel. </p>
		<p>
Ich fragte mich damals: Wieso kommt es, daß sie nicht über sich verwundert ist, daß sie den Mund geschlossen hält und nichts dergleichen sagt?</p>
            </div>
        </div>
        <footer class="footer border cel-background">
            <h3>Notes</h3>
            <p>The Project Gutenberg EBook of Betrachtung, by Franz Kafka
	   www.gutenberg.org</p>
        </footer>
    </div>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/elBanauso/3-coloumns-challenge-1311-YEYoQg */
body {
  	font-family: Helvetica, Arial, sans-serif;
  	text-decoration-color: #443344;
  	margin: auto;
  	text-align: justify;
  	background-color: #ddcc99;
}

.container {
   	width: auto;
   	margin: 10px 10px 10px 10px;
   	padding: 5px 5px 5px 5px;
   	background-color: #555566;
}

.border {
	border: 1px solid #443344;
	border-radius: 5px;
}

.cel-background {
	background-color: #cc9966;
}

.title {
  	text-decoration-color: #443344;
  	display: flex;
  	margin: 10px;
  	padding: 0 10px;

 }

.row {
  	width: 100%;
  	display: flex;
}

.column {
  	width: 33%;
  	margin: 10px;
  	padding: 10px;

}

h3 {
	margin: 10px;
}
.footer {
	width: auto;
	display: flex;
	margin: 10px;
	padding: 10px;
	
}

Comments