diff --git a/src/contents/example.tsx b/src/contents/example.tsx
index 4454bb1de7c5bcc3332e9871385269f4faa4879c..154140a044d3a1aba2d3a2396089b082bc6c7b3f 100644
--- a/src/contents/example.tsx
+++ b/src/contents/example.tsx
@@ -43,26 +43,25 @@ export function Example() {
</div>
</div>
<hr/>
- <div className="col">
- <div className="row align-items-center">
- <div className="col"><h4>Exercise box</h4></div>
- <div className="col-1"><div className="example-medium-tag">Medium</div></div>
+ <div className="col exercise">
+ <div className="row align-items-center">
+ <div className="col"><h4>Timeline BFH</h4></div>
+ <div className="col-1 "><div className="example-easy-tag">Easy</div></div>
</div>
<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>
+ <p> Add a dummy timeline item</p>
</div>
- <hr/>
- <div className="col">
- <div className="row align-items-center">
- <div className="col"><h4>PDF</h4></div>
- <div className="col-1"><div className="example-medium-tag">Medium</div></div>
+ <div className="timeline-container">
+ <TimelineItem
+ date='How to SynBio'
+ tag='Workshop Session I.'
+ color='var(--text-primary)'
+ >
+ Design genetic constructs and re-write the genomic code, and plan experiments using AI. Learn how to effectively build genetic circuit systems for implementation in your iGEM project.
+ </TimelineItem>
+
</div>
- <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">
@@ -90,38 +89,39 @@ export function Example() {
</div>
<hr/>
<div className="col">
- <div className="row align-items-center">
- <div className="col"><h4>Header</h4></div>
- <div className="col-1"><div className="example-advanced-tag">Advanced</div></div>
+ <div className="row align-items-center">
+ <div className="col"><h4>Exercise box</h4></div>
+ <div className="col-1"><div className="example-medium-tag">Medium</div></div>
</div>
<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>
+ <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">
+ <div className="row align-items-center">
+ <div className="col"><h4>PDF</h4></div>
+ <div className="col-1"><div className="example-medium-tag">Medium</div></div>
</div>
+ <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 exercise">
<div className="row align-items-center">
- <div className="col"><h4>Timeline BFH</h4></div>
- <div className="col-1 "><div className="example-easy-tag">Easy</div></div>
+ <div className="col"><h4> Smartphone compatibility</h4></div>
+ <div className="col-1 "><div className="example-medium-tag">Medium</div></div>
</div>
<i><h6>By </h6></i>
<div className="example-exercise">
- <p> Add a dummy timeline item</p>
- </div>
- <div className="timeline-container">
- <TimelineItem
- date='How to SynBio'
- tag='Workshop Session I.'
- color='var(--text-primary)'
- >
- Design genetic constructs and re-write the genomic code, and plan experiments using AI. Learn how to effectively build genetic circuit systems for implementation in your iGEM project.
- </TimelineItem>
-
+ <p> Create a simple box that has a different background color when the website is used on a smartphone (screen width 768px or smaller). </p>
+ <p> Use @media rules for that.</p>
</div>
</div>
- <hr/>
+ <hr/>
<div className="col exercise">
<div className="row align-items-center">
<div className="col"><h4>Collapsible</h4></div>
@@ -134,14 +134,26 @@ export function Example() {
</div>
</div>
<hr/>
+ <div className="col">
+ <div className="row align-items-center">
+ <div className="col"><h4>Header</h4></div>
+ <div className="col-1"><div className="example-advanced-tag">Advanced</div></div>
+ </div>
+ <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/>
<div className="col exercise">
<div className="row align-items-center">
- <div className="col"><h4> </h4></div>
- <div className="col-1 "><div className="example-easy-tag"></div></div>
+ <div className="col"><h4>Chart with Victory</h4></div>
+ <div className="col-1 "><div className="example-advanced-tag">Advanced</div></div>
</div>
<i><h6>By </h6></i>
<div className="example-exercise">
- <p> </p>
+ <p>Create a simple bar Chart with Victory, using their <a href="https://commerce.nearform.com/open-source/victory"> documentation</a> and dummy data of your choice. </p>
</div>
</div>
<hr/>
@@ -158,7 +170,7 @@ export function Example() {
<hr/> */}
-
+
</>
);
}