Team:Marburg/test

Edit Page
Preview
Project

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>
	table {
		border-spacing: 0;
		border: 1px solid  rgb(220,220,220);
		font-size: 0.8em;
		border-collapse:collapse;
	}
	th, td {
		border-right: 1px solid rgb(220,220,220);
		padding:25px;
	}
	th{
		border-bottom: 2px solid rgb(200,200,200);
	}
	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>


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>
.imageContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.imageContainer img {
  width: 40%;
  margin-bottom: 2%;
}
</style>

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


More about Flexible Boxes Click here
B. Marchal