index.html 5.9 KB
Newer Older
Dennis Schoepf's avatar
Dennis Schoepf committed
1
<!DOCTYPE html>
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
2
<html lang="de">
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400&display=swap"
      rel="stylesheet"
    />
    <link href="./styles/main.scss" rel="stylesheet" />
    <title>Alex Mayer</title>
  </head>
  <body>
    <header>
      <nav>
        <h1>Alex Mayer</h1>
17
        <ul id="menu">
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
18
19
20
21
22
23
          <li><a class="active" href="/">Start</a></li>
          <li><a href="/">Leistungen</a></li>
          <li><a href="/">Blog</a></li>
          <li><a href="/">Über Mich</a></li>
          <li><a href="/">Kontakt</a></li>
        </ul>
24
25
26
27
28
29
30
31
        <button
          id="menu-trigger"
          class="hamburger hamburger--slider"
          type="button"
        >
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
          </span>
32
        </button>
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
      </nav>
      <section id="hero">
        <article>
          <h2><span>Glänzende Ideen für leuchtende Augen</span></h2>
          <button>Angebot einholen</button>
        </article>
      </section>
    </header>
    <main>
      <section class="maxwidthcontainer" id="services">
        <h2>Leistungen</h2>
        <ul>
          <li>
            <a href="/" class="bg-accent-bright"
              ><h3>Design</h3>
48
              <img src="./assets/design_icon.svg" alt="Design Icon"
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
49
50
51
52
53
            /></a>
          </li>
          <li>
            <a href="/" class="bg-accent-reg"
              ><h3>Strategie</h3>
54
              <img src="./assets/strategy_icon.svg" alt="Strategy Icon"
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
55
56
57
58
59
            /></a>
          </li>
          <li>
            <a href="/" class="bg-accent-dark"
              ><h3>Consulting</h3>
60
              <img src="./assets/consulting_icon.svg" alt="Consulting Icon"
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
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
            /></a>
          </li>
        </ul>
      </section>
      <section class="maxwidthcontainer" id="news">
        <h2>News</h2>
        <ul>
          <li>
            <a href="/">365 Postkarten</a> - Eine Liebeserklärung für jeden Tag!
            <a href="/">[mehr erfahren]</a>
          </li>
          <li>
            <a href="/">Award Nominierung</a> - Tolle News: Ich bin bei der
            Endauswahl 2020! <a href="/">[mehr erfahren]</a>
          </li>
          <li>
            <a href="/">CMYK erklärt</a> - Der neueste
            <a href="/">Blog</a>-Eintrag <a href="/">[mehr erfahren]</a>
          </li>
        </ul>
      </section>
      <section class="maxwidthcontainer" id="references">
        <h2>Referenzen</h2>
        <ul>
          <li class="tina-ubuntu">
            <div class="image-wrapper">
87
88
89
90
              <img
                src="./assets/img_ref2.jpg"
                alt="Tina Ubuntu, CEO Headless Ltd."
              />
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
91
92
93
94
95
96
97
98
99
            </div>
            <blockquote>
              Alex' Redesign hat maßgeblich mitgeholfen, unseren Umsatz um 20%
              in die Höhe zu treiben!
            </blockquote>
            <cite>Tina Ubuntu, CEO Headless Ltd.</cite>
          </li>
          <li class="tom-herzog">
            <div class="image-wrapper">
100
101
102
103
              <img
                src="./assets/img_ref1.jpg"
                alt="Tom Herzog, Cutter's Finest"
              />
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
104
105
106
107
108
109
110
111
112
            </div>
            <blockquote>
              Große Webkunst - Keine Kunst mit Alex Mayer!
            </blockquote>
            <cite>Tom Herzog, Cutter's Finest</cite>
            <div class="fill-item"></div>
          </li>
          <li class="mueller-ag">
            <div class="image-wrapper">
113
              <img src="./assets/img_ref3.jpg" alt="Vorstand Mueller AG" />
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
114
115
116
117
118
119
120
            </div>
            <blockquote>
              <span class="blockquote-content"
                >Das Store-Konzept von Alex Mayer hat unsere größten Erwartungen
                übertroffen.</span
              >
            </blockquote>
121
122
123
            <cite
              >Vorstand Müller AG<br />KR Ernst Anker, Dr. Florian Eisner</cite
            >
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
            <div class="quotation-decoration">
              <img src="./assets/quotation_icon.svg" alt="Quotation" />
            </div>
          </li>
        </ul>
      </section>
    </main>
    <footer>
      <nav>
        <small>© Alex Mayer 2020</small>
        <ul>
          <li><a href="/">Impressum</a></li>
          <li><a href="/">Datenschutzerklärung</a></li>
        </ul>
      </nav>
      <article>
        <p>
141
          Demo-Wordpress-Seite im Rahmen der LV "Content Mangagement Systeme" an
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
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
          der FH Salzburg von Dennis Schöpf und Maximilian Schmitt
        </p>
        <p>Alle Inhalte frei erfunden</p>
        <p>Bildnachweis</p>
        <h5>Fotos</h5>
        <ul>
          <li>
            Herofoto Tastatur: Aman Anderson,
            http://de.freeimages.com/photo/illuminated-keyboard-124228
          </li>
          <li>
            Foto Dina Meyer by Dreifachaxel [CC BY-SA 4.0
            (https://creativecommons.org/licenses/by-sa/4.0)], from Wikimedia
            Commons
          </li>
          <li>
            Foto Thomas Meyer-Hermann By Thomas Meyer-Hermann (Thomas
            Meyer-Hermann) [GFDL (http://www.gnu.org/ copyleft/fdl.html), CC
            BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0) or CC
            BY-SA 3.0 de
            (https://creativecommons.org/licenses/by-sa/3.0/de/deed.en)], via
            Wikimedia Commons https://upload.wikimedia.org/wikipedia/
            commons/thumb/c/c6/Thomas_Meyer-Hermann_1.jpg/407px-Thomas_Meyer-Hermann_1.jpg
          </li>
          <li>
            Foto Vorstand Sparkasse Ülzen [[File:SKUelzen Vorstand
            2015.jpg|SKUelzen Vorstand 2015]] https://upload.
            wikimedia.org/wikipedia/commons/3/3e/SKUelzen_Vorstand_2015.jpg
          </li>
        </ul>
        <h4>Icons</h4>
        <p>Freepik (http://www.freepik.com) / www.flaticon.com</p>
      </article>
    </footer>
176
    <script src="./scripts/main.js"></script>
Dennis Dominik Schöpf's avatar
Dennis Dominik Schöpf committed
177
178
  </body>
</html>