pixelfed-design-demos/public/app/home/index.html
2021-12-09 02:45:28 -06:00

123 lines
3.8 KiB
HTML

<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://example.org/scss/main.min.ddb2b41af64e8d09a451e8450d20efde643132332e3dee68ea38fef88808fc87.css" integrity="sha256-3bK0GvZOjQmkUehFDSDv3mQxMjMuPe5o6jj&#43;&#43;IgI/Ic=" media="screen">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<title>
My New Hugo Site
</title>
</head>
<body>
<header class="site-header">
<div class="container">
<a href="/" class="site-title"><img src="/logo.svg"/><h1>pixelfed</h1></a>
<nav class="site-nav">
<a href=""><i class="fa fa-home"></i></a>
<a href=""><i class="fa fa-search"></i></a>
<a href="" class="primary"><i class="fa fa-plus"></i></a>
<a href=""><i class="fa fa-bell"></i></a>
<a href=""><i class="fa fa-user-circle"></i></a>
</nav>
</div>
</header>
<main id="home" class="section">
<div class="container">
<article class="post">
<header class="post-header">
<i class="icon fa fa-plus"></i>
<span class="username">trwnh</span><span class="domain">@pixelfed.social</span> posted an image.
</header>
<img class="post-image" src="/sunset.jpg" alt="">
<section class="post-body">
<header class="author">
<img src="/sunset.jpg" alt="" class="avatar">
<span class="name">trwnh</span>
</header>
<section class="description">
<p>"A Sky On Fire"</p>
</section>
</section>
<section class="post-actions">
<div class="primary">
<button class="like">
<i class="fa fa-heart fa-2x"></i>
</button>
<button class="boost">
<i class="fa fa-retweet fa-2x"></i>
</button>
<button class="save">
<i class="fa fa-bookmark fa-2x"></i>
</button>
</div>
<div class="secondary">
<button class="comment">
<span class="hint">Leave a comment</span>
<i class="fa fa-comment fa-2x"></i>
</button>
</div>
</section>
<article class="post-comment">
<header class="author">
<img src="/logo.svg" alt="" class="avatar">
<span class="name">dansup</span>
</header>
<section class="comment">
<p>Great picture!</p>
</section>
</article>
<article class="post-comment">
<header class="author">
<img src="/logo.svg" alt="" class="avatar">
<span class="name">dansup</span>
</header>
<section class="comment">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sequi corrupti ut deleniti, labore, odio commodi molestiae unde architecto perspiciatis consequuntur doloremque. Illum rerum in unde, autem commodi vitae obcaecati!</p>
</section>
</article>
<article class="post-comment">
<header class="author">
<img src="/logo.svg" alt="" class="avatar">
<span class="name">dansup</span>
</header>
<section class="comment">
<p>Great picture!</p>
</section>
</article>
</article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
<article class="post"></article>
</div>
</main>
<footer class="site-footer">
<div class="container">
<ul class="links">
<li>About</li>
<li>Help</li>
<li>Terms</li>
<li>Privacy</li>
<li>Language</li>
</ul>
<a class="credit">Powered by Pixelfed</a>
<p class="version">version 0.11.1</p>
</div>
</footer>
</body>
</html>