@@ -1,21 +1,518 @@
<html>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Candor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>F&P</title>
<meta name="description" content="A multi grid layout with an initial fullscreen intro" />
<meta name="keywords" content="fullscreen image, grid layout, flexbox grid, transition" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css" />
<link href="assets/css/3-col-portfolio.css" rel="stylesheet">
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
<link rel="stylesheet" type="text/css" href="assets/css/layout-multi.css" />
<script src="assets/js/modernizr.custom.js"></script>
</head>
<body>
<svg class="hidden">
<g id="icon-grid">
<rect x="32.5" y="5.5" width="22" height="22"/>
<rect x="4.5" y="5.5" width="22" height="22"/>
<rect x="32.5" y="33.5" width="22" height="22"/>
<rect x="4.5" y="33.5" width="22" height="22"/>
</g>
<g id="icon-cross">
<line x1="4.5" y1="55.5" x2="54.953" y2="5.046"/>
<line x1="54.953" y1="55.5" x2="4.5" y2="5.047"/>
</g>
</svg>
<nav class="thumb-nav">
<a data-container="container-3" class="thumb-nav__item" href="#"><img src="images/F&P Ampersand.png" alt="thumb02" /><span>1</span></a>
<a data-container="container-1" class="thumb-nav__item" href="#"><img src="img/thumbs/thumb1.png" alt="thumb01" /><span>2</span></a>
<a data-container="container-2" class="thumb-nav__item" href="#"><img src="img/thumbs/thumb2.png" alt="thumb02" /><span>3</span></a>
</nav>
<div id="container-3" class="container theme-3">
<header class="intro">
<img class="intro__image2" src="images/F&P-Black-Logo.png"/>
<div class="intro__content">
<h1 class="intro__title">Facts & Perspectives</h1>
<div class="intro__subtitle">
<div class="intro__description" color= "black">
Making local voices louder
</div>
</div>
<button class="trigger">
<svg width="100%" height="100%" viewBox="0 0 60 60" preserveAspectRatio="none">
<use class="icon icon--grid" xlink:href="#icon-grid" />
<use class="icon icon--cross" xlink:href="#icon-cross" />
</svg>
<span>Toggle content</span>
</button>
</div><!-- /intro__content -->
</header><!-- /intro -->
<section class="items-wrap">
<a href="#" class="item">
<img class="item__image" src="img/item01.jpg" alt="item01"/>
<h2 class="item__title">All</h2>
</a>
<a href="#" class="item">
<img class="item__image" src="img/item02.jpg" alt="item02"/>
<h2 class="item__title">Your</h2>
</a>
<a href="#" class="item">
<img class="item__image" src="img/item03.jpg" alt="item03"/>
<h2 class="item__title">Local</h2>
</a>
<a href="#" class="item">
<img class="item__image" src="img/item04.jpg" alt="item04"/>
<h2 class="item__title">News</h2>
</a>
<a href="#" class="item">
<img class="item__image" src="img/item05.jpg" alt="item05"/>
<h2 class="item__title">By</h2>
</a>
<a href="#" class="item">
<img class="item__image" src="img/item06.jpg" alt="item06"/>
<h2 class="item__title">And</h2>
</a>
<a href="#" class="item">
<img class="item__image" src="img/item07.jpg" alt="item07"/>
<h2 class="item__title">For</h2>
</a>
<a href="#" class="item">
<img class="item__image" src="img/item08.jpg" alt="item08"/>
<h2 class="item__title">Local</h2>
</a>
<a href="#" class="item">
<img class="item__image" src="img/item09.jpg" alt="item09"/>
<h2 class="item__title">Voices!</h2>
</a>
<a href="#" class="item">
<img class="item__image" src="img/item10.jpg" alt="item10"/>
<h2 class="item__title">Empower</h2>
</a>
<a href="#" class="item">
<img class="item__image" src="img/item11.jpg" alt="item11"/>
<h2 class="item__title">The</h2>
</a>
<a href="#" class="item">
<img class="item__image" src="img/item12.jpg" alt="item12"/>
<h2 class="item__title">People</h2>
</a>
</section>
</div><!-- /container -->
<div id="container-1" class="container theme-1">
<header class="intro">
<img class="intro__image" src="img/header1.jpg" alt="Lava"/>
<div class="intro__content">
<img src="images/Israel & Palestine.png" width="40%" />
<div class="intro__subtitle">
<div class="intro__description">
Two cultures and people existing in one place that has a history of conflict.
<div class="demos">
<a class="demos__item" href="index.html">Context</a>
<a class="demos__item" href="layout-multi.html">Perspectives</a>
</div>
</div>
<button class="trigger">
<svg width="100%" height="100%" viewBox="0 0 60 60" preserveAspectRatio="none">
<use class="icon icon--grid" xlink:href="#icon-grid" />
<use class="icon icon--cross" xlink:href="#icon-cross" />
</svg>
<span>Toggle content</span>
</button>
</div>
</div><!-- /intro__content -->
</header><!-- /intro -->
<section class="items-wrap">
<h2>Timeline</h2>
<!-- Timeline from https://timeline.knightlab.com/-->
<iframe src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1ZEyULy23AcyW6cHMutwIv6h4e1hryNghdjK1AVLyiWg&font=Default&lang=en&initial_zoom=2&height=500' id="Iframe2" width='100%' height='500' frameborder='0'></iframe>
<div class="our_lower_divs2">
<div id="first2">
<br>
<h2> Context</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse7">What is the Israel-Palestine Conflict?</a>
</h4>
</div>
<div id="collapse7" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">The Israeli–Palestinian conflict (Arabic: النزاع الفلسطيني - الإسرائيلي‎‎ al-Niza'a al'Filastini al 'Israili; Hebrew: הסכסוך הישראלי-פלסטיני‎‎ Ha'Sikhsukh Ha'Yisraeli-Falestini) is the ongoing struggle between Israelis and Palestinians that began in the mid-20th century.</li>
<li class="list-group-item">The conflict is wide-ranging, and the term is sometimes also used in reference to the earlier sectarian conflict in Mandatory Palestine, between the Jewish yishuv and the Arab population under British rule.</li>
<li class="list-group-item">It has been referred to as the world's "most intractable conflict", with the ongoing occupation of Palestine reaching 49 years.</li>
</ul>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse8">What Are the Issues?</a>
</h4>
</div>
<div id="collapse8" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Despite a long-term peace process and the general reconciliation of Israel with Egypt and Jordan, Israelis and Palestinians have failed to reach a final peace agreement. </li>
<li class="list-group-item">The remaining key issues are: mutual recognition, borders, security, water rights, control of Jerusalem, Israeli settlements,[11] Palestinian freedom of movement,[12] and Palestinian right of return. </li>
<li class="list-group-item">The violence of the conflict, in a region rich in sites of historic, cultural and religious interest worldwide, has been the object of numerous international conferences dealing with historic rights, security issues and human rights, and has been a factor hampering tourism in and general access to areas that are hotly contested.</li>
</ul>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse9">What Solutions Have Been Tried?</a>
</h4>
</div>
<div id="collapse9" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Many attempts have been made to broker a two-state solution, involving the creation of an independent Palestinian state alongside the State of Israel (after Israel's establishment in 1948).</li>
<li class="list-group-item">In 2007, the majority of both Israelis and Palestinians, according to a number of polls, preferred the two-state solution over any other solution as a means of resolving the conflict.</li>
<li class="list-group-item">Moreover, a majority of Jews see the Palestinians' demand for an independent state as just, and thinks Israel can agree to the establishment of such a state. The majority of Palestinians and Israelis in the West Bank and Gaza Strip have expressed a preference for a two-state solution.</li>
<li class="list-group-item">Mutual distrust and significant disagreements are deep over basic issues, as is the reciprocal scepticism about the other side's commitment to upholding obligations in an eventual agreement.</li>
</ul>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse10">Why is it so Bad?</a>
</h4>
</div>
<div id="collapse10" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Within Israeli and Palestinian society, the conflict generates a wide variety of views and opinions. This highlights the deep divisions which exist not only between Israelis and Palestinians, but also within each society. </li>
<li class="list-group-item">A hallmark of the conflict has been the level of violence witnessed for virtually its entire duration. Fighting has been conducted by regular armies, paramilitary groups, terror cells, and individuals. </li>
<li class="list-group-item">Casualties have not been restricted to the military, with a large number of fatalities in civilian population on both sides. There are prominent international actors involved in the conflict.</li>
</ul>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse11">What's Happening Today?</a>
</h4>
</div>
<div id="collapse11" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">The two parties engaged in direct negotiation are the Israeli government, currently led by Benjamin Netanyahu, and the Palestine Liberation Organization (PLO), currently headed by Mahmoud Abbas. </li>
<li class="list-group-item">The official negotiations are mediated by an international contingent known as the Quartet on the Middle East (the Quartet) represented by a special envoy, that consists of the United States, Russia, the European Union, and the United Nations.</li>
<li class="list-group-item">The Arab League is another important actor, which has proposed an alternative peace plan. Egypt, a founding member of the Arab League, has historically been a key participant.</li>
</ul>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse12">Want More Recent Background?</a>
</h4>
</div>
<div id="collapse12" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Since 2006, the Palestinian side has been fractured by conflict between the two major factions: Fatah, the traditionally dominant party, and its later electoral challenger, Hamas. After Hamas's electoral victory in 2006, the Quartet conditioned future foreign assistance to the Palestinian National Authority (PA) on the future government's commitment to non-violence, recognition of the State of Israel, and acceptance of previous agreements.</li>
<li class="list-group-item">Hamas rejected these demands,[19] which resulted in the Quartet's suspension of its foreign assistance program, and the imposition of economic sanctions by the Israelis. A year later, following Hamas's seizure of power in the Gaza Strip in June 2007, the territory officially recognized as the PA was split between Fatah in the West Bank, and Hamas in the Gaza Strip.</li>
<li class="list-group-item">The division of governance between the parties had effectively resulted in the collapse of bipartisan governance of the PA. However, in 2014, a Palestinian Unity Government, composed of both Fatah and Hamas, was formed. The latest round of peace negotiations began in July 2013 and was suspended in 2014.</li>
</ul>
<div class="panel-footer"></div>
</div>
</div>
</div>
</div>
<div id="second2">
<div class="all-perspectives">
<br>
<h2> Perspectives </h2>
<div class="row">
<div class="col-md-6 portfolio-item perspective-card-5">
<img class="img-responsive pull-left" src="images/jannajihad.png" alt="" height="150" width="150">
<h3> Jana Jihad </h3>
<p>I am 10 years old and am a local journalist in Palestine. I decided to become a journalist because I saw that there were many horrible things happening here at home that were not being covered in the media, like my friend Mustafa getting murdered, so I decided to cover them myself.</p>
</div>
<div class="col-md-6 portfolio-item perspective-card-6">
<img class="img-responsive pull-left" src="images/shlomiedlar.png" alt="" height="150" width="150">
<h3> Shlomi Eldar </h3>
<p>I am a columnist for Al-Monitor’s Israel Pulse. For the past two decades, I’ve covered stories on the Palestinian Authority and especially the Gaza Strip for Israel’s Channels 1 and 10, reporting on the emergence of Hamas.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 portfolio-item perspective-card-7">
<img class="img-responsive pull-left" src="images/yaelmarom.png" alt="" height="150" width="150">
<h3> Yael Marom</h3>
<p>I report on the stories of the oppressed activists in the Occupied West Bank. Too many abuses on behalf of Israeli forces are not covered by the media, so I do my best to cover them on my blog. </p>
</div>
<div class="col-md-6 portfolio-item perspective-card-8">
<img class="img-responsive pull-left" src="images/anonymousman.png" alt="" height="150" width="150">
<h3> Dusty </h3>
<p>I cover the injustices and antisemitism that the people of Israel suffer with no coverage due to the rising anti-Israeli public opinions. I remain anonymous because of personal fears for having this stance.</p>
</div>
</div>
</div>
<div class="full-perspectives">
<div class="full-perspective-5">
<div class="col-md-12 portfolio-item">
<img class="img-responsive" src="images/jannajihad.png" alt="" height="150" width="150">
<h3> Janna Jihad </h3>
<h5>A 10-year-old reporter in Palestine.</h5>
<br>
<p>June 20th, 2016 - AJ+ (Al Jazeera) did a story on me! Thank you for giving me a more international voice.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/X4Y9hGDn8ao" frameborder="0" allowfullscreen></iframe>
<p>
<br>
July 20th, 2016 - Muhyiddin Tabackhe child, 9 years old in the fourth grade, lives in Al-Ram, near Jerusalem, next to the Apartheid Wall, Israeli soldiers shot rubber bullets to kill him as he was going to buy bread for his family.
<img class="img-responsive" src="images/palestinianboy.jpg" alt="" >
<br>
We need to be more nuanced with the way we consume media and propaganda!
<img class="img-responsive" src="images/tank.jpg" alt="" >
<br>
July 5th, 2016 - We wakeup at morning while the Israeli army invades the village and shot live bullets targeting the people and shot teargas targeting our house </p>
<img class="img-responsive" src="images/carshoot.jpg" alt="">

</div>
</div>
<div class="full-perspective-6">
<div class="col-md-12 portfolio-item">
<img class="img-responsive" src="images/shlomiedlar.png" alt="" height="150" width="150">
<h3> Shlomi Eldar </h3>
<h5>I am a columnist for Al-Monitor’s Israel Pulse. For the past two decades, I’ve covered stories on the Palestinian Authority and especially the Gaza Strip for Israel’s Channels 1 and 10, reporting on the emergence of Hamas. In 2007, I was awarded the Sokolov Prize, Israel’s most important media award, for this work. On Twitter: @shlomieldar</h5>
<br>
</div>
</div>
<div class="full-perspective-7">
<div class="col-md-12 portfolio-item">
<img class="img-responsive" src="images/yaelmaron.png" alt="" height="150" width="150">
<h3> Yael Maron </h3>
<h5>I report on the stories of the oppressed activists in the Occupied West Bank. Too many abuses on behalf of Israeli forces are not covered by the media, so I do my best to cover them on my blog.</h5>
<br>
</div>
</div>
<div class="full-perspective-8">
<div class="col-md-12 portfolio-item">
<img class="img-responsive" src="images/anonymousman.png" alt="" height="150" width="150">
<h3> Dusty </h3>
<h5> I cover the injustices and antisemitism that the people of Israel suffer with no coverage due to the rising anti-Israeli public opinions. I am terrified that history will be repeated for the Jewish people, so it’s my mission to get their stories out there. I remain anonymous because of personal fears for having this stance.</h5>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div><!-- /container -->
<div id="container-2" class="container theme-2">
<header class="intro">
<img class="intro__image" src="img/header2-2.jpg" alt="Road"/>
<div class="intro__content">
<img src="images/the_mission_and_gentrification.png" width="50%" />
<div class="intro__subtitle">
<div class="intro__description">
To solve the housing crisis in San Francisco, we need to add 50% more housing or fire half the people who work in the city.
<div class="demos">
<a class="demos__item" href="index.html">Context</a>
<a class="demos__item" href="layout-multi.html">Perspectives</a>
</div>
</div>
<button class="trigger">
<svg width="100%" height="100%" viewBox="0 0 60 60" preserveAspectRatio="none">
<use class="icon icon--grid" xlink:href="#icon-grid" />
<use class="icon icon--cross" xlink:href="#icon-cross" />
</svg>
<span>Toggle content</span>
</button>
</div>
</div><!-- /intro__content -->
</header><!-- /intro -->
<section class="items-wrap">
<h2>Timeline</h2>
<!-- Timeline from https://timeline.knightlab.com/-->
<iframe src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1sidfB6shzmurpOXjUtsuZaYCx35tXJRhOsZsZYj3dPQ&font=Default&lang=en&hash_bookmark=true&initial_zoom=1&height=500' id="Iframe3" width='100%' height='500' frameborder='0'></iframe>
<div class="our_lower_divs3">
<div id="first3">
<br>
<h2> Context</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">What is gentrification?</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">A trend in urban neighborhoods, which results in increased property values and the displacing of lower-income families and small businesses.</li>
<li class="list-group-item">Cities are becoming more attractive than suburbs and this change is pushing out those who used to live inexpensively in cities</li>
</ul>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Gentrification in the Mission</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">For many years, the Mission has been the battleground for protests over evictions, tech shuttles, gentrification and the soaring cost of living.
</li>
<li class="list-group-item">Yet in San Francisco's oldest neighborhood, the issues are more complicated than two sides of a sharply divided protest. The Mission's longtime residents are struggling to make businesses work, fighting to keep a foothold in their homes and coping with an unprecedented influx of wealth.</li>
</ul>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3">Who is involved?</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">The Mission started as a majority Latino neighborhood in SF. </li>
<li class="list-group-item">Techies who work in the city as well as further south in Mountain View and Palo Alto are flocking to Mission for its and location.</li>
</ul>
<div class="panel-footer"></div>
</div>
</div>
</div>
</div>
<div id="second3">
<div class="all-perspectives">
<br>
<h2> Perspectives </h2>
<div class="row">
<div class="col-md-6 portfolio-item perspective-card-1">
<img class="img-responsive pull-left" src="images/roberthernandez.png" alt="" height="150" width="150">
<h3> Robert Hernandez </h3>
<p>If you’ve never been to the Mission than you cannot begin to understand the attachment we have to it. Let me clarif: visiting doesn’t count. People come for the Mexican food, the beautiful Dolores park, the views...and I love all that. But you can’t understand the Mission until you connect with the people here.</p>
</div>
<div class="col-md-6 portfolio-item perspective-card-2">
<img class="img-responsive pull-left" src="images/Kai.png" alt="" height="150" width="150">
<h3> Kai </h3>
<p>I was walking around the other day and saw some tourists on the Mission District Tour. We didn’t have those when I was a kid. We weren’t treated as a spectacle and abnormality for the world. </p>
</div>
</div>
<div class="row">
<div class="col-md-6 portfolio-item perspective-card-3">
<img class="img-responsive pull-left" src="images/Jillian.png" alt="" height="150" width="150">
<h3> Jillian Means</h3>
<p>Cities are changing and I think people will have to change with them. We can’t hold on to a traditional and “golden” past that doesn’t exist. For me, living in the Mission allows me to be close to the Google headquarters while being close to my family in the city. </p>
</div>
<div class="col-md-6 portfolio-item perspective-card-4">
<img class="img-responsive pull-left" src="images/Will.png" alt="" height="150" width="150">
<h3> Will Lerst </h3>
<p>The Mission has potential to be the best neighborhood in San Francisco and I want to be there to document and feed it. We’re not removing culture, we’re adding our own and are receiving a lot of hostility.</p>
</div>
</div>
</div>
<div class="full-perspectives">
<div class="full-perspective-1">
<div class="col-md-12 portfolio-item">
<img class="img-responsive" src="images/roberthernandez.png" alt="" height="150" width="150">
<h3> Robert Hernandez </h3>
<h5>A poet, painter, lowrider and musician of Mayan and Nicaraguan descent who was born and raised in the only city he has called home, San Francisco.</h5>
<br>
<b>Mission & The People</b>
<br>
<p>If you’ve never been to the Mission than you cannot begin to understand the attachment the people who live here have to it. Let me clarify. Visiting doesn’t count. Spending a season here doesn’t count. People come for the Mexican food, the beautiful Dolores park, the views...and I love all that. But you can’t understand the Mission until you understand and connect with the people. Play soccer against the 30+ men soccer “team” or go to a slam poetry event, that’s how you see the Mission.</p>
<img class="img-responsive" src="images/tortillas.jpg" alt="" > <br>
<b>Mission & Our Soul</b>
<p>
I keep hearing seeing my friends being evicted. That word gets thrown around a lot so let me try to make you feel it.
<br>
Imagine you’re vacationing abroad, waiting in the lobby of a hotel for a room you know you booked a while ago. You’re getting frustrated. Your family is there. You sleep in the lobby overnight waiting for this guaranteed room. The owners finally come out and tell you your room is no longer available. Someone else paid more. You’re kicked out on to the street. Now imagine you can’t just book another place, you can’t just fly back to your home. Your family has nowhere.
<br>
Now if that doesn’t help you see our situation, come down the The Mission and I’ll personally give you a tour. </p>
<img class="img-responsive" src="images/robertpush.jpg" alt="">

</div>
</div>
<div class="full-perspective-2">
<div class="col-md-12 portfolio-item">
<img class="img-responsive" src="images/Kai.png" alt="" height="150" width="150">
<h3> Kai </h3>
<h5>Local who shares the thoughts and values of the neighborhood and has been evicted twice because of rent inflations</h5>
<br>
<p>Space & Integration<br>
People are coming into the Mission and saying they are part of the community but don’t show it. We have a community soccer field in the neighborhood that has always been open for everyone. Permits didn’t exist. A bunch of new tech workers were playing a game and would rather have played alone on their side of the field than join us. We played two separate games on one field. It still feels segregated at times.</p>
<p>Culture & Trends<br>
I was walking around the other day and saw the Mission District Tour. We didn’t have those when I was a kid. We weren’t treated as a spectacle and abnormality for the world.
<br>
Across the street from my first home was a Latino bakery called Mi Rancho. Everyone in the neighborhood came here but it has since been replaced by a hip salon. </p>
<p>Home & Eviction <br>
I just remember being in my house and having to stay in my room while people were going through closets and rooms and checking everything out. That’s when we were evicted.
<br>
I’m not a unique story. This is happening weekly. </p>
</div>
</div>
<div class="full-perspective-3">
<div class="col-md-12 portfolio-item">
<img class="img-responsive" src="images/Jillian.png" alt="" height="150" width="150">
<h3> Jillian Means </h3>
<h5>A blogger, designer, and human rights activist who loves the Mission</h5>
<br>
<p> Work & Home <br>
For many people, the Mission is a perfect blend of work and community. We're close to the bay and all the companies that are headquartered there but also in the best neighborhood in SF. We are bringing money to the area and helping the local economy while bringing in a bit of our own culture.</p>
</div>
</div>
<div class="full-perspective-4">
<div class="col-md-12 portfolio-item">
<img class="img-responsive" src="images/Will.png" alt="" height="150" width="150">
<h3> Will Lerst </h3>
<h5> A Facebook programmer who loves to play pickup soccer and report on local news</h5>
<br>
<p>As a new member of the Mission community I hope to meet new people and make connections with a lot of the established businesses in this area.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div><!-- /container -->
<script src="assets/js/classie.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.full-perspective-1').hide();
$('.full-perspective-2').hide();
$('.full-perspective-3').hide();
$('.full-perspective-4').hide();
$('.full-perspective-5').hide();
$('.full-perspective-6').hide();
$('.full-perspective-7').hide();
$('.full-perspective-8').hide();
});

