Difference between revisions of "Team:Tuebingen/Collaborations"

Line 7: Line 7:
 
</script>
 
</script>
  
−
<div class="contentArea">
+
<head>
−
    <div class='contentBothCols'>
+
 
−
        <p>
+
<style>
−
            Here is a small demonstration for a block text.
+
 
−
        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
+
body {
−
        vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+
background-color:lightgrey;
−
        no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
+
max-width:60em;
−
        amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+
margin:0 auto;
−
        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
+
font-family:helvetica;
−
        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
+
.mainbox{
−
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
+
align:center;
−
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
+
overflow:auto;
−
        elitr, sed diam nonumy eirmod tempor...
+
background-color:white;
−
        </p>
+
max-width:60em;
−
        <figure>
+
margin:auto;
−
            <img src='../wiki/images/9/9b/Harry.jpg'' />
+
padding:0 2em;
−
            <figcaption>
+
border:1px solid black;
−
                Take a look at this awesome illustration!
+
}
−
            </figcaption>
+
 
−
        </figure>
+
.head{
−
        <p>
+
float:left;
−
            And it still keeps going!
+
background-color:lightblue;
−
        </p>
+
−
    </div>
+
max-width:16em;
 +
border:2px solid red;
 +
margin-bottom:2em;
 +
margin-right:2em;
 +
}
 +
 
 +
.fullSize{
 +
float:left;
 +
background-color:lightblue;
 +
 +
max-width:56em;
 +
border:2px solid red;
 +
margin-bottom:2em;
 +
 +
}
 +
 +
h3{
 +
 +
border:3px solid green;
 +
margin:0 0 1em 0;
 +
}
 +
 
 +
h4{
 +
border:3px solid yellow;
 +
margin:0;
 +
}
 +
 
 +
.text{
 +
 +
display:inline-block;
 +
max-width:36em;
 +
margin:0;
 +
border:1px solid blue;
 +
margin-bottom:2em;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
</style>
 +
 
 +
 
 +
 
 +
 
 +
</head>
 +
 
 +
 
 +
 
 +
<header>
 +
<div style="background-color:powderblue;
 +
;
 +
padding:50px;>
 +
<img src="A.jpg" alt="iGem_Logo" width="150px" height="150px">
 +
 
 +
<h2 style="color:rgb(0,100,100);">LightSaber...Logo... F*ck this stuff</h2>
 +
</header>
 +
 +
 +
 +
<div style="
 +
background-color:white;
 +
max-width:60em;
 +
height:2em;
 +
border:3px dotted cyan;"
 +
>  
 +
</div>
 +
 
 +
<div class="mainbox">
 +
<div class="head">
 +
<h3>Lorem ispum dolor sit amet dignum talos sit fuck this shit, fuck this shit
 +
</h3>
 +
<h4>Floating Box, you suckers</h4>
  
−
    <div class='contentRow'>
 
−
        <div class='contentCell contentSmallCell'>
 
−
            <figure>
 
−
                <img src='../wiki/images/9/9b/Harry.jpg' />
 
−
                <figcaption>
 
−
                    -- Some wizzard dude.
 
−
                </figcaption>
 
−
            </figure>
 
−
            <p>
 
−
                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,
 
−
            </p>
 
−
        </div>
 
−
        <div class='contentCell'>
 
−
            <p>
 
−
                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. 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...
 
−
            </p>
 
−
            <p>
 
−
                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. 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...
 
−
            </p>
 
−
        </div>
 
−
    </div>
 
−
    <div class='contentRow'>
 
−
        <div class='contentCell'>
 
−
            <p>
 
−
                Here is a small demonstration for a block text.  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. 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...
 
−
            </p>
 
−
            <table>
 
−
                <caption>Uebersicht Saeuremienenarbeit:</caption>
 
−
                <thead>
 
−
                    <tr>
 
−
                        <td>Year</td>
 
−
                        <td>Slaves</td>
 
−
                        <td>Income</td>
 
−
                        <td>Bribes</td>
 
−
                    </tr>
 
−
                </thead>
 
−
                <tbody>
 
−
                    <tr>
 
−
                        <td>2009</td>
 
−
                        <td>9</td>
 
−
                        <td>$1 mio.</td>
 
−
                        <td>0</td>
 
−
                    </tr>
 
−
                    <tr>
 
−
                        <td>2010</td>
 
−
                        <td>90</td>
 
−
                        <td>-$1 mio.</td>
 
−
                        <td>$20,000</td>
 
−
                    </tr>
 
−
                    <tr>
 
−
                        <td>2011</td>
 
−
                        <td>100</td>
 
−
                        <td>$10 mio.</td>
 
−
                        <td>$50,000</td>
 
−
                    </tr>
 
−
                </tbody>
 
−
            </table>
 
−
            <p>
 
−
                Don't forget to refer to tables in a text. Need
 
−
                feature btw: Auto counters!
 
−
            </p>
 
−
        </div>
 
−
        <div class='contentCell contentSmallCell'>
 
−
            <p>
 
−
                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,
 
−
            </p>
 
−
            <table>
 
−
                <caption>Uebersicht Saeuremienenarbeit:</caption>
 
−
                <thead>
 
−
                    <tr>
 
−
                        <td>Year</td>
 
−
                        <td>Slaves</td>
 
−
                        <td>Income</td>
 
−
                        <td>Bribes</td>
 
−
                    </tr>
 
−
                </thead>
 
−
                <tbody>
 
−
                    <tr>
 
−
                        <td>2009</td>
 
−
                        <td>9</td>
 
−
                        <td>$1 mio.</td>
 
−
                        <td>0</td>
 
−
                    </tr>
 
−
                    <tr>
 
−
                        <td>2010</td>
 
−
                        <td>90</td>
 
−
                        <td>-$1 mio.</td>
 
−
                        <td>$20,000</td>
 
−
                    </tr>
 
−
                    <tr>
 
−
                        <td>2011</td>
 
−
                        <td>100</td>
 
−
                        <td>$10 mio.</td>
 
−
                        <td>$50,000</td>
 
−
                    </tr>
 
−
                </tbody>
 
−
            </table>
 
−
        </div>
 
−
    </div>
 
 
</div>
 
</div>
 +
 +
<p class="text"> Hello, this is Patrick, is Mayonaise an instrument?Lorem ispum dolor sit amet. Das ist ein Fließtext, was erwartest du von mir.
 +
Ich bin ein reiner Platzhaltertext. Wenn du mich einfügst kannst du sehen, wie sich das auf deine Typo auswirkt.
 +
Ich bin weder wortgewandt noch kann ich etwas besonderes. </p>
 +
 +
</div>
 +
 +
<div class="mainbox">
 +
<div class="fullSize">Lorem ispum dolor sit amet. Das ist ein Fließtext, was erwartest du von mir.
 +
Ich bin ein reiner Platzhaltertext. Wenn du mich einfügst kannst du sehen, wie sich das auf deine Typo auswirkt.
 +
Ich bin weder wortgewandt noch kann ich etwas besonderes. </div>
 +
<div class="fullSize">floating Box got fuckers,. I used to be an adventurer like you, but then I took an arrow to the kne: </div>
 +
<div class="fullSize">Lorem ispum dolor sit amet. Das ist ein Fließtext, was erwartest du von mir.
 +
Ich bin ein reiner Platzhaltertext. Wenn du mich einfügst kannst du sehen, wie sich das auf deine Typo auswirkt.
 +
Ich bin weder wortgewandt noch kann ich etwas besonderes. </div>
 +
 +
</div>
 +
 +
 
</html>
 
</html>

Revision as of 16:01, 15 October 2016

LightSaber...Logo... F*ck this stuff

Lorem ispum dolor sit amet dignum talos sit fuck this shit, fuck this shit

Floating Box, you suckers

Hello, this is Patrick, is Mayonaise an instrument?Lorem ispum dolor sit amet. Das ist ein Fließtext, was erwartest du von mir. Ich bin ein reiner Platzhaltertext. Wenn du mich einfügst kannst du sehen, wie sich das auf deine Typo auswirkt. Ich bin weder wortgewandt noch kann ich etwas besonderes.

Lorem ispum dolor sit amet. Das ist ein Fließtext, was erwartest du von mir. Ich bin ein reiner Platzhaltertext. Wenn du mich einfügst kannst du sehen, wie sich das auf deine Typo auswirkt. Ich bin weder wortgewandt noch kann ich etwas besonderes.
floating Box got fuckers,. I used to be an adventurer like you, but then I took an arrow to the kne:
Lorem ispum dolor sit amet. Das ist ein Fließtext, was erwartest du von mir. Ich bin ein reiner Platzhaltertext. Wenn du mich einfügst kannst du sehen, wie sich das auf deine Typo auswirkt. Ich bin weder wortgewandt noch kann ich etwas besonderes.