Skip to content

Commit d8fe73c

Browse files
mfranzkemfranzke
committed
docs: added english language
1 parent 10002cb commit d8fe73c

File tree

2 files changed

+189
-2
lines changed

2 files changed

+189
-2
lines changed

‎index.html

Lines changed: 177 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,182 @@
3131
</a>
3232
</div>
3333
</header>
34-
<main>
34+
<main id="en">
35+
<section lang="en">
36+
<h1>Strong digital products</h1>
37+
<p>
38+
The DB UI ecosystem accelerates digital products development @
39+
Deutsche Bahn – open for all web tech stacks, compatible to brand standards
40+
and accessible, we're about democratizing the development.
41+
</p>
42+
<img src="images/header_image_0.guetzli.jpg" srcset="images/header_image_0.guetzli.2x.jpg 2x, images/header_image_0.guetzli.3x.jpg 3x" width="1012" height="338" alt="" style="margin: auto; display: block; max-width: 100%;">
43+
<p>
44+
"DB Personenverkehr" (passenger service) and DB Systel have merged their
45+
Design Systems for Web by introducing a new version 2.0. Our goal is
46+
to enable a coherent basic UX on the basis of "Moderne Ikone" (modern icon)
47+
for customer- and employee-applications. To ensure consistency end to end
48+
through the phases starting with concept, through design up until development,
49+
we're even also providing the Design System 2.0 as code components by DB Systel
50+
and "Reisendeninformationen" (traveler informations).
51+
</p>
52+
<p>
53+
To empower all colleagues that are working in the fields of development, concept,
54+
design and content-production, for delivering the very best digital experiences.
55+
</p>
56+
</section>
57+
<section class="ecosystem" lang="en">
58+
<h2 class="elm-headline">Product ecosystem</h2>
59+
60+
<ul class="cmp-cards">
61+
<li class="cmp-card" data-variant="banner">
62+
<figure>
63+
<img
64+
class="elm-image"
65+
src="images/db-ui-base-logo.png"
66+
alt=""
67+
width="410"
68+
height="410"
69+
>
70+
<figcaption>
71+
<h3>
72+
<a
73+
href="https://db-ui.github.io/base/"
74+
class="elm-link"
75+
target="_blank"
76+
title="Open our living styleguide in a new window or tab"
77+
aria-label="Open DB UI Base Living styleguide in a new window or tab"
78+
><strong>DB UI Base</strong></a
79+
>
80+
</h3>
81+
<p>
82+
General assets and Design Tokens for universal usage in Web and Native
83+
App development contexts
84+
</p>
85+
</figcaption>
86+
</figure>
87+
</li>
88+
<li class="cmp-card" data-variant="banner">
89+
<figure>
90+
<img
91+
class="elm-image"
92+
src="images/db-ui-core-logo.png"
93+
alt=""
94+
width="410"
95+
height="410"
96+
/>
97+
<figcaption>
98+
<h3>
99+
<a
100+
href="https://db-ui.github.io/core/"
101+
class="elm-link"
102+
target="_blank"
103+
title="Open our living styleguide in a new window or tab"
104+
aria-label="Open DB UI Core Living styleguide in a new window or tab"
105+
><strong>DB UI Core</strong></a
106+
>
107+
</h3>
108+
<p>
109+
Robust HTML UI components, reusable visual styles and mature tools.
110+
</p>
111+
</figcaption>
112+
</figure>
113+
</li>
114+
<li class="cmp-card" data-variant="banner">
115+
<figure>
116+
<img
117+
class="elm-image"
118+
src="images/db-ui-elements-logo.png"
119+
alt=""
120+
width="410"
121+
height="410"
122+
/>
123+
<figcaption>
124+
<h3>
125+
<a
126+
href="https://db-ui.github.io/elements/"
127+
class="elm-link"
128+
target="_blank"
129+
title="Open our living styleguide in a new window or tab"
130+
aria-label="Open DB UI Elements living styleguide in a new window or tab"
131+
><strong>DB UI Elements – Web Components</strong></a
132+
>
133+
</h3>
134+
<p>
135+
Universal JavaScript UI components based on Web-Standards
136+
</p>
137+
</figcaption>
138+
</figure>
139+
</li>
140+
<li class="cmp-card" data-variant="banner">
141+
<figure>
142+
<img
143+
class="elm-image"
144+
src="images/db-ui-elements-logo.png"
145+
alt=""
146+
width="410"
147+
height="410"
148+
/>
149+
<figcaption>
150+
<h3>
151+
<a
152+
href="https://db-ui.github.io/elements/"
153+
class="elm-link"
154+
target="_blank"
155+
title="Open our living styleguide in a new window or tab"
156+
aria-label="Open DB UI Elements living styleguide in a new window or tab"
157+
><strong
158+
>DB UI Elements – JS Framework components</strong
159+
></a
160+
>
161+
</h3>
162+
<p>
163+
Proxy wrappers around Web Components for Angular, React and Vue
164+
</p>
165+
</figcaption>
166+
</figure>
167+
</li>
168+
</ul>
169+
<p>
170+
By
171+
<a
172+
href="https://db-ui.github.io/base/"
173+
class="elm-link"
174+
target="_blank"
175+
title="Open our living styleguide in a new window or tab"
176+
aria-label="Open DB UI Base living styleguide in a new window or tab"
177+
><strong>DB UI Base</strong></a
178+
>
179+
we're providing general assetes and Design Tokens for the universal usage
180+
in Web as well as Native App development projects.
181+
</p>
182+
<p>
183+
By
184+
<a
185+
href="https://db-ui.github.io/core/"
186+
class="elm-link"
187+
target="_blank"
188+
title="Open our living styleguide in a new window or tab"
189+
aria-label="Open DB UI Core living styleguide in a new window or tab"
190+
><strong>DB UI Core</strong></a
191+
>
192+
we're providing robust HTML UI components as a basis for Web Development,
193+
reusable visual styles and mature tools.
194+
</p>
195+
<p>
196+
Especially for JavaScript application development we're providing universal
197+
UI components by
198+
<a
199+
href="https://db-ui.github.io/elements/"
200+
class="elm-link"
201+
target="_blank"
202+
title="Open our living styleguide in a new window or tab"
203+
aria-label="Open DB UI Elements living styleguide in a new window or tab"
204+
><strong>DB UI Elements</strong></a
205+
> – either Web Components based on Web Standards, as well as proxies / wrappers
206+
for the most common JavaScript frameworks that feel like native JavaScript
207+
framework components.
208+
</p>
209+
</section>
35210
<section>
36211
<h1>Starke digitale Produkte</h1>
37212
<p>
@@ -68,7 +243,7 @@ <h2 class="elm-headline">Produktlandschaft</h2>
68243
alt=""
69244
width="410"
70245
height="410"
71-
/>
246+
>
72247
<figcaption>
73248
<h3>
74249
<a

‎styles.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1+
.tpl-intro main .ecosystem {
2+
background-color: #f0f3f5;
3+
padding-bottom: 2.5rem;
4+
}
15
.ecosystem .cmp-cards {
26
margin-bottom: 2rem;
37
}
48
.ecosystem .cmp-cards figure .elm-image {
59
width: 64px;
610
height: 64px;
11+
}
12+
13+
main:not(:target) section:lang(en):is(:first-child, .ecosystem),
14+
main:target section:not(:lang(en)) {
15+
display: none;
16+
}
17+
main:target {
18+
scroll-margin-top: 130px;
719
}

0 commit comments

Comments
 (0)