diff --git a/src/main/resources/templates/towns/caerphilly.html b/src/main/resources/templates/towns/caerphilly.html
index 78edd9ee490e383f3d1c1c5fd0dcc44536c6a438..1cc1b2605a701f66f1fa2ab5787728ac7ef27ed2 100644
--- a/src/main/resources/templates/towns/caerphilly.html
+++ b/src/main/resources/templates/towns/caerphilly.html
@@ -1,9 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<style>
- #landmarkList{
+
+ #checklistFlexbox{
+ flex-direction: row;
+ display: inline-flex;
+ /*justify-content: space-between;*/
+ flex-wrap: wrap;
+ text-align: left;
border: 2px solid black;
+ grid-area: checklistFlexbox;
+
+
+ }
+ #landmarkList{
+ padding-right: 15px;
+
+ /*border: 2px solid black;*/
+
+
+
+
+ }
+ #checkList{
+
+
+
+ }
+
+ /*block types denote whether a user has unlocked the respective landmark*/
+
+ #block1{
+ width:15px;height:15px;background: red;border-radius:50%;padding: 0; margin: 0px;height: 18px; width:18px;tooltip
+ }
+ #block2{
+ width:15px;height:15px;background: red;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
+ }
+ #block3{
+ width:15px;height:15px;background: green;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
+ }
+ #block4{
+ width:15px;height:15px;background: red;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
+ }
+ #block5{
+ width:15px;height:15px;background: green;border-radius:50%;padding: 0; margin: 0px;height: 18px;width:18px;
+ }
+
+ #landmarkList, #checkList{
+ list-style-type: none;
+ }
+ #title1{
+ grid-area: title1;
+ }
+ #title2{
+ grid-area: title2;
+ }
+ [BadgeStickerProgress]{
+ grid-area: BadgeStickerProgress;
+
+ }
+ #landmarkTitle{
+ grid-area:landmarkTitle
+ }
+ .container{
+ display:grid;
+ grid-template-columns: 50% 50%;
+ grid-template-rows: auto;
+ grid-template-areas:
+ "title1 title1"
+ "title2 title2"
+ "BadgeStickerProgress ."
+ "landmarkTitle ."
+ "checklistFlexbox .";
}
</style>
@@ -14,22 +83,36 @@
</head>
<body>
<main>
- <h1> Welcome to the town of Caerphilly.</h1>
+ <div class="container">
+ <h1 id="title1"> Welcome to the town of Caerphilly.</h1>
+
+ <h2 id="title2"> Welcome to the trail of trail-ness!</h2>
+ <section name="BadgeStickerProgress"> Sticker Pictures and stuff go here</section>
+ <h2 id="landmarkTitle">Caerphilly Landmark Progress:</h2>
+ <div id="checklistFlexbox">
+ <h2>Caerphilly Landmark Progress:</h2>
+ <li id="checkList">
+ <ul><div id="block1"> </div></ul>
+ <ul><div id="block2"> </div></ul>
+ <ul><div id="block3"> </div></ul>
+ <ul><div id="block4"> </div></ul>
+ <ul><div id="block5"> </div></ul>
- <h2> Welcome to the trail of trail-ness!</h2>
- <section name="Badge/StickerProgress"></section>
- <li name="landmarkList"id="landmarkList">
- <ul>1. Landmark 1 - href</ul>
- <ul>2. Landmark 2 - href</ul>
- <ul>3. Landmark 2 - href</ul>
- <ul>4. Landmark 2 - href</ul>
- <ul>5. Landmark 2 - href</ul>
- </li>
+ </li>
+ <li name="landmarkList"id="landmarkList">
+ <ul>Landmark 1 - <a href="../test.html">Explore!</a></ul>
+ <ul>Landmark 2 - Explore!</ul>
+ <ul>Landmark 2 - Explore!</ul>
+ <ul>Landmark 2 - Explore!</ul>
+ <ul>Landmark 2 - Explore!</ul>
+ </li>
+ </div>
+ </div>
</main>
</body>