258 lines
7.6 KiB
HTML
258 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
||
<html><head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="your description">
|
||
<meta name="Author" content="your name">
|
||
<meta name="keywords" content="hugo blog">
|
||
<link rel="stylesheet" href=https://example.com/css/syntax.css>
|
||
<link rel="stylesheet" href=https://example.com/css/style.css>
|
||
<script src="https://kit.fontawesome.com/1b7478c139.js" crossorigin="anonymous"></script>
|
||
<title>title</title>
|
||
</head><body><aside id="sidenav">
|
||
<header>
|
||
|
||
<a href="https://example.com"><img src="/avatar.png" alt="avatar"></a>
|
||
|
||
|
||
<a id="branding" href="https://example.com">
|
||
|
||
title
|
||
|
||
</a>
|
||
</header>
|
||
|
||
<nav>
|
||
|
||
|
||
<a href="/"
|
||
|
||
>
|
||
<i class="fas fa-home fa-sm"></i>
|
||
<span>home</span>
|
||
</a>
|
||
|
||
|
||
<a href="/blog/"
|
||
|
||
>
|
||
<i class="fas fa-keyboard fa-ms"></i>
|
||
<span>blog</span>
|
||
</a>
|
||
|
||
|
||
<a href="/tags"
|
||
|
||
>
|
||
<i class="fas fa-tags fa-ms"></i>
|
||
<span>tags</span>
|
||
</a>
|
||
|
||
|
||
<a href="https://github.com/yourgithubusername23434"
|
||
|
||
target="_blanck"
|
||
|
||
>
|
||
<i class="fab fa-github fa-ms"></i>
|
||
<span>github</span>
|
||
</a>
|
||
|
||
|
||
<a href="/index.xml"
|
||
|
||
>
|
||
<i class="fas fa-rss fa-ms"></i>
|
||
<span>RSS</span>
|
||
</a>
|
||
|
||
|
||
<a href="/contact"
|
||
|
||
>
|
||
<i class="far fa-envelope"></i>
|
||
<span>contact</span>
|
||
</a>
|
||
|
||
</aside>
|
||
<main id="main">
|
||
<a href="javascript:void(0)" id="closebtn" onclick="navToggle()"><i class="fas fa-bars fa-lg"></i></a>
|
||
<div class="content">
|
||
|
||
<h1 id="title">Rich Content</h1>
|
||
|
||
|
||
<nav id="TableOfContents">
|
||
<ul>
|
||
<li>
|
||
<ul>
|
||
<li><a href="#instagram-simple-shortcode">Instagram Simple Shortcode</a></li>
|
||
<li><a href="#youtube-privacy-enhanced-shortcode">YouTube Privacy Enhanced Shortcode</a></li>
|
||
<li><a href="#twitter-simple-shortcode">Twitter Simple Shortcode</a></li>
|
||
<li><a href="#vimeo-simple-shortcode">Vimeo Simple Shortcode</a></li>
|
||
</ul></li>
|
||
</ul>
|
||
</nav>
|
||
<p>Hugo ships with several <a href="https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes">Built-in Shortcodes</a> for rich content, along with a <a href="https://gohugo.io/about/hugo-and-gdpr/">Privacy Config</a> and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.</p>
|
||
|
||
<hr />
|
||
|
||
<h2 id="instagram-simple-shortcode">Instagram Simple Shortcode</h2>
|
||
|
||
|
||
|
||
|
||
|
||
<style type="text/css">
|
||
.__h_instagram.card {
|
||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
|
||
font-size: 14px;
|
||
border: 1px solid rgb(219, 219, 219);
|
||
padding: 0;
|
||
margin-top: 30px;
|
||
}
|
||
.__h_instagram.card .card-header, .__h_instagram.card .card-body {
|
||
padding: 10px 10px 10px;
|
||
}
|
||
.__h_instagram.card img {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
</style>
|
||
|
||
<div class="__h_instagram s_instagram_simple card" style="max-width: 640px">
|
||
<div class="card-header">
|
||
<a href="https://www.instagram.com/koloot.design" class="card-link">koloot.design</a>
|
||
</div>
|
||
<a href="https://instagram.com/p/BGvuInzyFAe/" rel="noopener" target="_blank"><img class="card-img-top img-fluid" src="https://scontent-hbe1-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/13437259_1631155187211476_646101738_n.jpg?_nc_ht=scontent-hbe1-1.cdninstagram.com&_nc_cat=108&_nc_ohc=JTy2wbBJ97oAX97yZoE&oh=f6c8255c62926609702995db69f6b5a5&oe=5EBD4E8F" width="640" height="451" alt="Instagram Image"></a>
|
||
<div class="card-body">
|
||
|
||
<a href="https://www.instagram.com/koloot.design" class="card-link">View More on Instagram</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<p><br></p>
|
||
|
||
<hr />
|
||
|
||
<h2 id="youtube-privacy-enhanced-shortcode">YouTube Privacy Enhanced Shortcode</h2>
|
||
|
||
|
||
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
|
||
<iframe src="https://www.youtube.com/embed/ZJthWmvUzzc" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe>
|
||
</div>
|
||
|
||
|
||
<p><br></p>
|
||
|
||
<hr />
|
||
|
||
<h2 id="twitter-simple-shortcode">Twitter Simple Shortcode</h2>
|
||
|
||
|
||
|
||
|
||
|
||
<style type="text/css">
|
||
.twitter-tweet {
|
||
font: 14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
|
||
border-left: 4px solid #2b7bb9;
|
||
padding-left: 1.5em;
|
||
color: #555;
|
||
}
|
||
.twitter-tweet a {
|
||
color: #2b7bb9;
|
||
text-decoration: none;
|
||
}
|
||
blockquote.twitter-tweet a:hover,
|
||
blockquote.twitter-tweet a:focus {
|
||
text-decoration: underline;
|
||
}
|
||
</style>
|
||
|
||
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”<br>— Jan Tschichold <a href="https://t.co/gcv7SrhvJb">pic.twitter.com/gcv7SrhvJb</a></p>— Graphic Design History (@DesignReviewed) <a href="https://twitter.com/DesignReviewed/status/1085870671291310081?ref_src=twsrc%5Etfw">January 17, 2019</a></blockquote>
|
||
|
||
|
||
<p><br></p>
|
||
|
||
<hr />
|
||
|
||
<h2 id="vimeo-simple-shortcode">Vimeo Simple Shortcode</h2>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<style>
|
||
.__h_video {
|
||
position: relative;
|
||
padding-bottom: 56.23%;
|
||
height: 0;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
background: #000;
|
||
}
|
||
.__h_video img {
|
||
width: 100%;
|
||
height: auto;
|
||
color: #000;
|
||
}
|
||
.__h_video .play {
|
||
height: 72px;
|
||
width: 72px;
|
||
left: 50%;
|
||
top: 50%;
|
||
margin-left: -36px;
|
||
margin-top: -36px;
|
||
position: absolute;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
|
||
|
||
<div class="s_video_simple __h_video">
|
||
<a href="https://vimeo.com/4.8912912e+07" rel="noopener" target="_blank">
|
||
|
||
|
||
<img src="https://i.vimeocdn.com/video/337401969_640.jpg" srcset="https://i.vimeocdn.com/video/337401969_640.jpg 1x, https://i.vimeocdn.com/video/337401969.jpg 2x" alt="Sing Jan Swing - Kinetic Type">
|
||
<div class="play"><svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61 61"><circle cx="30.5" cy="30.5" r="30.5" opacity=".8" fill="#000"></circle><path d="M25.3 19.2c-2.1-1.2-3.8-.2-3.8 2.2v18.1c0 2.4 1.7 3.4 3.8 2.2l16.6-9.1c2.1-1.2 2.1-3.2 0-4.4l-16.6-9z" fill="#fff"></path></svg></div></a></div>
|
||
|
||
<div class="nav-next-prev">
|
||
<div class="nav-prev">
|
||
|
||
<a href="https://example.com/blog/placeholder-text/"><i class="fas fa-chevron-left"></i></a>
|
||
|
||
</div>
|
||
<a class="nav-top" href="#">top</i></a>
|
||
<div class="nav-next">
|
||
|
||
<a href="https://example.com/blog/markdown-syntax/"><i class="fas fa-chevron-right"></i></a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div><footer>
|
||
<div class="footer-content">
|
||
<div class="contact-info">
|
||
|
||
<div class="footer-mail">
|
||
<i class="far fa-envelope"></i> <a href="mailto:mail@example.com">mail@example.com</a> </div>
|
||
|
||
|
||
<div class="footer-phone">
|
||
<i class="fas fa-phone"></i> 8888888888
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<p class="copyright meta">Copyright © 2008–2019, Steve Francia and the Hugo Authors; all rights reserved.</p>
|
||
|
||
</div>
|
||
</footer></main>
|
||
</body>
|
||
<script src=https://example.com/js/navbutton.js></script>
|
||
</html>
|