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

initial mock-banner created for Caerphilly

parent ee3c728b
No related branches found
No related tags found
1 merge request!17Resolve "As a user I want to be able to have the homepage being very intuitive and easy to navigate"
...@@ -13,17 +13,50 @@ ...@@ -13,17 +13,50 @@
.submitLand{ .submitLand{
grid-area: submitButton; grid-area: submitButton;
} }
.caerphillyBanner{
margin-top: 20px;
grid-area:townBanner;
background-color: hotpink;
margin-bottom: 20px;
border: solid 2px black;
border-right: none;
}
.caerphillyBannerTrail{
background-color: hotpink;
margin-top: 20px;
grid-area:townBannerDets;
display: flex;
flex-direction: column;
margin-bottom: 20px;
border: solid 2px black;
border-left: none;
}
#trailCount{
flex:1;
}
#trailProgress{
flex:2;
}
.gridContainer1{ .gridContainer1{
display:grid; display:grid;
grid-template-columns: 10% 70% 10% 10%; grid-template-columns: 10% 70% 5% 5% 10%;
grid-template-rows: auto; grid-template-rows: auto;
grid-template-areas: grid-template-areas:
". pageTitle pageTitle ." ". pageTitle pageTitle pageTitle ."
". . submitButton ."; ". . submitButton submitButton ."
". townBanner townBannerDets . .";
}
} /*.gridContainer2{*/
/* display:grid;*/
/* grid-template-columns: 10% 75% 15%;*/
/* grid-template-rows: auto;*/
/* grid-template-areas:*/
/* ". townBanner ."*/
/*}*/
</style> </style>
</head> </head>
...@@ -34,6 +67,19 @@ ...@@ -34,6 +67,19 @@
<H1 id="homeTitle"> Smart Towns - Trails</H1> <H1 id="homeTitle"> Smart Towns - Trails</H1>
<button class="submitLand"> Submit Landmark!</button> <button class="submitLand"> Submit Landmark!</button>
<div class="caerphillyBanner">
<H2> Caerphilly</H2>
</div>
<div class="caerphillyBannerTrail">
<div id="trailCount"> Trails: 3</div>
<div id="trailProgress"> 55%</div>
</div>
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment