Ajax Loader
×
HTML 
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
1
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>
2
<header>
3
<figure>
4
 <img src="http://placehold.it/100/" src="An accurate description of the image!" />
5
  <figcaption><h4>Nome aluno</h4><br>Codigo Aluno - Turma - Semestre </figcaption>
6
 </figure>
7
  <nav class="menu">
8
    <ul>
9
      <li><a href="#">início</a></li>
10
      <li><a href="#">boletim</a></li>
11
      <li><a href="#">mensalidade</a></li>
12
      <li><a href="#">sair</a></li>
13
    </ul>
14
  </nav>
15
<nav class="opc">
16
    <ul>
17
      <li><a href="#">Editar Perfil</a></li>
18
    </ul>
19
  </nav>
20
</header>
21
<section>
22
  <hgroup><h4>Header</h4></hgroup>
23
  <article>Article
24
    <br><br>
25
    <b>Lorem Ipsum</b> é simplesmente uma <mark>simulação</mark> de texto da indústria tipográfica e de impresso.
26
  </article>
27
  <article>
28
  <table>
29
  <thead>
30
    <tr>
31
      <th>Name</th>
32
      <th>Phone</th>
33
      <th>Email</th>
34
    </tr>
35
  </thead>
36
  <tbody>
37
    <tr>
38
      <td>Bob Builder</td>
39
      <td>555-12345</td>
40
      <td>bob@home.com</td>
41
    </tr>
42
    <tr>
43
      <td>Bridget Jones</td>
44
      <td>544-776655</td>
45
      <td>bjones@mysite.com</td>
46
    </tr>
47
    <tr>
48
      <td>Tom Cruise</td>
49
      <td>555-99911</td>
50
      <td>cruise1@crazy.com</td>
51
    </tr>
52
  </tbody>
53
</table>
54
</article>
55
56
  <article>
57
    <form>
58
  <input type="text" placeholder="Nome de usúario"><br><br>
59
  <input type="password" placeholder="Senha"><br><br>
60
  <input type="submit" name="botao" value="Botao">
61
</form>
62
  </article>
63
64
  <figure>
65
 <img src="http://placehold.it/400/" src="An accurate description of the image!" />
66
 <figcaption>The description.</figcaption>
67
 </figure>
68
69
  <article>
70
    <h1>Heading one</h1>
71
 
72
      <h2>Heading two</h2>
73
 
74
      <h3>Heading three</h3>
75
 
76
      <h4>Heading four</h4>
77
 
78
      <h5>Heading five</h5>
79
 
80
      <h6>Heading six</h6>
81
 
82
      <p class="intro">An introductory paragraph is a great way to summarise the content before the reader really digs into the detail of your story. With a .intro class attached, this special paragraph can have a unique text size while inheriting its other attributes from it's parent.</p>
83
 
84
      <p>This is a paragraph, which will probably be the most common element on your site. It's likely that the vertical rhythm of your site will be largely determined by the line-height of your paragraph.&nbsp;</p>
85
 
86
      <p>Content can contain inline styles such as <a href="#">hyperlinks</a>
87
 
88
      . It's likely that the <strong>vertical rhythm</strong>
89
 
90
       of your site will be largely determined by the line-height of your <em>paragraph</em>
91
 
92
      .</p>
93
      <blockquote>This is a blockquote, an element that represents a section that is being quoted from another source.</blockquote>
94
  </article>
95
96
  <footer>
97
    Footer</footer>
98
</section>
 
