Browse Source

Initial commit

main
Benjamin Bädorf 9 months ago
commit
009e69353b
Signed by: b12f GPG Key ID: 4406E80E13CD656C
  1. BIN
      v1/hero.png
  2. 0
      v1/index.html
  3. 0
      v1/styles.css
  4. BIN
      v2/hero.png
  5. 73
      v2/index.html
  6. 48
      v2/reset.css
  7. 19
      v2/script.js
  8. 111
      v2/styles.css

BIN
v1/hero.png

After

Width: 832  |  Height: 623  |  Size: 84 KiB

0
v1/index.html

0
v1/styles.css

BIN
v2/hero.png

After

Width: 832  |  Height: 623  |  Size: 84 KiB

73
v2/index.html

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<title>Maxies Design Methoden Sammlung</title>
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="./styles.css" />
<script type="application/javascript" src="./script.js"></script>
</head>
<body class="mds-typo-copy">
<main class="mds-content">
<img
class="mds-hero-image"
alt="A woman sits on the floor and is working on a laptop."
src="./hero.png"
/>
<h1 class="mds-hero-title mds-typo-head-hero">Maxies Design Methoden Sammlung</h1>
<section class="mds-design-method mds-design-method_design-sprint">
<h2 class="mds-typo-head-section">Design Sprints</h2>
<p class="mds-design-method__short-description">
Sprints are a great way of kicking off a product or&hellip;
<button
onclick="showLongText('design-sprint')"
class="mds-typo-link"
>Read more</button>
</p>
<p class="mds-design-method__long-description">
Sprints are a great way of kicking off a product or improve an existing one. They focus on getting to tested ideas as quick as possible. A sprint is a 5-day process, that lets teams collaborate in many sub-exercises. Read more on design sprints here
<button
onclick="hideLongText('design-sprint')"
class="mds-typo-link"
>Show less</button>
</p>
</section>
<section class="mds-design-method mds-design-method_personas">
<h2 class="mds-typo-head-section">Personas</h2>
<p class="mds-design-method__short-description">
Personas are finctional characters and represent&hellip;
<button
onclick="showLongText('personas')"
class="mds-typo-link"
>Read more</button>
</p>
<p class="mds-design-method__long-description">
Personas are finctional characters and represent your users.
<button
onclick="hideLongText('personas')"
class="mds-typo-link"
>Show less</button>
</p>
</section>
<section class="mds-design-method mds-design-method_interviews">
<h2 class="mds-typo-head-section">Interviews</h2>
<p class="mds-design-method__short-description">
Interviews really are the crux of the Inspiration
<button
onclick="showLongText('interviews')"
class="mds-typo-link"
>Read more</button>
</p>
<p class="mds-design-method__long-description">
Interviews really are the crux of the Inspiration phase. Human-centered design is about getting to the people you’re designing for and hearing from them in their own words. Interviews can be a bit daunting, but by following these steps below you’ll unlock all kinds of insights and understanding that you’ll never get sitting behind your desk. Whenever possible, conduct your interviews in the interviewee’s space. You can learn so much about a person’s mindset, behavior, and lifestyle by talking with them where they live or work.
<button
onclick="hideLongText('interviews')"
class="mds-typo-link"
>Show less</button>
</p>
</section>
</main>
</body>
</html>

48
v2/reset.css

@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

19
v2/script.js

@ -0,0 +1,19 @@
function showLongText(name) {
const element = document.getElementsByClassName(`mds-design-method_${name}`)[0];
if (!element) {
return;
}
element.classList.add('mds-design-method_show-long');
}
function hideLongText(name) {
const element = document.getElementsByClassName(`mds-design-method_${name}`)[0];
if (!element) {
return;
}
element.classList.remove('mds-design-method_show-long');
}

111
v2/styles.css

@ -0,0 +1,111 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
* {
box-sizing: border-box;
}
html {
--mds-col-primary: #f202f9;
--mds-col-secondary: rgba(255, 255, 255, 0.5);
--mds-col-tertiary: rgba(255, 255, 255, 0.1);
--mds-col-display: #fff;
--mds-col-background: #151515;
--mds-size-xxl: 90px;
--mds-size-xl: 60px;
--mds-size-l: 30px;
--mds-size-m: 20px;
--mds-size-s: 16px;
--mds-weight-regular: 400;
--mds-weight-bold: 700;
--mds-size-interactive: 44px;
font-family: 'Inter', sans-serif;
}
body {
min-height: 100vh;
background-color: var(--mds-col-background);
}
/******* Typography *******/
.mds-typo-head-hero {
font-size: var(--mds-size-xxl);
line-height: var(--mds-size-xxl);
font-weight: var(--mds-weight-bold);
color: var(--mds-col-display);
}
.mds-typo-head-section {
font-size: var(--mds-size-s);
line-height: var(--mds-size-m);
font-weight: var(--mds-weight-bold);
color: var(--mds-col-primary);
}
.mds-typo-copy {
font-size: var(--mds-size-s);
line-height: var(--mds-size-m);
font-weight: var(--mds-weight-regular);
color: var(--mds-col-display);
}
.mds-typo-link {
display: inline;
background: transparent;
margin: 0;
padding: 0;
color: inherit;
border: 0;
cursor: pointer;
color: var(--mds-col-secondary);
}
.mds-typo-link:hover {
color: var(--mds-col-primary);
}
.mds-typo-link:active {
color: var(--mds-col-display);
}
/******* Blocks *******/
.mds-content {
width: 100%;
max-width: 500px;
margin: 0 auto;
margin-bottom: var(--mds-size-xxl);
}
.mds-hero-image {
margin-left: -170px;
margin-bottom: -90px;
}
.mds-design-method {
margin-top: var(--mds-size-xl);
}
.mds-design-method__long-description {
display: none;
}
.mds-design-method_show-long .mds-design-method__long-description {
display: block;
}
.mds-design-method_show-long .mds-design-method__short-description {
display: none;
}
.mds-design-method > p {
margin-top: var(--mds-size-m);
}
.mds-design-method__read-more {
}
Loading…
Cancel
Save