Clientseitige LESS-Umsetzung integriert
[website] / dist / about.html
1 <!DOCTYPE html>
2 <html
3     xmlns=""
4     xmlns:layout=""
5     layout:decorator="templates/layout"
6     >
7   <head>
8     <title>About</title>
9     <!--/*-->
10     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
11     <link rel="stylesheet/less" type="text/css" href="less/base.less"/>
12     <link rel="stylesheet/less" type="text/css" href="less/screen.less" media="screen"/>
13     <link rel="stylesheet/less" type="text/css" href="less/print.less" media="print"/>
14     <script src="js/less-1.7.0.min.js"></script>
15     <!--*/-->
16   </head>
17   <body>
18     <ol layout:fragment="breadcrumb">
19       <li class="b"><a class="b" href="index.html" th:href="@{/index.html}">Home</a></li>
20       <li class="b"><strong class="b">About</strong></li>
21     </ol>
22     <nav layout:fragment="navigation">
23       <hr class="n"/>
24       <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
25       <h1 class="nav">Navigation</h1>
26       <h2 class="nav menu">Section-Menu</h2>
27       <ul id="menu" class="s active cf">
28         <li class="m blog"><a href="blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
29         <li class="m projects"><a href="projects.html" th:href="@{/projects.html}" class="m">Projects</a></li>
30         <li class="m about"><strong class="m">About</strong></li>
31       </ul>
32       <h2 class="nav submenu"><span class="s">Submenu for section </span><strong class="s">About</strong></h2>
33       <ul id="submenu">
34         <li class="s sub"><a href="expertise.html" th:href="@{/expertise.html}" class="s">Expertise</a></li>
35         <li class="s sub"><a href="references.html" th:href="@{/references.html}" class="s">References</a></li>
36         <li class="s "><a href="contact.html" th:href="@{/contact.html}" class="s">Contact</a></li>
37       </ul>
38     </nav>
39     <article class="main" layout:fragment="maincontent">
40       <header><h1>About</h1></header>
41       <p>
42         <span class="logo">juplo</span> is the place, where I collect and share
43         my more or less private projects.
44         It is a lab for experiments, that help me to do my job as a freelancer
45         at the desired level of quality.
46         Here, I can play with all the fancy new stuff, that might be a little
47         bit to much bleeding edge, to be used on a production site of a paying
48         client.
49       </p>
50       <p>
51         I decided to share all this stuff, because I am always learning a lot
52         from the internet-community.
53         I wanted to give back a little and try to help and teach others, as I
54         was helped and teached.
55         Also, this is a good oportunity, to show what I am doing and to do a 
56         little self-publicity...
57       </p>
58       <p>
59         <span class="logo">juplo</span> mainly consists of two parts:
60       </p>
61       <ul>
62         <li>
63           In the <a href="blog.html" th:href="@{/blog.html}">blog</a>, I summarize, how I solved
64           some every-day problems, other people might stumble across too.
65           I am introducing new projects there and announcing new versions and/or
66           bugfixes to older projects.
67         </li>
68         <li>
69           The other part of the site is the
70           <a href="projects.html" th:href="@{/projects.html}">projects-section</a>.
71           This is where I am hosting all projects, that I have made publicy
72           available.
73         </li>
74       </ul>
75       <p>
76         If you want to hire me, you can find out more on the
77         <a href="contact.html" th:href="@{/contact.html}">contact-page</a>.
78         If you are not yet sure, if you want to hire me, you might be
79         interessted in
80         <a href="expertise.html" th:href="@{/expertise.html}">what I can do for you</a>, or 
81         <a href="references.html" th:href="@{/references.html}">what I have already done for others</a>.
82       </p>
83     </article>
84     <aside layout:fragment="marginalcontent" class="m">
85       <h2>Funded by the Europian Union</h2>
86       <p>
87         As partner of the company
88         <a href="" title="Visit the Homepage of the company">yourSHOUTER UG (haftungsbeschränkt)</a>
89         we publish results of a
90         <a href="" title="Show details about the funded resarch-project">resarch-project</a>,
91         that is funded by the European Union and the federal state Northrhine-Westphalia.
92       </p>
93       <p>
94         <a href="" title="Show details about the funded resarch-project" class="img">
95           <img src="../img/EFRE_Foerderhinweis_deutsch_farbig.svg" alt="Europäische Union: Investitionen in unsere Zukunft - Europäischer Fonds für regionale Entwicklung" th:src="@{/img/EFRE_Foerderhinweis_deutsch_farbig.svg}" width="100%"/>
96           <img src="../img/Ziel2NRW_4c_1809_eps.svg" alt="EFRE.NRW 2014-2020: Invesitionen in Wachstum und Beschäftigung" th:src="@{/img/Ziel2NRW_4c_1809_eps.svg}" width="100%"/>
97         </a>
98       </p>
99     </aside>
100     <ul layout:fragment="footer">
101       <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
102       <li class="f"><a class="f" href="impressum.html" th:href="@{/impressum.html}">Impressum</a></li>
103       <li class="f about"><strong class="f">About</strong></li>
104     </ul>
105   </body>
106 </html>