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

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

rascunho: detalhamento da aba do pilar Tecnologia

File size: 15.0 KB
Linha 
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5    <title>Interlegis</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              <br/>
144              <div class="row">
145                <div class="span4">
146                  <p><img src="temp_assets/img/predio.jpeg" width="220"></p>
147                  <h3>Interlegis inaugura seu novo portal</h3>
148                  <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>
149                </div>
150
151                <div class="span4">
152                  <ul>
153                    <li><a>Interlegis é destaque na maior feira de tecnologia de informação e comunicação do mundo </a></li>
154                    <li><a>Desenvolvedores do Plone discutem avanços e aplicações do software livre no Interlegis</a></li>
155                    <li><a>Encontro começa com debates sobre segurança em TI para o Legislativo</a></li>
156                    <li><a>Interlegis treina servidores de sete câmaras do Maranhão em informática legislativa</a></li>
157                    <li><a>TSE fará novos testes públicos e abertos para verificar segurança da urna eletrônica</a></li>
158                  </ul>
159                </div>
160
161                <div class="span4">
162                  <p><img src="temp_assets/img/engitec.jpeg" width="220"></p>
163                  <h3>Encontro começa com debates sobre segurança em TI para o Legislativo</h3>
164                  <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>
165                </div>
166
167                <div class="span4">
168                  <h4>Produtos e Serviços
169                  <span class="pull-right">
170                    <a href="#"><i class="icon-chevron-left"></i></a>
171                    <a href="#"><i class="icon-chevron-right"></i></a>
172                  </span>
173                  </h4>
174                  <hr/>
175                  <h4><a><img src="temp_assets/img/glyphicons_020_home.png"/>  Portal Modelo</a></h4>
176                  <br/>
177                  <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>
178                </div>
179              </div>
180
181              <div class="row">
182                <div class="span8">
183                  &nbsp;
184                </div>
185                <div class="span4">
186                  <p><a>Mais de SP</a> | <a>Outros Estados</a></p>
187                </div>
188                <div class="span4">
189                  <p><a>Manuias e FAQs</a> | <a>Saiba Mais</a></p>
190                </div>
191              </div>
192
193
194
195            </div>
196            <div id="comunicacao" class="tab-pane fade">
197              <h2>Comunicação</h2>
198              <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>
199            </div>
200          </div>
201        </div>
202      </div>
203
204      <hr/>
205
206      <div class="row">
207        <div class="span5">
208          <h2>TV, Radio, Imagens, Jornal</h2>
209          <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>
210
211        </div>
212        <div class="span5">
213          <h2>RSS Colab</h2>
214          <h3>Colaborações, Discussões, Mais Ativas</h3>
215          <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>
216
217        </div>
218        <div class="span6">
219          <h2>Facebook, Twitter</h2>
220          <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>
221
222        </div>
223      </div>
224
225
226
227
228      <div class="row">
229        <div class="span4">
230          <h2>Publicidade</h2>
231          <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>
232
233        </div>
234        <div class="span4">
235          <h2>Envie Notícias</h2>
236          <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>
237
238        </div>
239        <div class="span4">
240          <h2>Envie casos de sucesso</h2>
241          <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>
242
243        </div>
244
245        <div class="span4">
246          <h2>Central de Suporte</h2>
247          <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>
248
249        </div>
250      </div>
251
252
253
254
255
256      <hr>
257
258      <footer>
259       
260        <div class="row">
261          <div class="span16">
262            <div class="well">
263              <h1>Doormat</h1>
264            </div>
265          </div>
266        </div>
267       
268        <div class="row">
269          <div class="span9">
270            <address>
271              <strong>Secretaria Especial do Interlegis</strong><br/>
272              Avenida N2, Anexo E do Senado Federal <br/>
273              Brasília - DF - CEP 70165-900 <br/>
274              Telefone: (61) ????-????
275            </address>
276            <p>O conteúdo deste site está publicado sob a licença <br/>
277              <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/br/">Creative Commons - atribuição e não-comercial</a></p>
278          </div>
279         
280          <div class="span7 pull-right">
281            <p>Mapa do Site | Acessibilidade | Canais de Atendimento | Suporte</p>
282            <a href="#" class="btn"><i class="icon-home"></i>Senado Federal</a>
283            <a href="#" class="btn"><i class="icon-home"></i>Câmara dos Deputados</a>
284            <a href="#" class="btn"><i class="icon-home"></i>PNUD</a>
285          </div>
286         
287        </div>
288       
289      </footer>
290     
291    </div> <!-- /container -->
292   
293    <!-- Le javascript
294         ================================================== -->
295    <!-- Placed at the end of the document so the pages load faster -->
296    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
297    <script src="js/jquery.js"></script>
298    <script src="js/google-code-prettify/prettify.js"></script>
299    <script src="js/bootstrap-transition.js"></script>
300    <script src="js/bootstrap-alert.js"></script>
301    <script src="js/bootstrap-modal.js"></script>
302    <script src="js/bootstrap-dropdown.js"></script>
303    <script src="js/bootstrap-scrollspy.js"></script>
304    <script src="js/bootstrap-tab.js"></script>
305    <script src="js/bootstrap-tooltip.js"></script>
306    <script src="js/bootstrap-popover.js"></script>
307    <script src="js/bootstrap-button.js"></script>
308    <script src="js/bootstrap-collapse.js"></script>
309    <script src="js/bootstrap-carousel.js"></script>
310    <script src="js/bootstrap-typeahead.js"></script>
311
312
313  </body>
314</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.