source: publico/PortalInterlegis/design/index.html @ 6138

Última Alteração nesse arquivo desde 6138 foi 6138, incluída por mazza, 8 anos atrás

rascunho: abas para os pilares

File size: 12.7 KB
Linha 
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <title>Bootstrap, from Twitter</title>
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name="description" content="">
8    <meta name="author" content="">
9
10    <!-- Le styles -->
11    <link href="css/bootstrap.css" rel="stylesheet">
12    <style type="text/css">
13      body {
14      padding-top: 10px;
15      padding-bottom: 20px;
16      }
17    </style>
18
19    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
20    <!--[if lt IE 9]>
21        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
22        <![endif]-->
23
24    <link rel="shortcut icon" href="img/favicon.ico">
25
26
27  </head>
28
29  <body>
30
31    <div class="container">
32
33      <div class="row">
34        <div class="span11">
35          <img src="img/interlegis.png"/>
36          <br/>
37          <br/>
38        </div>
39
40        <div class="span5">
41          <br/>
42          <form action="" class="navbar-search pull-right">
43            <div class="controls">
44              <label class="radio inline">
45                <input type="radio" name="tipo-busca" value="portal" checked="ckecked"> no Portal Interlegis
46              </label>
47              <label class="radio inline">
48                <input type="radio" name="tipo-busca" value="lexml"> no LexML
49              </label>
50            </div>
51            <div class="controls">
52              <div class="input-append">
53                <input type="text" size="16">
54                <button type="button" class="btn" style="margin:-10px 0 0 -5px"><i class="icon-search"></i></button>
55              </div>
56            </div>
57          </form>
58        </div>
59      </div>
60
61
62
63      <div class="navbar">
64        <div class="navbar-inner">
65          <div style="width: auto;" class="container">
66            <div class="nav-collapse">
67              <ul class="nav">
68                <li class="active"><a href="#">Interlegis</a></li>
69                <li class="divider-vertical"></li>
70                <li><a href="#">Comunidade Legislativa</a></li>
71                <li class="divider-vertical"></li>
72                <li><a href="#">Informação</a></li>
73                <li class="divider-vertical"></li>
74                <li><a href="#">Capacitação</a></li>
75                <li class="divider-vertical"></li>
76                <li><a href="#">Tecnologia</a></li>
77                <li class="divider-vertical"></li>
78                <li><a href="#">Comunicação</a></li>
79              </ul>
80            </div><!-- /.nav-collapse -->
81          </div>
82        </div><!-- /navbar-inner -->
83      </div>
84
85
86      <div class="row">
87        <div class="span10">
88          <div class="carousel slide" id="myCarousel">
89            <div class="carousel-inner">
90              <div class="item">
91                <img alt="" src="temp_assets/img/bootstrap-mdo-sfmoma-01.jpg">
92                <div class="carousel-caption">
93                  <h4>First Thumbnail label</h4>
94                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
95                </div>
96              </div>
97              <div class="item active">
98                <img alt="" src="temp_assets/img/bootstrap-mdo-sfmoma-02.jpg">
99                <div class="carousel-caption">
100                  <h4>Second Thumbnail label</h4>
101                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
102                </div>
103              </div>
104              <div class="item">
105                <img alt="" src="temp_assets/img/bootstrap-mdo-sfmoma-03.jpg">
106                <div class="carousel-caption">
107                  <h4>Third Thumbnail label</h4>
108                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
109                </div>
110              </div>
111            </div>
112            <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
113            <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
114          </div>
115
116        </div>
117        <div class="span6">
118          <h2>Andamento Programa Interlegis</h2>
119          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
120
121        </div>
122      </div>
123
124      <div class="row">
125        <div class="span16">
126          <ul class="nav nav-tabs" id="tab">
127            <li class=""><a data-toggle="tab" href="#informacao">Informação</a></li>
128            <li class=""><a data-toggle="tab" href="#capacitacao">Capacitação</a></li>
129            <li class="active"><a data-toggle="tab" href="#tecnologia">Tecnologia</a></li>
130            <li class=""><a data-toggle="tab" href="#comunicacao">Comunicação</a></li>
131          </ul>
132          <div class="tab-content" id="myTabContent">
133            <div id="informacao" class="tab-pane fade">
134              <h2>Informação</h2>
135              <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
136            </div>
137            <div id="capacitacao" class="tab-pane fade">
138              <h2>Capacitação</h2>
139              <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
140            </div>
141            <div id="tecnologia" class="tab-pane fade active in">
142              <h2>Tecnologia Legislativa</h2>
143              <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
144            </div>
145            <div id="comunicacao" class="tab-pane fade">
146              <h2>Comunicação</h2>
147              <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
148            </div>
149          </div>
150        </div>
151      </div>
152
153
154      <div class="row">
155        <div class="span5">
156          <h2>TV, Radio, Imagens, Jornal</h2>
157          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
158
159        </div>
160        <div class="span5">
161          <h2>RSS Colab</h2>
162          <h3>Colaborações, Discussões, Mais Ativas</h3>
163          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
164
165        </div>
166        <div class="span6">
167          <h2>Facebook, Twitter</h2>
168          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
169
170        </div>
171      </div>
172
173
174
175
176      <div class="row">
177        <div class="span4">
178          <h2>Publicidade</h2>
179          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
180
181        </div>
182        <div class="span4">
183          <h2>Envie Notícias</h2>
184          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
185
186        </div>
187        <div class="span4">
188          <h2>Envie casos de sucesso</h2>
189          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
190
191        </div>
192
193        <div class="span4">
194          <h2>Central de Suporte</h2>
195          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
196
197        </div>
198      </div>
199
200
201
202
203
204      <hr>
205
206      <footer>
207       
208        <div class="row">
209          <div class="span16">
210            <div class="well">
211              <h1>Doormat</h1>
212            </div>
213          </div>
214        </div>
215       
216        <div class="row">
217          <div class="span9">
218            <address>
219              <strong>Secretaria Especial do Interlegis</strong><br/>
220              Avenida N2, Anexo E do Senado Federal <br/>
221              Brasília - DF - CEP 70165-900 <br/>
222              Telefone: (61) ????-????
223            </address>
224            <p>O conteúdo deste site está publicado sob a licença <br/>
225              <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/br/">Creative Commons - atribuição e não-comercial</a></p>
226          </div>
227         
228          <div class="span7 pull-right">
229            <p>Mapa do Site | Acessibilidade | Canais de Atendimento | Suporte</p>
230            <a href="#" class="btn"><i class="icon-home"></i>Senado Federal</a>
231            <a href="#" class="btn"><i class="icon-home"></i>Câmara dos Deputados</a>
232            <a href="#" class="btn"><i class="icon-home"></i>PNUD</a>
233          </div>
234         
235        </div>
236       
237      </footer>
238     
239    </div> <!-- /container -->
240   
241    <!-- Le javascript
242         ================================================== -->
243    <!-- Placed at the end of the document so the pages load faster -->
244    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
245    <script src="js/jquery.js"></script>
246    <script src="js/google-code-prettify/prettify.js"></script>
247    <script src="js/bootstrap-transition.js"></script>
248    <script src="js/bootstrap-alert.js"></script>
249    <script src="js/bootstrap-modal.js"></script>
250    <script src="js/bootstrap-dropdown.js"></script>
251    <script src="js/bootstrap-scrollspy.js"></script>
252    <script src="js/bootstrap-tab.js"></script>
253    <script src="js/bootstrap-tooltip.js"></script>
254    <script src="js/bootstrap-popover.js"></script>
255    <script src="js/bootstrap-button.js"></script>
256    <script src="js/bootstrap-collapse.js"></script>
257    <script src="js/bootstrap-carousel.js"></script>
258    <script src="js/bootstrap-typeahead.js"></script>
259
260
261  </body>
262</html>
Note: Veja TracBrowser para ajuda no uso do navegador do trac.
 

The contents and data of this website are published under license:
Creative Commons 4.0 Brasil - Atribuir Fonte - Compartilhar Igual.