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. 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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <div class="container">
  <div class="jumbotron">
    
  <div class="row header">
       <div class="col-xs-12 text-center">
          <h1>THE X PRESIDEN OF SOMALIA</h1>
       </div>
      <div class="col-xs-12 text-center">
           <h2>MOHAMED SIYAD BARRE
        </div>
 </div>
    
 <div class="row img-info">
    <div class="col-xs-7">
    <figure class="figure img-info">
     <img class="img-responsive" alt="Responsive image" src="http://www.africanvault.com/wp-content/uploads/2015/09/siad_barre_007.jpg" > <!-- element    <figcaption> and class .figure-caption -->
  <figcaption class="figure-caption">SIYAD BARRE X PRESINDEN OF SOMALIA</figcaption>
</figure>
   </div>
    <div class="col-xs-5">
    <figure class="figure img-info">
     <img class="img-responsive" alt="Responsive image" src="http://www.wardheernews.com/wp-content/uploads/2013/09/somali-emblem1.jpg" > <!-- element    <figcaption> and class .figure-caption -->
  <figcaption class="figure-caption">THE SIGN OF SOMALIA: <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam   gubergren, </figcaption>
</figure>
   </div>
 </div>
   <div class="row entry">
    <div class="col-xs-12 text-center">
      <ul>
        <li>Early years: Mohamed Siad Barre was born as a member of the Marehan Darod clan (sub-clan Rer Dini) near Shilavo in the Ogaden, Somali Region of Ethiopia.[8][9] His parents died when he was ten years old.[9]</l> 
       <li>Seizure of power: In 1969, following the assassination of Somalia's second president, Abdirashid Ali Shermarke, the military staged a coup on October 21 (the day after Shermarke's funeral), and took over office. The Supreme Revolutionary Council (SRC) that assumed power was led by Major General Barre, Lieutenant Colonel Salaad Gabeyre Kediye and Chief of Police Jama Korshel. Kediye officially </l> 
       <li>Presidency: Styled the "Victorious Leader" (Guulwade), Siad Barre fostered the growth of a personality cult. Portraits of him in the company of Marx and Lenin lined the streets on public occasions.[16] He advocated a form of scientific socialism based on the Qur'an and Marx, with heavy influences of Somali nationalism.</l> 
       <li>Supreme Revolutionary Council: The Supreme Revolutionary Council established large-scale public works programs and successfully implemented an urban and rural literacy campaign, which helped dramatically increase the literacy rate. In addition to a nationalization program of industry and land, the new regime's foreign policy placed an emphasis on Somalia's traditional and religious links with the Arab world, eventually joining the Arab League (AL) in 1974.[9] That same year, Barre also served as chairman of the Organization of African Unity (OAU), the predecessor of the African Union (AU).[17]</l> 
     <li>Language and anti-clanism: One of the first and principal objectives of the revolutionary regime was the adoption of a standard national writing system. Shortly after coming to power, Barre introduced the Somali language (Af Soomaali) as the official language of education, and selected the modified Latin script developed by the Somali linguist Shire Jama Ahmed as the nation's standard orthography. From then on, all education in government schools had to be conducted in Somali, and in 1972, all government employees were ordered to learn to read and write Somali within six months. The reason given for this was to decrease a growing rift between those who spoke the colonial languages, and those who did not, as many of the high ranking positions in the former government were given to people who spoke either Italian or English.</l> 
     <li>Nationalism and Greater Somalia: Barre advocated the concept of a Greater Somalia (Soomaaliweyn), which refers to those regions in the Horn of Africa in which ethnic Somalis reside and have historically represented the predominant population. Greater Somalia thus encompasses Somalia, the republic of Djibouti, the Ogaden (in modern-day Ethiopia) and the North Eastern Province (in Kenya) i.e. the almost </l> 
     <li>Foreign relations
: Control of Somalia was of great interest to both the Soviet Union and the United States due to the country's strategic location at the mouth of the Red Sea. After the Soviets broke with Barre in the late 1970s, he subsequently expelled all Soviet advisers, tore up his friendship treaty with the Soviet Union, and switched allegiance to the West. The United States stepped in and until 1989, was a strong supporter of the Barre government for whom it provided approximately US$100 million per year in economic and military aid. </l> 
     <li>Domestic programs: During the first five years Barre's government set up several cooperative farms and factories of mass production such as mills, sugar cane processing facilities in Jowhar and Afgooye, and a meat processing house in Kismayo.</l> 
     <li>Economic policies: As part of Barre's socialist policies, major industries and farms were nationalised, including banks, insurance companies and oil distribution farms.</l> 
     
      </ul>
     </div>
    </div>
<div class="row entry">
 <div class="col-xs-12">
   <q>
     <p>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p>
</q>
   <small>- by <cite>Albert Einstein</cite></small>
</div>
  <div class="row entry">
   <div class="col-xs-12">
     <h3>If you want to read more please visit <a href="https://en.wikipedia.org/wiki/Siad_Barre" target="_blank">Wikipedia entry</a><h3>
    </div>
  </div>
     
    </div><!--jumbotron--> 
 </div><!--container-->
  <div class="row">
   <div class="col-xs-12 text-center">
     <p>Written and coded by <a href="https://www.freecodecamp.com/immergreen" target="_blank">Said Immergreen</a></p>
    </div>
  </div>
            
          
!

CSS

            
              .entry{
  background-color: #ffffff;
  margin: 5px;
  font-family: 'Open Sans', sans-serif;
  border-radius: 5px;
}
.header{
  background-color: lightblue;
  margin: 1px;
}
.img-info{
 background-color: black;
  color: #ffffff;
  font-family: mono;
  margin: 1px
}

.header h1{
  font-family: mono;
  font-size: 40px
}
.header h2{
  font-family: cursive;
}
ul {
  padding: 20px 60px 20px 60px;
}
            
          
!

JS

            
              
            
          
!
999px

Console