initial commit
This commit is contained in:
Philipp Hoh
parent
6ea0adef8b
commit
a25ef4a7bc
1826
mockup.svg
Normal file
1826
mockup.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 3.8 MiB |
BIN
static/img/bedienung.png
Normal file
BIN
static/img/bedienung.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
static/img/ef_logo.png
Normal file
BIN
static/img/ef_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 510 KiB |
51
static/index.html
Normal file
51
static/index.html
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>era Faktura</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="author" content="EDV-Wasmeier" />
|
||||||
|
<meta name="description" content="##description##" />
|
||||||
|
<meta name="robots" content="all" />
|
||||||
|
</head>
|
||||||
|
<body id="era-faktura">
|
||||||
|
<div class="page-wrapper">
|
||||||
|
<section id="intro">
|
||||||
|
<header id="top-menu">
|
||||||
|
<ul>
|
||||||
|
<li>Menü</li>
|
||||||
|
<li>Support</li>
|
||||||
|
<li>Herunterladen</li>
|
||||||
|
</ul>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div id="logo-content">
|
||||||
|
<img src="./img/ef_logo.png" />
|
||||||
|
<button>Support</button>
|
||||||
|
<button>Herunterladen</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="tagline">
|
||||||
|
<p>Den Papierkram für Ihr Unternehmen schnell und einfach erledigt!</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<h3>Leichte Bedienung</h3>
|
||||||
|
<img src="./img/bedienung.png" />
|
||||||
|
<p>Kurzer Erklärungstext</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ... -->
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<ul>
|
||||||
|
<li>Impressum</li>
|
||||||
|
<li>Datenschutz</li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
170
static/style.css
Normal file
170
static/style.css
Normal file
@ -0,0 +1,170 @@
|
|||||||
|
/* farbcodes eintragen*/
|
||||||
|
|
||||||
|
:host > * {
|
||||||
|
--white: #FFFFFF;
|
||||||
|
--black: #1B1B1B;
|
||||||
|
--red-900: #B71C1C;
|
||||||
|
--orange-900: #FF7134;
|
||||||
|
--green-800: #558B2F;
|
||||||
|
--amber-400: #FFCA28;
|
||||||
|
--hint-box-bg: #ecfcef;
|
||||||
|
--hint-box-border: #caedd0;
|
||||||
|
--hint-box-warning-bg: #FFCA28;
|
||||||
|
--hint-box-warning-border: #ffffff;
|
||||||
|
--hint-box-error-bg: rgb(255, 181, 181);
|
||||||
|
--hint-box-error-border: #B71C1C;
|
||||||
|
--pc-light-blue: #dcf1ff;
|
||||||
|
--pc-blue: #3BA4F0;
|
||||||
|
--pc-darker-blue: #2c92db;
|
||||||
|
--pc-gray: #F2F2F2;
|
||||||
|
--pc-mid-gray: #dfdfdf;
|
||||||
|
--pc-mid-gray-2: #c4bebe;
|
||||||
|
--pc-mid-gray-3: #a09e9e;
|
||||||
|
--pc-dark-gray: #5B5B5B;
|
||||||
|
--tc-primary: var(--black);
|
||||||
|
--tc-secondary: var(--white);
|
||||||
|
--table-bg-1: var(--pc-gray);
|
||||||
|
--table-row-hl: var(--pc-light-blue);
|
||||||
|
--dataview-padding: 30px;
|
||||||
|
--era-icon-active_-_color: var(--pc-blue);
|
||||||
|
--era-checkbox-checked_-_border-color: var(--pc-blue);
|
||||||
|
--era-checkbox-checked_-_background: var(--pc-blue);
|
||||||
|
--era-button_-_background: var(--pc-mid-gray);
|
||||||
|
--era-button_-_color: var(--pc-blue);
|
||||||
|
--era-button_-_padding: 6px 10px;
|
||||||
|
--era-button_-_border-radius: 3px;
|
||||||
|
--era-button_-_transition: background 0.2s;
|
||||||
|
--era-button_-_min-width: 40px;
|
||||||
|
--era-button-hover_-_background: var(--pc-blue);
|
||||||
|
--era-button-hover_-_color: var(--white);
|
||||||
|
--era-button-active_-_background: var(--pc-blue);
|
||||||
|
--era-button-active_-_color: var(--white);
|
||||||
|
--era-button-disabled_-_background: var(--bg-gray);
|
||||||
|
--era-button-disabled_-_color: rgba(255,255,255, 0.5);
|
||||||
|
--era-button-success_-_background: var(--green-800);
|
||||||
|
--era-button-success_-_color: var(--white);
|
||||||
|
--era-button-error_-_background: var(--red-900);
|
||||||
|
--era-button-error_-_color: var(--white);
|
||||||
|
--era-toggle-bg-color-on: var(--pc-darker-blue);
|
||||||
|
--era-toggle-button-color-on: var(--pc-blue);
|
||||||
|
--era-toggle-bg-color-off: var(--pc-mid-gray-2);
|
||||||
|
--era-toggle-button-color-off: var(--pc-mid-gray);
|
||||||
|
--era-toggle-bg-color-disabled: var(--pc-dark-gray);
|
||||||
|
--era-popover-background: #F5F5F5;
|
||||||
|
--era-popover-shadow: --filter-or-group-bg: #DFDFDF;
|
||||||
|
--era-icon_-_color: var(--pc-dark-gray);
|
||||||
|
--era-icon-hover_-_color: var(--pc-blue);
|
||||||
|
--era-icon-active_-_color: var(--pc-blue);
|
||||||
|
--era-input_-_padding: 5px 0 15px 0;
|
||||||
|
--era-input-line-color: var(--pc-dark-gray);
|
||||||
|
--era-input-line-color-focused: var(--pc-blue);
|
||||||
|
--era-textarea-error-message_-_background: transparent;
|
||||||
|
--era-dropdown-selector_-_background: var(--white);
|
||||||
|
--era-dropdown-selector-focus_-_border: solid 1px var(--pc-blue);
|
||||||
|
--era-dropdown-item-hover_-_background: var(--pc-blue);
|
||||||
|
--era-dropdown-item-hover_-_color: var(--white);
|
||||||
|
--era-dropdown-item-selected_-_background: var(--pc-blue);
|
||||||
|
--era-dropdown-item-focus_-_background: var(--pc-mid-gray);
|
||||||
|
--era-dropdown-item-focus_-_color: var(--black) !important;
|
||||||
|
--era-radio-button-dot-checked_-_background: var(--pc-dark-gray);
|
||||||
|
--era-radio-button-border-focus_-_border-color: var(--pc-blue);
|
||||||
|
--era-radio-button-label-focus_-_color: var(--pc-blue);
|
||||||
|
--era-radio-button-dot-focus_-_background: var(--pc-blue);
|
||||||
|
--era-spinner-color1: var(--pc-blue);
|
||||||
|
--era-spinner-color2: var(--pc-gray);
|
||||||
|
--era-scroll-top_-_background: var(--pc-900);
|
||||||
|
--era-scroll-top-hover_-_background: var(--pc-900);
|
||||||
|
--era-tabs_-_border-bottom: solid 1px var(--pc-mid-gray);
|
||||||
|
--era-tabs-item_-_background: var(--pc-mid-gray);
|
||||||
|
--era-tabs-item-selected_-_background: var(--pc-blue);
|
||||||
|
--era-tabs-item-selected_-_color: var(--white);
|
||||||
|
--era-query-selector-item_-_background: var(--pc-blue);
|
||||||
|
--era-query-selector-item_-_color: var(--white);
|
||||||
|
--era-query-selector-remove-item-icon_-_color: var(--white);
|
||||||
|
--era-listbox-container_-_border: solid 1px var(--pc-mid-gray);
|
||||||
|
--era-listbox-container_-_transition: border-color 300ms linear;
|
||||||
|
--era-listbox-container-invalid_-_border-color: var(--red-900);
|
||||||
|
--era-listbox-item_-_cursor: pointer;
|
||||||
|
--era-listbox-item-selected_-_background: var(--pc-light-blue);
|
||||||
|
--era-listbox-item-readonly_-_background: var(--pc-gray);
|
||||||
|
--era-listbox-item-readonly-chkbox_-_color: var(--pc-dark-gray);
|
||||||
|
--era-filter-builder-field-selector-selected-category_-_background: var(--pc-blue);
|
||||||
|
--era-filter-builder-field-selector-item-hover_-_background: var(--pc-mid-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* general styling */
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana,
|
||||||
|
sans-serif;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover,
|
||||||
|
a:focus {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* header */
|
||||||
|
|
||||||
|
#intro {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#intro img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
/* top: 0px; */
|
||||||
|
background-color: #2c92db;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header li {
|
||||||
|
list-style-type: none;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo-content {
|
||||||
|
}
|
||||||
|
|
||||||
|
#tagline {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* main content */
|
||||||
|
.content img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
324
static/zen.html
Normal file
324
static/zen.html
Normal file
@ -0,0 +1,324 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>##title##</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="author" content="EDV-Wasmeier" />
|
||||||
|
<meta name="description" content="##description##" />
|
||||||
|
<meta name="robots" content="all" />
|
||||||
|
</head>
|
||||||
|
<body id="era-faktura">
|
||||||
|
<div class="page-wrapper">
|
||||||
|
<section class="intro" id="zen-intro">
|
||||||
|
<header role="banner">
|
||||||
|
<h1>CSS Zen Garden</h1>
|
||||||
|
<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="summary" id="zen-summary" role="article">
|
||||||
|
<p>
|
||||||
|
A demonstration of what can be accomplished through
|
||||||
|
<abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the
|
||||||
|
list to load it into this page.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Download the example
|
||||||
|
<a href="/examples/index" title="This page's source HTML code, not to be modified."
|
||||||
|
>html file</a
|
||||||
|
>
|
||||||
|
and
|
||||||
|
<a href="/examples/style.css" title="This page's sample CSS, the file you may modify."
|
||||||
|
>css file</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preamble" id="zen-preamble" role="article">
|
||||||
|
<h3>The Road to Enlightenment</h3>
|
||||||
|
<p>
|
||||||
|
Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible
|
||||||
|
<abbr title="Document Object Model">DOM</abbr>s, broken
|
||||||
|
<abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless
|
||||||
|
efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>,
|
||||||
|
<abbr title="Web Standards Project">WaSP</abbr>, and the major browser creators.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters.
|
||||||
|
Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating
|
||||||
|
fashion. Become one with the web.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="main supporting" id="zen-supporting" role="main">
|
||||||
|
<div class="explanation" id="zen-explanation" role="article">
|
||||||
|
<h3>So What is This About?</h3>
|
||||||
|
<p>
|
||||||
|
There is a continuing need to show the power of <abbr title="Cascading Style Sheets">CSS</abbr>.
|
||||||
|
The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the
|
||||||
|
existing designs in the list. Clicking on any one will load the style sheet into this very page.
|
||||||
|
The <abbr title="HyperText Markup Language">HTML</abbr> remains the same, the only thing that
|
||||||
|
has changed is the external <abbr title="Cascading Style Sheets">CSS</abbr> file. Yes, really.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<abbr title="Cascading Style Sheets">CSS</abbr> allows complete and total control over the style
|
||||||
|
of a hypertext document. The only way this can be illustrated in a way that gets people excited
|
||||||
|
is by demonstrating what it can truly be, once the reins are placed in the hands of those able
|
||||||
|
to create beauty from structure. Designers and coders alike have contributed to the beauty of
|
||||||
|
the web; we can always push it further.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="participation" id="zen-participation" role="article">
|
||||||
|
<h3>Participation</h3>
|
||||||
|
<p>
|
||||||
|
Strong visual design has always been our focus. You are modifying this page, so strong
|
||||||
|
<abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary too, but the example files
|
||||||
|
are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can
|
||||||
|
use them as starting points. Please see the
|
||||||
|
<a
|
||||||
|
href="http://www.mezzoblue.com/zengarden/resources/"
|
||||||
|
title="A listing of CSS-related resources"
|
||||||
|
><abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide</a
|
||||||
|
>
|
||||||
|
for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
You may modify the style sheet in any way you wish, but not the
|
||||||
|
<abbr title="HyperText Markup Language">HTML</abbr>. This may seem daunting at first if
|
||||||
|
you’ve never worked this way before, but follow the listed links to learn more, and use
|
||||||
|
the sample files as a guide.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Download the sample
|
||||||
|
<a href="/examples/index" title="This page's source HTML code, not to be modified.">HTML</a> and
|
||||||
|
<a href="/examples/style.css" title="This page's sample CSS, the file you may modify.">CSS</a>
|
||||||
|
to work on a copy locally. Once you have completed your masterpiece (and please, don’t
|
||||||
|
submit half-finished work) upload your <abbr title="Cascading Style Sheets">CSS</abbr> file to a
|
||||||
|
web server under your control.
|
||||||
|
<a
|
||||||
|
href="http://www.mezzoblue.com/zengarden/submit/"
|
||||||
|
title="Use the contact form to send us your CSS file"
|
||||||
|
>Send us a link</a
|
||||||
|
>
|
||||||
|
to an archive of that file and all associated assets, and if we choose to use it we will
|
||||||
|
download it and place it on our server.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="benefits" id="zen-benefits" role="article">
|
||||||
|
<h3>Benefits</h3>
|
||||||
|
<p>
|
||||||
|
Why participate? For recognition, inspiration, and a resource we can all refer to showing people
|
||||||
|
how amazing <abbr title="Cascading Style Sheets">CSS</abbr> really can be. This site serves as
|
||||||
|
equal parts inspiration for those working on the web today, learning tool for those who will be
|
||||||
|
tomorrow, and gallery of future techniques we can all look forward to.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="requirements" id="zen-requirements" role="article">
|
||||||
|
<h3>Requirements</h3>
|
||||||
|
<p>
|
||||||
|
Where possible, we would like to see mostly
|
||||||
|
<abbr title="Cascading Style Sheets, levels 1 and 2">CSS 1 & 2</abbr> usage.
|
||||||
|
<abbr title="Cascading Style Sheets, levels 3 and 4">CSS 3 & 4</abbr> should be limited to
|
||||||
|
widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is
|
||||||
|
about functional, practical <abbr title="Cascading Style Sheets">CSS</abbr> and not the latest
|
||||||
|
bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is
|
||||||
|
that your <abbr title="Cascading Style Sheets">CSS</abbr> validates.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Luckily, designing this way shows how well various browsers have implemented
|
||||||
|
<abbr title="Cascading Style Sheets">CSS</abbr> by now. When sticking to the guidelines you
|
||||||
|
should see fairly consistent results across most modern browsers. Due to the sheer number of
|
||||||
|
user agents on the web these days — especially when you factor in mobile —
|
||||||
|
pixel-perfect layouts may not be possible across every platform. That’s okay, but do test
|
||||||
|
in as many as you can. Your design should work in at least IE9+ and the latest Chrome, Firefox,
|
||||||
|
iOS and Android browsers (run by over 90% of the population).
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
We ask that you submit original artwork. Please respect copyright laws. Please keep
|
||||||
|
objectionable material to a minimum, and try to incorporate unique and interesting visual themes
|
||||||
|
to your work. We’re well past the point of needing another garden-related design.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
This is a learning exercise as well as a demonstration. You retain full copyright on your
|
||||||
|
graphics (with limited exceptions, see
|
||||||
|
<a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but
|
||||||
|
we ask you release your <abbr title="Cascading Style Sheets">CSS</abbr> under a Creative Commons
|
||||||
|
license identical to the
|
||||||
|
<a
|
||||||
|
href="http://creativecommons.org/licenses/by-nc-sa/3.0/"
|
||||||
|
title="View the Zen Garden's license information."
|
||||||
|
>one on this site</a
|
||||||
|
>
|
||||||
|
so that others may learn from your work.
|
||||||
|
</p>
|
||||||
|
<p role="contentinfo">
|
||||||
|
By <a href="http://www.mezzoblue.com/">Dave Shea</a>. Bandwidth graciously donated by
|
||||||
|
<a href="http://www.mediatemple.net/">mediatemple</a>. Now available:
|
||||||
|
<a href="http://www.amazon.com/exec/obidos/ASIN/0321303474/mezzoblue-20/"
|
||||||
|
>Zen Garden, the book</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<a
|
||||||
|
href="http://validator.w3.org/check/referer"
|
||||||
|
title="Check the validity of this site’s HTML"
|
||||||
|
class="zen-validate-html"
|
||||||
|
>HTML</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="http://jigsaw.w3.org/css-validator/check/referer"
|
||||||
|
title="Check the validity of this site’s CSS"
|
||||||
|
class="zen-validate-css"
|
||||||
|
>CSS</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="http://creativecommons.org/licenses/by-nc-sa/3.0/"
|
||||||
|
title="View the Creative Commons license of this site: Attribution-NonCommercial-ShareAlike."
|
||||||
|
class="zen-license"
|
||||||
|
>CC</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="http://mezzoblue.com/zengarden/faq/#aaa"
|
||||||
|
title="Read about the accessibility of this site"
|
||||||
|
class="zen-accessibility"
|
||||||
|
>A11y</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://github.com/mezzoblue/csszengarden.com"
|
||||||
|
title="Fork this site on Github"
|
||||||
|
class="zen-github"
|
||||||
|
>GH</a
|
||||||
|
>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="sidebar" role="complementary">
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="design-selection" id="design-selection">
|
||||||
|
<h3 class="select">Select a Design:</h3>
|
||||||
|
<nav role="navigation">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="/221/" class="design-name">Mid Century Modern</a> by
|
||||||
|
<a href="http://andrewlohman.com/" class="designer-name">Andrew Lohman</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/220/" class="design-name">Garments</a> by
|
||||||
|
<a href="http://danielmall.com/" class="designer-name">Dan Mall</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/219/" class="design-name">Steel</a> by
|
||||||
|
<a href="http://steffen-knoeller.de" class="designer-name">Steffen Knoeller</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/218/" class="design-name">Apothecary</a> by
|
||||||
|
<a href="http://trentwalton.com" class="designer-name">Trent Walton</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/217/" class="design-name">Screen Filler</a> by
|
||||||
|
<a href="http://elliotjaystocks.com/" class="designer-name">Elliot Jay Stocks</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/216/" class="design-name">Fountain Kiss</a> by
|
||||||
|
<a href="http://jeremycarlson.com" class="designer-name">Jeremy Carlson</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/215/" class="design-name">A Robot Named Jimmy</a> by
|
||||||
|
<a href="http://meltmedia.com/" class="designer-name">meltmedia</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/214/" class="design-name">Verde Moderna</a> by
|
||||||
|
<a href="http://www.mezzoblue.com/" class="designer-name">Dave Shea</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="design-archives" id="design-archives">
|
||||||
|
<h3 class="archives">Archives:</h3>
|
||||||
|
<nav role="navigation">
|
||||||
|
<ul>
|
||||||
|
<li class="next">
|
||||||
|
<a href="/214/page1"> Next Designs <span class="indicator">›</span> </a>
|
||||||
|
</li>
|
||||||
|
<li class="viewall">
|
||||||
|
<a
|
||||||
|
href="http://www.mezzoblue.com/zengarden/alldesigns/"
|
||||||
|
title="View every submission to the Zen Garden."
|
||||||
|
>
|
||||||
|
View All Designs
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="zen-resources" id="zen-resources">
|
||||||
|
<h3 class="resources">Resources:</h3>
|
||||||
|
<ul>
|
||||||
|
<li class="view-css">
|
||||||
|
<a href="style.css" title="View the source CSS file of the currently-viewed design.">
|
||||||
|
View This Design’s <abbr title="Cascading Style Sheets">CSS</abbr>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="css-resources">
|
||||||
|
<a
|
||||||
|
href="http://www.mezzoblue.com/zengarden/resources/"
|
||||||
|
title="Links to great sites with information on using CSS."
|
||||||
|
>
|
||||||
|
<abbr title="Cascading Style Sheets">CSS</abbr> Resources
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="zen-faq">
|
||||||
|
<a
|
||||||
|
href="http://www.mezzoblue.com/zengarden/faq/"
|
||||||
|
title="A list of Frequently Asked Questions about the Zen Garden."
|
||||||
|
>
|
||||||
|
<abbr title="Frequently Asked Questions">FAQ</abbr>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="zen-submit">
|
||||||
|
<a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file.">
|
||||||
|
Submit a Design
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="zen-translations">
|
||||||
|
<a
|
||||||
|
href="http://www.mezzoblue.com/zengarden/translations/"
|
||||||
|
title="View translated versions of this page."
|
||||||
|
>
|
||||||
|
Translations
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
These superfluous divs/spans were originally provided as catch-alls to add extra imagery.
|
||||||
|
These days we have full ::before and ::after support, favour using those instead.
|
||||||
|
These only remain for historical design compatibility. They might go away one day.
|
||||||
|
|
||||||
|
-->
|
||||||
|
<div class="extra1" role="presentation"></div>
|
||||||
|
<div class="extra2" role="presentation"></div>
|
||||||
|
<div class="extra3" role="presentation"></div>
|
||||||
|
<div class="extra4" role="presentation"></div>
|
||||||
|
<div class="extra5" role="presentation"></div>
|
||||||
|
<div class="extra6" role="presentation"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user