Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

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.

+ add another resource


Add Packages

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.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <script src=""></script> 

<main id="main"> 
   <h1 id="title"> Carlos Marighella </h1>
     <h2> The guerrilla who set fire to the world </h2>
  <div id="img-div">
  <div class="container">
   <img id="image" src="" alt="">  
    <div class="overlay">
      <div class="text">"The only fight that is lost is the one that is abandoned"</div>
       <figcaption id="img-caption">
         Marighella looks thoughtful looking at the horizon.
  <h3> Biodata </h3>
    <li> Birth: December 5 1911, Salvador, Bahia - Brazil</li>
    <li> Death: November 4 1969, São Paulo, São Paulo - Brazil</li>
    <li> Wife: Clara Charf (from 1948 to 1969)
    <li>Academic Formation: Federal University of Bahia</li>
    <li>Parents: Augusto Marighella and Maria Rita do Nascimento Marighella</li>
  <h5 id="tribute-info">The life and the death of Carlos Marighella</h5> 
<p><strong>Carlos Marighella</strong> was a Brazilian Marxist-Leninist communist politician, writer and guerrilla. One of the main organizers of the armed struggle against the Brazilian military dictatorship (1964–1985), Marighella came to be considered the "number one" enemy of the regime. He was co-founder of <em>Ação Libertadora Nacional</em>, a revolutionary organization.</p>
    <p>Son of Italian worker Augusto Marighella and Maria Rita do Nascimento, black and daughter of slaves. He studied Civil Engineering at the Polytechnic School of Bahia, but joined the political militancy and left the college aside. He joined the PCB and opposed Getúlio Vargas's <em>Estado Novo</em>. He was twice arrested and tortured at that time, and on the second occasion he remained in prison for six years. After being released in 1945, he was elected federal deputy by the <em>PCB</em> of Bahia. However, he lost his mandate a year later, when the party was made illegal. He remained to act in the militancy clandestinely.</p>
<p>He always connected with the cultural universe, dialoguing with writers (Jorge Amado and Graciliano Ramos), painters (Cândido Portinari and Spaniard Joan Miró), playwrights (Augusto Boal and Dias Gomes) and filmmakers (Glauber Rocha, Frenchman Jean-Luc Godard and the Italian Luchino Visconti). It is liked by artists and intellectuals of the left. At the same time, Marighella and her ideas pose a threat to many others.</p>
<p>When the military seized power in 1964, Marighella broke with the <em>PCB</em> because the party was defending an unarmed opposition - and that was the opposite of what he was defending. In 1968, he founded the National Liberation Action (ALN), a communist-oriented organization that used urban guerrilla methods - such as assaults, kidnappings and terrorist actions. In partnership with the October 8 Revolutionary Movement (MR-8), he was responsible for the kidnapping of the American ambassador to Brazil, Charles Elbrick. At the time, Marighella became the main enemy of the military, which increased efforts to capture him. He was shot dead after an ambush coordinated by police chief Sérgio Paranhos Fleury.</p>
<h6> For more information about <a id="tribute-link" href="" target="_blank"><strong>Carlos Marighella</strong></a>


                html { 
font-size: 20px;
@media (min-width: 480px){
  main {
    font-family: Roboto;
    background-color: #dedede;
h1 {
  font-family: Anton;
  font-size: 60px;
  text-align: center;
  margin: 30px;
h2 {
  font-family: roboto;
  font-size: 30px;
  text-align: center;
  color: red;
  margin-top: -20px;
  margin-bottom: 30px;
  text-shadow: 2px 2px 8px #FF0000;

h3 {
  font-family: ubuntu;
  text-decoration: underline;
h5 {
  font-family: roboto;
  font-size: 20px;
  text-align: center;

  font-family: ubuntu;
  font-size: 15px;
  text-align: center;
  padding: 0 0 20px 0;
  text-align: justify;
  margin: 5px 20px 5px 20px
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 20px;

#img-div {
  background: white;
  padding: 10px;
  margin: 0;

.container {
  position: relative;

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: black;

.container:hover .overlay {
  opacity: 1;

.text {
  color: white;
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
#img-caption {
  font-family: roboto;
  font-size: 15px;
  text-align: center;
  margin-top: 10px;
  color: black;
#anim {
  animation-name: colorful;
  animation-duration: 5s;
@keyframes colorful {
  0% {
    background-color: yellow;
  100% {
    background-color: red;
  color: #190ef4;


                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

  - Select the project you would 
    like to complete from the dropdown 
  - Click the "RUN TESTS" button to
    run the tests against the blank 
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments.