-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
88 lines (81 loc) · 3.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Wesley Victor">
<title>Trabalhando com imagens</title>
<style>
body {
font-size: 22px;
font-family: sans-serif;
width: 700px;
margin: auto;
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: right bottom;
}
p {
line-height: 1.5;
text-align: justify;
}
.img-logo {
width: 400px;
}
.img-html {
float: left;
}
.img-css {
float: right;
}
</style>
</head>
<body>
<h1>Trabalhando com imagens</h1>
<a href="index.html"> index.html </a>|<a href="bg-atalho.html">
bg_atalho.html </a>
<h2>Imagens vetoriais vs bitmap</h2>
<img src="img/logo_ser-frontend-ico.svg" class="img-logo" alt="logotipo serfrontend" />
<br />
<img src="img/logo_ser-frontend-ico.png" class="img-logo" alt="logotipo serfrontend" />
<h2>Imagens transparentes</h2>
<img src="img/logo_ser-frontend-ico-transparente.gif" alt="" />
<br />
<img src="img/logo_ser-frontend-ico-transparente.png" alt="" />
<h2>Gif animado</h2>
<img src="img/walk.gif" alt="animação mulher andando" />
<a href="https://www.pinterest.com/pin/209769295122019504/">Fonte:
https://www.pinterest.com/pin/209769295122019504/</a>
<h2>Float</h2>
<img src="img/html5.png" alt="Logotipo HTML5" class="img-html" />
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus omnis
cum, id praesentium iure rem reprehenderit ullam est quasi fugit corrupti
deleniti eaque ea dolores a amet eveniet, vel neque.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita
corrupti autem dolor quidem velit a, aut dignissimos, aliquam sit sed
nulla animi, assumenda maiores voluptates consectetur quibusdam?
Necessitatibus maiores iste, fuga dolores assumenda facilis quasi nobis
quisquam minus suscipit aliquam impedit quas reprehenderit saepe at qui,
eligendi perspiciatis et laboriosam!
</p>
<img src="img/css3.png" alt="Logotipo CSS3" class="img-css" />
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus omnis
cum, id praesentium iure rem reprehenderit ullam est quasi fugit corrupti
deleniti eaque ea dolores a amet eveniet, vel neque.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita
corrupti autem dolor quidem velit a, aut dignissimos, aliquam sit sed
nulla animi, assumenda maiores voluptates consectetur quibusdam?
Necessitatibus maiores iste, fuga dolores assumenda facilis quasi nobis
quisquam minus suscipit aliquam impedit quas reprehenderit saepe at qui,
eligendi perspiciatis et laboriosam!
</p>
</body>
</html>