<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/>
<divclassName="col">
<h3>Lists</h3>
<i><h6>By </h6></i>
<divclassName="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/>
<divclassName="col">
<h3>Pictures</h3>
<i><h6>By </h6></i>
<divclassName="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/>
<divclassName="col">
<h3>Exercise box</h3>
<i><h6>By </h6></i>
<divclassName="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>