// clicking for perspective 1
@@ -86,174 +583,225 @@
$('.all-perspectives').show();
});
});

// clicking for perspective 1
$(document).ready(function() {
$('.perspective-card-5').click(function() {
console.log("going to full perspective");
$('.all-perspectives').hide();
$('.full-perspective-5').show();
});
});

// going back from p1
$(document).ready(function() {
$('.full-perspective-5').click(function() {
console.log("going back to all perspectives");
$('.full-perspective-5').hide();
$('.all-perspectives').show();
});
});

//p2
$(document).ready(function() {
$('.perspective-card-6').click(function() {
console.log("going to full perspective");
$('.all-perspectives').hide();
$('.full-perspective-6').show();
});
});

$(document).ready(function() {
$('.full-perspective-6').click(function() {
console.log("going back to all perspectives");
$('.full-perspective-6').hide();
$('.all-perspectives').show();
});
});

// p3
$(document).ready(function() {
$('.perspective-card-7').click(function() {
console.log("going to full perspective");
$('.all-perspectives').hide();
$('.full-perspective-7').show();
});
});

$(document).ready(function() {
$('.full-perspective-7').click(function() {
console.log("going back to all perspectives");
$('.full-perspective-7').hide();
$('.all-perspectives').show();
});
});

//p4
$(document).ready(function() {
$('.perspective-card-8').click(function() {
console.log("going to full perspective");
$('.all-perspectives').hide();
$('.full-perspective-8').show();
});
});

