comparison index.html @ 3:2d286f28acf9

Changed page for responsive views (tablets).
author Ariane Broermann <ariane@intevation.de>
date Tue, 28 Jan 2014 12:32:20 +0100
parents 20e1ebb86d9d
children 1d80634d0997
comparison
equal deleted inserted replaced
2:6a78f347c2cd 3:2d286f28acf9
37 <ul class="nav navbar-nav navbar-right"> 37 <ul class="nav navbar-nav navbar-right">
38 <li><a href="#">Kontakt</a></li> 38 <li><a href="#">Kontakt</a></li>
39 </ul> 39 </ul>
40 </div> 40 </div>
41 </div><!-- /navbar --> 41 </div><!-- /navbar -->
42 42 <div class="row row-dive4elements row-dive4elements-right">
43 <div class="container"> 43 <div class="col-xs-12 col-sm-6 col-md-8">
44 <div class="row-offcanvas row-offcanvas-right"> 44 <p class="pull-right visible-xs">
45 <button type="button" class="btn btn-primary btn-xs"
46 data-toggle="dive4elements">News Feed</button>
47 </p>
45 <p class="lead"> Dive4Elements ist eine datenbankbasierte Webapplikation zur raum-zeitlichen Analyse von Fachdaten der 4 Elemente (Feuer, Wasser, Luft und Erde). Dive steht für Digging, Investigating, Viewing, Exporting. 48 <p class="lead"> Dive4Elements ist eine datenbankbasierte Webapplikation zur raum-zeitlichen Analyse von Fachdaten der 4 Elemente (Feuer, Wasser, Luft und Erde). Dive steht für Digging, Investigating, Viewing, Exporting.
46 Dive4Elements gewährt webbasiert den Zugriff auf Datenmodelle in einem zentralen Datawarehouse und bietet die Möglichkeit zur Analyse, Visualisierung der Daten sowie Exportmöglichkeiten in offene Formate. 49 Dive4Elements gewährt webbasiert den Zugriff auf Datenmodelle in einem zentralen Datawarehouse und bietet die Möglichkeit zur Analyse, Visualisierung der Daten sowie Exportmöglichkeiten in offene Formate.
47 </p> 50 </p>
48
49 <div class="jumbotron"> 51 <div class="jumbotron">
50 <p class="lead">Dive4Elements River oder auch FLYSS - Flusshydrologische Software</p> 52 <p class="lead">Dive4Elements River oder auch FLYSS - Flusshydrologische Software</p>
51 <p><a class="btn btn-lg btn-success" href="#" role="button">Get it</a></p> 53 <p><a class="btn btn-lg btn-success" href="#" role="button">Get it</a></p>
52 54
53 <!-- Carousel --> 55 <!-- Carousel -->
54 <div id="myCarousel" class="carousel slide data-ride="carousel""> 56 <div id="myCarousel" class="carousel slide data-ride="carousel"">
55 <!-- Carousel items --> 57 <!-- Carousel items -->
56 <div class="carousel-inner"> 58 <div class="carousel-inner">
57 <div class="item active"> 59 <div class="item active">
58 <img src="img/screenshot1.png" alt="1. Bild" class="img-responsive"> 60 <img src="img/bezugslinie_saar_748x400_ausschnitt.png" alt="1. Bild" class="img-responsive">
59 <div class="carousel-caption"> 61 <div class="carousel-caption">
60 <p>Titel und ggf. kurze Erläuterung </p> 62 <p>Titel und ggf. kurze Erläuterung </p>
63 </div>
64 </div>
65 <div class="item">
66 <img src="img/fix-a_saar_748x400_ausschnitt.png" alt="2. Bild" class="img-responsive">
67 <div class="carousel-caption">
68 <p>Titel und ggf. kurze Erläuterung </p>
69 </div>
70 </div>
71 <div class="item">
72 <img src="img/uesk_koblenz_hq-extrem_748x400.png" alt="3. Bild" class="img-responsive">
73 <div class="carousel-caption">
74 <p>Titel und ggf. kurze Erläuterung </p>
75 </div>
76 </div>
77 <div class="item">
78 <img src="img/wspl_rhein_748x400_ausschnitt.png" alt="4. Bild" class="img-responsive">
79 <div class="carousel-caption">
80 <p>Titel und ggf. kurze Erläuterung </p>
81 </div>
82 </div>
83 <div class="item">
84 <img src="img/uesk_koblenz_hq-extrem_580x310_ausschnitt.png" alt="5. Bild" class="img-responsive">
85 <div class="carousel-caption">
86 <p>Titel und ggf. kurze Erläuterung </p>
87 </div>
61 </div> 88 </div>
62 </div> 89 </div>
63 <div class="item"> 90 <!-- Carousel nav -->
64 <img src="img/screenshot2.png" alt="2. Bild" class="img-responsive"> 91 <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="prev"></span></a>
65 <div class="carousel-caption"> 92 <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="next"></span></a>
66 <p>Titel und ggf. kurze Erläuterung </p> 93 </div><!-- /myCarousel -->
67 </div> 94 </div><!-- /jumbobutton-->
68 </div> 95
69 <div class="item"> 96 <div class="row marketing">
70 <img src="img/screenshot3.png" alt="3. Bild" class="img-responsive"> 97 <div class="col-lg-6">
71 <div class="carousel-caption"> 98 <h4>Was ist Dive4Elements River?</h4>
72 <p>Titel und ggf. kurze Erläuterung </p> 99 <p>Es folgt der Text.</p>
73 </div>
74 </div>
75 <div class="item">
76 <img src="img/screenshot5.png" alt="4. Bild" class="img-responsive">
77 <div class="carousel-caption">
78 <p>Titel und ggf. kurze Erläuterung </p>
79 </div>
80 </div>
81 <div class="item">
82 <img src="img/screenshot8.png" alt="5. Bild" class="img-responsive">
83 <div class="carousel-caption">
84 <p>Titel und ggf. kurze Erläuterung </p>
85 </div>
86 </div>
87 </div> 100 </div>
88 <!-- Carousel nav --> 101 <div class="col-lg-6">
89 <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="prev"></span></a> 102 <h4>Visualisierung und Analyse</h4>
90 <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="next"></span></a> 103 <p>Es folgt der Text.</p>
91 </div><!-- /myCarousel --> 104 </div>
92 </div><!-- /jumbobutton--> 105 </div><!-- /row marketing -->
93 106
94 <div class="row marketing"> 107 <div class="jumbotron">
95 <div class="col-lg-6"> 108 <p>Dive4Elements Ocean (GNV)</p>
96 <h4>Was ist Dive4Elements River?</h4>
97 <p>Es folgt der Text.</p>
98 </div> 109 </div>
99 <div class="col-lg-6"> 110 </div><!-- /col-xs-12 -->
100 <h4>Visualisierung und Analyse</h4>
101 <p>Es folgt der Text.</p>
102 </div>
103 </div><!-- /row -->
104
105 <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
106 <div class="news_feed">
107 <p>News</p>
108 </div>
109 </div><!-- /sidebar -->
110
111 <div class="jumbotron">
112 <p>Dive4Elements Ocean (GNV)</p>
113 </div>
114 111
115 </div><!-- /container --> 112 <div class="col-xs-6 col-md-4 sidebar-dive4elements">
113 <div class="news feed">
114 <p>News Feed</p>
115 </div><!-- /news feed -->
116 </div><!-- /col-xs-6 -->
117 </div><!-- /row -->
116 118
117 <div class="footer"> 119 <div class="footer">
118 © 2011 Intevation GmbH <br> 120 © 2011 Intevation GmbH <br>
119 Dive4Elements ist lizensiert unter der <a href= 121 Dive4Elements ist lizensiert unter der <a href=
120 "http://www.gnu.org/licenses/lgpl-2.1.html">GNU LGPL v2.1</a>. 122 "http://www.gnu.org/licenses/lgpl-2.1.html">GNU LGPL v2.1</a>.
121 </div> 123 </div><!-- /footer -->
122 </div> <!-- /container --> 124 </div> <!-- /container -->
125
126 <!-- Bootstrap core JavaScript
127 ================================================== -->
123 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 128 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
124 <script src="https://code.jquery.com/jquery.js"></script> 129 <script src="https://code.jquery.com/jquery.js"></script>
125 <!-- Include all compiled plugins (below), or include individual files as needed --> 130 <!-- Include all compiled plugins (below), or include individual files as needed -->
126 <script src="bootstrap-3.0.3/dist/js/bootstrap.min.js"></script> 131 <script src="bootstrap-3.0.3/dist/js/bootstrap.min.js"></script>
132 <script src="js/dive4elements.js"></script>
127 </body> 133 </body>
128 </html> 134 </html>
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)