Team:Marburg/test

Edit Page
Preview
Example Page

Read this before doing fancy styling

Alle Klassen welche im style tag deklariert werden überschreiben alle vorherigen deklarationen welche die selben Klassennamen haben.

Bei semantischen Elementen wie z.B. ul, li etc.:

DONT
ul { my style }

DO
article ul { my style }

Somit beziehen sich die Deklarationen nur auf den Inhalt des article Containers


Image on the right

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Code

<img style="float:right; width:400px;" src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">


Image on the left

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

Code

<img style="float:left; width:400px;" src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">



Image centered on the top

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

Code

<img style="display:block; margin:0 auto 0 auto; width:400px;" src="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg">


Styled Table

Veniam Iriure Iusto Duis Enim
Luptatum Blandit Odio Magna Eros
Aliquyam Eirmod Ipsum Justo Nonumy
Lorem Accusam Sadipscing Amet Consetetur

Code

<style>
	article table {
		border-spacing: 0;
		border: 1px solid  rgb(220,220,220);
		font-size: 0.75em;
		border-collapse:collapse;
	}
	article th, td {
		border-right: 1px solid rgb(220,220,220);
		padding:25px !important;
	}
	article th{
		border-bottom: 2px solid rgb(200,200,200) !important;
		background-color: white !important;
	}
	article tr:nth-child(even){
		background-color: rgb(240,240,240);
	}
	</style>
	<table>
		<tr>
			<th>Veniam</th>
			<th>Iriure</th>
			<th>Iusto</th>
			<th>Duis</th>
			<th>Enim</th>
		</tr>
		<tr>
			<td>Luptatum</td>
			<td>Blandit</td>
			<td>Odio</td>
			<td>Magna</td>
			<td>Eros</td>
		</tr>
		<tr>
			<td>Aliquyam</td>
			<td>Eirmod</td>
			<td>Ipsum</td>
			<td>Justo</td>
			<td>Nonumy</td>
		</tr>
		<tr>
			<td>Lorem</td>
			<td>Accusam</td>
			<td>Sadipscing</td>
			<td>Amet</td>
			<td>Consetetur</td>
		</tr>
	</table>


More about Tables: Click here


Centered Text

At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum.
sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

Code

<span style="display:block; text-align: center;"> Text </span>


Unordered List

  • Tempor
  • Stet
  • Voluptua
  • Elitr
  • Ipsum
  • Lorem
  • Solores
  • Kasd
  • Sea

Code

<style>
	article ul li {
		font-size: 0.8em;
		padding:5px;
	}
</style>
<ul>
	<li>Tempor</li>
	<li>Stet</li>
	<li>Voluptua</li>
	<li>Elitr</li>
	<li>Ipsum</li>
	<li>Lorem</li>
	<li>Solores</li>
	<li>Kasd</li>
	<li>Sea</li>
</ul>


Ordered List

  1. Tempor
  2. Stet
  3. Voluptua
  4. Elitr
  5. Ipsum
  6. Lorem
  7. Solores
  8. Kasd
  9. Sea

Code

<style>
		article ol li {
			font-size: 0.8em;
			padding:5px;
		}
	</style>
	<ol>
		<li>Tempor</li>
		<li>Stet</li>
		<li>Voluptua</li>
		<li>Elitr</li>
		<li>Ipsum</li>
		<li>Lorem</li>
		<li>Solores</li>
		<li>Kasd</li>
		<li>Sea</li>
	</ol>


Splitting Content

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.


Code

<div style="display: inline-block;">
		<div style="float:left; width: 50%;">
			ContentA
		</div>
		<div style="float:left; width: 50%;">
			ContentB
		</div>
	</div>


Link insertion

Lorem Ipsum dolorConsetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Code

<a href="https://image.freepik.com/free-icon/monster-funny_318-36004.jpg"><abbr title="Mr.EGGFACE"> Lorem Ipsum dolor </abbr></a>


Abbreviation extention

Lorem Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Code

<dfn data-info="Lorem ipsum dolor"> Lorem </dfn>


Multiple Images in a Row

Code

<style>
.imageContainer {
  display: flex;
  justify-content: space-evenly;
}
.imageContainer img {
  width: 30%;
}
</style>

<div class="imageContainer">
	<img src="url">
	<img src="url">
	<img src="url">
</div>


Multiple Images in a Grid

Code

<style>
.imageContainer2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.imageContainer2 img {
  width: 40%;
  margin-bottom: 2%;
}
</style>

<div class="imageContainer2">
	<img src="url">
	<img src="url">
	<img src="url">
	<img src="url">
</div>


Using elements with content

A
B
C
D

Code

<style>
.imageContainer3 {
  display: flex;
  justify-content: space-evenly;
}
.imageContainer3 div {
  width: 20%;
  margin-bottom: 2%;
  text-align: center;
}
.imageContainer3 div img {
  width: 100%;
}
</style>

<div class="imageContainer3">
	<div><img src="url">A</div>
	<div><img src="url">B</div>
	<div><img src="url">C</div>
	<div><img src="url">D</div>
</div>


More about Flexible Boxes Click here


Collapsible elements

Click to show more
Some content
Click to show more
Some content
Click to show more

Hello there

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
Click to show more

Hello

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Code

<div class="collapsible">
	<div class="btn_expand">Click to show more</div>
	<div class="content">
		Some content			
	</div>
</div>


B. Marchal