Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

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

Packages

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.

Behavior

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.

HTML

              
                <html>
<head>
  <div class="greenback container">
<div class="text-center back">
<h1 class="benito"> Benito Juarez</h1></div>
  </head>
  
  <body>
    <div class=" allback">
   <div class="backone">
    <img class="foto"     src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/Benito_Pablo_Ju%C3%A1rez_Garc%C3%ADa.png/220px-Benito_Pablo_Ju%C3%A1rez_Garc%C3%ADa.png">
      <p class="para">    In 1806 Juarez was born in the village of San Pablo Guelatao, Oaxaca, located in the mountain range now known as the Sierra Juarez, Mexico. He lived in a small adobe house with his family but Juarez soon became orphan when his parents died of complications of diabetes when he was barely three years old. Shortly his grandparents died as well, so his uncle raised him. He worked in the cornfields and as a shepherd until the age of 12, when he walked to the city of Oaxaca to attend school. At the time, he could speak only Zapotec. A lay Franciscan, Antonio Salanueva, was impressed with young Benito's intelligence and desire for learning, and arranged for his placement at the city's seminary.
      Benito Pablo Juarez Garcia became a Mexican lawyer and politician of Zapotec origin from Oaxaca who served as the president of Mexico for five terms 1858–1861 as interim, then 1861–1865, 1865–1867, 1867–1871 and 1871–1872. Juarez was the president who resisted the French occupation of Mexico, overthrew the Second Mexican Empire, restored the Republic, and used liberal measures to modernized the country.</p></div>
    
    <ul>
      <li>
        In <strong>1834</strong>, he received his law degree and became immensely active in the political sphere in both the city and the state level. By this time, he was much appreciated for defending the rights of natives.
      </li><br>
      <li>
        In <strong>1847</strong>, he was appointed as the governor of the state of Oaxaca, after the Liberal party came to power. During his tenure, he played a crucial role in infrastructure development and improved the economy.
      </li><br>
      <li>
        In <strong>1853</strong>, due to dictatorship of Antonio Lppez de Santa Anna, he went on exile to New Orleans, Louisiana, where he earned his living by working in a cigar factory.
      </li><br>
      <li>
        In <strong>1857</strong>, a new constitution was passed, after which he was appointed as the President of the Supreme Court of Justice in the government of President Ignacio Comonfort.
      </li><br>
      <li>
        On January 1, <strong>1861</strong>, Liberal forces, successfully recaptured Mexico City. In March that year, Juarez was elected as the President under the norms of the ‘Constitution of 1857’.
      </li><br>
      <li>
        In <strong>1862</strong> After he cancelled the payment of interest on foreign loans, due to poor financial status of the country, the unpaid debts laid the foundation for the French intervention in Mexico.
      </li><br>
      <li>
        In <strong>1863</strong>, the French forces advanced their way in, thus causing him and his government to go in exile from Mexico City, yet again. He later established a government-in-exile in Chihuahua City.
      </li><br>
      <li>
        In <strong>1865</strong> Before Juarez fled, Mexican Congress granted him an emergency extension of his presidency. The extension lasted till 1867 when the last of the French forces were defeated.
      </li><br>
      <li>
        In <strong> 1866</strong>, after the US opposed the French forces, they began to pull out from Mexico.
      </li><br>
      <li>
        In <strong>1867</strong>, he was re-elected as the President of Mexico.
      </li><br>
      <li>
        He was appointed as a companion of the 3rd Class of the Military Order of the Loyal Legion of the United States.
      </li><br>
      <li>
        In <strong>1843</strong>, at the age of 37, he married Margarita Maza, who was seventeen years old at the time of their wedding.
      </li><br>
      <li>
        He died on 18 July, <strong>1872</strong> at the age of 66, after he suffered from a heart attack, while reading the newspaper at the National Palace in Mexico City.
      </li>
    </ul>
      <br>
      <blockquote>
      <p class="quote">
         ‘Among individuals, as among nations, respect for the rights of others is peace’.
      </p>
        </blockquote>
       <footer class="say"><cite>-Benito's famous quote which continues to do rounds in the Mexico circles till date. The same is also used on the coat of arms of Oaxaca. </cite></footer>
    <br>
    <p class="text-center ank">If you have time, you should read more about this incredible human being on his<a href="https://en.wikipedia.org/wiki/Benito_Ju%C3%A1rez"> Wikipedia entry.</a></p></div>
    </div>
  <br><br>
  <h1 class="text-center autor">Coded by <a href="https://www.freecodecamp.com/thekokoloko"> Ramiro Soto</a></h1>
    
  </body>
</html> 
              
            
!

CSS

              
                
.benito{
  color: black;
  font-family: zapfino;
  text-shadow: -1px 0 red, 0 1px black, 1px 0 black, 0 -1px white;
  margin-top:60px;
 
  
}
.back{
 
}
.foto{
  float: left;
 border-radius: 2%;
  margin-left: 10px;
  margin-top: 10px;
  width: 270px;
  padding-right: 20px;
 
}
.para{
  margin-top: 70px;
  line-height: 30px;
  font-family: times new roman;
  font-size: 19px;
  
}
.backone{
  
background-color: white;
color: black;
  margin-bottom: 50px;
}
.quote{
  font-size: 30px;
  font-family: courier new;
}
.say{
  font-family: monospace;
}
.allback{
  background-color: #ffa7a6;
}
.greenback{
  background-color: #53cf57;
}
li{
  font-family: times new roman;
  font-size: 19px;
}
.ank{
  font-size: 37px;
}
.autor{
  font-size: 14px;
}
              
            
!

JS

              
                
              
            
!
999px

Console