hugo-theme-introduction/exampleSite/docs/index.html
Victoria Drake a0578435b6 🌱 Add resources
Fix #196
2020-03-09 21:22:09 -04:00

680 lines
21 KiB
HTML

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="generator" content="Hugo 0.67.0" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer">
<meta name="description" content="Website Description">
<title>
Introduction
</title>
<link href="/index.xml" rel="alternate" type="application/rss+xml" title="Introduction" />
<meta property="og:title" content="Introduction" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Website Description"/>
<meta property="og:url" content="http://example.com/"/>
<meta property="og:site_name" content="Introduction"/>
<meta property="og:image" content="http://example.com/home/profile.jpg"/>
<link rel="shortcut icon" href="/img/fav.ico">
<link rel="stylesheet" href="/css/main.min.1eaffbdff5446b797511e3967e8419d2ad7851677604addf74d560bdfc5f91c7.css" integrity="sha256-Hq/73/VEa3l1EeOWfoQZ0q14UWd2BK3fdNVgvfxfkcc=" crossorigin="anonymous" media="screen">
<link rel="stylesheet" href="http://example.com/styles/owlCarousel.min.b1f26e29c43c61fe8b5a6f225b4ee7c5f969a7b33cfe512706271e07246d93d1.css" integrity="sha256-sfJuKcQ8Yf6LWm8iW07nxflpp7M8/lEnBiceByRtk9E=" crossorigin="anonymous" media="screen">
</head>
<body>
<section id="top" class="hero is-fullheight">
<div class="hero-head"></div>
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="bold-title fade-in one">
Hi, I&#39;m Introduction
</h1>
<div class="subtitle is-3 fade-in two">
<p>I&rsquo;m a theme for Hugo</p>
</div>
<div class="fade-in three">
<div class="social-icons">
<a href="https://twitter.com/" >
<i class="fab fa-twitter"></i>
</a>
<a href="https://facebook.com/" >
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://linkedin.com/" >
<i class="fab fa-linkedin-in"></i>
</a>
<a href="mailto:youremail@email.com" >
<i class="fas fa-paper-plane"></i>
</a>
<a href="https://mastodon.social/" rel="me">
<i class="fab fa-mastodon"></i>
</a>
</div>
</div>
</div>
</div>
<div class="hero-foot fade-in three">
<div class="container">
<hr>
<nav class="navbar" role="navigation" aria-label="main navigation">
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false" >
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="navbar-menu has-content-centered" id="navMenu">
<a class="navbar-item" href="#about">About</a>
<a class="navbar-item" href="/#projects">Projects</a>
<a class="navbar-item" href="/#blog">Blog</a>
<a class="navbar-item" href="#lorem">Lorem Ipsum</a>
<a class="navbar-item" href="#contact">Contact</a>
<a class="navbar-item" href="http://example.com/es/">Español</a>
<a class="navbar-item" href="http://example.com/de/">Deutsch</a>
</div>
</nav>
<hr>
</div>
</div>
</section>
<div class="section" id="about">
<div class="container">
<h2 class="title is-2 has-text-centered">About</h2>
<div class="columns">
<div class="column is-one-third has-text-centered">
<img class="img-responsive avatar" src="http://example.com/home/profile_hu3d03a01dcc18bc5be0e67db3d8d209a6_16363_320x0_resize_q75_box.jpg" alt="profile.jpg">
</div>
<div class="markdown column">
<p>This is <strong>Introduction</strong>, a minimalist website theme made for <a href="https://gohugo.io">Hugo</a>.</p>
<h3 id="features">Features</h3>
<ul>
<li>Responsive display on any size screen</li>
<li>Light and Dark themes right out of the box</li>
<li>Multilingual - supports side-by-side content in multiple languages</li>
<li>Any number of custom index page sections from Markdown files</li>
<li><em>Projects</em> section with any number of projects: highly configurable as a photo gallery, modals, or external links</li>
<li><em>Blog</em> section with optional <em>Latest Post</em>, on the main page or as a separate section</li>
<li>Styled Markdown throughout with support for Hugo&rsquo;s syntax highlighting</li>
</ul>
</div>
</div>
</div>
<div class="container has-text-centered top-pad">
<a href="#top">
<i class="fa fa-arrow-up"></i>
</a>
</div>
</div>
<div class="container">
<hr>
</div>
<div class="section" id="projects">
<div class="container">
<h2 class="title is-2 has-text-centered">
Projects
</h2>
<div class="section">
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card" data-target="#project-0">
<div class="card-image">
<figure class="image is-3by2">
<a >
<img src="http://example.com/projects/photography/camera_hu3d03a01dcc18bc5be0e67db3d8d209a6_30380_302x0_resize_q75_box.jpg" alt ="camera.jpg">
</a>
</figure>
</div>
<div class="card-content has-text-centered top-pad">
<a >
Photography
</a>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card" data-target="#project-1">
<div class="card-image">
<figure class="image is-3by2">
<a >
<img src="http://example.com/projects/design/plant_hu3d03a01dcc18bc5be0e67db3d8d209a6_34602_302x0_resize_q75_box.jpg" alt ="plant.jpg">
</a>
</figure>
</div>
<div class="card-content has-text-centered top-pad">
<a >
Design
</a>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card" data-target="#project-2">
<div class="card-image">
<figure class="image is-3by2">
<a >
<img src="http://example.com/projects/writing/workday_hu3d03a01dcc18bc5be0e67db3d8d209a6_59645_302x0_resize_q75_box.jpg" alt ="workday.jpg">
</a>
</figure>
</div>
<div class="card-content has-text-centered top-pad">
<a >
Writing
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="project-0">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-header bottom-pad">
<p class="modal-card-title has-text-centered">Photography</p>
</header>
<div class="owl-carousel owl-theme">
<div class="item owl-height">
<img src="http://example.com/projects/photography/camera_hu3d03a01dcc18bc5be0e67db3d8d209a6_30380_640x0_resize_q75_box.jpg" class="img-responsive" alt="camera.jpg">
</div>
<div class="item owl-height">
<img src="http://example.com/projects/photography/erik-jan-leusink-180382-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_82088_640x0_resize_q75_box.jpg" class="img-responsive" alt="erik-jan-leusink-180382-unsplash.jpg">
</div>
<div class="item owl-height">
<img src="http://example.com/projects/photography/mario-ho-277298-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_19450_640x0_resize_q75_box.jpg" class="img-responsive" alt="mario-ho-277298-unsplash.jpg">
</div>
<div class="item owl-height">
<img src="http://example.com/projects/photography/tyler-lastovich-285380-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_20716_640x0_resize_q75_box.jpg" class="img-responsive" alt="tyler-lastovich-285380-unsplash.jpg">
</div>
</div>
<section class="modal-card-body markdown">
<h2 id="sometimes-i-take-pictures">Sometimes I take pictures</h2>
<p>This project is about the pictures I take. Sometimes, they are pictures of cats.</p>
</section>
</div>
<button class="modal-close is-large" aria-label="close" data-target="#project-0"></button>
</div>
<div class="modal" id="project-1">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-header bottom-pad">
<p class="modal-card-title has-text-centered">Design</p>
</header>
<img src="http://example.com/projects/design/plant_hu3d03a01dcc18bc5be0e67db3d8d209a6_34602_640x0_resize_q75_box.jpg" class="img-responsive" alt="plant.jpg">
<section class="modal-card-body markdown">
<p>This theme was designed by <a href="https://victoria.dev">Victoria Drake</a>. Go on, explore! 💪</p>
<p>If you want to use it for your website, check out the section at the bottom of the main page. 👍</p>
</section>
</div>
<button class="modal-close is-large" aria-label="close" data-target="#project-1"></button>
</div>
<div class="modal" id="project-2">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-header bottom-pad">
<p class="modal-card-title has-text-centered">Writing</p>
</header>
<img src="http://example.com/projects/writing/workday_hu3d03a01dcc18bc5be0e67db3d8d209a6_59645_640x0_resize_q75_box.jpg" class="img-responsive" alt="workday.jpg">
<section class="modal-card-body markdown">
<p>Aromatic aroma con panna, crema so coffee robust coffee barista, café au lait trifecta that strong blue mountain cortado aftertaste. Aroma extraction french press, skinny sweet, blue mountain cup roast barista, beans, extra cappuccino mug crema strong.</p>
<p>To go viennese cream to go, flavour, so mocha as, carajillo iced et a siphon froth. Aged, eu, cup, brewed aroma kopi-luwak, coffee, id viennese french press brewed grounds acerbic froth. Decaffeinated acerbic, spoon beans seasonal, french press café au lait mazagran roast chicory, pumpkin spice galão as fair trade, dark irish cup ristretto half and half whipped shop. Latte instant black extra aroma, instant, extra robusta variety skinny shop aged cup ristretto foam cortado. Bar galão skinny saucer est affogato sugar caffeine chicory sugar coffee, seasonal barista french press acerbic in chicory robust.</p>
</section>
</div>
<button class="modal-close is-large" aria-label="close" data-target="#project-2"></button>
</div>
<div class="container has-text-centered top-pad">
<a href="#top">
<i class="fa fa-arrow-up"></i>
</a>
</div>
</div>
<div class="container"><hr></div>
<div class="section" id="blog">
<div class="container">
<h2 class="title is-2 has-text-centered">Latest Post</h2>
<div class="summary">Nov 13, 2017
<h3 class="title is-3 latest-post-title"><a href="http://example.com/blog/hipster-ipsum/">Hipster Ipsum</a></h3>
<div class="markdown">
Occupy mlkshk kale chips woke, listicle locavore next level fingerstache glossier aesthetic man braid before they sold out kitsch prism. Cred copper mug freegan, flannel YOLO single-origin coffee skateboard artisan four loko church-key man bun. Synth literally gastropub, kombucha chillwave helvetica offal truffaut church-key freegan pop-up gentrify narwhal. Kombucha viral vexillologist green juice. Slow-carb hoodie mumblecore tumeric tattooed meditation, lo-fi fap cred affogato forage whatever austin. Shabby chic direct trade migas, brunch gochujang sriracha chambray fanny pack 8-bit mustache letterpress.
<a href="http://example.com/blog/hipster-ipsum/">Read more</a>
</div>
</div>
<div class="container has-text-centered top-pad">
<a href="http://example.com/blog/">All Posts</a>
</div>
</div>
<div class="container has-text-centered top-pad">
<a href="#top">
<i class="fa fa-arrow-up"></i>
</a>
</div>
</div>
<div class="container"><hr></div>
<div class="section" id="lorem">
<div class="container">
<h2 class="title is-2 has-text-centered">Lorem Ipsum</h2>
<div class="markdown has-text-centered">
<p>You can add more sections to the home page by adding files to the <code>/content/home/</code> folder.</p>
</div>
</div>
<div class="container has-text-centered top-pad">
<a href="#top">
<i class="fa fa-arrow-up"></i>
</a>
</div>
</div>
<div class="container">
<hr>
</div>
<div class="section" id="contact">
<div class="container has-text-centered">
<h2 class="title is-2">Contact</h2>
<div class="markdown">
<p>In the Contact section of <strong>Introduction</strong>, you may optionally display the current time in your preferred timezone.</p>
<p>This lets visitors know what sort of response time to expect when they contact you. The timezone is easily set in the <code>config.toml</code> file.</p>
</div>
<p>My current local time is <span id="time" data-time-zone="America/Los_Angeles" data-time-format="h:mm A"></span>.</p>
<h3 class="subtitle is-3 has-text-centered top-pad">
<a href="mailto:youremail@email.com">youremail@email.com</a>
</h3>
<div class="social-icons">
<a href="https://twitter.com/" >
<i class="fab fa-twitter"></i>
</a>
<a href="https://facebook.com/" >
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://linkedin.com/" >
<i class="fab fa-linkedin-in"></i>
</a>
<a href="mailto:youremail@email.com" >
<i class="fas fa-paper-plane"></i>
</a>
<a href="https://mastodon.social/" rel="me">
<i class="fab fa-mastodon"></i>
</a>
</div>
</div>
<div class="container has-text-centered top-pad">
<a href="#top">
<i class="fa fa-arrow-up"></i>
</a>
</div>
</div>
<div class="container">
<hr>
</div>
<div class="section" id="footer">
<div class="container has-text-centered">
<span class="footer-text">
<a href="https://github.com/victoriadrake/hugo-theme-introduction/"><strong>Introduction</strong></a> theme for <a href="http://gohugo.io/">Hugo</a>. Made with <a href="https://victoria.dev"><!-- raw HTML omitted --><!-- raw HTML omitted --> and <!-- raw HTML omitted --><!-- raw HTML omitted --></a> by open source contributors.
</span>
</div>
</div>
<script src="http://example.com/js/bundle.e6934e69d06bb8a213134f4c1468f9478bb7755e786dfb60e3c5a917c5335805.js" integrity="sha256-5pNOadBruKITE09MFGj5R4u3dV54bftg48WpF8UzWAU="></script>
<script src="http://example.com/js/bundleOwlCarousel.afccb665ffddf92101a8bc04b924a4a5b9a36c0ad0ad61024da751cdd8fd1ed9.js" integrity="sha256-r8y2Zf/d&#43;SEBqLwEuSSkpbmjbArQrWECTadRzdj9Htk="></script>
<script src="http://example.com/js/bundleMoment.00f097d38e126139c76cdebf43c20ec084dd5db287b651f3607b0a7239b5958e.js" integrity="sha256-APCX044SYTnHbN6/Q8IOwITdXbKHtlHzYHsKcjm1lY4="></script>
</body>
</html>