Try out to model rules.html

This commit is contained in:
Tobias Hilfiker
2022-12-07 22:25:37 +01:00
parent a4f4be4761
commit d4250427b0
4 changed files with 75 additions and 2 deletions

View File

@@ -1,5 +1,5 @@
<nav class="bg-navbackground h-32 text-right flex flex-row justify-between items-center px-20">
<img src="./public/curling_logo.png" alt="Logo" class="h-28"/>
<img src="/curling_logo.png" alt="Logo" class="h-28"/>
<div class="flex justify-between w-1/2 text-textcolor">
<a href="index.html" class="nav-item {{#if homeActive}}font-bold{{/if}}">Home</a>
<a href="rules.html" class="{{#if rulesActive}}font-bold{{/if}}">Regeln</a>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

View File

@@ -10,6 +10,74 @@
<h1 class="flex justify-center">Regeln</h1> <!--todo refine the positioning of text on page-->
<div class="h-60 flex justify-between items-center px-40 mb-14 mt-auto"
style="background: #9AD1D4;
background: linear-gradient(180deg, #9AD1D4 50%, #007EA7 50%);">
<div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
<img src="public/example_rule.png" alt=""/>
<h3>Free Guard Zone (FGZ)</h3>
<p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf.
Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
gilt
nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
</div>
<div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
<img src="public/example_rule.png" alt=""/>
<h3 class="text-center">Free Guard Zone (FGZ)</h3>
<p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf.
Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
gilt
nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
</div>
<div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
<img src="public/example_rule.png" alt=""/>
<h3>Free Guard Zone (FGZ)</h3>
<p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf.
Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
gilt
nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
</div>
</div>
<div class="h-60 bg-banner flex justify-between items-center px-40 mb-14 mt-auto">
<div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
<img src="public/example_rule.png" alt=""/>
<h3>Free Guard Zone (FGZ)</h3>
<p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf.
Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
gilt
nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
</div>
<div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
<img src="public/example_rule.png" alt=""/>
<h3 class="text-center">Free Guard Zone (FGZ)</h3>
<p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf.
Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
gilt
nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
</div>
<div class="flex items-center flex-col"> <!--todo text, etc. etwas breiter wie das bild, aber nicht all zu breit-->
<img src="public/example_rule.png" alt=""/>
<h3>Free Guard Zone (FGZ)</h3>
<p>Die Free Guard Zone definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf.
Wenn dies dennoch geschieht, wird der gespielte Stein ungültig und die Guard wird zurückgesetzt. Diese Regel
gilt
nur für gegnerische Steine, eigene Guarden dürfen jederzeit aus dem Spiel genommen werden.</p>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>

View File

@@ -8,7 +8,12 @@
{{> nav spiritActive=true}}
<h1 class="flex justify-center">Spirit of Curling</h1> <!--todo refine the positioning of text on page-->
<div class="flex flex-col">
<h1 class="flex justify-center">Spirit of Curling</h1> <!--todo refine the positioning of text on page-->
<p class="flex justify-center text-center w-6/12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper, enim sed sodales egestas,
leo nisl dictum libero, nec finibus ipsum enim viverra nunc. Aenean posuere augue nec bibendum iaculis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<script type="module" src="/main.js"></script>
</body>