Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

User:Borderman/Example flex boxes: Difference between revisions

From The English Lakes
Content added Content deleted
(remove map from table and place at top of right column)
(more adjustments using text and image to see how it looks)
Line 1: Line 1:
<!-- The flexible grid (content) -->
<!-- The flexible grid (content) -->
<div class="row">
<div class="row">
<div class="left">
<div class="left-side">
<div class="res-img" style="margin:0 0 10px 0;" align="center">[[File:{{{image}}}|center|{{{image-size}}}px|{{{image-alt}}}]]<br>{{c|{{{image-caption}}}}}</div>
<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.
<h3>About the photo</h3>
</div>
{{{text}}}
<div class="right-side"><div class="res-img">
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="right"><div class="res-img">
{{leaflet map
{{leaflet map
|latitude = {{{latitude}}}
|latitude = {{{latitude}}}
Line 19: Line 17:
|height =
|height =
|clicktarget = }}</div>
|clicktarget = }}</div>
{|class="" style="width:auto; font-size:90%; <!--background-color:#f7f7f7; border:1px #ccc solid;--> margin:0; padding:2px; border-collapse:; line-height:2em;"
{|class="" style="width:100%; font-size:; <!--background-color:#f7f7f7; border:1px #ccc solid;--> margin:0; padding:px; border-collapse:; line-height:2em;"
|-
|-
{{#if:{{{photographer}}}|{{!}}style="width:9em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Photographer'''
{{#if:{{{Author}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Author'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{photographer}}}}}
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{Author}}}}}
|-
|-
{{#if:{{{date-taken}}}|{{!}}style="width:9em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Date taken'''
{{#if:{{{date-taken}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Date taken'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{date-taken}}}}}
{{!}}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:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''{{w1|Decimal degrees}}'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{latitude}}} / {{{longitude}}}}}
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{latitude}}} / {{{longitude}}}}}
|-
|-
{{#if:{{{os-grid}}}|{{!}}style="width:9em; padding-left:5px; vertical-align:top; background:;" {{!}} '''OS grid reference'''
{{#if:{{{os-grid}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''OS grid reference'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{os-grid}}}}}
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{os-grid}}}}}
|-
|-
{{#if:{{{w3w}}}|{{!}}style="width:9em; padding-left:5px; vertical-align:top; background:;" {{!}} '''[https://what3words.com what3words]'''
{{#if:{{{w3w}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''[https://what3words.com what3words]'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} [https://what3words.com/{{{w3w}}} {{{w3w}}}]}}
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} [https://what3words.com/{{{w3w}}} {{{w3w}}}]}}
|-
|-
{{#if:{{{elevation}}}|{{!}}style="width:9em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Elevation'''
{{#if:{{{elevation}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''Elevation'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{elevation}}}}}
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{elevation}}}}}
|-
|-
{{#if:{{{view-direction}}}|{{!}}style="width:9em; padding-left:5px; vertical-align:top; background:;" {{!}} '''View direction'''
{{#if:{{{view-direction}}}|{{!}}style="width:12em; padding-left:5px; vertical-align:top; background:;" {{!}} '''View direction'''
{{!}}style="padding-left:5px; vertical-align:top;" {{!}} {{{view-direction}}}}}
{{!}}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>
</div>

Revision as of 19:21, 9 March 2023

[[File:{{{image}}}|center|{{{image-size}}}px|{{{image-alt}}}]]
{{{image-caption}}}

{{{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.

Loading map...
Author {{{Author}}}
Date taken {{{date-taken}}}
Location
Decimal degrees {{{latitude}}} / {{{longitude}}}
OS grid reference {{{os-grid}}}
what3words {{{w3w}}}
Elevation {{{elevation}}}
View direction {{{view-direction}}}
Other Details
File size {{{file-size}}}
Dimensions {{{dimensions}}}
Licence {{{licence}}}
Cookies help us deliver our services. By using our services, you agree to our use of cookies.