CSS 
body {
1
body {
2
  background-color: #e5e5e5;
3
  font: normal 13px arial,sans-serif;
4
  color: #444;
5
  height: 100%;
6
  margin: 0;
7
  overflow-y: scroll;
8
  visibility: visible;
9
  font-style: normal;
10
  font-weight: normal;
11
}
12
section {
13
    width: 740px;
14
   /* height: 880px;*/
15
    margin: 20px auto 0;
16
    padding: 0 0 0 0;
17
}
18
section {
19
/*-webkit-border-radius: 3px;
20
border-radius: 3px;*/
21
-webkit-box-sizing: border-box;
22
box-sizing: border-box;
23
background-color: #fff;
24
/*border: 1px solid #d8d8d8;
25
border-bottom-width: 2px;
26
border-top-width: 0;
27
vertical-align: top;*/
28
}
29
section hgroup {
30
  border-bottom: 1px solid #e5e5e5;
31
position: relative;
32
  margin: 0 20px;
33
margin-bottom: 20px;
34
padding: 11px 0;
35
  color: #999;
36
font-size: 12px;
37
}
38
section article {
39
margin-bottom: 20px;
40
padding: 0 20px 0 20px;
41
position: relative;
42
}
43
section footer {
44
  -webkit-border-radius: 0 0 2px 2px;
45
border-radius: 0 0 2px 2px;
46
  border-top: 1px solid #e5e5e5;
47
background-color: #f8f8f8;
48
  padding: 11px 20px 11px 20px;
49
position: relative;
50
}
51
table {
52
  width: 100%;
53
}
54
 
55
td, th {
56
  padding: 10px 20px;
57
  text-align: left;
58
  border: 1px solid #ccc;
59
}
60
section figure {
61
  /*display:inline-block;*/
62
  width: 98%;
63
  margin: 0 auto;
64
}
65
section figure img{
66
  width:100%;
67
  margin:  0;
68
}
69
section figure figcaption{
70
  font-size:12px;
71
  color:#525252;
72
  text-align: left;
73
  margin: 2px 6px 20px 6px;
74
  padding:5px;
75
  font-style:italic;
76
}
77
mark {
78
  position: relative;
79
  background-color: #fff;
80
}
81
mark:after {
82
  border: .25em solid yellow;
83
  border-top: none;
84
  border-radius: 1.5em 1em 2em 1.5em;
85
  bottom: -.3em;
86
  content: '';
87
  left: -.3em;
88
  position: absolute;
89
  right: -.3em;
90
  top: -.1em;
91
}
92
mark:before {
93
  border-top: .25em solid yellow;
94
  border-radius: .5em;
95
  content: '';
96
  height: 1em;
97
  left: 0;
98
  position: absolute;
99
  top: -.3em;
100
  transform: rotate(-10deg);
101
  width: 2em;
102
}
103
 
104
input[type=text], input[type=password] {
105
box-sizing: border-box;
106
background-color: #fff;
107
border: 1px solid #b8b8b8;
108
color: #404040;
109
cursor: text;
110
font-size: 12px;
111
height: auto;
112
margin: 0 0 0 0;
113
padding: 10px;
114
  width: 100%;
115
}
116
input[type=text]:focus, input[type=password]:focus {
117
  border-color: #F18120;
118
  outline-color: #F18120;
119
}
120
input[type=submit] {
121
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1);
122
box-shadow: 0 1px 0 rgba(0,0,0,.1);
123
background-color: #fff;
124
background-image: -webkit-linear-gradient(top,transparent,transparent);
125
background-image: linear-gradient(top,transparent,transparent);
126
border: 1px solid #b8b8b8;
127
color: #404040;
128
129
  -webkit-border-radius: 2px;
130
border-radius: 2px;
131
cursor: default;
132
font-size: 12px;
133
font-weight: bold;
134
text-align: center;
135
white-space: nowrap;
136
margin-right: 16px;
137
height: 34px;
138
line-height: 34px;
139
min-width: 54px;
140
outline: 0;
141
padding: 0 14px;
142
}
143
 
144
header {
145
  width: 740px;
146
  height: 100px;
147
  background-color: #1FA6AE;
148
  text-align: left;
149
  position: relative;
150
  margin: 60px auto 0;
151
  color: whitesmoke;
152
153
}
154
header h4{
155
  color: #fff;
156
}
157
header figure {
158
  width: 100px;
159
  height: 100px;
160
  margin: 0;
161
  position: relative;
162
}
163
header figure img {
164
  width: 100%;
165
  margin:  0;
166
}
167
header figure figcaption {
168
  -webkit-box-sizing: border-box;
169
  box-sizing: border-box;
170
  position: absolute;
171
  top: 0;
172
  left: 100px;
173
  font-size:12px;
174
  text-align: left;
175
  /*font-style:italic;*/
176
  width: 290px;
177
  height: 100px;
178
  /*background: #ddd;*/
179
  padding: 8px 20px;
180
}
181
header .menu
182
{
183
  position: absolute;
184
  top: -55px;
185
  left: -15px;
186
  /*background-color: #ddd;*/
187
  /*font-size: 14px;*/
188
  max-width: 400px;
189
  font-family: 'Open Sans', sans-serif;
190
  font-weight: 300;
191
}
192
header .menu ul {
193
  float: left;
194
  padding: 0 0 0 0;
195
}
196
 
