dsg-development/index.html at master · dsnger/dsg-development · GitHub

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
<!DOCTYPE html>
<html lang="de">
  <head>
    <title>DS Graphics - Illustration und Kommunikationsdesign</title>
    <meta charset="utf-8">
    <meta description="Konzeptionelle und grafische Gestaltung Ihrer Kommunikation- und Werbemittel. Design mit Konzept und Knowhow.">
    <meta keywords="illustration, webdesign, webentwicklung, wordpress, illustration, grafikdesign, Kommunikationsdesign, münster, kreuzviertel">
    <meta author="Daniel Sänger Graphics">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:image" content="">
    <meta property="og:url" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="img/favicons/favicon.ico">
    <link rel="stylesheet" href="css/main.css">
    <!--link(rel="stylesheet", href="css/component.css")-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  </head>
  <body class="page-home">
    <button class="hamburger hamburger--spring" id="trigger-overlay" type="button"><span class="hamburger-box"><span class="hamburger-inner"></span></span></button>
    <div class="page-container">
      <!--header-->
      <header>
        <section class="topheader"><a class="phone" href="#">T. +49 251 / 84 93 158</a>
          <button class="button-email button--outline">Kontakt</button>
        </section>
        <div class="logo"><a href="index.html"><img src="img/logo.svg" alt="DS Graphics - Logo"></a></div>
      </header>
      <main>
        <h2 class="page-title">Homepage</h2>
        <p>Das wird die Homepage für DS-Graphics</p>
        <section>
          <p>The page gets pushed to the side and the overlay slides in.
            <button class="button--effect button--effect-radomir">Hello</button>
            <button class="button--outline ripple" data-ripple-color="#e7543d">Login</button>
            <button class="button-effect ripple ripple-effect--dark">Test</button>
            <button class="button--light ripple">Test</button>
          </p>
        </section>
        <section class="vertical flipcards" id="grid3d">
          <div class="grid-wrap">
            <div class="grid">
              <article class="overlay-grid-item flip-card" id="first" ontouchstart="this.classList.toggle('hover');">
                <div class="front">Hallo</div>
                <div class="back">Rückseite
                  <h3>Rückseite</h3>
                  <button class="open-content">open</button>
                </div>
              </article>
              <article class="overlay-grid-item flip-card" id="secondary" ontouchstart="this.classList.toggle('hover');">
                <div class="front">Hallo</div>
                <div class="back">Rückseite
                  <h3>Rückseite</h3>
                  <button class="open-content">open</button>
                </div>
              </article>
              <article class="overlay-grid-item flip-card" id="third" ontouchstart="this.classList.toggle('hover');">
                <div class="front">Hallo</div>
                <div class="back">
                  <h3>Rückseite</h3>
                  <button class="open-content">open</button>
                </div>
              </article>
            </div>
          </div>
          <div class="content" data-content-for="thirddd">
            <div>
              <h1>third</h1>
              <p>The only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars.</p>
              <p>The only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars.</p>
            </div><span class="loading"></span>
            <button class="close-content"></button>
          </div>
          <div class="content" data-content-for="first">
            <div>
              <h1>first</h1>
              <p>The only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars.</p>
              <p>The only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars.</p>
            </div><span class="loading"></span>
            <button class="close-content"></button>
          </div>
        </section>
      </main>
      <footer>
        <p>Hier ist der Footer</p>
      </footer>
    </div>
    <div class="overlay overlay-contentpush">
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Clients</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>
  </body>
  <script src="js/jquery-2.1.4.min.js"></script>
  <!--material-form needs this-->
  <!--script(src="js/jquery.easing.1.3.js")-->
  <!--script(src="js/velocity.min.js")-->
  <!--script(src="js/dropdown.js")-->
  <!--script(src="js/material-forms.js")-->
  <!--site scripts-->
  <script src="js/scripts.js" type="text/javascript"></script>
</html>