$(document).ready(function() {
$('.full-perspective-8').click(function() {
console.log("going back to all perspectives");
$('.full-perspective-8').hide();
$('.all-perspectives').show();
});
});
</script>
</head>
<body class="landing">
<div id="page-wrapper">
<div style="background-color:black">
<img class="pull-left" src="images/F&P-White-Logo.png" height="60">
</div>
<div id="Timeline" onclick="document.getElementById('Timeline').style.height = '600';document.getElementById('Iframe').style.height = '600;">
<div style="background-color:white">

<img src="images/the_mission_and_gentrification.png" height="120">
</div>
<!-- Timeline from https://timeline.knightlab.com/-->
<iframe src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1sidfB6shzmurpOXjUtsuZaYCx35tXJRhOsZsZYj3dPQ&font=Default&lang=en&hash_bookmark=true&initial_zoom=1&height=600' id="Iframe" width='100%' height='600' frameborder='0' scrolling="yes"></iframe>
</div>
<div class="our_lower_divs" style="overflow-y: scroll">
<div class="first">
<br>
<h2>Context</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">What is gentrification?</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">A trend in urban neighborhoods, which results in increased property values and the displacing of lower-income families and small businesses.</li>
<li class="list-group-item">Cities are becoming more attractive than suburbs and this change is pushing out those who used to live inexpensively in cities</li>
</ul>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Gentrification in the Mission</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">For many years, the Mission has been the battleground for protests over evictions, tech shuttles, gentrification and the soaring cost of living.
</li>
<li class="list-group-item">Yet in San Francisco's oldest neighborhood, the issues are more complicated than two sides of a sharply divided protest. The Mission's longtime residents are struggling to make businesses work, fighting to keep a foothold in their homes and coping with an unprecedented influx of wealth.</li>
</ul>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse3">Who is involved?</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">The Mission started as a majority Latino neighborhood in SF. </li>
<li class="list-group-item">Techies who work in the city as well as further south in Mountain View and Palo Alto are flocking to Mission for its and location.</li>
</ul>
<div class="panel-footer"></div>
</div>
</div>
</div>
</div>
<div class="second">
<div class="all-perspectives">
<br>
<h2> Perspectives </h2>
<div class="row">
<div class="col-md-6 portfolio-item perspective-card-1">
<img class="img-responsive pull-left" src="images/roberthernandez.png" alt="" height="150" width="150">
<h3> Robert Hernandez </h3>
<p>If you’ve never been to the Mission than you cannot begin to understand the attachment we have to it. Let me clarif: visiting doesn’t count. People come for the Mexican food, the beautiful Dolores park, the views...and I love all that. But you can’t understand the Mission until you connect with the people here.</p>
</div>
<div class="col-md-6 portfolio-item perspective-card-2">
<img class="img-responsive pull-left" src="images/Kai.png" alt="" height="150" width="150">
<h3> Kai </h3>
<p>I was walking around the other day and saw some tourists on the Mission District Tour. We didn’t have those when I was a kid. We weren’t treated as a spectacle and abnormality for the world. </p>
</div>
</div>
<div class="row">
<div class="col-md-6 portfolio-item perspective-card-3">
<img class="img-responsive pull-left" src="images/Jillian.png" alt="" height="150" width="150">
<h3> Jillian Means</h3>
<p>Cities are changing and I think people will have to change with them. We can’t hold on to a traditional and “golden” past that doesn’t exist. For me, living in the Mission allows me to be close to the Google headquarters while being close to my family in the city. </p>
</div>
<div class="col-md-6 portfolio-item perspective-card-4">
<img class="img-responsive pull-left" src="images/Will.png" alt="" height="150" width="150">
<h3> Will Lerst </h3>
<p>The Mission has potential to be the best neighborhood in San Francisco and I want to be there to document and feed it. We’re not removing culture, we’re adding our own and are receiving a lot of hostility.</p>
</div>
</div>
</div>
<div class="full-perspectives">
<div class="full-perspective-1">
<div class="col-md-12 portfolio-item">
<img class="img-responsive" src="images/roberthernandez.png" alt="" height="150" width="150">
<h3> Robert Hernandez </h3>
<h5>A poet, painter, lowrider and musician of Mayan and Nicaraguan descent who was born and raised in the only city he has called home, San Francisco.</h5>
<br>
<b>Mission & The People</b>
<br>
<p>If you’ve never been to the Mission than you cannot begin to understand the attachment the people who live here have to it. Let me clarify. Visiting doesn’t count. Spending a season here doesn’t count. People come for the Mexican food, the beautiful Dolores park, the views...and I love all that. But you can’t understand the Mission until you understand and connect with the people. Play soccer against the 30+ men soccer “team” or go to a slam poetry event, that’s how you see the Mission.</p>
<img class="img-responsive" src="images/tortillas.jpg" alt="" > <br>
<b>Mission & Our Soul</b>
<p>
I keep hearing seeing my friends being evicted. That word gets thrown around a lot so let me try to make you feel it.
<br>
Imagine you’re vacationing abroad, waiting in the lobby of a hotel for a room you know you booked a while ago. You’re getting frustrated. Your family is there. You sleep in the lobby overnight waiting for this guaranteed room. The owners finally come out and tell you your room is no longer available. Someone else paid more. You’re kicked out on to the street. Now imagine you can’t just book another place, you can’t just fly back to your home. Your family has nowhere.
<br>
Now if that doesn’t help you see our situation, come down the The Mission and I’ll personally give you a tour. </p>
<img class="img-responsive" src="images/robertpush.jpg" alt="">
<script src="assets/js/bootstrap.min.js"></script>
<script>
(function() {
var support = { animations : Modernizr.cssanimations },
animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
onEndAnimation = function( el, callback ) {
var onEndCallbackFn = function( ev ) {
if( support.animations ) {
if( ev.target != this ) return;
this.removeEventListener( animEndEventName, onEndCallbackFn );
}
if( callback && typeof callback === 'function' ) { callback.call(); }
};
if( support.animations ) {
el.addEventListener( animEndEventName, onEndCallbackFn );
}
else {
onEndCallbackFn();
}
};

</div>
</div>
<div class="full-perspective-2">
<div class="col-md-12 portfolio-item">
<img class="img-responsive" src="images/Kai.png" alt="" height="150" width="150">
<h3> Kai </h3>
<h5>Local who shares the thoughts and values of the neighborhood and has been evicted twice because of rent inflations</h5>
<br>
<p>Space & Integration<br>
People are coming into the Mission and saying they are part of the community but don’t show it. We have a community soccer field in the neighborhood that has always been open for everyone. Permits didn’t exist. A bunch of new tech workers were playing a game and would rather have played alone on their side of the field than join us. We played two separate games on one field. It still feels segregated at times.</p>
<p>Culture & Trends<br>
I was walking around the other day and saw the Mission District Tour. We didn’t have those when I was a kid. We weren’t treated as a spectacle and abnormality for the world.
<br>
Across the street from my first home was a Latino bakery called Mi Rancho. Everyone in the neighborhood came here but it has since been replaced by a hip salon. </p>
<p>Home & Eviction <br>
I just remember being in my house and having to stay in my room while people were going through closets and rooms and checking everything out. That’s when we were evicted.
<br>
I’m not a unique story. This is happening weekly. </p>
</div>
</div>
<div class="full-perspective-3">
<div class="col-md-12 portfolio-item">
<img class="img-responsive" src="images/Jillian.png" alt="" height="150" width="150">
<h3> Jillian Means </h3>
<h5>A blogger, designer, and human rights activist who loves the Mission</h5>
<br>
<p> Work & Home <br>
For many people, the Mission is a perfect blend of work and community. We're close to the bay and all the companies that are headquartered there but also in the best neighborhood in SF. We are bringing money to the area and helping the local economy while bringing in a bit of our own culture.</p>
</div>
</div>
<div class="full-perspective-4">
<div class="col-md-12 portfolio-item">
<img class="img-responsive" src="images/Will.png" alt="" height="150" width="150">
<h3> Will Lerst </h3>
<h5> A Facebook programmer who loves to play pickup soccer and report on local news</h5>
<br>
<p>As a new member of the Mission community I hope to meet new people and make connections with a lot of the established businesses in this area.</p>
</div>
</div>
</div>
</div>
</section>
</div>
var containers = [].slice.call( document.querySelectorAll( '.container' ) ),
containersCount = containers.length,
nav = document.querySelector( 'nav.thumb-nav' ),
pageTriggers = [].slice.call( nav.children ),
isAnimating = false, current = 0;

<!-- Scripts -->

<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
function init() {
resetScroll();
// disable scrolling
window.addEventListener( 'scroll', noscroll );
// set current page trigger
classie.add( pageTriggers[ current ], 'thumb-nav__item--current' );
// set current container
classie.add( containers[ current ], 'container--current' );
// initialize events
initEvents();
}

function initEvents() {
// slideshow navigation
pageTriggers.forEach( function( pageTrigger ) {
pageTrigger.addEventListener( 'click', function( ev ) {
ev.preventDefault();
navigate( this );
} );
} );

// open each container's content area when clicking on the respective trigger button
containers.forEach( function( container ) {
container.querySelector( 'button.trigger' ).addEventListener( 'click', function() {
toggleContent( container, this );
} );
} );

// keyboard navigation events
document.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.which,
isContainerOpen = containers[ current ].getAttribute( 'data-open' ) == 'open';

switch (keyCode) {
// left key
case 37:
if( current > 0 && !isContainerOpen ) {
navigate( pageTriggers[ current - 1 ] );
}
break;
// right key
case 39:
if( current < containersCount - 1 && !isContainerOpen ) {
navigate( pageTriggers[ current + 1 ] );
}
break;
}
} );
}

