CSS Layout: O ontem, o hoje e o depois

1.

css layout O ONTEM, O HOJE E O DEPOIS @LOOPINFINITO

2.

@CAIO_GONDIM @ALMIRFILHO

3.

GLOBO.COM

4.

LOOPINFINITO.COM.BR

5.

tabelas O ONTEM

6.

• 1990 html 1.0 • estrutura de documento • layout
com <pre>

7.

bells and whistles “Storage of ASCII text, and display on
24x80 screens, is in the short term sufficient, and essential. Addition of graphics would be an optional extra with very much less penetration for the moment.” Tim Berners-Lee

8.

primeiro site ever

9.

• 1993 html 2.0 • <img> • padrao IETF

10.

• 1995 html 3.0 • <table> • nunca foi aprovado
• text flow ao redor de <img> • elementos matematicos

11.

• 1997 html 3.2 • <table border=’0’> •nasce o web
designer

12.

html 3.2 spec “HTML 3.2 includes a widely deployed subset
of the specification given in RFC 1942 and can be used to markup tabular material or for layout purposes.” W3C HTML 3.2 specification – http://www.w3.org/TR/REC-html32

13.

yahoo!

14.

apple.com

15.

bol.com.br

16.

uol.com.br

17.

cade.com.br

18.

amazon.com

19.

globo.com

20.

globo.com

21.

codigo  <A NAME="topofpage"> <TABLE WIDTH=598 BORDER=0 CELLPADDING=0 CELLSPACING=0>  <TR VALIGN="TOP">  <TD WIDTH=128 ROWSPAN=3 VALIGN="TOP"> <IMG SRC="/web/19961022105458im_/http://www4.apple.com elements/spacer2.gif" WIDTH=128 HEIGHT=1 ALT=""><BR>  <A HREF="/web/19961022105458/http://www5.apple.com/cgi imagemap/mapserve.acgi$home/newsidebar.map"> <IMG SRC="/web/19961022105458im_/http://www4.apple.com elements/sidebar.gif" WIDTH=125 HEIGHT=262 BORDER=0 ALT="Navigation Graphic - See Below" ISMAP USEMAP="#newsidebar"></A>

22.

• conteudo e layout misturados problemas • render nao incremental
• baixa acessibilidade

23.

box model O HOJE

24.

• 1996 (com o HTML 3.2) css 1 • separa
estilo da marcacao • reuso de estilos • independente do conteudo (?)

25.

css 1 • block-level elements • margin, padding e border
• width e height • display e float

26.

• 1998 - 2011! css 2.1 • position • top,
bottom, left e right • min-height e max-height • min-width e max-width

27.

• 1999 - HOJE css 3 • CSS basic user
interface module level 3 • box-sizing: border-box

28.

margin-top margin-bottom margin-left margin-right padding-top padding-bottom padding-left padding-right width x
height border-top-width border-bottom-width border-left-width border-right-width top bottom left right

29.

margin-top margin-bottom margin-left margin-right padding-top padding-bottom padding-left padding-right border-top-width border-bottom-width
border-left-width border-right-width width x height top bottom left right bo x- siz i ng: bor der-box ;

30.

2002 TABLELESS

31.

tabelas para DADOS TABULARES box model para LAYOUTS

32.

TABLELESS.COM

33.

