XPUB
/
project.xpub.nl
51
1
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Adding first index.html

Browse Source
master
Max Lehmann 3 years ago
parent 5306e4d2b9
commit bfb0ed27d9
1 changed files with 249 additions and 69 deletions
Show Stats Download Patch File Download Diff File

318
makeinclusivewebsites/index.html
Unescape Escape View File

@ -1,72 +1,252 @@
<!doctype html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<html lang="en">
<head>
<meta charset="utf-8">
<title>Make Inclusive Websites</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/pages.css">
</head>
<title>Make Inclusive Websites</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="pages.css">
</head>
<body>
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Make Inclusive Websites <a href='#hleft-text' class='show'> ⓘ</a></h1>
<h2 id='student-name'>Max Lehmann</h2>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p>Make Inclusive Websites is a web index that helps to create websites that work well for a variety of people with diverse abilities. It provides many references to helpful websites, such as texts, tutorials or tools. These are integrated into an environment that provides an easy entry into this complex topic.
<br>Make Inclusive Websites is also a speculative proposal for a different way of making web content accessible and an invitation to discuss about it. The idea is to move away from a one-size-fits-all mentality, yet not put users in the responsibility of going through complex adaptation processes that may be barriers. Make Inclusive Websites proposes the collaborative creation of a variety of different interfaces that allow the same web content to be accessed by a variety of users without the need for much adaptation. </p>
</div>
<hr align='left'>
<div id='about-student'>
<p>Bibendum maecenas cum faucibus per tincidunt metus ac, diam aliquam aliquet sociosqu parturient a mollis est, felis sem hendrerit rhoncus nisl urna. Ultricies ut risus class ridiculus vestibulum.</p>
</div>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li><a href='https://https://lehmannmax.de/home/index.html' target="_blank" class='ext'>Go to Make Inclusive Websites</a></li>
</ul>
<img src="img/img1.jpg" class='workimg'/>
<img src="img/img2.jpg" class='workimg'/>
<img src="img/img3.jpg" class='workimg'/>
<img src="img/img4.jpg" class='workimg'/>
</div>
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='pdf/thesis.pdf' target="_blank" class='ext'>Publication PDF</a></li>
</ul>
<img src="img/pub1.jpg" class='workimg'/>
<img src="img/pub2.jpg" class='workimg'/>
<img src="img/pub3.jpg" class='workimg'/>
<img src="img/pub4.jpg" class='workimg'/>
</div>
<div id='gradshow'>
<h3 class='gal-title'>Graduation Show</h3>
<img src="img/gradshow1.jpg" class='workimg'/>
<img src="img/gradshow2.jpg" class='workimg'/>
<img src="img/gradshow3.jpg" class='workimg'/>
<img src="img/gradshow4.jpg" class='workimg'/>
</div>
</div>
</section>
</div>
</body>
</html>
<body>
<style>
figcaption {
font-size: 18px;
display: inline-block;
padding: 12px 0 0 1.2px;
height: 3em;
}
figure {
max-width: 47%;
float: left;
padding: 0;
margin: 14px;
position: relative;
}
img {
max-width: 100% !important;
outline: 1.5px solid lightgray;
box-shadow: grey 2.5px 2.5px 10px -0.5px;
}
#publication {
clear:both;
}
#myGallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
align-items: flex-start;
}
img.still {
position: absolute;
max-width: 100% !important;
padding: 0.5% 0.5% 0.5% 0 !important;
}
img.workimg {
position: relative !important;
outline: 1.5px solid lightgray;
padding: 0 !important;
}
figure:hover > img.still, figure:focus-within > img.still, figure:active > img.still, figure:hover > .fade-in, figure:focus-within > .fade-in, figure:active > .fade-in{
visibility: hidden;
}
p.fade-in {
font-size: 2.3em!important;
display: inline-block;
position: absolute;
z-index: 1000;
width: 100%;
height: 100%;
pointer-events: none;
text-align: center;
text-shadow: -2px -1px 23px white;
color: rgba(71, 124, 230, 0.7)!important;
padding-top: 20%;
margin: 0;
background: radial-gradient(white, transparent)!important;
animation: fadeIn ease 10s;
animation-iteration-count:infinite;
-webkit-animation: fadeIn ease 10s;
-moz-animation: fadeIn ease 10s;
-o-animation: fadeIn ease 10s;
-ms-animation: fadeIn ease 10s;
opacity: 0;
}
@keyframes fadeIn {
0% {
opacity:0;
}
35% {
opacity:0;
}
50% {
opacity:1;
}
65% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes fadeIn {
0% {
opacity:0;
}
35% {
opacity:0;
}
50% {
opacity:1;
}
65% {
opacity:0;
}
100% {
opacity:0;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity:0;
}
35% {
opacity:0;
}
50% {
opacity:1;
}
65% {
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes fadeIn {
0% {
opacity:0;
}
35% {
opacity:0;
}
50% {
opacity:1;
}
65% {
opacity:0;
}
100% {
opacity:0;
}
}
@-ms-keyframes fadeIn {
0% {
opacity:0;
}
35% {
opacity:0;
}
50% {
opacity:1;
}
65% {
opacity:0;
}
100% {
opacity:0;
}
}
</style>
<div id='wrapper'></div>
<a href='../' id='homebttn' class='ext'> << home</a>
<header>
<h1 id='project-title'>Make Inclusive Websites <a href='#hleft-text' class='show'> ⓘ</a></h1>
<h2 id='student-name'>Max Lehmann</h2>
<div id='hleft-text'>
<a href=# id='back'>
<div id='inner-hleft-text'>
<div id='ihtp'>
<object>
<div id='about-project'>
<p>Make Inclusive Websites is a web index that helps to create websites, that work well for a variety of people with diverse abilities. It provides many references to helpful websites, such as texts, tutorials or tools. These are integrated into an environment that provides an easy entry into this complex topic.
<br><br>Make Inclusive Websites is also a speculative proposal for a different way of making web content accessible and an invitation to discuss about it. The idea is to move away from a one-size-fits-all mentality, yet not put users in the responsibility of going through complex adaptation processes that may be barriers to some. Make Inclusive Websites proposes the collaborative creation of a variety of different interfaces that allow the same web content to be accessed in different ways. It aims to work for a variety of users without the need for much further adaptation. </p>
</div>
<hr align='left'>
<div id='about-student'>
<p>Max Lehmann is a designer with a strong focus on making information accessible by inclusive means. This applies to both print and web projects. His practice is based on simplification of contents and processes, clear functional design and illustration. </p>
</div>
<a id='getback' class='int'> go back </a>
</object>
</div>
</div>
</a>
</div>
</header>
<section id='main'>
<div id="galleries">
<div id='work'>
<h3 class='gal-title'>Work</h3>
<ul id='publist'>
<li>Go to <a href='https://lehmannmax.de/home/index.html' target="_blank" class='ext'>Make Inclusive Websites</a></li>
<li>Go to the <a href="https://pzwiki.wdka.nl/mediadesign/MA_documentation"target="_blank" >full documentation</a></li>
</ul>
<div id="myGallery">
<figure tabindex="0">
<p class="fade-in">hover me</p>
<img src="img/Home.jpg" title="Home (selection) screen of Make Inclusive Websites" alt="" class='still'/>
<img src="img/Home.gif" title="Home (selection) screen of Make Inclusive Websites" alt="" class='workimg'/><figcaption>Home (selection) screen of Make Inclusive Websites</figcaption>
</figure>
<figure tabindex="0">
<p class="fade-in">hover me</p>
<img src="img/Wiki.jpg" title="Wiki of Make Inclusive Websites" alt="" class='still' tabindex="0"/>
<img src="img/Wiki.gif" title="Wiki of Make Inclusive Websites" alt="" class='workimg'/><figcaption>Wiki of Make Inclusive Websites</figcaption>
</figure>
<figure tabindex="0">
<p class="fade-in">hover me</p>
<img src="img/Globe.jpg" title="Globe interface of Make Inclusive Websites" alt="" class='still'/>
<img src="img/Globe.gif" title="Globe interface of Make Inclusive Websites" alt="" class='workimg'/><figcaption>Globe interface of Make Inclusive Websites</figcaption>
</figure>
<figure tabindex="0">
<p class="fade-in">hover me</p>
<img src="img/Foldout.jpg" title="Fold Out interface of Make Inclusive Websites" alt="" class='still'/>
<img src="img/Foldout.gif" title="Fold Out interface of Make Inclusive Websites" alt="" class='workimg'/><figcaption>Fold Out interface of Make Inclusive Websites</figcaption>
</figure>
<figure tabindex="0">
<p class="fade-in">hover me</p>
<img src="img/UIOptions.jpg" title="UI Options interface of Make Inclusive Websites" alt="" class='still'/>
<img src="img/UIOptions.gif" title="UI Options interface of Make Inclusive Websites" alt="" class='workimg'/><figcaption>UI Options interface of Make Inclusive Websites</figcaption>
</figure>
<figure tabindex="0">
<p class="fade-in">hover me</p>
<img src="img/Print.jpg" title="Print interface of Make Inclusive Websites" alt="" class='still'/>
<img src="img/Print.gif" title="Print interface of Make Inclusive Websites" alt="" class='workimg'/><figcaption>Print interface of Make Inclusive Websites</figcaption>
</figure>
</div>
</div>
<!--br style="float:none"-->
<div id='publication'>
<h3 class='gal-title'>Publication</h3>
<ul id='publist'>
<li><a href='pdf/MaxLehmann_Thesis_compressed.pdf' target="_blank" class='ext'>Publication PDF - Make Inclusive Websites</a></li>
<li><a href="https://lehmannmax.de/Thesis/Thesis.html" target="_blank">Publication Online - Make Inclusive Websites</a></li>
</ul>
</div>
</div>
</section>
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save