Nedenfor er der tre udfordringer, en nem, medium og svær.
Koden for de forskellige udfordringer er ikke vist, da det er meningen at man selv skal gennemskue hvad der er blevet lavet,
og gøre kunsten efter, efter bedste evne.
Sidst på weekenden, søndag, retter jeg indlæget og tilføjer koden til de forskellige udfordringer.
Til dem som løser udfordringen, upload jeres kode
Så vi andre kan se hvordan i har løst opgaven.Til dem som ikke kan løse udfordringen, ville det forhåbentlig skabe en sund debat omkring
hvad det ville kræve for at løse udfordringen og problemstillingen, hvor vi alle kan lære.
Prøv at løse udfordringen så effektiv som muligt
Edited 20-04-2014 21:00
Kode: Vælg alt
Easy
<div style="border-color: red yellow green blue; border-style: solid; border-width: 100px; width: 0; height: 0;"></div>Kode: Vælg alt
Medium
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<style>
#wrapper {
width: 70%;
height: auto;
border: 1px solid grey;
padding: 20px;
vertical-align: middle;
margin-right: auto;
margin-left: auto;
}
table {
width: 100%;
border-collapse: collapse;
border: 4px solid black;
}
tr {
height: 100px;
}
tr:nth-child(even) td:nth-child(odd){
background:-moz-linear-gradient(top, #ccc, #eee);
background:-webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee));
}
tr:nth-child(odd) td:nth-child(even) {
background:-moz-linear-gradient(top, #fff, #eee);
background:-webkit-gradient(linear,0 0, 0 100%, from(#fff), to(#eee));
}
td {
text-align: center;
vertical-align: middle;
border: 2px solid black;
}
a {
font-size: 60px;
}
</style>
</head>
<body>
<div id="wrapper">
<table id="chessboard">
<tr>
<td><a>♜</a></td>
<td><a>♞</a></td>
<td><a>♝</a></td>
<td><a>♛</a></td>
<td><a>♚</a></td>
<td><a>♝</a></td>
<td><a>♞</a></td>
<td><a>♜</a></td>
</tr>
<tr>
<td><a>♟</a></td>
<td><a>♟</a></td>
<td><a>♟</a></td>
<td><a>♟</a></td>
<td><a>♟</a></td>
<td><a>♟</a></td>
<td><a>♟</a></td>
<td><a>♟</a></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a>♙</a></td>
<td><a>♙</a></td>
<td><a>♙</a></td>
<td><a>♙</a></td>
<td><a>♙</a></td>
<td><a>♙</a></td>
<td><a>♙</a></td>
<td><a>♙</a></td>
</tr>
<tr>
<td><a>♖</a></td>
<td><a>♘</a></td>
<td><a>♗</a></td>
<td><a>♕</a></td>
<td><a>♔</a></td>
<td><a>♗</a></td>
<td><a>♘</a></td>
<td><a>♖</a></td>
</tr>
</table>
</div>
</body>
</html>
