Mercurial > dive4elements > website
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> |