HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<ul>
<li id="city"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/ALI_city.png" /></li>
<li id="title"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/ALI_title.png" /></li>
<li id="men"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/ALI_men.png" /></li>
<li id="women"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/ALI_women.png" /></li>
</ul>
</div>
<h4>Hover mouse over image</h4>
<article class="w3-container w3-border">
<body>
<h1>Spike Lee’s Chi-Raq has inspired a sex-strike movement in Chicago</h1>
<br>
<h2>By Alexis Myers</h2>
<br>
<p>A South Side woman has brought the premise of the new movie “Chi-Raq” to life by launching a female sex strike with the goal of ending the city’s gun violence.</p>
<br>
<p>So far 94 supporters have signed April Lawson’s petition on <a href="https://www.change.org/p/april-lawson-sex-strike-in-chicago-no-justice-no-cootchie" target="_blank">Change.org</a>. The movie Chi-Raq, by director Spike Lee, opened Friday and is a modern-day adaptation of the ancient Greek satirical comedy <a href="https://ebooks.adelaide.edu.au/a/aristophanes/lysistra/" target="_blank">“Lysistrata,”</a> in which women refuse sex to try and force their men to end a war.<p>
<br>
<p>In Lee’s movie, the wives and girlfriends of gang members refuse sex to force an end to the gang shootings and violence that have become endemic to many neighborhoods.</p>
<br>
<aside>
April Lawson
<br>Petition Creator
<a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/ALI_AdviceWomenTamar.mp3">
<img src="http://i1318.photobucket.com/albums/t646/aomyers/playbutton_zps6havnkgf.jpg" style="width:100px;height:100px;">
</a></aside>
<h4>click on picture for slideshow</h4>
<div class="april">
<a href="http://s1318.photobucket.com/user/aomyers/slideshow/April%20Lawson%20Sex%20Strike%20Petition">
<img src="http://i1318.photobucket.com/albums/t646/aomyers/April%20Lawson%20Sex%20Strike%20Petition/LawsonStreet_zpsqgscbcxu.jpg"newline character
alt="April"newline character
style="width:450px;height:300px;" />
</a>
<figcaption>April Lawson visits the library on 76th Street and Racine Avenue, where she meets with other female activists once a month. (Alexis Myers/Medill)</figcaption></div>
<br>
<p>Lee has mentioned the petition on talk shows such as <a href="http://www.nbc.com/the-tonight-show/video/spike-lees-chiraq-inspired-a-sex-strike-movement/2940782" target="_blank">"The Tonight Show" starring Jimmy Fallon</a>. His movie took in just $1.1 million at the box office after last week’s opening, landing at No. 13 on the weekend <a href="http://www.boxofficemojo.com/weekend/chart/" target="_blank">box office</a> ranking.</p>
<br>
<p>“It is time for young women to shift their paradigm, and have higher standards and realize their self-worth,” said Lawson, 48, who is from Auburn Gresham. “This is about reclaiming power and it starts with women.”</p>
<br>
<div class="video"><iframe src="https://player.vimeo.com/video/148410017?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></p></div>
<br>
<p>The talk show host for <a href="https://www.facebook.com/cultureshocktv/" target="_blank">"Culture Shock"</a> was inspired to create the petition after 9-year-old <a href="http://www.chicagotribune.com/news/local/breaking/ct-tyshawn-lee-killing-arrest-chicago-20151127-story.html" target="_blank">Tyshawn Lee</a> and 20-year-old aspiring model <a href="http://www.chicagotribune.com/suburbs/evanston/news/ct-evr-evanston-model-shot-tl-1112-20151106-story.html" target="_blank">Kaylyn Pryor</a> were gunned down by gang members.</p>
<br>
<p>“To see everyone act so normal after that happened was truly appalling to me, and something needed to be done,” Lawson said.</p>
<aside2>
April Lawson
<br>Petition Creator
<a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/ALI_Tamarinspiration.mp3">
<img src="http://i1318.photobucket.com/albums/t646/aomyers/playbutton_zps6havnkgf.jpg" style="width:100px;height:100px;">
</a></aside2>
<br>
<div class="picture2"><img src="http://i1318.photobucket.com/albums/t646/aomyers/DowntheStreetStrut_zpsu7urljwf.jpg" alt="Tamar" style="width:450px;height:300px;"> <figcaption>April Lawson lives about a mile away from where Tyshawn Lee was gunned down by gangbangers in Auburn Gresham. (Alexis Myers/Medill)</figcaption></div>
<br>
<p>She says women must first stop sleeping with men whom they know have been involved in drive-by shootings.</p>
<br>
<p>“It must stop. It’s just got to stop,” Lawson said. “Women must take that energy and turn it into change.”</p>
<br>
<p>As of Wednesday, 2,804 people have been victims of shootings in Chicago since the beginning of the year, according to a database of shootings compiled by the <a href="http://crime.chicagotribune.com/chicago/shootings" target="_blank">Chicago Tribune</a>.</p>
<br>
<div class="chart"><iframe src="//datawrapper.dwcdn.net/tWGxl/1/" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" oallowfullscreen="oallowfullscreen" msallowfullscreen="msallowfullscreen" width="490" height="400"></iframe></div>
<br>
<p>“I lived in places we are reading about,” Lawson said. “I can tell you first-hand it’s a war zone.”</p>
<br>
<p>Lawson admits she can’t monitor whether the signers remain celibate, but hopes they do so. She also said she hopes that men become part of the mix.</p>
<br>
<p>“We can’t do this without men,” Lawson said. “Men need to start saying, ‘I love strong women and I support the movement.’”
</p>
<br>
<p>Lawson encourages those who take the pledge to create a 10- to 20-second video and post it to social media with the hashtag <a href="https://twitter.com/hashtag/nojusticenocootchie?f=tweets&vertical=default&src=hash" target="_blank">#nojusticenocootchie</a> and state their support of the movement.
</p>
<br>
<p>She said she hopes to post the videos on her site <a href="https://womeninactionforpeaceblog.wordpress.com" target="_blank">Women in Action for Peace</a> and create a viral sensation similar to the Ice Bucket Challenge that supported research on the disease ALS, also known as Lou Gehrig’s disease.
</p>
<br>
<p>“It’s a lot more comfortable, and you don’t have to get wet and freezing,” Lawson said.</p>
<br>
<div class="bakery"><img src="http://i1318.photobucket.com/albums/t646/aomyers/Bakery_zpsengkpqip.jpg" alt="Tamar" style="width:450px;height:300px;"><figcaption>To make the petition into a grassroots movement, everywhere Lawson goes throughout her day, such as the Brown Sugar Bakery, she spreads the word to get more supporters. (Alexis Myers/Medill)</figcaption></div>
<br>
<p>Chi-Raq’s premise has its origins in ancient fictional Greek comedy, but a sex strike played a pivotal role in a recent, real-life women’s peace movement that ended the Second Civil War in Liberia.</p>
<br>
<p>In 2011, <a href="http://www.nobelprize.org/nobel_prizes/peace/laureates/2011/gbowee-bio.html" target="_blank">Leymah Gbowee</a>, who spearheaded the peace movement, was awarded the Nobel Peace Prize. The sex strike, she said in an <a href="http://www.democracynow.org/2015/4/27/liberian_nobel_peace_prize_laureate_leymah" target="_blank">April interview</a>, was a good strategy to not only propel men to action, but also to spark media attention on the peace movement.</p>
<br>
<p>“People can sometimes sensationalize this,” Lawson said. “But, this has been a global success for years and is a very powerful way in getting men’s attention.”</p>
<br>
<h3>"Nothing to do with the violence"</h3>
<br>
<p> The same gun violence problem that occurs on the South Side is also an issue on the West Side, according to Donna Hall, whose son was killed by gun violence in January 2013. Hall said she believes a sex strike would not have prevented her son’s death.</p>
<br>
<p>“Sex has nothing to do with the violence that is going on here and to think for a second that [the petition] would stop it or slow it down is ludicrous,” Hall said. “A real woman shouldn’t have to use sex for a man to understand how to be a man and how to carry himself.”</p>
<br>
<aside>
Tamar Manasseh
<br>Founder of MASK
<a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/ALI_Tamar.mp3"><img src="http://i1318.photobucket.com/albums/t646/aomyers/playbutton_zps6havnkgf.jpg" style="width:100px;height:100px;">
</a></aside>
<p>Others echoed her criticism.</p>
<br>
<p>Since June, Tamar Manasseh, 37, founder of <a href="http://www.getbehindthemask.org" target="_blank">Mothers Against Senseless Killings</a>, or MASK, has been taking action alongside other parents to protect their children and communities.</p>
<br>
<p>Stocked with lawn chairs, a barbecue grill and tables of food, Manasseh and her volunteer army give out hotdogs and hugs while promoting neighborhood peace. Their main base is the corner of 75th Street and Stewart Avenue in Englewood.</p>
<br>
<h4>click on picture for slideshow</h4>
<div class="tamar">
<a href="http://s1318.photobucket.com/user/aomyers/slideshow/April%20Lawson%20Sex%20Strike%20Petition/MASK">
<img src="http://i1318.photobucket.com/albums/t646/aomyers/April%20Lawson%20Sex%20Strike%20Petition/MASK/TamarMASK_zpscmmaxuc6.jpg"newline character
alt="Tamar"newline character
style="width:450px;height:300px;" />
</a>
<figcaption>Tamar Manasseh (left) and her mother take a break at Bixler Park in Hyde Park while searching for volunteers to represent MASK. (Alexis Myers/Medill)</figcaption></div>
<br>
<p>Manasseh said she strongly believes parents are the ones responsible to make a change, not solely women and their genitalia.</p>
<br>
<p>“We should be teaching young women that their power doesn’t lie between their legs, but between their ears,” Manasseh said.</p>
<br>
<aside2>
Tamar Manasseh
<br>Founder of MASK
<a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/ALI_MorethanthatTamar.mp3">
<img src="http://i1318.photobucket.com/albums/t646/aomyers/playbutton_zps6havnkgf.jpg" style="width:100px;height:100px;">
</a></aside2>
<p>The most powerful thing people can do is be proactive and be the change they want to see—and curbing violence won’t happen by not having sex, Manasseh said.</p>
<br>
<p>“This work is done on your feet and with your heart,” she said.</p>
<br>
<p>Manasseh questions what the petition teaches young people. “Do we really want to teach our sons that they are controlled by vaginas and that they have no power because they are not a woman and don’t have the anatomy?” she said.</p>
<br>
<p>Dion Haggard, 30, grew up in Cabrini-Green and now resides in Garfield Park. He recalls growing up during the days when the crack epidemic and its associated violence hit Chicago. He said he believes gang shootings and violence are now worse. Any change, he said, is a good one. He has signed the petition.</p>
<br>
<p>“I do in a sense see it could have some effect on the community at large if you can reach a large amount of the women,” Haggard said. “The power here lies in women. Where the girls are, the guys will follow.”</p>
<br>
<aside>
Dion Haggard
<br>Security Officer
<a href=" https://s3-us-west-2.amazonaws.com/s.cdpn.io/1412/ALI_haggard.mp3">
<img src="http://i1318.photobucket.com/albums/t646/aomyers/playbutton_zps6havnkgf.jpg" style="width:100px;height:100px;">
</a></aside>
<p>TJ Armour, a friend of Lawson’s who has experienced the threat of gun violence first-hand, said he hopes that her petition will create change, but his gut tells him otherwise.</p>
<br>
<p>“It’s definitely helping to shine a light on the situation,” Armour said. “However, I don’t think sex, or the withholding of it, is the answer.</p>
<br>
<p>“Simply because there will undoubtedly be many women who don’t believe that it could be effective and won’t bother.”</p>
<br>
<p>“Chicago’s gun violence problem is gonna take something outside the box to solve it,” Armour said. “April’s crusade may not be that thing, but at least she’s trying.”</p>
<br>
<div class="chi-raq"><iframe src="https://player.vimeo.com/video/144523728" width="450" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
</body>
</article>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
position: relative;
height: 600px;
width: 1038px;
outline: 1px ;
margin: auto;
overflow: hidden;
}
li {
width: 1038px;
position: absolute;
outline: 1px solid blue;
}
img {
display: block;
position: relative;
}
/*Tweak layer positions and overall width for effect*/
#city {
width: 1200px;
height: 620px;
}
#city img {
left: -300px;
}
#title {
width: 1180px;
height: 610px
}
#title img {
left: 300px;
}
#women {
width: 1700px;
height: 650px
}
#women img {
left: -200px;
}
#men {
width: 1500px;
height: 660px
}
#men img {
left: 200px;
}
ul{transform:scale(1);
transform-origin:top center;}
h1
{
padding-top: 3%;
font-family: helvetica;
font-size: 30px;
font-weight: lighter;
margin-left: 35%;
margin-right: 30%;
text-align: left;
}
h2 {
font-family: helvetica;
font-size: 15px;
font-weight: regular;
margin-left: 35%;
margin-right: 35%;
text-align: left;
}
h3 {
font-family: helvetica;
font-size: 20px;
font-weight: lighter;
margin-left: 35%;
margin-right: 35%;
text-align: left;
}
h4 {
font-family: helvetica;
font-size: 10px;
font-weight: lighter;
margin-left: 35%;
margin-right: 35%;
text-align: left;
}
p
{font-family: helvetica;
font-size: 15px;
font-weight: lighter;
margin-left: 35%;
margin-right: 33%;
}
aside {
margin-left: 15%;
float: left;
font-family: helvetica;
font-size: 20px;
font-weight: lighter;
}
aside2 {
margin-right: 13%;
float: right;
font-family: helvetica;
font-size: 20px;
font-weight: lighter;
}
.chi-raq {
margin-left: 35%;
margin-right: 30%;
}
.april {
margin-left: 35%;
margin-right: 30%;
}
.picture2 {
margin-left: 35%;
margin-right: 30%;
}
.bakery {
margin-left: 35%;
margin-right: 30%;
}
.tamar {
margin-left: 35%;
margin-right: 30%;
}
.chart {
margin-left: 35%;
margin-right: 30%;
}
.subhead {
font-family: helvetica;
font-size: 30px;
font-weight: lighter;
}
figcaption {
padding-top: 1%;
font-family: helvetica;
font-size: 12px;
font-weight: lighter;
font-style: italic;
margin-left: 0;
margin-right: 15%;
display: block;
color: #686868 ;
}
.video {
margin-left: 35%;
margin-right: 30%;
}
p {
line-height: 20px;
}
$('ul li').parallax({
mouseport: $('ul'),
yparallax: true
});
/*TweenMax.to('ul', 3, {scale:.3})*/
Also see: Tab Triggers