-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork-6.html
123 lines (120 loc) · 6.64 KB
/
work-6.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Visual design that celebrates the pleasure of seeing, looking, understanding" />
<meta name="author" content="José Neira, Carmina Correa, Felipe Cortez" />
<link rel="icon" type="image/png" href="favicon.png" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Spectral:ital@0;1&display=swap" rel="stylesheet" />
<link href="style.css?v=1.1.2" rel="stylesheet" />
<title>José Neira</title>
<link rel="canonical" href="https://joseneira.cl/" />
<meta name="theme-color" content="#fafafa" />
<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="José Neira" />
<meta name="twitter:description" content="Visual design that celebrates the pleasure of seeing, looking, understanding" />
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="José Neira" />
<meta name="og:description" content="Visual design that celebrates the pleasure of seeing, looking, understanding" />
<meta name="og:url" content="https://joseneira.cl" />
<meta name="og:type" content="website" />
</head>
<body>
<div class="container d-flex w-100 flex-column">
<header class="pt-4 pb-5">
<h1 class="mt-3 float-md-start mb-0 align-items-center">
<a href="index.html">José Neira<span>Visual Design</span></a>
</h1>
<nav class="mt-2 nav float-md-end">
<a class="nav-link pasive" href="index.html">Selected work</a>
<a class="nav-link pasive" href="about.html">About</a>
<a class="nav-link pasive" href="contact.html">Contact</a>
</nav>
</header>
</div>
<div class="container">
<main class="pb-5">
<div class="row g-4">
<div class="col-md-8 me-auto">
<img src="images/work-6-1.jpg" class="shadow img-fluid" />
</div>
<div class="col-md-6">
<h2 class="me-md-5 pe-md-5">Concert posters 2018-19, Artistic and Cultural Extension Center, University of Chile</h2>
</div>
<div class="col-md-6">
<p>
There are four glass cases at the entrance of the theater of University of Chile which hold the 77 x 110 cm posters. Most of the posters are solved by a simple typographic composition that tries to fit the
composer’s names as big as possible in order to catch the eyes of the public.
</p>
<p>
Except for the poster for Mozart’s Requiem, to come up with conceptual solutions for this content is not easy. Take the one bellow, for instance, music by contemporary Chilean Composer Garrido-Lecca, Beethoven
and Shostakovich. However, the beauty of black type can evoke and ‘resonate’ with the music. We use Alegreya sans and serif, an extraordinary font designed by Argentinean type designer Juan Pablo del Peral.
</p>
</div>
<div class="col-md-8 me-5">
<img src="images/work-6-2.jpg" class="shadow img-fluid" />
</div>
<div class="col-md-4">
<img src="images/work-6-3.jpg" class="shadow img-fluid" />
</div>
<div class="col-md-4">
<img src="images/work-6-4.jpg" class="shadow img-fluid" />
</div>
<div class="col-md-4">
<img src="images/work-6-5.jpg" class="shadow img-fluid" />
</div>
<div class="col-md-4">
<img src="images/work-6-6.jpg" class="shadow img-fluid" />
</div>
<div class="col-md-4">
<img src="images/work-6-7.jpg" class="shadow img-fluid" />
</div>
<div class="col-md-4">
<img src="images/work-6-8.jpg" class="shadow img-fluid" />
</div>
<div class="col-md-4">
<img src="images/work-6-9.jpg" class="shadow img-fluid" />
</div>
<div class="col-md-4">
<img src="images/work-6-10.jpg" class="shadow img-fluid" />
</div>
<div class="col-md-4">
<img src="images/work-6-11.jpg" class="shadow img-fluid" />
</div>
</div>
</main>
</div>
<footer class="fixed-bottom">
<div class="container">
<div class="row d-flex align-items-end">
<div class="col text-start">
</div>
<div class="col text-end pb-3">
<a href="#" id="subir" class="btn btn-outline-dark initialism pt-0 pb-1 px-2 d-none">↑</a>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script>
$(function () {
var ventana = $(window).height();
var documento = $(document).height();
var altura = documento - ventana;
console.log(altura);
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (altura <= (scroll + 100)) {
$("a#subir").removeClass("d-none");
} else {
$("a#subir").addClass("d-none");
}
});
});
</script>
</body>
</html>