399 lines
18 KiB
HTML
399 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'>
|
|
|
|
<head>
|
|
<title>Indymedia Layout Test</title>
|
|
<meta charset='UTF-8'/>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<link rel='stylesheet' href='styles.css'/>
|
|
</head>
|
|
|
|
<base href='/' />
|
|
|
|
<body>
|
|
|
|
<header>
|
|
|
|
<h1>Snafu IMC</h1>
|
|
|
|
<div id='menu'>
|
|
<input type='checkbox' id='nav-check' />
|
|
<label id='nav-toggle' for='nav-check'>
|
|
<span id='nav-icon' />
|
|
</label>
|
|
|
|
<nav>
|
|
<li><a href='/'>Editorial</a></li>
|
|
<li><a href='/'>Mission</a></li>
|
|
<li><a href='/'>About</a></li>
|
|
<li><a href='/'>Contact</a></li>
|
|
<li><a href='/'>Help</a></li>
|
|
<li><a href='/'>Support Us</a></li>
|
|
</nav>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<div id='main-wrapper'>
|
|
|
|
<main id='feature'>
|
|
|
|
<article class='feature-item'>
|
|
<header>
|
|
<a href='#link-to-feature-article'>
|
|
<h2>An editorial feature piece</h2>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</a>
|
|
</header>
|
|
<section class='feature-description'>
|
|
<img class='feature-image' src='' />
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur
|
|
adipiscing elit, sed do eiusmod tempor incididunt
|
|
ut labore et dolore magna aliqua. Interdum
|
|
consectetur libero id faucibus nisl. Ut eu sem
|
|
integer vitae justo eget magna fermentum iaculis.
|
|
Amet justo donec enim diam. Fusce id velit ut
|
|
tortor pretium viverra suspendisse potenti.
|
|
Dignissim suspendisse in est ante in nibh. Urna
|
|
porttitor rhoncus dolor purus. Turpis cursus in
|
|
hac habitasse platea dictumst quisque sagittis.
|
|
Diam ut venenatis tellus in metus vulputate.
|
|
Pharetra magna ac placerat vestibulum.
|
|
</p>
|
|
</section>
|
|
<footer>
|
|
<section class='feature-links'>
|
|
<h4>Newswire Source(s):</h4>
|
|
<ul class='horizontal-list'>
|
|
<li>
|
|
<div class='source-document'>
|
|
<a href='#newswire-source-link'>Source 1</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class='source-video'>
|
|
<a href='#newswire-source-link'>Source 2</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class='source-photo'>
|
|
<a href='#newswire-source-link'>Source 3</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class='source-video'>
|
|
<a href='#newswire-source-link'>Source 4</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class='source-photo'>
|
|
<a href='#newswire-source-link'>Source 5</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class='feature-links'>
|
|
<h4>Other Source(s):</h4>
|
|
<ul class='horizontal-list'>
|
|
<li>
|
|
<div class='source-document'>
|
|
<a href='#other-source-link'>Other 1</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class='source-photo'>
|
|
<a href='#other-source-link'>Other 2</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class='feature-links'>
|
|
<h4>Tag(s):</h4>
|
|
<ul class='horizontal-list'>
|
|
<li>
|
|
<div class='hashtag'>
|
|
<a href='#some-hashtag-link'>#some-tag</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class='hashtag'>
|
|
<a href='#another-hashtag-link'>#another-tag</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</footer>
|
|
</article>
|
|
|
|
<article class='feature-item'>
|
|
<header>
|
|
<a href='#link-to-feature-article'>
|
|
<h2>An editorial feature piece</h2>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</a>
|
|
</header>
|
|
<section class='feature-description'>
|
|
<img class='feature-image' src='' />
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur
|
|
adipiscing elit, sed do eiusmod tempor incididunt
|
|
ut labore et dolore magna aliqua. Interdum
|
|
consectetur libero id faucibus nisl. Ut eu sem
|
|
integer vitae justo eget magna fermentum iaculis.
|
|
Amet justo donec enim diam. Fusce id velit ut
|
|
tortor pretium viverra suspendisse potenti.
|
|
Dignissim suspendisse in est ante in nibh. Urna
|
|
porttitor rhoncus dolor purus. Turpis cursus in
|
|
hac habitasse platea dictumst quisque sagittis.
|
|
Diam ut venenatis tellus in metus vulputate.
|
|
Pharetra magna ac placerat vestibulum.
|
|
</p>
|
|
</section>
|
|
<footer>
|
|
<section class='feature-links'>
|
|
<h4>Newswire Source(s):</h4>
|
|
<ul class='horizontal-list'>
|
|
<li>
|
|
<div class='source-document'>
|
|
<a href='#newswire-source-link'>Source 1</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class='source-video'>
|
|
<a href='#newswire-source-link'>Source 2</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class='source-photo'>
|
|
<a href='#newswire-source-link'>A long link to Source 3</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class='source-video'>
|
|
<a href='#newswire-source-link'>Source 4</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class='source-photo'>
|
|
<a href='#newswire-source-link'>Source 5</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class='feature-links'>
|
|
<h4>Other Source(s):</h4>
|
|
<ul class='horizontal-list'>
|
|
<li>
|
|
<div class='source-document'>
|
|
<a href='#other-source-link'>Other 1</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class='source-photo'>
|
|
<a href='#other-source-link'>Other 2</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class='feature-links'>
|
|
<h4>Tag(s):</h4>
|
|
<ul class='horizontal-list'>
|
|
<li>
|
|
<div class='hashtag'>
|
|
<a href='#some-hashtag-link'>#some-tag</a>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class='hashtag'>
|
|
<a href='#another-hashtag-link'>#another-tag</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</footer>
|
|
</article>
|
|
|
|
</main>
|
|
|
|
<aside id='newswire' class='clippable'>
|
|
|
|
<h2>Newswire</h2>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-photo'>
|
|
<h3>Some news photograph</h3>
|
|
<div class='newswire-meta source-photo'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-text'>
|
|
<h3>Some news text piece</h3>
|
|
<div class='newswire-meta source-document'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-photo'>
|
|
<h3>Some news photograph</h3>
|
|
<div class='newswire-meta source-photo'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-text'>
|
|
<h3>Some news text piece</h3>
|
|
<div class='newswire-meta source-document'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-photo'>
|
|
<h3>Some news photograph</h3>
|
|
<div class='newswire-meta source-photo'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-text'>
|
|
<h3>Some news text piece</h3>
|
|
<div class='newswire-meta source-document'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-photo'>
|
|
<h3>Some news photograph</h3>
|
|
<div class='newswire-meta source-photo'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-text'>
|
|
<h3>Some news text piece</h3>
|
|
<div class='newswire-meta source-document'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-photo'>
|
|
<h3>Some news photograph</h3>
|
|
<div class='newswire-meta source-photo'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-text'>
|
|
<h3>Some news text piece</h3>
|
|
<div class='newswire-meta source-document'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-photo'>
|
|
<h3>Some news photograph</h3>
|
|
<div class='newswire-meta source-photo'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-text'>
|
|
<h3>Some news text piece</h3>
|
|
<div class='newswire-meta source-document'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-photo'>
|
|
<h3>Some news photograph</h3>
|
|
<div class='newswire-meta source-photo'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class='newswire-item'>
|
|
<a href='#link-back-to-source-text'>
|
|
<h3>Some news text piece</h3>
|
|
<div class='newswire-meta source-document'>
|
|
<time datetime='2023-03-19'>dd-mm-yyyy hh:mm</time>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</aside> <!-- newswire -->
|
|
|
|
<aside id='link' class='clippable'>
|
|
|
|
<section class='link-section'>
|
|
<h3>Some links</h3>
|
|
<ul>
|
|
<li><a title='Foo' href='#foo'>Foo</a></li>
|
|
<li><a title='Bar' href='#bar'>Bar</a></li>
|
|
<li><a title='Baz' href='#baz'>Baz</a></li>
|
|
<li><a title='Foo' href='#foo'>Foo</a></li>
|
|
<li><a title='Bar' href='#bar'>Bar</a></li>
|
|
<li><a title='Baz' href='#baz'>Baz</a></li>
|
|
<li><a title='Foo' href='#foo'>Foo</a></li>
|
|
<li><a title='Bar' href='#bar'>Bar</a></li>
|
|
<li><a title='Baz' href='#baz'>Baz</a></li>
|
|
<li><a title='Foo' href='#foo'>Foo</a></li>
|
|
<li><a title='Bar' href='#bar'>Bar</a></li>
|
|
<li><a title='Baz' href='#baz'>Baz</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class='link-section'>
|
|
<h3>Other links</h3>
|
|
<ul>
|
|
<li><a title='Foo' href='#foo'>A really very unnecessarily long link to Foo</a></li>
|
|
<li><a title='Bar' href='#bar'>Bar</a></li>
|
|
<li><a title='Baz' href='#baz'>Baz</a></li>
|
|
<li><a title='Foo' href='#foo'>Foo</a></li>
|
|
<li><a title='Bar' href='#bar'>Bar</a></li>
|
|
<li><a title='Baz' href='#baz'>Baz</a></li>
|
|
<li><a title='Foo' href='#foo'>Foo</a></li>
|
|
<li><a title='Bar' href='#bar'>Bar</a></li>
|
|
<li><a title='Baz' href='#baz'>Baz</a></li>
|
|
<li><a title='Foo' href='#foo'>Foo</a></li>
|
|
<li><a title='Bar' href='#bar'>Bar</a></li>
|
|
<li><a title='Baz' href='#baz'>Baz</a></li>
|
|
<li><a title='Foo' href='#foo'>Foo</a></li>
|
|
<li><a title='Bar' href='#bar'>Bar</a></li>
|
|
<li><a title='Baz' href='#baz'>Baz</a></li>
|
|
</ul>
|
|
</section>
|
|
|
|
</aside> <!-- link -->
|
|
|
|
</div> <!-- main-wrapper -->
|
|
|
|
</body>
|
|
|
|
</html>
|