210 lines
5.6 KiB
HTML
210 lines
5.6 KiB
HTML
<!DOCTYPE text/html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="style.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<a class="toggle header__menu-toggle bi bi-list"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="black" class="bi bi-list" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
|
|
</svg>
|
|
|
|
</a>
|
|
<a href="/" class="brand">
|
|
<h1>
|
|
<img height="32" class="brand-img" src="assets/lg-logo.png" />
|
|
Libre<span class="second">Gaming</span>
|
|
</h1>
|
|
</a>
|
|
<div class="lang-select">EN</div>
|
|
</div>
|
|
<aside>
|
|
<nav class="nav-collapse" role="navigation">
|
|
<div class="side-nav__content">
|
|
<ul>
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">About</a></li>
|
|
<li><a href="#">Projects</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
<main role="main">
|
|
<div class="container">
|
|
<section class="hero" style="margin:30px 0;">
|
|
<h1 class="message">The Quick Brown Fox</h1>
|
|
<p class="lead">The quick brown fox jumps over the lazy dog</p>
|
|
</section>
|
|
</div> <!-- end container -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="grid-large two-thirds">
|
|
<p>The quick brown fox jumps over the lazy dog</p>
|
|
</div>
|
|
<div class="grid-large one-third">Jeb</div>
|
|
</div>
|
|
<h2 class="lg-title"><span>GAMING</span></h2>
|
|
<h1>h1. heading</h1>
|
|
<h2>h2. heading</h2>
|
|
<h3>h3. heading</h3>
|
|
<h4>h4. heading</h4>
|
|
<h5>h5. heading</h5>
|
|
<h6>h6. heading</h6>
|
|
<img class="img-fluid" src="assets/boxes.png" />
|
|
<h2 class="lg-title">NEWS</h2>
|
|
<div class="posts">
|
|
<p class="body-font">Most of them will probably be about front-end performance work, or possibly broader coding things. The odd one will be tagged #personal or #opinion, so if you have the <a href="/news/feed">RSS feed</a> you can filter those out if you don't want them!</p>
|
|
<ul>
|
|
<li>
|
|
<a href="#">
|
|
<span class="left">
|
|
<span class="date">10/Dec</span>
|
|
<span class="year">2016</span>
|
|
</span>
|
|
<span class="right">
|
|
<span class="title">🌟 When everything's important, nothing is! 🌟</span>
|
|
<span class="tags">
|
|
|
|
#performance,
|
|
|
|
#loading
|
|
|
|
</span>
|
|
</span>
|
|
<span class="clear"></span>
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href="#">
|
|
<span class="left">
|
|
<span class="date">30/Aug</span>
|
|
<span class="year">2016</span>
|
|
</span>
|
|
<span class="right">
|
|
<span class="title">There's a new streamer in town!</span>
|
|
<span class="tags">
|
|
|
|
#streaming,
|
|
|
|
#gaming,
|
|
|
|
#entertainment
|
|
|
|
</span>
|
|
</span>
|
|
<span class="clear"></span>
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href="#">
|
|
<span class="left">
|
|
<span class="date">15/Feb</span>
|
|
<span class="year">2016</span>
|
|
</span>
|
|
<span class="right">
|
|
<span class="title">Ranking each survival horror game</span>
|
|
<span class="tags">
|
|
|
|
#horror
|
|
|
|
</span>
|
|
</span>
|
|
<span class="clear"></span>
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href="#">
|
|
<span class="left">
|
|
<span class="date">25/Jan</span>
|
|
<span class="year">2016</span>
|
|
</span>
|
|
<span class="right">
|
|
<span class="title">The Hack is Back!</span>
|
|
<span class="tags">
|
|
|
|
#images,
|
|
|
|
#code
|
|
|
|
</span>
|
|
</span>
|
|
<span class="clear"></span>
|
|
</a>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href="#">
|
|
<span class="left">
|
|
<span class="date">16/Nov</span>
|
|
<span class="year">2015</span>
|
|
</span>
|
|
<span class="right">
|
|
<span class="title">Easist modding protocols,</span>
|
|
<span class="tags">
|
|
|
|
#frameworks,
|
|
|
|
#modding
|
|
|
|
</span>
|
|
</span>
|
|
<span class="clear"></span>
|
|
</a>
|
|
</li>
|
|
</ul></div>
|
|
</div>
|
|
</div> <!-- end container -->
|
|
<section id="description">
|
|
<div class="tile">
|
|
<div class="content">
|
|
<h3 class="text-lightblue">Desciption</h3>
|
|
<p>Currently, our main channels of communication are instant messaging rooms hosted on the Matrix network. They are also accessible via Jabber/XMPP and IRC protocols, so that contributors can use their favorite client to join us.</p>
|
|
</div>
|
|
</div>
|
|
<div class="tile">
|
|
<div class="content">
|
|
<h3 class="text-lightblue">Members</h3>
|
|
<img src="assets/member-panel-example.png" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
<footer id="footer">
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">About</a></li>
|
|
<li><a href="#">Sitemap</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
</ul>
|
|
</ul>
|
|
</ul>
|
|
</nav>
|
|
</footer>
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html>
|