<!-- svg icon sprite -->
<svg class="dn">
<symbol viewBox="0 0 24 24" id="card">
<path fill="currentColor" d="M17 3H7c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
</symbol>
<symbol viewBox="0 0 24 24" id="substitute">
<path fill="currentColor" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z "></path>
</symbol>
</svg>
<main class="dark-gray sans-serif grid matchday">
<nav class="a-✈️ bg-yellow pa3 flex items-baseline">
<div class="content-measure center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 30" width="120" class="dark-gray">
<path fill="currentColor" d="M8.5 17.4l-3.1-1.9c-2-1.2-3.4-2.4-4.2-3.6C.4 10.7 0 9.3 0 7.8c0-2.3.8-4.2 2.4-5.6C3.9.8 6 0 8.5 0c2.4 0 4.6.7 6.6 2.1v4.8c-2.1-2-4.3-3-6.7-3-1.4-.1-2.5.2-3.3.9-.9.6-1.3 1.4-1.3 2.4 0 .9.3 1.7 1 2.5.6.8 1.7 1.6 3.1 2.4L11 14c3.5 2.1 5.3 4.8 5.3 8.1 0 2.3-.8 4.2-2.3 5.7-1.5 1.5-3.5 2.2-6 2.2-2.8 0-5.4-.9-7.7-2.7V22c2.2 2.9 4.8 4.3 7.7 4.3 1.3 0 2.4-.4 3.2-1.1.9-.7 1.3-1.6 1.3-2.7-.2-1.8-1.4-3.5-4-5.1zm12 12.3V.4h9.1c2.7 0 4.9.8 6.6 2.3 1.6 1.5 2.4 3.5 2.4 6.1 0 1.7-.4 3.2-1.3 4.5-.8 1.3-2 2.3-3.4 2.9-1.5.6-3.5.9-6.2.9h-3v12.7h-4.2zm8.4-25.6h-4.3v9.1h4.5c1.7 0 3-.4 3.9-1.2.9-.8 1.4-2 1.4-3.4-.1-3-1.9-4.5-5.5-4.5zM56.3 0c4.4 0 8.1 1.4 11.1 4.3s4.4 6.4 4.4 10.8c0 4.3-1.5 7.9-4.5 10.7-3 2.8-6.7 4.2-11.3 4.2-4.3 0-7.9-1.4-10.8-4.2-2.9-2.8-4.3-6.4-4.3-10.6 0-4.4 1.5-8 4.4-10.8 2.9-3 6.5-4.4 11-4.4zm.1 4c-3.3 0-6 1-8.1 3.1-2.1 2.1-3.2 4.8-3.2 8s1.1 5.8 3.2 7.9c2.1 2.1 4.8 3.1 8 3.1s5.9-1.1 8-3.2c2.1-2.1 3.2-4.8 3.2-8 0-3.1-1.1-5.7-3.2-7.8C62.2 5 59.6 4 56.4 4zm20.5 25.7V.4h7.2c2.9 0 5.2.7 6.9 2.2 1.7 1.5 2.6 3.4 2.6 5.9 0 1.7-.4 3.2-1.3 4.4-.8 1.2-2 2.2-3.6 2.8.9.6 1.8 1.5 2.7 2.5.9 1.1 2.1 2.9 3.7 5.5 1 1.7 1.8 2.9 2.4 3.7l1.5 2.1h-4.9l-1.3-1.9c0-.1-.1-.2-.2-.4l-.8-1.2-1.3-2.1-1.4-2.3c-.8-1.2-1.6-2.2-2.3-2.9-.7-.7-1.3-1.2-1.9-1.5-.6-.3-1.5-.5-2.9-.5h-1.1v12.7h-4zM82.3 4h-1.2v9.2h1.6c2.1 0 3.5-.2 4.3-.5.8-.4 1.4-.9 1.8-1.6.4-.7.6-1.6.6-2.5 0-.9-.2-1.8-.7-2.5-.5-.7-1.2-1.3-2-1.6-1-.4-2.4-.5-4.4-.5zM96 .4h24v3.7h-10v25.6h-4.1V4.1H96V.4z" />
</svg>
<a href="/sport/football" class="dark-gray link f3 ttu fw5 ml3">Football </a>
</div>
</nav>
<aside class="a-⚽️ grid overview bg-near-black white mt pv4 ph3 ph0-l lh-copy">
<!-- match date -->
<time datetime="2017-02-26" class="j-self-end hs2 f7 ttu b">SUN, 26 Feb 2017</time>
<!-- match type -->
<span class="hs2 f7 ttu">EFL Cup - Final</span>
<!-- Home Team Name -->
<abbr title="Manchester United" class="j-self-end self-center f4 f3-ns">
<span class="dn dn-m di-l">Manchester United</span>
<span class="di di-m dn-l">Man Utd</span>
</abbr>
<!-- Home Team Goals -->
<span class="dib bg-yellow dark-gray fw8 lh-solid tc self-center h2 flex items-center justify-center f4 f3-ns pv0 pv2-ns ph2 ph3-ns">3</span>
<!-- Away Team Goals -->
<span class="dib bg-yellow dark-gray fw8 lh-solid tc self-center h2 flex items-center justify-center f4 f3-ns pv0 pv2-ns ph2 ph3-ns">2</span>
<!-- Away Team Name -->
<abbr title="Southampton" class="self-center f4 f3-ns">Southampton</abbr>
<!-- Home info -->
<ul class="ph0 mv0 list j-self-end f7 f6-ns tr">
<li class="dib">
Ibrahimovic
(19'<span class="clip"> minutes</span>,
87'<span class="clip"> minutes</span>),
</li>
<li class="dib">
Lingard
(38'<span class="clip"> minutes</span>)
</li>
</ul>
<!-- Clock & HT score -->
<div class="hs2 tc">
<abbr title="Full Time" class="db yellow f7 mb2">FT</abbr>
<div class="f7">
<abbr title="Half Time">HT</abbr>
2 - 1
</div>
</div>
<!-- Away info -->
<ul class="ph0 mv0 list f7 f6-ns">
<li class="dib">
Gabbiadini
(45'+1<span class="clip"> minutes</span>,
48'<span class="clip"> minutes</span>)
</li>
</ul>
</aside>
<!-- Media Section -->
<header class="a-🖼 cover bg-top relative white vh-50 inset-shadow-ns flex items-end"
style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/united.jpg');">
<div class="a-🎩 content-measure center ho1 white flex items-end ph3 ph0-l pb5-l">
<div class="z-1 pv4 ph3 nl3 nr3 bg-near-black bg-transparent-ns">
<h1 class="mt0 mb2 w-80-l f3 f2-ns lh-title">EFL Cup final: Reaction as Ibrahimovic breaks Saints hearts</h1>
<div class="flex items-center">
<svg viewBox="0 0 32 32" width="1em" height="1em" fill="currentColor" class="dib mr2 f7">
<polygon points="17,15.4 17,6 15,6 15,16.6 23.8,21.7 24.8,19.9"></polygon>
<path d="M16,4c6.6,0,12,5.4,12,12c0,6.6-5.4,12-12,12S4,22.6,4,16C4,9.4,9.4,4,16,4 M16,0C7.2,0,0,7.2,0,16c0,8.8,7.2,16,16,16 s16-7.2,16-16C32,7.2,24.8,0,16,0L16,0z"></path>
</svg>
<time datetime="2017-02-26T14:00:00+00:00" class="f7">
26 Feb 2017
</time>
</div>
</div>
</div>
</header>
<!-- Summary -->
<aside class="a-👀 bg-near-white nt5-l z-1 bt b--blue bw2 ph3 pb3 top-1 self-start sticky-l sticky-xl">
<h2 class="fw4 f4">Summary</h2>
<ul class="list--square pl3 f6 lh-copy mv0">
<li class="mb2">Listen on BBC Radio 5 live using the audio button</li>
<li class="mb2">Ibrahimovic heads in for late Man Utd glory</li>
<li class="mb2">Gabbiadini had scored twice to bring Saints back to 2-2</li>
<li class="mb2">Lingard and Ibrahimovic gave United 2-0 lead</li>
<li class="mb2">Mourinho could become first Man Utd boss to win trophy in first season</li>
<li class="mb0">Southampton looking for first major trophy since 1976</li>
</ul>
</aside>
<!-- Tab Navigation for when content is collapsed -->
<section class="a-🗂 a-📋-l a-📋-xl bg-near-white bg-transparent-l dn-xl nt5-l z-1 lh-title">
<ul role="tablist" class="list pl0 mv0 flex">
<li role="presentation" class="flex-auto mr2">
<button role="tab" aria-selected="true" aria-controls="tab-live-reporting" tabindex="0"
onclick="activateTab('tab-live-reporting')"
id="js-reporting-btn"
class="f6 underline-hover pa0 dark-gray bl-0 br-0 bb-0 w-100 h3 b pointer bg-white bt bw2 b--blue">
Live Reporting
</button>
</li>
<li role="presentation" class="flex-auto mr2">
<button role="tab" aria-selected="false" aria-controls="tab-match-stats" tabindex="-1"
onclick="activateTab('tab-match-stats')"
id="js-stats-btn"
class="f6 underline-hover pa0 dark-gray bl-0 br-0 bb-0 w-100 h3 b pointer bg-moon-gray bt-0">
Match Stats
</button>
</li>
<li role="presentation" class="flex-auto mr2">
<button role="tab" aria-selected="false" aria-controls="tab-line-ups" tabindex="-1"
onclick="activateTab('tab-line-ups')"
id="js-line-ups-btn"
class="f6 underline-hover pa0 dark-gray bl-0 br-0 bb-0 w-100 h3 b pointer bg-moon-gray bt-0">
Line-ups
</button>
</li>
</ul>
</section>
<!-- Live Reporting -->
<section class="a-📋 a-📻-xl bg-white nt5-xl z-2 lh-copy mb4" id="js-reporting"
aria-labelledby="tab-live-reporting" role="tabpanel">
<header class="bb-xl b--moon-gray ph3 pb3 pt0 pt3-xl">
<h2 class="mv0 fw4 f4 dn db-xl">Live Reporting</h2>
<p class="f6 mb0 flex items-end">By Shamoon Hafez
<span class="flex-auto"></span>
<button class="justify-end bg-dark-blue w4 h2 bt-0 bl-0 br-0 b bw1 white bb b--navy grow pointer">Get involved</button>
</p>
</header>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">14:20</span>
<span class="di db-ns">26 Feb</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<h2 class="mt0 mb1 lh-solid f4">Goodbye</h2>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<p>One of THE great cup finals.</p>
<ul class="pl4">
<li>Jose Mourinho joins legends Sir Alex Ferguson and Brian Clough in winning the League Cup four times.</li>
<li>Mourinho becomes the first Manchester United manager to win a major trophy in his first season.</li>
<li>Mourinho keeps up a 100% winning record in English domestic finals.</li>
</ul>
<p>But it is Zlatan Ibrahimovic's name which will be at the top of the headlines after the Swede scored twice, including a late winner, to give United victory over Southampton.</p>
<p><a class="link hover-blue bb b--moon-gray b dark-gray" href="http://www.bbc.co.uk/sport/football/39018813" alt="Have a read of Phil McNulty's match report from Wembley">Have a read of Phil McNulty's match report from Wembley</a></p>
<p>We are back on Monday for Premier League action as champions Leicester take on Liverpool.</p>
<p>Until then.</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">13:49</span>
<span class="di db-ns">26 Feb</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<p class="mv0 f6">Manchester United win EFL Cup</p>
</header>
<p>A dab from Paul Pogba with the trophy. Of course.</p>
<p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/pogba.jpg" alt="Paul Pogba celebrates" /></p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">13:46</span>
<span class="di db-ns">26 Feb</span>
</time>
<div class="pb3">
<header>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<div class="mt3 flex items-center">
<img class="br-100 w3 h3 mr2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/shearer.jpg" />
<div class="f6">
<p class="mv0">Alan Shearer</p>
<p class="mv0">Ex-Southampton striker on BBC Radio 5 live</p>
</div>
</div>
<p>Zlatan made all the difference. It was a stunning free kick.</p>
<p>The way he used all of his experience - not just in his two goals but everywhere on the pitch, he deserves that Man of the Match trophy.</p>
</div>
</article>
<article class="grid-ns post ph3 pt4 bg-lightest-blue">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">13:37</span>
<span class="di db-ns">26 Feb</span>
</time>
<div class="pb3">
<header class="flex items-start">
<svg viewBox="0 0 32 32" width="4rem" class="pr3 border-box"><g fill="#4E7A22"><path d="M3 23.1l-.7.7.7-.7-.7.7c-.4.4-.5.8-.1 1.2l4.4 4.4c.4.4.9.4 1.3 0l.1-.1.6-.6L3 23.1zM19.8 10.5l-2.4 2.4s-1.2 1.2-2.7 2c-1.5.8-4.3 2-5.5 2.7-1.2.7-2 1.4-2.7 1.9l5.5 5.6.1-.1c.5-.7 1.2-1.5 1.9-2.7.7-1.2 2-3.9 2.8-5.3.8-1.5 2-2.6 2-2.6l2.5-2.4-1.5-1.5z"></path></g><path fill="#FFF" d="M14.8 21.4c-.2-.1-2.2-.7-3-1.5-.8-.8-1.4-2.8-1.5-3l.9-.3c.2.5.7 2 1.3 2.6.5.5 2 1.1 2.6 1.3l-.3.9z"></path><path fill="#CCC" d="M25.566 5.908l.707.707-3.606 3.606-.707-.706zM26.1 14.9c-.6 0-1.2-.2-1.6-.7-.8-.8-.8-2 0-2.7l.7.7c-.2.2-.3.4-.3.7 0 .2.1.5.3.7.5.5 1.3.5 1.8 0 .7-.7.7-1.8 0-2.4-.9-.9-2.7-1-3.6-.1l-.7-.7c.6-.6 1.5-.9 2.5-.9s1.9.4 2.5 1c1.1 1.1 1.1 2.8 0 3.9-.4.3-1 .5-1.6.5zM21.9 9.4l-.7-.7c.8-.9.8-2.6-.1-3.5-.7-.7-1.8-.7-2.4 0-.5.5-.5 1.3 0 1.8l-.7.7c-.9-.9-.9-2.3 0-3.2 1.1-1.1 2.8-1.1 3.9 0 .6.6 1 1.5 1 2.5-.1.9-.4 1.8-1 2.4z"></path><path d="M8.6 28.7L3 23.1l3.5-3.5 5.5 5.6z"></path><path fill="#C7B299" d="M28 6.8l1-1.5c.2.1.5.1.7-.1l.2-.2c.3-.3.3-.7 0-1l-1-1c-.3-.3-.7-.2-.9 0l-.2.2c-.2.2-.2.5-.1.7l-1.5.9 1.8 2z"></path></svg>
<div>
<h2 class="mt0 mb1 lh-solid ttu flex items-center f4">
<span class="ttu bg-blue dib white f6 pa1 f7 fw4 mr2">Breaking</span>
CHAMPAGNE MOMENT
</h2>
<p class="mv0 f6">Manchester United win EFL Cup</p>
</div>
</header>
<p>🏆🏆🏆</p>
<p>Wayne Rooney lifts the trophy.</p>
<p>Manchester United are the EFL Cup champions.</p>
<p>Jose Mouriho becomes the first United manager to win a trophy in his first season at the club.</p>
<p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/trophy.jpg" alt="Wayne Rooney" /></p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">13:35</span>
<span class="di db-ns">26 Feb</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<p class="mv0 f6">Manchester United win EFL Cup</p>
</header>
<p>Zlatan Ibrahimovic is named the man of the match.</p>
<p>Surprise, surprise.</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">13:28</span>
<span class="di db-ns">26 Feb</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<p class="mv0 f6">Manchester United win EFL Cup</p>
</header>
<p>They signed him on a free, but Zlatan Ibrahimovic has been a priceless acquisition for Manchester United.</p>
<p>26 goals for the season now, including two in the EFL Cup final against Southampton.</p>
<p>It is the 19th major trophy of his illustrious career and first for United.</p>
<p>"This is what I came for, I came to win," he tells Sky Sports.</p>
<p>Big game player.</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">13:23</span>
<span class="di db-ns">26 Feb</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<h2 class="f4 mt0 mb1 lh-solid">FULL-TIME</h2>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<p>It's four in four for Jose Mourinho, as Manchester United beat Southampton in an epic EFL Cup final.</p>
<p>Zlatan Ibrahimovic with the winning goal three minutes from time.</p>
<p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/full-time.jpg" alt="Manchester United celebrate" /></p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">90+4 mins</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<p>Match-winner Zlatan Ibrahimovic earns a free-kick deep in the attacking half.</p>
<p>Time is up.</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">90+3 mins</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<p>Pumped into the Manchester United area...</p>
<p>...it falls to Ryan Bertrand...</p>
<p>...but the left-backs shot is blocked by a red shirt.</p>
<p>United almost there.</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">90+3 mins</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<p>Can Southampton take it into extra time???</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">90+3 mins</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<p>INTO THE LAST MINUTE.</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">90+2 mins</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<p>Clever from Paul Pogba, goes down under a challenge from a Southampton man.</p>
<p>Eats away a few more seconds.</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">90+2 mins</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<p>"We'll never die, we'll never die, we'll keep the red flag flying high," sing the United fans at Wembley.</p>
<p>120 seconds left.</p>
<p>Southampton need to get the ball forward.</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">90+1 mins</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<p>Is there a twist left in this match? Can Southampton reply as they did early in the match?</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">90 mins</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<p>The 90 minutes are up.</p>
<p>FOUR ADDED ON.</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">89 mins</span>
</time>
<div class="bb b--moon-gray pb3">
<header>
<h2 class="f4 mt0 mb1 lh-solid">SUBSTITUTION</h2>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<p>Wayne Rooney was getting ready to come on, his tracksuit was off and he celebrated the goal wildly but he won't be making his entrance anymore.</p>
<p>On comes Marouane Fellaini instead, replacing Anthony Martial.</p>
<p>Southampton have to go for it and send on striker Jay Rodriguez for Steven Davies.</p>
<p>One minute left.</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">13:16</span>
<span class="di db-ns">26 Feb</span>
</time>
<div class="pb3">
<header>
<p class="mv0 f6">Man Utd 3-2 Southampton</p>
</header>
<div class="mt3 flex items-center">
<img class="br-100 w3 h3 mr2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/shearer.jpg" />
<div class="f6">
<p class="mv0">Alan Shearer</p>
<p class="mv0">Ex-Southampton striker on BBC Radio 5 live</p>
</div>
</div>
<p>What a ball that was into Ibrahimovic and no way was he going to miss that.</p>
<p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/zlatan.jpg" alt="Zlatan Ibrahimovic" />
</p>
</div>
</article>
<article class="grid-ns post ph3 pt4 bg-lightest-blue">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">89 mins</span>
</time>
<div class="pb3">
<header>
<div class="flex items-start">
<svg viewBox="0 0 32 32" width="3rem" class="dib mr2"><path d="M0 0v16h2v-4h3c.5-.9 1.3-2.6 2-3.3V7h2c.8-.5 2-1.3 3-1.6V2h3v3h2V2h3V5.3c.9.3 2.2 1.1 3 1.6h2v1.7c.7.8 1.5 2.3 2 3.3h3v4h2V0H0zm5 10H2V7h3v3zm0-5H2V2h3v3zm5 0H7V2h3v3zm15 0h-3V2h3v3zm5 5h-3V7h3v3zm0-5h-3V2h3v3z"></path><circle fill="#FFF" cx="16" cy="16.7" r="10"></circle><path d="M12.6 15.6l1.3 4h4.2l1.3-4-3.4-2.5z"></path><path d="M16 6C9.9 6 5 10.9 5 17s4.9 11 11 11 11-4.9 11-11S22.1 6 16 6zm7.8 17.2l-.2-1.6-3.7.8-1.9 3.2 1.5.7c-1.1.4-2.3.7-3.5.7-1.2 0-2.4-.2-3.5-.6l1.5-.7-1.9-3.2-3.7-.8-.2 1.6C6.9 21.5 6 19.4 6 17v-.4l1.1 1.2L9.7 15l-.4-3.7-1.6.3c1.3-2 3.3-3.5 5.7-4.1l-.8 1.4 3.4 1.5 3.4-1.5-.8-1.4c2.4.5 4.4 2 5.7 4l-1.6-.3-.4 3.7 2.5 2.8 1.1-1.2v.5c.1 2.3-.8 4.5-2.1 6.2z"></path></svg>
<div>
<h2 class="f4 mt0 mb1 lh-solid">GOAL - Man Utd 3-2 Southampton</h2>
<p class="mv0 f6">Zlatan Ibrahimovic</p>
</div>
</div>
</header>
<p>It is him again, who else!!</p>
<p>From getting away at one end, United score at the other.</p>
<p>Ander Herrera's cross is pin-point onto the head of <b>Zlatan Ibrahimovic</b>, who heads home from six yards out.</p>
<p>No way he was missing that.</p>
<p>Heartbreak for the Saints.</p>
<p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/goal.jpg" alt="Zlatan Ibrahimovic" />
</p>
<p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/celebration.jpg" alt="Manchester United celebrate" />
</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">86 mins</span>
</time>
<div class="pb3 bb b--moon-gray">
<header>
<p class="mv0 f6">Man Utd 2-2 Southampton</p>
</header>
<p>United break to the other end...</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">86 mins</span>
</time>
<div class="pb3 bb b--moon-gray">
<header>
<h2 class="f4 mt0 mb1 lh-solid">OFF THE LINE!</h2>
<p class="mv0 f6">Man Utd 2-2 Southampton</p>
</header>
<p>Oh so close for Southampton.</p>
<p>Ryan Bertrand puts a brilliant ball into the area, not for the first time, but Shane Long cannot prod it home.</p>
<p>From the resulting corner, Zlatan Ibrahimovic heads Jack Stephens's effort off the line.</p>
</div>
</article>
<article class="grid-ns post ph3 pt4">
<time class="f6 tr-ns mb3 mb0-ns db">
<span class="clip">Posted at</span>
<span class="di db-ns">85 mins</span>
</time>
<div class="pb3">
<header>
<p class="mv0 f6">Man Utd 2-2 Southampton</p>
</header>
<p>Wayne Rooney taking instructions from assistant manager Rui Faria.</p>
<p>The bib is off.</p>
</div>
</article>
<div class="grid-ns post ph3 pt4">
<button class="ho1 w-100 f6 bg-green pv2 bt-0 bl-0 br-0 b bw1 white bb b--dark-green grow pointer">Show more updates</button>
</div>
</section>
<!-- Stats -->
<aside class="a-📋 a-📊-xl bg-white ph3 pt3 pt0-xl nt5-xl z-1" id="js-stats"
aria-labelledby="tab-match-stats" role="tabpanel">
<h2 class="fw4 f4 dn db-xl">Match Stats</h2>
<div class="flex items-center justify-center">
<span class="clip">Home Team</span><span class="w1 h1 dib bg-dark-blue mr2"></span>
<span class="mr3">Man Utd</span>
<span class="clip">Away Team</span><span class="w1 h1 dib bg-blue mr2"></span> Southampton
</div>
<dl class="tc lh-copy">
<dl>
<dt class="b mb1">Possession</dt>
<dd class="dib ml0 bg-dark-blue white br bw1 pv1 fl tl pl2" style="width:48.3%;">
<span class="clip">Home</span>
<span>48%</span>
</dd>
<dd class="dib ml0 bg-blue white pv1 tr pr2" style="width:51.7%;">
<span class="clip">Away</span>
<span>52%</span>
</dd>
</dl>
<dl>
<dt class="b mb1">Shots</dt>
<dd class="dib ml0 bg-dark-blue white br bw1 pv1 fl tl pl2" style="width:45.45454545454545%;">
<span class="clip">Home</span>
<b>10</b>
</dd>
<dd class="dib ml0 bg-blue white pv1 tr pr2" style="width:54.54545454545454%;">
<span class="clip">Away</span>
<b>12</b>
</dd>
</dl>
<dl>
<dt class="b mb1">Shots on Target</dt>
<dd class="dib ml0 bg-dark-blue white br bw1 pv1 fl tl pl2" style="width:54.54545454545454%;">
<span class="clip">Home</span>
<b>6</b>
</dd>
<dd class="dib ml0 bg-blue white pv1 tr pr2" style="width:45.45454545454545%;">
<span class="clip">Away</span>
<b>5</b>
</dd>
</dl>
<dl>
<dt class="b mb1">Corners</dt>
<dd class="dib ml0 bg-dark-blue white br bw1 pv1 fl tl pl2" style="width:20%;">
<span class="clip">Home</span>
<b>3</b>
</dd>
<dd class="dib ml0 bg-blue white pv1 tr pr2" style="width:80%;">
<span class="clip">Away</span>
<b>12</b>
</dd>
</dl>
<dl>
<dt class="b mb1">Fouls</dt>
<dd class="dib ml0 bg-dark-blue white br bw1 pv1 fl tl pl2" style="width:45.83333333333333%;">
<span class="clip">Home</span>
<b>11</b>
</dd>
<dd class="dib ml0 bg-blue white pv1 tr pr2" style="width:54.166666666666664%;">
<span class="clip">Away</span>
<b>13</b>
</dd>
</dl>
</dl>
</aside>
<!-- line-ups -->
<aside class="a-📋 a-🤼-xl bg-white ph3 pt3 pt5-xl z-1 flex flex-wrap content-start"
id="js-line-ups"
aria-labelledby="tab-line-ups" role="tabpanel">
<h2 id="lx-football-team-lineups" class="mt0 fw4 f4 dn db-xl">Line-ups</h2>
<div class="flex-auto mr3">
<h3 class="mt0 mb3 f4">Man Utd</h3>
<ul class="list pl0">
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">1</b>
<abbr title="David de Gea">de Gea</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">25</b>
<abbr title="A Valencia">A Valencia</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">3</b>
<abbr title="Eric Bailly">Bailly</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">12</b>
<abbr title="Chris Smalling">Smalling</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">5</b>
<abbr title="Marcos Rojo">Rojo</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">21</b>
<abbr title="Ander Herrera">Herrera</abbr>
<span class="clip">Booked at 24mins</span>
<svg width="1em" height="1em" class="dib yellow ml2 f5 rot"><use xlink:href="#card"/></svg>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">6</b><abbr title="Paul Pogba">Pogba</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">8</b>
<abbr title="Juan Mata">Mata</abbr>
<span class="clip">Substituted for</span>
<svg width="1em" height="1em" class="dib mh2 f5"><use xlink:href="#substitute"/></svg>
<abbr title="Michael Carrick" class="mr1">Carrick</abbr>
<span class="clip">at</span>45'<span class="clip">minutes</span>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">14</b>
<abbr title="Jesse Lingard">Lingard</abbr>
<span class="clip">Booked at 41mins</span>
<svg width="1em" height="1em" class="dib yellow mh2 f5 rot"><use xlink:href="#card"/></svg>
<span class="clip">Substituted for</span>
<svg width="1em" height="1em" class="dib mr1 f5"><use xlink:href="#substitute"/></svg>
<abbr title="Marcus Rashford" class="mr1">Rashford</abbr>
<span class="clip">at</span>77'<span class="clip">minutes</span>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">11</b>
<abbr title="Anthony Martial">Martial</abbr>
<span class="clip">Substituted for</span>
<svg width="1em" height="1em" class="dib mh2 f5"><use xlink:href="#substitute"/></svg>
<abbr title="Marouane Fellaini" class="mr1">Fellaini</abbr>
<span class="clip">at</span>90'<span class="clip">minutes</span>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">9</b>
<abbr title="Zlatan Ibrahimovic">Ibrahimovic</abbr>
</li>
</ul>
<h4 class="fw4 f4 mb3">Substitutes</h4>
<ul class="list pl0 mb4">
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">10</b>
<abbr title="Wayne Rooney">Rooney</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">16</b>
<abbr title="Michael Carrick">Carrick</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">17</b>
<abbr title="Daley Blind">Blind</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">18</b>
<abbr title="Ashley Young">Young</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">19</b>
<abbr title="Marcus Rashford">Rashford</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">20</b>
<abbr title="Sergio Romero">Romero</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">27</b>
<abbr title="Marouane Fellaini">Fellaini</abbr>
</li>
</ul>
</div>
<div class="flex-auto mb5">
<h3 class="mt0 mb3 f4">Southampton</h3>
<ul class="list pl0">
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">1</b>
<abbr title="Fraser Forster">Forster</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">2</b>
<abbr title="Cédric Soares">Soares</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">24</b>
<abbr title="Jack Stephens">Stephens</abbr>
<span class="clip">Booked at 40mins</span>
<svg width="1em" height="1em" class="dib yellow ml2 f5 rot"><use xlink:href="#card"/></svg>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">3</b>
<abbr title="Maya Yoshida">Yoshida</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">21</b>
<abbr title="Ryan Bertrand">Bertrand</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">16</b>
<abbr title="James Ward-Prowse">Ward-Prowse</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">14</b>
<abbr title="Oriol Romeu">Romeu</abbr>
<span class="clip">Booked at 18mins</span>
<svg width="1em" height="1em" class="dib yellow ml2 f5 rot"><use xlink:href="#card"/></svg>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">8</b>
<abbr title="Steven Davis">Davis</abbr>
<span class="clip">Substituted for</span>
<svg width="1em" height="1em" class="dib mh2 f5"><use xlink:href="#substitute"/></svg>
<abbr title="Jay Rodriguez" class="mr1">Rodriguez</abbr>
<span class="clip">at</span>90'<span class="clip">minutes</span>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">22</b>
<abbr title="Nathan Redmond">Redmond</abbr>
<span class="clip">Booked at 56mins</span>
<svg width="1em" height="1em" class="dib yellow ml2 f5 rot"><use xlink:href="#card"/></svg>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">11</b>
<abbr title="Dusan Tadic">Tadic</abbr>
<span class="clip">Substituted for</span>
<svg width="1em" height="1em" class="dib mh2 f5"><use xlink:href="#substitute"/></svg>
<abbr title="Sofiane Boufal" class="mr1">Boufal</abbr>
<span class="clip">at</span>77'<span class="clip">minutes</span>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">20</b>
<abbr title="Manolo Gabbiadini">Gabbiadini</abbr>
<span class="clip">Substituted for</span>
<svg width="1em" height="1em" class="dib mh2 f5"><use xlink:href="#substitute"/></svg>
<abbr title="Shane Long" class="mr1">Long</abbr>
<span class="clip">at</span>83'<span class="clip">minutes</span>
</li>
</ul>
<h4 class="fw4 f4 mb3">Substitutes</h4>
<ul class="list pl0 mb0">
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">7</b>
<abbr title="Shane Long">Long</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">9</b>
<abbr title="Jay Rodriguez">Rodriguez</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">12</b>
<abbr title="Martín Cáceres">Cáceres</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">19</b>
<abbr title="Sofiane Boufal">Boufal</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">23</b>
<abbr title="Pierre-Emile Højbjerg">Højbjerg</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">38</b>
<abbr title="Sam McQueen">McQueen</abbr>
</li>
<li class="pa2 bb b--moon-gray flex items-center">
<b class="w2 dib">40</b>
<abbr title="Mouez Hassen">Hassen</abbr>
</li>
</ul>
</div>
<div class="lh-copy w-100">
<dl class="mv0">
<dt class="dib b">Referee:</dt>
<dd class="dib ml0">Andre Marriner</dd>
</dl>
<dl class="mv0">
<dt class="dib b">Attendance:</dt>
<dd class="dib ml0">85,264</dd>
</dl>
</div>
</aside>
</main>
/**
* Main layout for the entire page
*/
.matchday {
grid-column-gap: 1rem;
grid-template-columns: 1fr;
grid-template-areas:
"✈️"
"⚽️"
"🖼"
"👀"
"🗂"
"📋";
}
@media screen and (min-width: 60em) and (max-width: 80em) {
.matchday {
grid-template-columns: 1fr 18rem 40rem 1fr;
grid-template-areas:
"✈️ ✈️ ✈️ ✈️"
"⚽️ ⚽️ ⚽️ ⚽️"
"🖼 🖼 🖼 🖼"
". 👀 📋 .";
}
}
@media screen and (min-width: 80em) {
.matchday {
grid-template-columns: 1fr 18rem 40rem 18rem 1fr;
grid-template-rows: auto auto auto auto 1fr;
grid-template-areas:
"✈️ ✈️ ✈️ ✈️ ✈️"
"⚽️ ⚽️ ⚽️ ⚽️ ⚽️"
"🖼 🖼 🖼 🖼 🖼"
". 👀 📻 📊 ."
". 👀 📻 🤼 .";
}
}
.content-measure { width: 100%; }
@media screen and (min-width: 60em) and (max-width: 80em) { .content-measure { width: 59rem; } }
@media screen and (min-width: 80em) { .content-measure { width: 78rem; } }
/**
* areas
*/
.a-✈️ { grid-area: ✈️; }
.a-⚽️ { grid-area: ⚽️; }
.a-🖼 { grid-area: 🖼; }
.a-👀 { grid-area: 👀; }
.a-📻 { grid-area: 📻; }
.a-📊 { grid-area: 📊; }
.a-🤼 { grid-area: 🤼; }
.a-🗂 { grid-area: 🗂; }
.a-📋 { grid-area: 📋; }
@media screen and (min-width: 30em) { .a-📋-ns { grid-area: 📋; } }
@media screen and (min-width: 30em) and (max-width: 60em) { .a-📋-m { grid-area: 📋; } }
@media screen and (min-width: 60em) and (max-width: 80em) { .a-📋-l { grid-area: 📋; } }
@media screen and (min-width: 80em) {
.a-📊-xl { grid-area: 📊; }
.a-🤼-xl { grid-area: 🤼; }
.a-📻-xl { grid-area: 📻; }
}
/**
* Layout for overview
*/
.overview {
grid-template-columns: 1fr auto auto 1fr;
grid-gap: 0.5rem;
}
/**
* Layout for commentary post
*/
@media screen and (min-width: 30em) and (max-width: 60em) {
.post {
grid-template-columns: 3rem 1fr;
grid-column-gap: 1rem;
}
}
@media screen and (min-width: 60em) {
.post {
grid-template-columns: 3rem 1fr 3rem;
grid-column-gap: 1rem;
}
}
/**
* Uitls
*/
abbr[title] { text-decoration: none; }
.grid { display: grid; }
.j-self-end { justify-self: end; }
.j-self-center { justify-self: center; }
.list--square { list-style-type: square; }
.rot { transform: rotate(10deg); transform-origin: 50% 50%; }
@media screen and (min-width: 30em) {
.bg-transparent-ns { background-color: transparent; }
.grid-ns { display: grid; }
}
@media screen and (min-width: 60em) and (max-width: 80em) {
.sticky-l { position: sticky; }
.bg-transparent-l { background-color: transparent; }
}
@media screen and (min-width: 80em) {
.sticky-xl { position: sticky; }
.nt5-xl { margin-top: -4rem; }
.dn-xl { display: none; }
.db-xl { display: block; }
.pt0-xl { padding-top: 0; }
.pt3-xl { padding-top: 1rem; }
.pt5-xl { padding-top: 4rem; }
.bb-xl { border-bottom-style: solid; border-bottom-width: 1px; }
}
/**
* Offsets
*/
.ho1 { grid-column-start: 2; }
.ho2 { grid-column-start: 3; }
.ho3 { grid-column-start: 4; }
.ho4 { grid-column-start: 5; }
.ho5 { grid-column-start: 6; }
/**
* Col and row spans
*/
.hs1 { grid-column-end: span 1; }
.hs2 { grid-column-end: span 2; }
.hs3 { grid-column-end: span 3; }
.hs4 { grid-column-end: span 4; }
.hs5 { grid-column-end: span 5; }
.hs--end { grid-column-end: -1; }
.hs--full { grid-column: 1 / -1; }
.vs1 { grid-row-end: span 1; }
.vs2 { grid-row-end: span 2; }
@media screen and (min-width: 30em) {
.hs1-ns { grid-column-end: span 1; }
.hs2-ns { grid-column-end: span 2; }
.hs3-ns { grid-column-end: span 3; }
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.hs1-m { grid-column-end: span 1; }
.hs2-m { grid-column-end: span 2; }
.hs3-m { grid-column-end: span 3; }
}
@media screen and (min-width: 60em) {
.hs1-l { grid-column-end: span 1; }
.hs2-l { grid-column-end: span 2; }
.hs3-l { grid-column-end: span 3; }
}
@media screen and (min-width: 30em) {
.inset-shadow-ns:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background-image: linear-gradient(180deg,rgba(0, 0, 0, 0),rgba(18, 18, 18, 0.1) 30%,rgba(18, 18, 18, 0.6) 45%,rgba(18, 18, 18, 0.9) 65%,#121212 90%);
}
}
var tabs = [];
window.onload = function init() {
tabs = [{
id: 'tab-live-reporting',
node: document.querySelector('#js-reporting'),
btn: document.querySelector('#js-reporting-btn'),
}, {
id: 'tab-match-stats',
node: document.querySelector('#js-stats'),
btn: document.querySelector('#js-stats-btn'),
}, {
id: 'tab-line-ups',
node: document.querySelector('#js-line-ups'),
btn: document.querySelector('#js-line-ups-btn'),
}];
};
function activateTab(type) {
tabs.forEach(function updateTab(tab) {
if (tab.id === type) {
tab.node.classList.remove('z-1');
tab.node.classList.add('z-2');
tab.btn.classList.remove('bg-moon-gray', 'bt-0');
tab.btn.classList.add('bg-white', 'bt', 'bw2', 'b--blue');
} else {
tab.node.classList.remove('z-2');
tab.node.classList.add('z-1');
tab.btn.classList.remove('bg-white', 'bt', 'bw2', 'b--blue');
tab.btn.classList.add('bg-moon-gray', 'bt-0');
}
});
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.