• alinhar verticalmente problemas Conteudo } ? .box { vertical-align:
middle;

34.

• alinhar verticalmente problemas Conteudo .box { vertical-align: middle; }
display: table-cell;

35.

• igualar altura de regioes problemas Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <aside> .box { height: 200px; } aside, .box { height: 100%; float: left; }

36.

amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <aside> .box { height: 200px; } aside, .right { height: 100%; float: left; } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsum tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

37.

amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <aside> .box { height: 200px; } aside, .right { height: 100%; float: left; } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsum tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

38.

amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non <aside> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ofelquys lotomania ipsum tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .box { height: 200px; display: table-row; } aside, .right { height: 100%; float: left; display: table-cell; }

39.

table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group tabelas...

40.

table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group <table>
tabelas... <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table> <table>

41.

verdade seja dita 2013 2013 O GOOGLE JA FEZ ATE
UM MEDIDOR DE KI

42.

verdade seja dita 2013 2013 E AINDA NAO SUPERAMOS AS
TABELAS

43.

grid O DEPOIS

44.

• 2012 (draft W3C) css grid layout • divide o
espaco em regioes

45.

assim como tabelas... LINHAS E COLUNAS

46.

diferente de tabelas... ESTRUTURALMENTE INDEPENDENTE

47.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non LOOP Lorem ipsum Dolor sit amet Consectetur adipisicing Sed do eiusmod bla bla footer

48.

eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non LOOP Lorem ipsum Dolor sit amet Consectetur adipisicing Sed do eiusmod bla bla footer flexivel fixo

49.

eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non LOOP Lorem ipsum Dolor sit amet Consectetur adipisicing Sed do eiusmod bla bla footer flexivel fixo

50.

None

51.

None

52.

sem position ? esqueca! resize? esqueca!

53.

mão na massa... DEFININDO UM GRID

54.

html <div class="container"></div>

55.

css display: grid;

56.

css grid-definition-columns: auto auto; 1 2 display: grid;

57.

css grid-definition-rows: auto auto auto; 1 2 3 4 5
6 grid-definition-columns: auto auto; display: grid;

58.

css 1 2 3 4 5 6 grid-definition-columns: auto auto;
AREA DA TELA

59.

css 1 2 3 4 5 6 grid-definition-columns: auto 1fr;

60.

css 1 2 3 4 5 6 grid-definition-columns: 1fr 1fr;

61.

css 1 2 3 4 5 6 grid-definition-columns: 2fr 1fr;

62.

css content grid-definition-columns: auto minmax(min-content, 1fr); 1 2 3 4
5 6

63.

css content 1 3 4 5 6 RESIZE grid-definition-columns: auto
minmax(min-content, 1fr);

64.

css content 1 3 4 5 6 RESIZE MAIS grid-definition-columns:
auto minmax(min-content, 1fr);

65.

minmax() minmax(800px, 1fr); minmax(2fr, 3fr); minmax(50%, 100%); minmax(10em, 80%); minmax(min-content,
1fr); minmax(70%, max-content); minmax(calc(70% + 80px + 9em), 1fr); minmax(min-content, max-content) = auto

66.

mão na massa... ASSOCIANDO CONTEUDO

67.

<div class="container"> html 1 2 3 4 5 6 </div>

68.

html <div class="reg5">c5</div> <div class="reg1">c1</div> <div class="reg2">c2</div> <div class="reg3">c3</div> <div
class="reg4">c4</div> • sem blocos para linha/coluna <div class="reg6">c6</div> 1 2 3 4 5 6 <div class="container"> </div>

69.

html • a ordem nao importa 1 2 3 4
5 6 <div class="container"> </div> <div class="reg5">c5</div> <div class="reg1">c1</div> <div class="reg2">c2</div> <div class="reg3">c3</div> <div class="reg4">c4</div> <div class="reg6">c6</div>

70.

css 2 3 4 5 6 .reg1 { grid-column: 1;
grid-row: 1; } c1

71.

css 2 3 5 6 .reg1 { grid-column: 1; grid-row:
1; } c1 .reg4 { grid-column: 2; grid-row: 2; } c4

72.

css 2 5 6 .reg1 { grid-column: 1; grid-row: 1;
} c1 .reg4 { grid-column: 2; grid-row: 2; } c4 .reg3 { grid-column: 1; grid-row: 2; } c3

73.

css 2 5 6 .reg1 { grid-column: 1; grid-row: 1;
} c1 .reg4 { grid-column: 2; grid-row: 2; } c4 .reg3, .reg6 { grid-column: 1; grid-row: 2; } c3 c6

74.

mão na massa... TEMPLATES

75.

grid-template header aside content footer .container { display: grid; grid-template:
"header header" "aside content" "footer footer"; }

76.

grid-template .container { display: grid; grid-template: "header header" "aside content"
"footer footer"; } .reg1 { grid-area: header } .reg2 { grid-area: aside } .reg3 { grid-area: content } .reg4 { grid-area: content } .reg5 { grid-area: content } .reg6 { grid-area: footer }

77.

templates responsivos header menu content aside footer

78.

templates responsivos header menu content footer aside

79.

templates responsivos @media (orientation: landscape){ .container { grid-template: "header header
header" "menu content aside" "footer footer footer"; } } @media (orientation: portrait){ .container { grid-template: "header header" "menu menu" "content content" "aside footer"; } }

80.

flexbox O DEPOIS

81.

• otimizado para UI layout • comportamento previsivel • agnostico
de direcao flexbox

82.

web site header content ads

83.

ads content2 footer

84.

web app footer header side main

85.

os x app store

86.

versões • 2009: display:box; box-{*} • 2011: display:box; flex() •
2012: display:flex; flex-{*}

87.

vocabulário flex-item flex-item main size cross size main axis cross
axis flex-container

88.

grow and shrink .a .a .b .container { display: flex;
flex-direction: row; } .container 600px

89.

flex-grow .a .a .b .a { flex-basis: 113px; flex-grow: 0;
flex-shrink: 1; } .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; } .container 600px

90.

.a .a .b .a { flex-basis: 113px; flex-grow: 0; flex-shrink:
1; } .container 800px .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; } flex-grow

91.

flex-shrink .a .a .b .container 600px .a { flex-basis: 113px;
flex-grow: 0; flex-shrink: 1; } .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; }

