mirror of
https://git.adityakumar.xyz/hugo-theme-introduction.git
synced 2024-12-27 00:42:53 +00:00
689 lines
21 KiB
HTML
689 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta name="generator" content="Hugo 0.74.2" />
|
|
<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="Beschreibung der Webseite">
|
|
<title>
|
|
Vorstellung
|
|
</title>
|
|
|
|
<link href="/de/index.xml" rel="alternate" type="application/rss+xml" title="Vorstellung" />
|
|
|
|
<meta property="og:title" content="Vorstellung" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:description" content="Beschreibung der Webseite"/>
|
|
<meta property="og:url" content="http://example.com/de/"/>
|
|
<meta property="og:site_name" content="Vorstellung"/>
|
|
|
|
|
|
|
|
|
|
<meta property="og:image" content="http://example.com/de/home/profile.jpg"/>
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="shortcut icon" href="/img/fav.ico">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/css/main.min.daa833377fb1636f8cbfa65c601050bb5475623deb7aa6e6fdde94a064a6185d.css" integrity="sha256-2qgzN3+xY2+Mv6ZcYBBQu1R1Yj3reqbm/d6UoGSmGF0=" 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">
|
|
Hallo, ich bin Vorstellung
|
|
</h1>
|
|
<div class="subtitle is-3 fade-in two">
|
|
<p>Ich bin ein Hugo Theme</p>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="fade-in three">
|
|
<div class="social-icons">
|
|
|
|
<a href="https://twitter.com/" >
|
|
<i class="fab fab fa-twitter"></i>
|
|
</a>
|
|
|
|
<a href="https://facebook.com/" >
|
|
<i class="fab fab fa-facebook-f"></i>
|
|
</a>
|
|
|
|
<a href="https://linkedin.com/" >
|
|
<i class="fab fab fa-linkedin-in"></i>
|
|
</a>
|
|
|
|
<a href="mailto:youremail@email.com" >
|
|
<i class="fas fab fa-paper-plane"></i>
|
|
</a>
|
|
|
|
<a href="https://mastodon.social/" rel="me">
|
|
<i class="fab 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">Über mich</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="navbar-item" href="/de/#projekte">Projekte</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="navbar-item" href="/de/#blog">Blog</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="navbar-item" href="#lorem">Lorem Ipsum</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="navbar-item" href="#contact">Kontakt</a>
|
|
|
|
|
|
|
|
|
|
|
|
<a class="navbar-item" href="http://example.com/">English</a>
|
|
|
|
|
|
|
|
<a class="navbar-item" href="http://example.com/es/">Español</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</nav>
|
|
<hr>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="section" id="about">
|
|
<div class="container">
|
|
<h2 class="title is-2 has-text-centered">Über mich</h2>
|
|
|
|
<div class="columns">
|
|
<div class="column is-one-third has-text-centered">
|
|
|
|
|
|
<img class="img-responsive avatar" src="http://example.com/de/home/profile_hu3d03a01dcc18bc5be0e67db3d8d209a6_16363_320x0_resize_q75_box.jpg" alt="profile.jpg">
|
|
|
|
|
|
</div>
|
|
<div class="markdown column">
|
|
<p>Dies ist <strong>Vorstellung</strong>, ein minimales Webseiten Theme für <a href="https://gohugo.io">Hugo</a></p>
|
|
<h3 id="funktionen">Funktionen</h3>
|
|
<ul>
|
|
<li>Angepasst für jede Display Größe</li>
|
|
<li>Sanfte fade-in Animation mit CSS3</li>
|
|
<li>Sanfter Bildlauf von der Navigation zu den Abschnitten</li>
|
|
<li>Helles und dunkles Motiv</li>
|
|
<li>Abschnitt <em>Projekte</em> mit einer unbegrenzten Anzahl an Projekten: Konfigurierbar als Fotogalerie oder mit Verweisen zu externen Seiten</li>
|
|
<li>Abschnitt <em>Blog</em> mit optionalen <em>Neuster Artikel</em> Bereich auf der Hauptseite oder als seperate Seite</li>
|
|
<li>Komplett basierend auf Markdown mit Unterstützung für HighlightJS</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="projekte">
|
|
|
|
<div class="container">
|
|
<h2 class="title is-2 has-text-centered">
|
|
Projekte
|
|
</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 class="card-thumbnail" src="http://example.com/de/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 >
|
|
Fotografie
|
|
</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 class="card-thumbnail" src="http://example.com/de/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 class="card-thumbnail" src="http://example.com/de/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 >
|
|
Schreiben
|
|
</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">Fotografie</p>
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="owl-carousel owl-theme">
|
|
|
|
|
|
|
|
|
|
<div class="item owl-height">
|
|
|
|
<img src="http://example.com/de/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/de/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/de/projects/photography/lorene-farrugia-JpmC-tAHiVA-unsplash_hu5e0d05c41608c807d4e7962ffe4f3978_970605_640x0_resize_q75_box.jpg" class="img-responsive" alt="lorene-farrugia-JpmC-tAHiVA-unsplash.jpg">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="item owl-height">
|
|
|
|
<img src="http://example.com/de/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/de/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="machmal-nehme-ich-bilder-auf">Machmal nehme ich Bilder auf</h2>
|
|
<p>Dieses Projekt ist über die Bilder, die ich aufnehme. Machmal sind das Bilder von Katzen.</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/de/projects/design/plant_hu3d03a01dcc18bc5be0e67db3d8d209a6_34602_640x0_resize_q75_box.jpg" class="img-responsive" alt="plant.jpg">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section class="modal-card-body markdown">
|
|
<p>Dieses Theme wurde von <a href="https://victoria.dev">Victoria Drake</a> entwickelt. Guck es dir an! 💪</p>
|
|
<p>Wenn du es für deine Webseite verwenden willst, guck dir den Abschnitt unten auf der Hauptseite an. 👍</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">Schreiben</p>
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<img src="http://example.com/de/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">Neuster Artikel</h2>
|
|
|
|
<div class="summary">13. November 2017
|
|
<h3 class="title is-3 latest-post-title"><a href="http://example.com/de/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/de/blog/hipster-ipsum/">Weiterlesen</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="container has-text-centered top-pad">
|
|
<a href="http://example.com/de/blog/">Alle Artikel</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>Weitere Abschnitte für die Hauptseiten können hinzugefügt werden, indem Datein unter <code>content/home/</code> erstellt werden.</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">Kontakt</h2>
|
|
<div class="markdown">
|
|
<p>In dem Kontakt Abschnitt von <strong>Vorstellung</strong> kannst die aktuelle Zeit in einer belibigen Zeitzone angezeigt werden.</p>
|
|
<p>Somit können Besucher darauf hingewiesen werden, wann sie mit einer Antwort rechnen können. Die Zeitzone wird einfach über die Konfiguarationdatei gewählt.</p>
|
|
|
|
</div>
|
|
|
|
<p>Meine lokale Zeit ist <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 fab fa-twitter"></i>
|
|
</a>
|
|
|
|
<a href="https://facebook.com/" >
|
|
<i class="fab fab fa-facebook-f"></i>
|
|
</a>
|
|
|
|
<a href="https://linkedin.com/" >
|
|
<i class="fab fab fa-linkedin-in"></i>
|
|
</a>
|
|
|
|
<a href="mailto:youremail@email.com" >
|
|
<i class="fas fab fa-paper-plane"></i>
|
|
</a>
|
|
|
|
<a href="https://mastodon.social/" rel="me">
|
|
<i class="fab 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>Vorstellung</strong></a>, ein Theme für <a href="http://gohugo.io/">Hugo</a>. Entwickelt mit <a href="https://victoria.dev"><i class="fa fa-heart"></i> und <i class="fa fa-coffee"></i></a> von Open Source Mitwirkenden
|
|
</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+SEBqLwEuSSkpbmjbArQrWECTadRzdj9Htk="></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="http://example.com/js/bundleMoment.00f097d38e126139c76cdebf43c20ec084dd5db287b651f3607b0a7239b5958e.js" integrity="sha256-APCX044SYTnHbN6/Q8IOwITdXbKHtlHzYHsKcjm1lY4="></script>
|
|
|
|
</body>
|
|
|
|
</html>
|