Skip to content
Snippets Groups Projects
Commit 3804ded5 authored by Rhys Evans's avatar Rhys Evans
Browse files

Further work on landmark list styling

parent 47f881c4
No related branches found
No related tags found
1 merge request!5Resolve "As a user I want to be able to see a list of specific landmarks so I can decide where to go next on the trail"
Hide whitespace changes
Inline Side-by-side
src/main/resources/templates/towns/caerphilly.html
+ 46
− 9
View file @ 3804ded5
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<style> <style>
*{
background-color: #36454F;
color: white;
}
.explore{
color:deeppink;
}
.fnd{
color: dodgerblue;
}
.shopping{
color: orangered;
}
.activities{
color: rebeccapurple;
}
.services{
color: darkseagreen;
}
#checklistFlexbox{ #checklistFlexbox{
flex-direction: row; flex-direction: row;
display: inline-flex; display: inline-flex;
/*justify-content: space-between;*/ /*justify-content: space-between;*/
flex-wrap: wrap; flex-wrap: wrap;
text-align: left; text-align: left;
border: 2px solid black; border: 2px solid white;
grid-area: checklistFlexbox; grid-area: checklistFlexbox;
...@@ -24,11 +47,15 @@ ...@@ -24,11 +47,15 @@
} }
#checkList{ #checkList{
}
.landmarkProgress{
text-align: center;
font-size: larger; /*vw changes with browser size*/
color: yellow;
}
}
/*block types denote whether a user has unlocked the respective landmark*/ /*block types denote whether a user has unlocked the respective landmark*/
#block1{ #block1{
...@@ -90,7 +117,12 @@ ...@@ -90,7 +117,12 @@
<section name="BadgeStickerProgress"> Sticker Pictures and stuff go here</section> <section name="BadgeStickerProgress"> Sticker Pictures and stuff go here</section>
<h2 id="landmarkTitle">Caerphilly Landmark Progress:</h2> <h2 id="landmarkTitle">Caerphilly Landmark Progress:</h2>
<div id="checklistFlexbox"> <div id="checklistFlexbox">
<h2>Caerphilly Landmark Progress:</h2> <div><h2 >Badge Progress:</h2>
<div class="landmarkProgress"> <b class="landmarkProgress">2/5</b> </div>
<br>
<div class="landmarkProgress">
<b class="landmarkProgress" >3 to Go!!</b></div></p>
</div>
<li id="checkList"> <li id="checkList">
<ul><div id="block1"> </div></ul> <ul><div id="block1"> </div></ul>
<ul><div id="block2"> </div></ul> <ul><div id="block2"> </div></ul>
...@@ -103,11 +135,16 @@ ...@@ -103,11 +135,16 @@
</li> </li>
<li name="landmarkList"id="landmarkList"> <li name="landmarkList"id="landmarkList">
<ul>Landmark 1 - <a href="../test.html">Explore!</a></ul> <ul><span class="shopping">Landmark 1 </span>
<ul>Landmark 2 - Explore!</ul> <span class="explore">- <a href="../test.html">Explore!</a></span></ul>
<ul>Landmark 2 - Explore!</ul> <ul><span class="services">Landmark 2 </span>
<ul>Landmark 2 - Explore!</ul> <span class="explore">- Explore!</span></ul>
<ul>Landmark 2 - Explore!</ul> <ul><span class="activities">Landmark 3 </span>
<span class="explore">- Explore!</span></ul>
<ul><span class="shopping">Landmark 4 </span>
<span class="explore">- Explore!</span></ul>
<ul><span class="fnd">Landmark 5 </span>
<span class="explore">- Explore!</span></ul>
</li> </li>
</div> </div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment