XPUB
/
project.xpub.nl
65
1
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '4cb6b829be'
${ noResults }
project.xpub.nl/makeinclusivewebsites/index.html

255 lines
11 KiB
HTML
Raw Normal View History Unescape Escape

Adding first index.html
3 years ago
<!doctype html>
Update 'makeinclusivewebsites/index.html'
3 years ago
Adding first index.html
3 years ago
<html lang="en">
<head>
<meta charset="utf-8">
Update 'makeinclusivewebsites/index.html'
3 years ago
Adding first index.html
3 years ago
<title>Make Inclusive Websites</title>
<meta name="description" content="XPUB">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Update 'makeinclusivewebsites/index.html'
3 years ago
<link rel="stylesheet" href="../css/pages.css">
Adding first index.html
3 years ago
</head>
Update 'makeinclusivewebsites/index.html'
3 years ago
Adding first index.html
3 years ago
<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;
Update 'makeinclusivewebsites/index.html'
3 years ago
width: 100% !important;
Adding first index.html
3 years ago
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;
Update 'makeinclusivewebsites/index.html'
3 years ago
width: 100% !important;
Update 'makeinclusivewebsites/index.html'
3 years ago
max-width: 100%!important;
Adding first index.html
3 years ago
}
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>