-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbanner.html
56 lines (52 loc) · 1.22 KB
/
banner.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
<!DOCTYPE html>
<html>
<head>
<title>Bannerzin</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
p {
margin: 0;
}
.banner {
position: relative;
overflow: hidden;
width: 320px;
padding: 15px;
background-color: yellow;
}
.banner .banner-corner {
position: absolute;
width: 320px;
padding: 5px;
top: 0;
right: -125px;
transform: rotate(45deg);
background-color: blue;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="banner">
<p>
Qualquer coisa aqui, imagem, texto, sei lá. Lorem ipsum dolor sit amet
noboco do toco loco. Lorem ipsum dolor sit amet noboco do toco loco.
Lorem ipsum dolor sit amet noboco do toco loco. Lorem ipsum dolor sit
amet noboco do toco loco. Lorem ipsum dolor sit amet noboco do toco
loco.
</p>
<div class="banner-corner">
De<br />R$ 100<br />por <strong>R$ 200</strong>
</div>
</div>
</body>
</html>