Project

General

Profile

Statistics
| Branch: | Revision:

automacao-labi / proj1 / example.html @ a4a71b59

History | View | Annotate | Download (3.72 KB)

1
<!DOCTYPE html>
2
<html>
3
<head>
4
        <title>Example</title>
5
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
6
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
7
        <script type="text/javascript" src="scripts_java.js"></script>
8
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
10
        <meta charset="utf-8">
11
        <style>
12
                .nav-pills > li.active > a{
13
                        color: #d8d8d8;
14
                        background-color: #a8d878;
15

16
                }
17

18
                .nav-pills > li.active > a:focus {  <!-- seleccionada-->
19
                        color: #d8d8d8;
20
                        background-color: #a8d878;
21
                }
22
                .nav-pills > li.active > a:hover { <!-- seleccionada passar por cima-->
23
                        color:#a8d878;
24
                        background-color: #a8d878;
25
                }
26
                .nav-pills > li > a {
27
                        color:#006666;
28
                        background-color: #C2C2C2;
29
                }
30
                
31
                body{
32
                        background-color: #d8d8d8;
33
                }
34
                #rodape{
35
                        position: fixed;
36
                        bottom:0;
37
                        background-color: white;
38
                }
39
                #img_principal{
40
                        width: 35%;
41
                        position: fixed;
42
                        right: 0;
43
                        bottom: inherit;
44
                        
45
                }
46
                #time{
47
                        bottom: inherit;
48
                        position: fixed;
49
                        left: 0;
50
                        
51
                }
52

53

54
                #deti_ua{
55
                        margin-top: 20%;
56
                }
57
                #header {
58
                        left:25%;
59
                        background-color: #d8d8d8;
60
                }
61
                #navbar{
62
                        color:#d8d8d8;
63
                        position: fixed;
64
                        top:25%;
65

66
                }
67
                .tab-content{
68
                        position: absolute;
69
                        left:25%;
70
                        right: 25%;
71
                        text-align: center;
72
                        color: #006666;
73

74
                }
75

76
                h1{        
77
                        font-family: 'Garamond';
78
                        font-weight: bold;
79
                        font-size: 50px;
80

81
                }
82
                
83
                h2{
84
                        font-family: 'Garamond';
85
                        font-weight: bold;
86
                        font-size: 35px;
87
                        position: fixed;
88
                        margin-left: 20%;
89
                        margin-top: 0;
90
                }
91
                p{
92
                        margin-left: inherit;
93
                }
94
                @font-face {
95
                        font-family: 'Garamond';
96
                        font-style: normal;
97
                        font-weight: 400;
98
                        src: local('Garamond'), url(http://fonts.gstatic.com/l/font?kit=9AOJPGeT-vxbCdv-U0fY0_esZW2xOQ-xsNqO47m55DA&skey=a3a4b3361b12223a) format('woff2');
99
                }
100

    
101
                
102

    
103

    
104
        </style>
105
</head>
106
<body>                
107

    
108
        <div id="navbar" class="col-md-2 column margintop20"> <!-- Barra lateral de navegação-->
109
                <ul class="nav nav-pills nav-stacked">
110
                        <li class="active"><a href="#home" data-toggle="pill">Home</a></li>
111
                        <li><a href="#gnu" data-toggle="pill">GNU Make</a></li>
112
                        <li><a href="#cmake" data-toggle="pill">Cmake</a></li>
113
                        <li><a href="#ant" data-toggle="pill">Ant</a></li>
114
                        <li><a href="#comparativo" data-toggle="pill">Comparativo</a></li>
115
                        <li><a href="#bibliografia" data-toggle="pill">Bibliografia</a></li>
116
                        <li><a href="#acerca" data-toggle="pill">Acerca</a></li>
117
                </ul>
118

    
119
        </div>
120

    
121
        <div id="rodape">  <!-- Rodapé -->
122
                
123
                <!-- Imagem da ua -->
124
                <img id="img_principal" src="images/ua.png" alt="Logótipo da Universidade de Aveiro" >
125

    
126
                <!-- Relógio -->
127
                <span id="time"></span>
128
                
129

    
130
        </div>
131
        
132
        
133
        
134

    
135
        <div class="tab-content">  <!-- Conteúdos para cada href da barra de navegação -->
136
                <div id="home" class="tab-pane fade in active">
137
                        <div id="header">
138
                                <br>
139
                                <h1>Ferramentas de automação</h1>
140
                                <br>
141
                                <img id="deti_ua" src="images/deti.png" alt="Departamento de Eletrónica, Telecomunicações e Informáica da Universidade de Aveiro">
142

    
143
                        </div>
144
                </div>
145

    
146
                <div id="gnu" class="tab-pane fade">
147
                        
148
                        <p>
149
                                <h2>GNU MAKE</h2>
150
                        </p>
151

    
152
                        
153
                </div>
154
                <div id="cmake" class="tab-pane fade">
155

    
156
                        <p>
157
                                <h2>CMake</h2>
158
                        </p>
159
                </div>
160
                <div id="ant" class="tab-pane fade">
161

    
162
                        <p>
163
                                <h2>Apache Ant</h2>
164
                        </p>
165
                </div>
166
                <div id="comparativo" class="tab-pane fade">
167

    
168
                        <p>
169
                                <h2>Comparativo</h2>
170
                        </p>
171
                </div>
172
                <div id="bibliografia" class="tab-pane fade">
173

    
174
                        <p>
175
                                <h2>Bibliografia</h2>
176
                        </p>
177
                </div>
178
                <div id="acerca" class="tab-pane fade">
179

    
180
                        <p>
181
                                <h2>Acerca</h2>
182
                        </p>
183
                </div>
184
        </div>
185

    
186

    
187

    
188

    
189

    
190
</body>
191
</html>