-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathamericas-quarterly.html
144 lines (141 loc) · 12.1 KB
/
americas-quarterly.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
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Americas Quarterly</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bai+Jamjuree:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/aos.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/Lightbox-Gallery.css">
<link rel="stylesheet" href="assets/css/Simple-Slider-swiper.min.css">
<link rel="stylesheet" href="assets/css/Simple-Slider.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/typewriter.css">
<link rel="stylesheet" href="assets/css/untitled.css">
</head>
<body>
<nav class="navbar navbar-light text-sm-center text-md-center">
<div class="container-fluid"><a class="navbar-brand" href="index.html"><img id="logo" src="assets/img/logo2021.svg"></a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-2"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon text-sm-center"></span></button>
<div class="collapse navbar-collapse" id="navcol-2">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center" style="margin-right: 10px;"></li>
<li class="nav-item text-center" style="margin-right: 10px;"><a class="nav-link" href="about.html">ABOUT</a></li>
<li class="nav-item text-center" style="margin-right: 10px;"><a class="nav-link" href="resume.html">RESUME</a></li>
<li class="nav-item text-center" style="margin-right: 10px;"><a class="nav-link text-center" href="aq-foreign-policy-snapshot.html">FOREIGN_POLICY_SNAPSHOT</a></li>
<li class="nav-item text-center" style="margin-right: 10px;"><a class="nav-link text-center" href="americas-quarterly.html">AMERICAS_QUARTERLY</a></li>
<li class="nav-item text-center" style="margin-right: 10px;"><a class="nav-link text-center" href="atlantic-council-brochure.html">ATLANTIC_COUNCIL_BROCHURE</a></li>
<li class="nav-item text-center" style="margin-right: 10px;"><a class="nav-link text-center" href="atlantic-council.html">ATLANTIC_COUNCIL</a></li>
<li class="nav-item text-center" style="margin-right: 10px;"><a class="nav-link text-center" href="teendatingabuse.html">TEEN_DATING_ABUSE</a></li>
<li class="nav-item text-center" style="margin-right: 10px;"><a class="nav-link text-center" href="city-magazine.html">CITY_MAGAZINE</a></li>
<li class="nav-item" style="margin-right: 10px;"><a class="nav-link text-center" href="creative-coding.html">CREATIVE_CODING</a></li>
<li class="nav-item" style="margin-right: 10px;"><a class="nav-link text-center" href="monster-calendar.html">MONSTER_CALENDAR</a></li>
<li class="nav-item" style="margin-right: 10px;">
<div class="row no-gutters justify-content-center">
<div class="col-2 col-lg-1 text-right"><a class="text-center" href="https://www.instagram.com/anaisgonzalezdesign/" target="_blank"><i class="fa fa-instagram scaleicon"></i></a></div>
<div class="col-2 col-lg-1 text-center"><a class="text-center" href="mailto:anaisgonzalezdesign@gmail.com" target="_blank"><i class="fa fa-envelope-o scaleicon"></i></a></div>
<div class="col-2 col-lg-1 text-left"><a class="text-center" href="https://www.linkedin.com/in/anais-gonzalez-254483212/" target="_blank"><i class="fa fa-linkedin scaleicon"></i></a></div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="row justify-content-center" style="margin-left:0px;margin-right:0px;">
<div class="col-sm-12 col-md-10 col-lg-6 col-xl-7 text-center header-col">
<h1 class="text-center" data-aos="slide-up" data-aos-offset="0" data-aos-delay="150" id="pagetitle" style="margin-bottom:0px;">AMERICAS QUARTERLY</h1>
<p class="brief-text"> A collection of my favorite layouts I created during my time as an Assistant Art Director at <em>AQ</em>, a Latin American Policy and Culture journal. </p>
</div>
</div>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-sm-auto col-md-9 col-lg-9 col-xl-9 text-center nopad"><img src="assets/img/AQ-img/AQ-lay/AQ0322-NEARSHORE-mockup.jpg" width="298" height="397" style="border:1px solid lightslategray;">
<p class="caption" style="text-align: center;">A layout on supply chain expansion in Latin America.</p>
</div>
</div>
</div>
<div class="container-fluid" style="margin-top: 30px;">
<div class="row justify-content-center">
<div class="col-sm-auto col-md-8 col-lg-8 col-xl-8 text-center topspace"><img src="assets/img/AQ-img/AQ-lay/AQ0124-GUYANA-GUIDE-L1.jpg" width="298" height="397" style="border:1px solid lightslategray;"></div>
<div class="col-sm-auto col-md-8 col-lg-8 col-xl-8 text-center" style="margin-top: 30px;"><img src="assets/img/AQ-img/AQ-lay/AQ0124-GUYANA-GUIDE-L2b.jpg" width="298" height="397">
<p class="caption">For the Guide to Guyana feature, I designed a timeline, graphs, and an infographic spread.</p>
</div>
</div>
</div>
<div class="container-fluid" style="margin-top: 30px;">
<div class="row justify-content-center" style="margin-top:30px;">
<div class="col-sm-auto col-md-8 col-lg-6 col-xl-6 text-center" style="margin-bottom: 30px;"><img src="assets/img/AQ-img/AQ-lay/aq0124-candidates-layout-1.jpg" width="100%" style="border:1px solid lightslategray;"></div>
<div class="col-sm-auto col-md-8 col-lg-3 col-xl-3 text-center">
<div class="row justify-content-center">
<div class="col-sm-auto col-md-6 col-lg-12 col-xl-12 text-center" style="margin-bottom: 20px;"><img src="assets/img/AQ-img/AQ-lay/aq0124-candidates-layout-1b.jpg" width="100%" style="border:1px solid lightslategray;"></div>
<div class="col-sm-auto col-md-6 col-lg-12 col-xl-12 text-center"><img src="assets/img/AQ-img/AQ-lay/aq0124-candidates-layout-1c.jpg" width="100%" style="border: 1px solid lightslategray;"></div>
</div>
</div>
<div class="col-sm-auto col-md-7 col-lg-7 col-xl-7 text-center">
<p class="caption">This informative feature highlights candidates who are participating in presidential elections across Latin America this year. Countries and candidates are differentiated from each other through the use of colored bars at the top of each page. <em>Detailed descriptions and ideology maps show readers where candidates fall on certain issues.</em></p>
</div>
</div>
</div>
<div class="container-fluid" style="margin-top: 30px;">
<div class="row justify-content-center" style="background: #ebf1fb;padding-top: 30px;">
<div class="col-sm-auto col-md-8 col-lg-8 col-xl-8 text-center topspace" style="margin-bottom:0px;"><img src="assets/img/AQ-img/AQ-lay/AQ0132-URUGUAY-NUMBERS-1.jpg" width="298" height="397" style="border:1px solid lightslategray;">
<p class="caption">An infographic feature that highlights key facts on governance, economy, and society within Uruguay.</p>
</div>
</div>
</div>
<div class="container-fluid" style="margin-top: 30px;">
<div class="row justify-content-center" style="margin-top:30px;">
<div class="col-sm-auto col-md-3 col-lg-3 col-xl-3 text-center"><img src="assets/img/AQ-img/AQ-lay/cultura-opener.jpg" style="border:1px solid lightslategray;" width="100%"></div>
<div class="col-sm-auto col-md-6 col-lg-6 col-xl-6 text-center topspace"><img src="assets/img/AQ-img/AQ-lay/cultura-art-1.jpg" width="100%" style="border:1px solid lightslategray;"></div>
</div>
<div class="row justify-content-center" style="margin-top:30px;">
<div class="col-sm-auto col-md-8 col-lg-8 col-xl-8 text-center"><img src="assets/img/AQ-img/AQ-lay/cultura-art-2.jpg" width="100%" style="border:1px solid lightslategray;">
<p class="caption">The Cultura section discusses contemporary books, film, music, and art in Latin America. This specific layout features artwork from the "Bispo Do Rosario: All Existing Materials on Earth" exhibition.</p>
</div>
</div>
</div>
<div class="container-fluid" style="margin-top: 30px;">
<div class="row justify-content-center" style="margin-top:30px;">
<div class="col-sm-auto col-md-8 col-lg-8 col-xl-8 text-center"><img src="assets/img/AQ-img/AQ-lay/file-sharing-layout-a.jpg" width="100%" style="border:1px solid lightslategray;">
<p class="caption">A feature on cybersecurity competition between the U.S. and China within Latin America and the Caribbean. Since it's about file sharing, I decided to illustrate several connected folders floating across the layout. Each folder has a U.S or China flag on it. The background of the body copy is also in the shape of a folder. </p>
</div>
</div>
</div>
<div class="container-fluid" style="margin-top: 30px;">
<div class="row justify-content-center" style="margin-top:30px;">
<div class="col-sm-auto col-md-9 col-lg-9 col-xl-9 text-center"><img src="assets/img/AQ-img/AQ-lay/readers-layout-mockup.jpg" width="532" height="347"></div>
<div class="col-sm-auto col-md-7 col-lg-7 col-xl-7 text-center">
<p class="caption">The "readers" layout displays social media posts from readers of Americas Quarterly. On the left side of the spread, a collage of newspaper clippings discussing the Capacity to Combat Corruption (CCC) Index rankings of certain Latin American countries are shown.</p>
</div>
</div>
</div>
<div class="footer-dark" style="margin-top:60px;background:black;">
<div class="row text-center nopad">
<div class="col"><a href="#"><i class="fas fa-arrow-up" style="color:rgb(255,255,255);"></i></a></div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col item social" style="margin-top:9px;"><a href="https://www.instagram.com/anaisgonzalezdesign/"><i class="fab fa-instagram"></i></a><a href="mailto:anaisgonzalezdesign@gmail.com"><i class="far fa-envelope"></i></a><a href="https://www.linkedin.com/in/anais-gonzalez-254483212/"><i class="fab fa-linkedin-in"></i></a></div>
</div>
<p class="copyright" style="color:rgb(255,255,255);">Anais Gonzalez © 2024</p>
</div>
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/aos.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<script src="assets/js/Simple-Slider-swiper.jquery.min.js"></script>
<script src="assets/js/Simple-Slider.js"></script>
<script src="assets/js/typewriter.js"></script>
</body>
</html>