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

additional mock-banners to Risca and Penarth added. layout modified accordingly

parent 8bbb8b6d
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,40 +13,68 @@
.submitLand{
grid-area: submitButton;
}
.caerphillyBanner{
.caerphillyBanner , .riscaBanner,.penarthBanner{
margin-top: 20px;
grid-area:townBanner;
background-color: hotpink;
margin-bottom: 20px;
border: solid 2px black;
border-right: none;
}
.caerphillyBannerTrail{
.caerphillyBannerTrail,.riscaBannerTrail,.penarthBannerTrail{
background-color: hotpink;
margin-top: 20px;
grid-area:townBannerDets;
display: flex;
flex-direction: column;
/*display: flex;*/
/*flex-direction: column;*/
margin-bottom: 20px;
border: solid 2px black;
border-left: none;
/*align-self: stretch*/
}
.caerphillyBanner{
grid-area:townBannerC;
}
.caerphillyBannerTrail{
grid-area:townBannerDetsC;
}
.riscaBanner{
grid-area:townBannerR;
}
#trailCount{
.riscaBannerTrail{
grid-area:townBannerDetsR;
}
.penarthBanner{
grid-area:townBannerP;
}
.penarthBannerTrail{
grid-area:townBannerDetsP;
}
#aboutUsFlavour{
grid-area: textFlavour;
margin-top: 25px;
margin-bottom: 15px;
}
#trailCountCaer,#trailCountRisca,#trailCountPenarth{
flex:1;
}
#trailProgress{
#trailProgressCaer,#trailProgressRisca,#trailProgressPenarth{
flex:2;
}
.gridContainer1{
display:grid;
grid-template-columns: 10% 70% 5% 5% 10%;
grid-template-columns: 10% 10% 60% 5% 5% 10%;
grid-template-rows: auto;
grid-template-areas:
". pageTitle pageTitle pageTitle ."
". . submitButton submitButton ."
". townBanner townBannerDets . .";
". pageTitle pageTitle pageTitle pageTitle ."
". . . submitButton submitButton ."
". townBannerC townBannerC townBannerDetsC . ."
". townBannerR townBannerR townBannerDetsR . ."
". townBannerP townBannerP townBannerDetsP . ."
" . . textFlavour . . .";
}
......@@ -73,12 +101,28 @@
</div>
<div class="caerphillyBannerTrail">
<div id="trailCount"> Trails: 3</div>
<div id="trailProgress"> 55%</div>
<div id="trailCountCaer"> Trails: 3</div>
<div id="trailProgressCaer"> 55%</div>
</div>
<div class="riscaBanner">
<H2> Risca</H2>
</div>
<div class="riscaBannerTrail">
<div id="trailCountRisca"> Trails: 2</div>
<div id="trailProgressRisca"> 0%</div>
</div>
<div class="penarthBanner">
<H2> Penarth</H2>
</div>
<div class="penarthBannerTrail">
<div id="trailCountPenarth"> Trails: 5</div>
<div id="trailProgressPenarth"> 60%</div>
</div>
<div id="aboutUsFlavour"> This is placeholder text about VZTA, this application,
the trails and towns and resultant awards written in an excitable manner!!</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