User:Borderman/Example flex boxes: Difference between revisions
more adjustments using text and image to see how it looks
(remove map from table and place at top of right column) |
(more adjustments using text and image to see how it looks) |
||
Line 1:
<!-- The flexible grid (content) -->
<div class="row">
<div class="res-img" style="margin:0 0 10px 0;" align="center">[[File:River Brathay at Elter Water (4615).jpeg]][[File:{{{image}}}|center|{{{image-size}}}px|{{{image-alt}}}]]<br>{{c|{{{image-caption}}}}}</div>
{{{text}}}An eye-catching moment whilst walking along the Cumbria Way at [[Elter Water]] is that casual glance over your should to be met with a group of perfectly aligned trees near the banks of the [[River Brathay]]. It was almost as if this was purposefully set up just for moments like this, but of course in reality those trees have been there a long time, just as the river has flowed this course for an age. Yet, that glimpse catches one's attention, even imagination, and a simple capture can create something so visually pleasing to the eye. Don't turn back and you could miss it. Being in the right place at the right time certainly helps with the creative juices, but in all honesty it is all about looking at your surroundings and seeing what is really there. What you do next is entirely up to you.
<div class="right-side"><div class="res-img">▼
▲ </div>
▲ <div class="right"><div class="res-img">
{{leaflet map
|latitude = {{{latitude}}}
Line 19 ⟶ 17:
|height =
|clicktarget = }}</div>
{|class="" style="width:
|-
{{#if:{{{
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{
|-
{{#if:{{{date-taken}}}|{{!}}style="width:
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{date-taken}}}}}
|-
!style="background:#a3a3a3; padding:; text-align:center; font-size:100%; font-weight:600; vertical-align:middle;" colspan="2"|Location
{{#if:{{{latitude}}}{{{longitude}}}|{{!}}style="width:9em; padding-left:5px; vertical-align:top; background:;" {{!}} '''{{w1|Decimal degrees}}'''▼
|-
▲{{#if:{{{latitude}}}{{{longitude}}}|{{!}}style="width:
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{latitude}}} / {{{longitude}}}}}
|-
{{#if:{{{os-grid}}}|{{!}}style="width:
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{os-grid}}}}}
|-
{{#if:{{{w3w}}}|{{!}}style="width:
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} [https://what3words.com/{{{w3w}}} {{{w3w}}}]}}
|-
{{#if:{{{elevation}}}|{{!}}style="width:
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{elevation}}}}}
|-
{{#if:{{{view-direction}}}|{{!}}style="width:
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{view-direction}}}}}
|-
!style="background:#a3a3a3; padding:; text-align:center; font-size:100%; font-weight:600; vertical-align:middle;" colspan="2"|Other Details
|-
{{#if:{{{file-size}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''File size'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{file-size}}}}}
|-
{{#if:{{{dimensions}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Dimensions'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{dimensions}}}}}
|-
{{#if:{{{licence}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Licence'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{licence}}}}}
|}
</div>
| |||