92.

.a .b .container 500px .a .a { flex-basis: 113px; flex-grow:
0; flex-shrink: 1; } .b { flex-basis: 333px; flex-grow: 1; flex-shrink: 0; } flex-shrink

93.

cálculo do espaço .a .b .container 800px .c .a {
flex: 1; } .b { flex: 2; } .c { flex: 1; } css .container { display: flex; }

94.


95.


96.


97.

cálculo do espaço .a .b .container 800px .c 1 +
2 + 1 = 4 800 / 4 = 200 .a = 1 * 200 .b = 2 * 200 .c = 1 * 200 unidade proporção 200px 400px 200px

98.

1 flex-direction: row; 2 3

99.

1 flex-direction: column; 2 3

100.

justify-content: flex-start; 1 2 3

101.

justify-content: flex-end; 1 2 3

102.

justify-content: center; 1 2 3

103.

justify-content: space-between; 1 2 3

104.

justify-content: space-around; 1 2 3

105.

align-items: flex-start; 1 2 3

106.

align-items: flex-end; 1 2 3

107.

align-items: center; 1 2 3

108.

align-items: stretch; 1 2 3

109.

order: N; 1 2 3

110.

order: N; 3 2 1

111.

order: N; 3 2 1

112.

mix com media queries header main footer aside1 aside2

113.

header main footer aside2 aside1 mix com media queries

114.

não é só isso • respeita media-queries • respeita max-width,
min-width, ... • inline ou em block

115.

centralizar elementos .a .container { display: flex; } .container .a
{ margin: auto; }

116.

centralizar elementos .a .container .container { display: flex; } .a
{ margin: auto; }

117.

web app flexible

118.

web app flexible

119.

regions O DEPOIS

120.

html • separacao de conteudo e apresentacao • HTML como
template • layouts de impressos

121.

Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit
odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed layout em colunas Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.

122.

eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod kracta caio gondim lorem tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. layouts complexos

123.


124.

conceitos importantes •named flows •regions

125.

html <div class=”content”> ... </div> <div class=”region region-1”></div> <img src=””
/> <div class=”region region-2”></div> <div class=”region region-3”></div> <div class=”region region-4”></div>

126.

html <div class=”content”> ... </div> <div class=”region region-1”></div> <img src=””
/> <div class=”region region-2”></div> <div class=”region region-3”></div> <div class=”region region-4”></div>

127.

css .content { flow-into: lorem-ipsum; } .region { flow-from: lorem-ipsum;
}

128.

css .content { flow-into: lorem-ipsum; } .region { flow-from: lorem-ipsum;
}

129.

@region @region .region-3 { p { color: #BADA55; } }
@region .region-4 { p { color: red; } }

130.


131.

regions

132.

regions

133.

layouts complexos

134.

exclusions O DEPOIS

135.

a tirania do retângulo ELEMENTOS DE BLOCO SAO QUADRADOS

136.

a tirania do retângulo border-radius?

137.

a tirania do retângulo border-radius? • molda apenas estilo •
nao molda conteudo

138.

shapes! shape-inside shape-outside

139.

shape-inside .circulo { // shape-inside: circle(cx, cy, radius); shape-inside: circle(50%,
50%, 50%); } Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac amet euism Sed

140.

shape-inside A Sed molestie augue sit amet leo consequat as
due to a posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac am .estrela { shape-inside: polygon(0px 150px, ...); }

141.

shapes com regions A Sed molestie augue sit amet leo
consequat as due to a posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, soc at consectetur adipisg elit. Vivamus luctus urna sed urna ultricies ser am Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac amet euism Sed

142.

shape-outside p { // shape-outside: circle(cx, cy, radius); shape-outside: circle(-50px,
50%, 50%); } Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. nulla fringilla, orci ac amet euism sed orci ac amet euism

143.

shape-outside .circulo { // shape-outside: circle(cx, cy, radius); shape-outside: circle(-100px,
50%, 50%); } Sed ast molestie augue sitep amet leo consequat siuop posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. nulla fringilla, orci ac amet euism sed orci ac amet euism -100px 50%

144.

layouts complexos

145.

layouts complexos

146.

obrigado! @LOOPINFINITO LOOPINFINITO.COM.BR

CSS Layout: O ontem, o hoje e o depois

CSS Layout: O ontem, o hoje e o depois

Want more?

Transcript