1- <!DOCTYPE html>
1+ <!doctype html>
22< html lang ="en ">
33 < head >
44 < meta charset ="UTF-8 " />
55 < meta http-equiv ="X-UA-Compatible " content ="IE=edge " />
66 < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
7+ < link rel ="icon " type ="image/x-icon " href ="/assets/favicon.ico " />
78 < meta
89 name ="description "
910 content ="Overview regarding the technical components out of the DB UX Design System by Deutsche Bahn. "
1011 />
1112 < title > DB UI</ title >
1213 < link rel ="stylesheet " href ="styles/db-ui-42.css " />
1314 < link rel ="stylesheet " href ="styles/styles.css " />
15+ < link rel ="stylesheet " href ="styles/all-colors.css " />
1416 </ head >
1517 < body class ="landing ">
1618 < header class ="landing-header ">
2123 src ="https://db-ui.github.io/images/db_logo.svg "
2224 alt ="DB Logo "
2325 />
26+
27+ < ul >
28+ < li >
29+ < a
30+ class ="db-link "
31+ data-content ="external "
32+ href ="https://github.com/db-ui "
33+ target ="_blank "
34+ >
35+ GitHub
36+ </ a >
37+ </ li >
38+ < li >
39+ < a
40+ class ="db-link "
41+ data-content ="external "
42+ target ="_blank "
43+ href ="https://marketingportal.extranet.deutschebahn.com/marketingportal "
44+ >
45+ Marketingportal
46+ </ a >
47+ </ li >
48+ </ ul >
2449 </ div >
2550 </ header >
2651 < main class ="landing-main ">
@@ -66,16 +91,6 @@ <h2>This is how we roll</h2>
6691 tempor laoreet in tellus pellentesque velit. Auctor vitae tortor in
6792 volutpat.
6893 </ p >
69- < p >
70- < img src ="" alt ="" width ="" height ="" /> Lorem ipsum dolor sit amet
71- consectetur. Urna fermentum egestas platea tempor laoreet in tellus
72- pellentesque velit. Auctor vitae tortor in volutpat. Lorem dolor
73- fermentum eget neque amet sapien ultrices cursus elit. Consectetur
74- nisl suspendisse aliquam nunc ut commodo mattis. Morbi faucibus
75- pretium suspendisse vel pellentesque volutpat. Blandit in mattis
76- libero quam. Sed sed porta mus nam nam ipsum nascetur augue. Eu
77- maecenas erat sociis morbi arcu dolor. Massa commodo ut vitae sit nec.
78- </ p >
7994 < ul >
8095 < li class ="db-card " data-spacing ="small ">
8196 < img
@@ -120,13 +135,15 @@ <h3>We are efficient</h3>
120135 </ ul >
121136 </ section >
122137
123- < section >
124- < h2 > Our vision</ h2 >
125- < p >
126- Lorem ipsum dolor sit amet consectetur. Urna fermentum egestas platea
127- tempor laoreet in tellus pellentesque velit. Auctor vitae tortor in
128- volutpat.
129- </ p >
138+ < section id ="section-vision " class ="section-with-max-width ">
139+ < div class ="db-bg-informational-transparent-semi ">
140+ < h2 > Our vision</ h2 >
141+ < h3 data-variant ="light ">
142+ Lorem ipsum dolor sit amet consectetur. Urna fermentum egestas
143+ platea tempor laoreet in tellus pellentesque velit. Auctor vitae
144+ tortor in volutpat.
145+ </ h3 >
146+ </ div >
130147 </ section >
131148 < section class ="team-photo ">
132149 < img
@@ -136,23 +153,57 @@ <h2>Our vision</h2>
136153 height ="927 "
137154 />
138155 </ section >
139- < section >
156+ < section id =" section-storytime " class =" section-with-max-width " >
140157 < h2 > It’s Storytime!</ h2 >
141- < h3 > Our history</ h3 >
158+ < h3 data-variant ="light "> Our history</ h3 >
159+ < div >
160+ < img src ="assets/custom/box.svg " alt ="Box " />
161+ < span >
162+ Lorem ipsum dolor sit amet consectetur. Urna fermentum egestas
163+ platea tempor laoreet in tellus pellentesque velit. Auctor vitae
164+ tortor in volutpat. Lorem dolor fermentum eget neque amet sapien
165+ ultrices cursus elit. Consectetur nisl suspendisse aliquam nunc ut
166+ commodo mattis. Morbi faucibus pretium suspendisse vel pellentesque
167+ volutpat. Blandit in mattis libero quam. Sed sed porta mus nam nam
168+ ipsum nascetur augue. Eu maecenas erat sociis morbi arcu dolor.
169+ Massa commodo ut vitae sit nec.
170+ </ span >
171+ </ div >
142172 </ section >
143- < section class ="contact ">
173+ < section class ="section-with-max-width ">
144174 < h2 > Talk to us!</ h2 >
145175 < ul >
146176 < li >
147- < img src ="assets/custom/Businessshooting_Jana-Freund-Fotografie-58_1.jpg " alt ="" width ="240 " height ="241 " /> < strong > Tobi</ strong > Lead
148- @ DB UX Design System
177+ < img
178+ class ="person-img "
179+ src ="assets/custom/Businessshooting_Jana-Freund-Fotografie-58_1.jpg "
180+ alt =""
181+ width ="240 "
182+ height ="241 "
183+ />
184+ < h4 > Tobi</ h4 >
185+ Lead @ DB UX Design System
149186 </ li >
150187 < li >
151- < img src ="assets/custom/Businessshooting_Jana-Freund-Fotografie-69_1.jpg " alt ="" width ="240 " height ="241 " /> < strong > Lea</ strong > Design
152- Lead @ DB UX Design System
188+ < img
189+ class ="person-img "
190+ src ="assets/custom/Businessshooting_Jana-Freund-Fotografie-69_1.jpg "
191+ alt =""
192+ width ="240 "
193+ height ="241 "
194+ />
195+ < h4 > Lea</ h4 >
196+ Design Lead @ DB UX Design System
153197 </ li >
154198 < li >
155- < img src ="assets/custom/Businessshooting_Jana-Freund-Fotografie-77_1.jpg " alt ="" width ="240 " height ="241 " /> < strong > Maximilian</ strong >
199+ < img
200+ class ="person-img "
201+ src ="assets/custom/Businessshooting_Jana-Freund-Fotografie-77_1.jpg "
202+ alt =""
203+ width ="240 "
204+ height ="241 "
205+ />
206+ < h4 > Maximilian</ h4 >
156207 Dev Lead @ DB UX Design System
157208 </ li >
158209 </ ul >
@@ -161,10 +212,23 @@ <h2>Talk to us!</h2>
161212 >
162213 </ section >
163214 </ main >
164- < footer >
215+ < footer class =" landing-footer " >
165216 © 2024 DB UX Design System
166- < a href ="https://www.dbsystel.de/dbsystel-en/legal-3715942 "> Imprint</ a >
167- < a href ="datenschutzerklaerung.html " hreflang ="de "> Privacy policy</ a >
217+ < a
218+ class ="db-link "
219+ href ="https://www.dbsystel.de/dbsystel-en/legal-3715942 "
220+ data-content ="internal "
221+ >
222+ Imprint
223+ </ a >
224+ < a
225+ class ="db-link "
226+ href ="datenschutzerklaerung.html "
227+ hreflang ="de "
228+ data-content ="internal "
229+ >
230+ Privacy policy
231+ </ a >
168232 </ footer >
169233 </ body >
170234</ html >
0 commit comments