Ajax Loader
×
HTML 
<header>
1
<header>
2
<figure>
3
 <img src="http://placehold.it/100/" src="An accurate description of the image!" />
4
  <figcaption><h4>Nome aluno</h4><br>Codigo Aluno - Turma - Semestre </figcaption>
5
 </figure>
6
7
<nav>
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
</header>
 
CSS 
BODY {
1
BODY {
2
  background-color: #e7e7e7;
3
  padding: 50px;
4
  font: 13px Arial;
5
}
6
header {
7
  width: 740px;
8
  height: 100px;
9
  background-color: #FFF;
10
  text-align: left;
11
  position: relative;
12
  margin: 0 auto;
13
}
14
header figure {
15
  width: 100px;
16
  height: 100px;
17
  margin: 0;
18
  position: relative;
19
}
20
header figure img {
21
  width: 100%;
22
  margin:  0;
23
}
24
header figure figcaption {
25
  -webkit-box-sizing: border-box;
26
  box-sizing: border-box;
27
  position: absolute;
28
  top: 0;
29
  left: 100px;
30
  font-size:12px;
31
  color: #525252;
32
  text-align: left;
33
  font-style:italic;
34
  width: 290px;
35
  height: 100px;
36
  background: #ddd;
37
  padding: 8px 15px;
38
}
39
header nav
40
{
41
  position: absolute;
42
  top: 24px;
43
  right: 10px;
44
  background-color: #ddd;
45
  font-size: 14px;
46
  max-width: 400px;
47
}
48
header nav ul {
49
  float: left;
50
  padding: 0;
51
}
52
header nav ul li {
53
  text-align: right;
54
  float: left; /* makes list horizontal */
55
  list-style-type: none;
56
  margin: 0;
57
  margin: 0 0 25px 0px; /* separates 'buttons' */
58
}
59
 
60
header nav ul li a {
61
  padding: 10px 15px; /* makes target area bigger */
62
  color: #333; /* rgba backup */
63
  /*color: rgba(255,255,255, 0.8);*/
64
  text-decoration: none;
65
  font-weight: bold;
66
  /*text-shadow: 0 1px 1px rgba(0,0,0, 0.3);*/
67
  /*
68
  -webkit-transition: all 0.75s ease-in-out;
69
  -moz-transition: all 0.75s ease-in-out;
70
  -o-transition: all 0.75s ease-in-out;
71
  transition: all 0.75s ease-in-out;
72
  */
73
}
74
 
75
header nav ul li a:hover, header nav ul li a:focus {
76
  /*color: #fff;*/
77
  background: #fff; /* rgba backup */
78
  background: rgba(255,255,255, 0.9);
79
  -webkit-border-radius: 4px; /* safari & chrome */
80
  -moz-border-radius: 4px; /* firefox */
81
  border-radius: 4px; /* futureproof */
82
}
83
blockquote {
84
  font-style: italic;
85
  font-weight: 400;
86
  font-size: 26px;
87
  line-height: 37px;
88
  margin-bottom: 25px;
89
}
90
 
91
 
92
h1 {
93
  font-size: 68px;
94
  line-height: 75px;
95
  margin-bottom: 25px;
96
}
97
 
98
 
99
h2 {
100
  font-size: 42px;
101
  line-height: 50px;
102
  margin-bottom: 25px;
103
}
104
 
105
 
106
h3 {
107
  font-size: 26px;
108
  line-height: 50px;
109
  margin-bottom: 25px;
110
}
111
 
112
 
113
h4 {
114
  margin-bottom: 0;
115
  font-weight: 400;
116
  font-style: normal;
117
  font-size: 20px;
118
  line-height: 8px;
119
}
120
 
121
 
122
h5 {
123
  margin-bottom: 25px;
124
  font-style: normal;
125
  font-weight: normal;
126
}
127
 
128
 
129
h6 {
130
  font-weight: 400;
131
  font-style: italic;
132
  margin-bottom: 25px;
133
}
134
 
135
 
136
p {
137
  margin-bottom: 25px;
138
}
139
 
140
 
141
p.introducao {
142
  font-size: 18px;
143
}
 

Untitled

CSSDeck G+