197
header .menu ul li {
198
  text-align: right;
199
  float: left; /* makes list horizontal */
200
  list-style-type: none;
201
  margin: 0 0 0 18px; /* separates 'buttons' */
202
}
203
 
204
header .menu ul li a {
205
  /*padding: 10px 15px; /* makes target area bigger */
206
  color: #444; /* rgba backup */
207
  /*color: rgba(255,255,255, 0.8);*/
208
  text-decoration: none;
209
  font-size: 20px;
210
  line-height: 24px;
211
  /*text-shadow: 0 1px 1px rgba(0,0,0, 0.3);*/
212
  /*
213
  -webkit-transition: all 0.75s ease-in-out;
214
  -moz-transition: all 0.75s ease-in-out;
215
  -o-transition: all 0.75s ease-in-out;
216
  transition: all 0.75s ease-in-out;
217
  */
218
}
219
 
220
header .menu ul li a:hover, header .menu ul li a:focus {
221
  color: #999;
222
  /*background: #fff; /* rgba backup */
223
 /* background: rgba(255,255,255, 0.9);
224
  -webkit-border-radius: 4px; /* safari & chrome */
225
  /*-moz-border-radius: 4px; /* firefox */
226
  /*border-radius: 4px; /* futureproof */
227
}
228
 
229
header .opc
230
{
231
  position: absolute;
232
  top: 28px;
233
  right: 20px;
234
  /*background-color: #ddd;*/
235
  /*font-size: 14px;*/
236
  max-width: 400px;
237
}
238
header .opc ul {
239
  float: left;
240
  padding: 0;
241
}
242
header .opc ul li {
243
  text-align: right;
244
  float: left; /* makes list horizontal */
245
  list-style-type: none;
246
  margin: 0;
247
  margin: 0 0 25px 0px; /* separates 'buttons' */
248
}
249
 
250
header .opc ul li a {
251
  padding: 10px 15px; /* makes target area bigger */
252
  color: #444; /* rgba backup */
253
  color: rgba(255,255,255, 0.8);
254
  background: rgba(0,0,0, 0.2);
255
  text-decoration: none;
256
  font-weight: bold;
257
  /*text-shadow: 0 1px 1px rgba(0,0,0, 0.3);*/
258
  /*
259
  -webkit-transition: all 0.75s ease-in-out;
260
  -moz-transition: all 0.75s ease-in-out;
261
  -o-transition: all 0.75s ease-in-out;
262
  transition: all 0.75s ease-in-out;
263
  */
264
}
265
 
266
header .opc ul li a:hover, header .opc ul li a:focus {
267
  /*color: #fff;*/
268
  background: #fff; /* rgba backup */
269
  background: rgba(0,0,0, 0.5);
270
  /*-webkit-border-radius: 4px; /* safari & chrome */
271
  /*-moz-border-radius: 4px; /* firefox */
272
  /*border-radius: 4px; /* futureproof */
273
}
274
blockquote {
275
  font-style: italic;
276
  font-weight: 400;
277
  font-size: 26px;
278
  line-height: 37px;
279
  margin-bottom: 25px;
280
}
281
 
282
 
283
h1 {
284
  font-size: 68px;
285
  line-height: 75px;
286
  margin-bottom: 25px;
287
}
288
 
289
 
290
h2 {
291
  font-size: 42px;
292
  line-height: 50px;
293
  margin-bottom: 25px;
294
}
295
 
296
 
297
h3 {
298
  font-size: 26px;
299
  line-height: 50px;
300
  margin-bottom: 25px;
301
}
302
 
303
 
304
h4 {
305
  margin-bottom: 0;
306
  font-weight: 400;
307
  font-style: normal;
308
  font-size: 20px;
309
  line-height: 8px;
310
}
311
 
312
 
313
h5 {
314
  margin-bottom: 25px;
315
  font-style: normal;
316
  font-weight: normal;
317
}
318
 
319
 
320
h6 {
321
  font-weight: 400;
322
  font-style: italic;
323
  margin-bottom: 25px;
324
}
325
 
326
p {
327
  margin-bottom: 25px;
328
}
329
 
330
 
331
p.introducao {
332
  font-size: 18px;
333
}
334
 
 

Untitled

CSSDeck G+