diff --git a/src/App/App.tsx b/src/App/App.tsx
index 4d3c282961a8c7baa8de1ba39f34f6dc05884f73..510c9a4e2a1ce21708c71e11de548dea94481bf1 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -1,4 +1,5 @@
import "./App.css";
+import "../contents/example.css"
import "./App.scss";
import "bootstrap/dist/css/bootstrap.min.css";
import { Route, Routes } from "react-router-dom";
diff --git a/src/contents/example.css b/src/contents/example.css
new file mode 100644
index 0000000000000000000000000000000000000000..f45d706e714e36da910ee412e94043d22fa1e658
--- /dev/null
+++ b/src/contents/example.css
@@ -0,0 +1,46 @@
+:root {
+ /* our colours*/
+ --text-primary: #850F78;
+ --mediumpurple: #bc15aa;
+ /*--purple: #B85BD1; */
+ --accen-secondary: #F57D22;
+ --accent-primary: #F4CC1E;
+ --lightyellow: #fae99e;
+ --lightblue: #A0A7F3 ;
+ --verylightblue: #ebecfd;
+ --offblack: #32232C ;
+ --cebitecgray: #8295A4;
+ /*--offwhite: #e9dff1; */
+ --ourbeige: #FFF6F2;
+ --darkerbeige: #e2dad7;
+ --background: #FFF6F2;
+ /*igem colours*/
+ --igemdarkgreen: #006530;
+ --igemmediumgreen: #019968;
+ --igemlightgreen: #99cb9a;
+
+ --info-border-color: var(--mediumpurple);
+ --vp-ct: var(--text-primary);
+ --info-border-color: var(--accent-primary);
+ --info-bg-color: var(--lightyellow);
+ --info-title-color: var(--text-primary);
+ --info-code-bg-color: var(--lightyellow);
+ --note-border-color: var(--text-primary);
+ --note-bg-color: var(--darkoffwhite);
+ --note-title-color: var(--text-primary);
+ --note-code-bg-color: var(--darkoffwhite);
+ --tip-border-color: var(--text-primary);
+ --tip-bg-color: var(--darkoffwhite);
+ --tip-title-color: var(--text-primary);
+ --tip-code-bg-color: var(--darkoffwhite);
+ --warning-border-color: var(--accen-secondary);
+ --warning-bg-color: var(--lightorange);
+ --warning-title-color: var(--text-primary);
+ --warning-code-bg-color: var(--lightorange);
+
+ }
+
+.example-docu{
+ background-color: var(--igemlightgreen);
+ width: fit-content;
+}
\ No newline at end of file
diff --git a/src/contents/example.tsx b/src/contents/example.tsx
index 97aa000807c3c5546f8403ea622ad9fc07ce807b..0ebc737c115457e16da6c6d0f24ac2620cd0b2e2 100644
--- a/src/contents/example.tsx
+++ b/src/contents/example.tsx
@@ -1,16 +1,103 @@
+import SimpleSlider from "../components/slider";
export function Example() {
return (
<>
- <div className="row mt-4">
- <div className="col-lg-8">
-
- </div>
-
+ <div className="col">
+ <h3 className="example">Exercises</h3>
+ <i><h6>By Your name</h6></i>
+ <div className="example-exercise">
+ <p> All components should be in this file. The extra css has to be put into exapmle.css. Turn to Liliana if you need or want a scss file, too.</p>
+ <p>The code you create should be in the respective columns where the assignments are, if not stated otherwise. </p>
+ <p>Write down how you did it in the documentation-box as a documentation for the others. Use the Docu-Boc component for that.You have to add it to your axercise block manually. </p>
+ </div>
+ <DocuBox>
+ <p>I wrote a text.</p>
+ </DocuBox>
</div>
+ <hr/>
+ <div className="col">
+ <h3>Lists</h3>
+ <i><h6>By </h6></i>
+ <div className="example-exercise">
+ <p>a. Create a numbered list of fruits. Five items are enough. Use the HTML list element.</p>
+ <p>b. Create a second column next to the one with the fruit list that contains a button. </p>
+ </div>
+ </div>
+ <hr/>
+ <div className="col">
+ <h3>Pictures</h3>
+ <i><h6>By </h6></i>
+ <div className="example-exercise">
+ <p>a. Insert a centered picture of Sinan here. It should be half as wide as the column and have a dottet frame in our purple.</p>
+ <p>b. When hovering over the picture, it should turn black and white. </p>
+ </div>
+ </div>
+ <hr/>
+ <div className="col">
+ <h3>Exercise box</h3>
+ <i><h6>By </h6></i>
+ <div className="example-exercise">
+ <p>Create a box that differs in looks from the rest of the site and emphazises it contains an assignment. </p>
+ <p>Archieve this effect by using background, shadow, border and/or other css effects on the class "example-exercise". The box should be aestetically pleasing unlike the documentation box. </p>
+ </div>
+ </div>
+ <hr/>
+ <div className="col">
+ <h3>Exercise box</h3>
+ <i><h6>By </h6></i>
+ <div className="example-exercise"></div>
+ <p>a. Insert a pdf using our PDF component.</p>
+ </div>
+ <hr/>
+ <div className="col">
+ <h3>Exercise box</h3>
+ <i><h6>By </h6></i>
+ <div className="example-exercise"></div>
+ <p> Add a dummy sponsor to this slider.</p>
+ <SimpleSlider>
+ <a className="sponsor-container" href="https://bts-ev.de/">
+ <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/bts.png"/>
+ </a>
+ <a className="sponsor-container" href="https://www.uni-bielefeld.de/fakultaeten/technische-fakultaet/arbeitsgruppen/multiscale-bioengineering/campusbrauerei/">
+ <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/campus-brauerei-hinterlegt.jpeg"/>
+ </a>
+ <a className="sponsor-container" href="www.idtdna.com">
+ <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/idt-logo.png"></img>
+ </a>
+ <a className="sponsor-container" href="https://www.cebitec.uni-bielefeld.de/">
+ <img className="img-sponsor" src="https://static.igem.wiki/teams/5247/sponsors/cebitec-farbe.png"/>
+ </a>
+ </SimpleSlider>
+ </div>
+ <hr/>
+ <div className="col">
+ <h4>Header</h4>
+ <i><h6>By </h6></i>
+ <div className="example-exercise">
+ <p>a. Create a header file for this page. It has to be visible and therefore be added to pages.ts</p>
+ <p>b. Add this page to the navbar under "Contrubution". </p>
+ </div>
+ </div>
+ <hr/>
+
</>
);
}
+
+
+ function DocuBox({children}: {children: React.ReactNode}){
+ return(
+ <>
+ <div className="example-docu">
+ <h5>Documentation: </h5>
+ <div>
+ {children}
+ </div>
+ </div>
+ </>
+ )
+ }
\ No newline at end of file