-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patheditorial.html
162 lines (99 loc) · 6.72 KB
/
editorial.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
<!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=" 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.html">Man's role in changing the face of the earth</a></li>
<li class="li-pad"><a class=" start-xs" href="A-2.html">Tuesday's Child </a></li>
<li class="li-pad"><a class=" start-xs" href="B-1.html">Life on the computer network frontier</a></li>
<li class="li-pad"><a class=" start-xs" href="B-2.html">Computer Paranoia</a></li>
<li class="li-pad"><a class=" start-xs" href="B-3.html">Video</a></li>
<li class="li-pad"><a class=" start-xs" href="C-1.html">Seeing the Light </a></li>
<li class="li-pad"><a class=" start-xs" href="C-2.html">Documentary Photography</a></li>
<li class="li-pad"><a class=" start-xs" href="C-3.html">Film </a></li>
<li class="li-pad"><a class=" start-xs" href="C-4.html">Underground Comix</a></li>
<li class="li-pad"><a class="start-xs" href="D-1.html">Jarfalla: City of the Future </a></li>
<li class="li-pad"> <a class="" href="index-PT.html"><button type="button" class="btn-modal" >PT </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">
<p class="">Changes</p>
</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.html"> <img class="icon-a " src="assets/images/seta.png" alt=" " >
</a>
<a class="start-xs col-xs-3 p-height-left"
href="index.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"> Since the beggining of time Man changes every single thing he touches.Why? Maybe because its part of our nature, who knows. </p>
<p class="text col-xs-12 col-sm-10 col-lg-8 text-left sm-indent no-margin-top "> However, it is due to that specific trait of our kind that the world as we know it keeps changing every single day. That aspect is what we explore in every edition of this publication. The way Man’s interventions with himself and nature can produce results as wonderfull as terrifying.</p>
<p class="text col-xs-12 col-sm-10 col-lg-8 text-left text-lightest no-margin"> While starting to read Changes it is possible to conclude that it contains a wide range of articles from several varied topics since War, Art and Technology to the Future, making it interesting for a large variety of readers.</p>
<p class="text col-xs-12 col-sm-10 col-lg-8 text-left sm-indent no-margin text-lightest "> It has a dense but uneven printing stain, due to the multiple flexible grids that have been adapted to the particular needs of each article. As for navigation, it can be classified as hypertext. One arrives at this conclusion due to the way most of the texts in English and Portugues relate to the respective illustrations, making the reader jump between pages in order to have access to the article that they are reading as an whole.</p>
<p class="text col-xs-12 col-sm-10 col-lg-8 text-left sm-indent no-margin text-lightest"> Getting to the most visual aspects, the ratio text/image, is around 30% images (of which 10% are advertisments) for 50% text and 20% white space. Changes format uses a 3: 4 with a 180mm x 240mm size not only to save paper, but also provide better editorial experience.
</p>
<p class="title col-xs-12"> Magazine Info</p>
<div class="text col-xs-12 col-sm-10 col-lg-8 text-left">
<p class="subtitle">Editor</p>
Filipa Cruz
<p class="subtitle">Articles </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">Illustrations</p>
Filipa Cruz
<p class="subtitle">Fonts</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>