-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
234 lines (234 loc) · 15.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Architecture Antipatterns</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles/index.css" media="all" />
<script src="/scripts/nav.js" type="module"></script>
</head>
<body>
<a href="#main" class="skip-link">Zum Inhalt springen</a>
<nav class="main-navigation" role="navigation">
<a href="#" class="brand-link">
<img src="lib/img/aa-logo.svg" alt="Architecture Antipatterns Logo" class="brand-logo" />
<span class="link-alt">Architecture Antipatterns Website</span>
</a>
<menu-toggle hidden>
<button>Menü</button>
</menu-toggle>
<ul class="navigation-links" role="list" aria-label="Seitennavigation">
<li>
<sub-menu>
<details>
<summary>
Antipatterns
</summary>
<ul role="list" aria-label="Antipatterns Untermenü">
<li> <a href="#">Overengineering</a></li>
<li> <a href="#">Emotional Misattachement</a></li>
<li> <a href="#">Cargo Culting</a></li>
<li> <a href="#">Domain Allergy</a></li>
</ul>
</details>
</sub-menu>
</li>
<li>
<sub-menu>
<details>
<summary>
Antipatterns
</summary>
<ul role="list" aria-label="Antipatterns Untermenü">
<li> <a href="#">Overengineering</a></li>
<li> <a href="#">Emotional Misattachement</a></li>
<li> <a href="#">Cargo Culting</a></li>
<li> <a href="#">Domain Allergy</a></li>
</ul>
</details>
</sub-menu>
</li>
</ul>
</nav>
<header class="landingpage-header">
<div class="landingpage-header__wrapper">
<h1 class="landingpage-header__title">Architecture Antipatterns</h1>
<p class="landingpage-header__subtitle">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<img src="lib/img/aa-visual-header.svg" alt="Architecture Antipattern Keyvisual" class="landingpage-header__keyvisual" />
</div>
</header>
<main id="main">
<section id="teaser-antipatterns" class="stripe stripe--grey">
<div class="landingpage-teaser-section__wrapper">
<h2 class="landingpage-teaser-section__title landingpage-teaser-section__title--purple">Antipatterns</h2>
<div class="landingpage-teaser-section__grid">
<div class="teaser-card teaser-card--purple">
<div class="teaser-card__body">
<h3 class="teaser-card__title">Overengineering</h3>
<p class="teaser-card__text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lore Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="teaser-card__footer teaser-card_footer--purple">
<a class="teaser-card__button teaser-card__button--purple" href="https://www.innoq.com">Read more</a>
</div>
</div>
<div class="teaser-card teaser-card--purple">
<div class="teaser-card__body">
<h3 class="teaser-card__title">Domain Allergy</h3>
<p class="teaser-card__text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="teaser-card__footer teaser-card_footer--purple">
<a class="teaser-card__button teaser-card__button--purple" href="https://www.innoq.com">Read more</a>
</div>
</div>
<div class="teaser-card teaser-card--purple">
<div class="teaser-card__body">
<h3 class="teaser-card__title">Cargo Culting</h3>
<p class="teaser-card__text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="teaser-card__footer teaser-card_footer--purple">
<a class="teaser-card__button teaser-card__button--purple" href="https://www.innoq.com">Read more</a>
</div>
</div>
<div class="teaser-card teaser-card--purple">
<div class="teaser-card__body">
<h3 class="teaser-card__title">Misattachment</h3>
<p class="teaser-card__text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="teaser-card__footer teaser-card_footer--purple">
<a class="teaser-card__button teaser-card__button--purple" href="https://www.innoq.com">Read more</a>
</div>
</div>
</div>
</div>
</section>
<section id="teaser-casestudies" class="stripe stripe--white">
<div class="landingpage-teaser-section__wrapper">
<h2 class="landingpage-teaser-section__title landingpage-teaser-section__title--blue">Case Studies and Examples</h2>
<div class="landingpage-teaser-section__grid">
<div class="teaser-card teaser-card--blue">
<div class="teaser-card__body">
<h3 class="teaser-card__title">Super-generic framework in logistics</h3>
<p class="teaser-card__text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="teaser-card__footer teaser-card_footer--blue">
<a class="teaser-card__button teaser-card__button--blue" href="https://www.innoq.com">Read more</a>
</div>
</div>
<div class="teaser-card teaser-card--blue">
<div class="teaser-card__body">
<h3 class="teaser-card__title">Over-configurability in a (huuuuge) commerce system</h3>
<p class="teaser-card__text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="teaser-card__footer teaser-card_footer--blue">
<a class="teaser-card__button teaser-card__button--blue" href="https://www.innoq.com">Read more</a>
</div>
</div>
<div class="teaser-card teaser-card--blue">
<div class="teaser-card__body">
<h3 class="teaser-card__title">The insurance app productline for 100+ countries</h3>
<p class="teaser-card__text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="teaser-card__footer teaser-card_footer--blue">
<a class="teaser-card__button teaser-card__button--blue" href="https://www.innoq.com">Read more</a>
</div>
</div>
<div class="teaser-card teaser-card--blue">
<div class="teaser-card__body">
<h3 class="teaser-card__title">Two huge domain classes represent all legal forms for companies, unions and foundations</h3>
<p class="teaser-card__text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="teaser-card__footer teaser-card_footer--blue">
<a class="teaser-card__button teaser-card__button--blue" href="https://www.innoq.com">Read more</a>
</div>
</div>
</div>
</div>
</section>
<section id="author-section" class="stripe stripe--purple">
<div class="landingpage-teaser-section__wrapper">
<h2 class="landingpage-teaser-section__title landingpage-teaser-section__title--white">Maintainers</h2>
<div class="landingpage-teaser-section__grid">
<div class="author__card">
<div class="author-card__header">
<img src="lib/img/christian-jacobs-ava.webp" alt="Avatar Felix Schumacher" class="author-card__avatar" />
<h3 class="author-card__title">Christian Jacobs</h3>
<p class="author-card__twitterhandle">@christian_on_twitter</p>
</div>
<div class="author-card__body">
<p class="author-card__text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
psum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
</div>
<div class="author__card">
<div class="author-card__header">
<img src="lib/img/theo-pack-ava.webp" alt="Avatar Theo Pack" class="author-card__avatar" />
<h3 class="author-card__title">Theo Pack</h3>
<p class="author-card__twitterhandle">@theo_on_twitter</p>
</div>
<div class="author-card__body">
<p class="author-card__text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
psum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
Ipsum
</p>
</div>
</div>
<div class="author__card">
<div class="author-card__header">
<img src="lib/img/felix-schumacher-ava.webp" alt="Avatar Felix Schumacher" class="author-card__avatar" />
<h3 class="author-card__title">Felix Schumacher</h3>
<p class="author-card__twitterhandle">@felix_on_twitter</p>
</div>
<div class="author-card__body">
<p class="author-card__text">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
psum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
Ipsum
</p>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
<footer class="footer footer--black">
<div class="footer__wrapper">
<p class="footer__subtitle"> The content of this site was created by Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
<p class="footer__subtitle"> Made and maintained by </p>
<a href="https://www.innoq.com">
<img class="footer__logo" src="lib/img/innoq-logo--white.svg" alt="INNOQ Logo" />
</a>
<a class="footer__textlink" href="https://www.innoq.com/en/datenschutz"> Privacy Policy </a>
</div>
</footer>
</body>
</html>