-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patheditorial-PT.html
174 lines (108 loc) · 7 KB
/
editorial-PT.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
<head>
<!-- META TAGS -->
<meta charset="UTF-8" />
<title>Changes</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="assets/css/flexboxgrid.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/_font-awesome.min.css.scss" type="text/css">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
</head>
<body class="color-2">
<!------------#NAVBAR_SMALL------------>
<div class=" row center-xs nav-small text-left title z-top no-margin no-padding">
<input type="checkbox" id="nav-trigger" class="nav-controller" />
<header class="header-bar">
<label class="" for="nav-trigger" tabindex="-1">
<div class="button--icon-container">
<span class="icon icon--hamburger"></span>
</div>
</label>
</header>
<aside class="nav">
<label class="overlay" for="nav-trigger"></label>
<div class="nav__body">
<ul class=" nav__list col-xs-12 min-margin-top">
<label class="nav__item" for="nav-trigger">
<li class="li-pad"><a class="start-xs" href="editorial.html" class="menu-selected">Editorial</a></li>
<li class="li-pad"><a class="start-xs " href="A-1-PT.html"> O papel do Homem nas mudanças do planeta</a></li>
<li class="li-pad"><a class=" start-xs " href="A-2-PT.html"> Crianças da Guerra </a></li>
<li class="li-pad"><a class=" start-xs " href="B-1-PT.html"> A vida na fronteira da rede computacional </a></li>
<li class="li-pad"><a class=" start-xs " href="B-2-PT.html"> A paranoia dos computadores</a></li>
<li class="li-pad"><a class=" start-xs " href="B-3-PT.html">Video</a></li>
<li class="li-pad"><a class=" start-xs " href="C-1.html"> Ver a luz </a></li>
<li class="li-pad"><a class=" start-xs " href="C-2-PT.html">Documentar fotografando</a></li>
<li class="li-pad"><a class=" start-xs " href="C-3-PT.html">Filme </a></li>
<li class="li-pad"><a class=" start-xs " href="C-4-PT.html">Underground Comix</a></li>
<li class="li-pad"><a class=" start-xs" href="D-1-PT.html">Jarfalla: Cidade do Fututro </a></li>
<li class="li-pad">
<a class="" href="index.html">
<button type="button" class="btn-modal">EN </button>
</a>
</li>
</label>
</ul>
</div>
</aside>
</div>
<section class="section-resized no-padding-top">
<!------------#HEADER------------>
<div class="row start-xs">
<div class="col-xs-6 semi-title z-down no-padding no-margin"><a href="index-PT.html">
<p class="">Changes</p>
</a>
</div>
<div class="col-xs-6 smalltext z-down end-xs min-margin-top">
<p class="">p.2-3</p>
</div>
</div>
<!------------#NAV_ARROW------------>
<div class="row center-xs ">
<a class="end-xs col-xs-3 p-height" href="A-1-pt.html"> <img class="icon-a " src="assets/images/seta.png" alt=" ">
</a>
<a class="start-xs col-xs-3 p-height-left" href="index-pt.html">
<img class="icon-a " src="assets/images/seta-esq.png" alt=" ">
</a>
</div>
<!------------#ARTICLE------------>
<div class="row center-xs ">
<p class="title col-xs-12"> Editorial</p>
<p class="text col-xs-12 col-sm-10 col-lg-8 text-left no-margin"> Desde o início dos tempos o Homem mudou todos os locais por onde passou. Porquê? Talvez faça parte da nossa natureza, quem sabe, mas devido a esse trato do ser humano, o mundo continua a girar e a mudar todos os dias.
</p>
<p class="text col-xs-12 col-sm-10 col-lg-8 text-left sm-indent no-margin-top ">
É esse aspeto que exploramos em todas as edições desta publicação. A maneira como as intervenções do Homem consigo mesmo e a natureza pode produzir quer repercursões maravilhosas como terríveis.</p>
<p class="text col-xs-12 col-sm-10 col-lg-8 text-left text-lightest no-margin"> Ao iniciar a visualização de Changes é possivel concluir que contém artigos dos mais variados temas desde Guerra, Arte e Tecnologia, tornando-se interessante para um grande espectro de leitores..</p>
<p class="text col-xs-12 col-sm-10 col-lg-8 text-left sm-indent no-margin text-lightest "> Possui uma mancha tipográfica densa mas irregular, proveniente das múltiplas grelhas flexíveis que foram adaptadas às necessidades de cada artigo em particular. Relativamente à navegação, pode ser classificada como hipertextual. Esta conclusão deve-se ao modo como grande parte dos textos em portguês e inglês se relacionam com as respetivas ilustrações, fazendo o leitor saltitar entre páginas para poder ter acesso à plenitude de conteúdos do artigo que se encontra a ler.</p>
<p class="text col-xs-12 col-sm-10 col-lg-8 text-left sm-indent no-margin text-lightest">
Chegando aos aspetos mais visuais, o rácio texto/imagem, será aproximadamente de 30% imagens( dos quais 10% serão anúncios ) para 50% de texto e 20% de espaço branco. Changes utiliza um formato 3:4 com um tamanho de 180mm x 240 mm, de modo a poupar papel e proporcionar uma melhor experiência editorial.
</p>
<p class="title col-xs-12">Ficha Técnica</p>
<div class="text col-xs-12 col-sm-10 col-lg-8 text-left">
<p class="subtitle">Editora</p>
Filipa Cruz
<p class="subtitle">Artigos </p>
From The Next Whole Earth Catalog ( Richrad Raymond, Louise Mensch, Art Kleiner, Dirk Hansosn, Fabrice Florin and Videwoest, SB, Tohm Schneider, Jay Kinney, Times/Post News Service)
<p class="subtitle">Illustrações</p>
Filipa Cruz
<p class="subtitle">Fontes</p>
<p class="text-bold no-margin">Kreon</p>
Julia Petretta
<br> https://fonts.google.com/specimen/Kreon
<br>
<br>
<p class="text-bold no-margin">Abril Fatface</p>
TypeTogether
<br> https://fonts.google.com/specimen/Abril+Fatface
<br>
<br>
<p class="text-bold no-margin">Inconsolata</p>
Raplh Levin
<br> https://fonts.google.com/specimen/Inconsolata https://fonts.google.com/specimen/Abril+Fatface
</div>
</div>
</div>
</div>
</section>
</body>
</html>