-
Notifications
You must be signed in to change notification settings - Fork 0
/
city-magazine.html
192 lines (187 loc) · 15.5 KB
/
city-magazine.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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!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>City Magazine</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 text-sm-center text-md-center navbar-light">
<div class="container-fluid"><a class="navbar-brand" href="index.html"><img id="logo" src="assets/img/logo2021.svg"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-2" data-toggle="collapse" data-target="#navcol-2"><span class="sr-only">Toggle navigation</span><span class="text-sm-center navbar-toggler-icon"></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>
<!---------------- HIDE POSTCARD & TAROT FOR NOW
<li class="nav-item text-center" style="margin-right:10px;"><a class="nav-link" href="postcards-home.html">POSTCARDS</a></li>
<li class="nav-item" style="margin-right:10px;"><a class="nav-link text-center" href="tarotcards-home.html">TAROT</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 justify-content-center no-gutters">
<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:[email protected]" 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="container-fluid" style="padding-right:0px;padding-left:0px;margin-bottom:60px;">
<div class="row justify-content-center" style="margin-right:0px;margin-left:0px;">
<div class="col-sm-12 col-md-10 col-lg-6 col-xl-6 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;">CITY MAGAZINE</h1>
<p data-aos="slide-up" data-aos-delay="200" class="brief-text">A magazine that centers around life in New York City.<br></p>
</div>
<div class="col-md-12 col-lg-12 col-xl-12" style="padding:0px 0px;margin:0px;"><img data-aos="fade" data-aos-delay="250" src="assets/img/city-mag-assets/citymag-cover-mockup.gif"></div>
</div>
</div>
<div class="container-fluid nopad">
<div class="row justify-content-center nopad topspace">
<div class="col-md-10 col-lg-3 col-xl-2 offset-xl-0">
<h3 class="text-center text-lg-left text-xl-left">CONCEPT</h3>
<p class="text-left" style="margin-top:20px;margin-bottom:0px;">Since the magazine centers around life in NYC, I used Futura PT for the logo because it’s a geometric sans-serif and I wanted the logo to be modern and fun, just like the city. In the beginning, I played around with the idea of integrating a building or a speech bubble into the logo, but decided the logo with an exclamation point worked best at the time.<br></p>
</div>
<div class="col-sm-11 col-md-7 col-lg-5 col-xl-5 text-right topspace" style="margin-bottom:30px;">
<h4 class="text-center">ROUND 1</h4><img class="styleimg" src="assets/img/city-mag-assets/citylogoideas-1081-0.jpg" style="margin-top:0px;">
</div>
<div class="col-md-4 col-lg-3 col-xl-3 offset-xl-0 topspace" style="margin-bottom:30px;">
<h4 class="text-center">ROUND 2</h4><img class="styleimg" src="assets/img/city-mag-assets/citylogoideas-1081.jpg" style="margin-top:0px;">
</div>
</div>
<div class="row justify-content-center nopad topspace">
<div class="col-lg-10 topspace">
<h4 class="text-center">ROUND 3</h4>
</div>
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-5 text-center" style="margin-bottom:0px;"><img src="assets/img/city-mag-assets/citylogoideas-10812A.jpg">
<p class="caption">1) Extended the top of the exclamation point so that it lines up with the dot of the 'i'.<br></p>
</div>
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-5 text-center topspace" style="margin-bottom:0px;"><img src="assets/img/city-mag-assets/citylogoideas-10812B.jpg">
<p class="caption">2) Extended the top of 't' so that it lines up with the dot of the 'i' and the top of exclamation point.<br></p>
</div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-5 text-center" style="margin-bottom:0px;"><img src="assets/img/city-mag-assets/citylogoideas-10812C.jpg">
<p class="caption">3) Closed the awkward gap between the 't' and the 'y' in order to bring it all together.<br></p>
</div>
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-5 text-center topspace" style="margin-bottom:0px;"><img src="assets/img/city-mag-assets/citylogoideas-10812D.jpg">
<p class="caption"><strong>4) Final stage of the logo.</strong><br></p>
</div>
</div>
<div class="row justify-content-center nopad topspace">
<div class="col-sm-11 col-md-10 col-lg-10 col-xl-10 offset-xl-0"><img class="outline topspace" src="assets/img/city-mag-assets/citymag-STYLE-0.jpg"></div>
</div>
</div>
<div class="container-fluid nopad" style="margin-top:130px;">
<div class="row nopad" style="margin-top:30px;margin-bottom:30px;">
<div class="col-sm-12 col-md-12 col-lg-2 col-xl-2 offset-lg-2 offset-xl-2" style="padding-right:0px;">
<h3 class="text-center text-sm-center text-md-center text-lg-left text-xl-left">CONTENT</h3>
</div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-8 col-xl-8 text-xl-right"><img src="assets/img/city-mag-assets/Three_Magazines_Mockup.jpg"></div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-8 col-xl-8 text-xl-right topspace"><img src="assets/img/city-mag-assets/MOCKUPS/121408659.jpg" width="100%"></div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-8 col-xl-8 text-xl-right topspace"><img class="outline" src="assets/img/city-mag-assets/FLATS/adfob-2021.jpg">
<p class="caption">Left: An advertisement for the Museum of Ice Cream. Right: A page titled "noise", which features dialogue heard directly from the streets of New York.<br></p>
</div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-8 col-xl-8 text-xl-right"><img class="outline" src="assets/img/city-mag-assets/FLATS/Layer%204.jpg">
<p class="caption" style="padding-bottom:0px;">The "Borough Bounce" section highlights different places that New Yorkers can travel to within each of the five boroughs in order to have fun, see new places, or eat new dishes. </p>
</div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-8 col-xl-8 text-xl-right topspace"><img class="outline" src="assets/img/city-mag-assets/FLATS/Layer%205.jpg"></div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-8 col-xl-8 text-xl-right topspace"><img src="assets/img/city-mag-assets/MOCKUPS/a_.2_.jpg"></div>
</div>
<div class="row justify-content-center nopad">
<div class="col-md-3 col-lg-2 col-xl-2 order-2 order-sm-2 order-md-1 topspace">
<p class="caption" style="padding-top:0px;">The word 'RISE' is stacked upon itself several times and also increases in saturation in order to create a lifting effect.</p>
</div>
<div class="col-md-7 col-lg-6 col-xl-6 order-1 order-sm-1 order-md-2"><img class="outline" src="assets/img/city-mag-assets/citymag-closeups4.jpg"></div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-7 col-lg-8 col-xl-8 text-xl-right topspace"><img class="outline" src="assets/img/city-mag-assets/FLATS/Layer%207.jpg"></div>
<div class="col-sm-auto col-md-3 col-lg-2 col-xl-2 d-none d-sm-none d-md-block text-xl-right"><img class="outline" src="assets/img/city-mag-assets/citymag-closeups5.jpg"></div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-10 col-xl-10 text-xl-right topspace"><img src="assets/img/city-mag-assets/MOCKUPS/citymagmockup0001.jpg"></div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-8 col-lg-8 col-xl-8 text-center topspace"><img src="assets/img/city-mag-assets/MOCKUPS/214086592.jpg"></div>
<div class="col-sm-auto col-md-3 col-lg-2 col-xl-2 text-center d-none d-sm-none d-md-block topspace"><img class="outline" src="assets/img/city-mag-assets/citymag-closeups2.jpg">
<p class="d-none d-sm-none d-lg-block caption">Each dish is numbered in order from 1 to 5 and is labeled by name and location. Some fun facts about the dishes are also included as sidebars.</p>
</div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-8 col-xl-8 topspace"><img src="assets/img/city-mag-assets/MOCKUPS/a__26_.jpg"></div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-8 col-xl-8 topspace"><img class="outline" src="assets/img/city-mag-assets/FLATS/Layer%2011.jpg"></div>
</div>
<div class="row justify-content-center nopad">
<div class="col-md-10 col-lg-6 col-xl-6 topspace"><img class="outline" src="assets/img/city-mag-assets/FLATS/Layer%2012.jpg">
<p class="caption" style="padding-bottom:0px;">There are different spreads for different departments (celeb + fashion, home + health, and beauty + food) . Each section has a designated color and label.</p>
</div>
<div class="col-md-10 col-lg-4 col-xl-4 topspace"><img src="assets/img/city-mag-assets/MOCKUPS/02.jpg"></div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-8 col-xl-8 text-center topspace"><img class="outline" src="assets/img/city-mag-assets/FLATS/Layer%2015.jpg">
<p class="caption">Bonus celeb interview with Kerry Washington.</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:[email protected]"><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>