function navigate( pageTrigger ) {
var oldcurrent = current,
newcurrent = pageTriggers.indexOf( pageTrigger );

if( isAnimating || oldcurrent === newcurrent ) return;
isAnimating = true;

// reset scroll
allowScroll();
resetScroll();
preventScroll();

var currentPageTrigger = pageTriggers[ current ],
nextContainer = document.getElementById( pageTrigger.getAttribute( 'data-container' ) ),
currentContainer = containers[ current ],
dir = newcurrent > oldcurrent ? 'left' : 'right';

classie.remove( currentPageTrigger, 'thumb-nav__item--current' );
classie.add( pageTrigger, 'thumb-nav__item--current' );

// update current
current = newcurrent;

// add animation classes
classie.add( nextContainer, dir === 'left' ? 'container--animInRight' : 'container--animInLeft' );
classie.add( currentContainer, dir === 'left' ? 'container--animOutLeft' : 'container--animOutRight' );

onEndAnimation( currentContainer, function() {
// clear animation classes
classie.remove( currentContainer, dir === 'left' ? 'container--animOutLeft' : 'container--animOutRight' );
classie.remove( nextContainer, dir === 'left' ? 'container--animInRight' : 'container--animInLeft' );

// clear current class / set current class
classie.remove( currentContainer, 'container--current' );
classie.add( nextContainer, 'container--current' );

isAnimating = false;
} );
}

// show content section
function toggleContent( container, trigger ) {
if( classie.has( container, 'container--open' ) ) {
classie.remove( container, 'container--open' );
classie.remove( trigger, 'trigger--active' );
classie.remove( nav, 'thumb-nav--hide' );
container.setAttribute( 'data-open', '' );
preventScroll();
}
else {
classie.add( container, 'container--open' );
classie.add( trigger, 'trigger--active' );
classie.add( nav, 'thumb-nav--hide' );
container.setAttribute( 'data-open', 'open' );
allowScroll();
}
}

// scroll functions
function resetScroll() { document.body.scrollTop = document.documentElement.scrollTop = 0; }
function preventScroll() { window.addEventListener( 'scroll', noscroll ); }
function allowScroll() { window.removeEventListener( 'scroll', noscroll ); }
function noscroll() {
window.scrollTo( 0, 0 );
}

init();

// For Demo purposes only (prevent jump on click)
[].slice.call( document.querySelectorAll('.items-wrap a') ).forEach( function(el) { el.onclick = function() { return false; } } );
})();
</script>
</body>
</html>