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

              
                          <title>Al Kawarzmi</title>

<div class="container">
 <div class="header">

<h2>Muhammad ibn Musa al-Khwarizmi</h2>
      <h3>Astronomer and mathematician</h3>
<div id="show">

	<div class="img1 slide" >
		<img src="https://images.alphacoders.com/257/thumb-1920-257871.jpg" alt="The Math" />
	</div>
	<div class="img2 slide" >
		<img src="http://217.218.67.237:83/thumbnail/20160316/02363919_xl.jpg" alt="Al Gabra Book" />	
	</div>
	<div class="img3 slide">
		<img src="http://img.over-blog-kiwi.com/0/49/17/35/201310/ob_0b5df8354fa57f91814fde98e65e14fd_equation-de-l-homme.jpg" alt="Al Kawarzmi" />
	</div>
	<div class="img4 slide" >
		<img src="https://image.slidesharecdn.com/mythbuster1-130306171254-phpapp01/95/mythbusting-are-science-and-religion-really-at-war-74-638.jpg?cb=1362590584" alt="Al Kawarzmi History" />
	</div>
	<div class="img5 slide" >
		<img src="https://thatsmaths.files.wordpress.com/2014/10/al-khwarizmi-stamp-and-book.jpg" alt="Al Kawarzmi Book" />
    
	</div>

		</div>
   <h4>Al-Khwarizmi </h4>
   <h4>The ink of a scholar is holier than the blood of a martyr</h4>
   <p>Some years ago a book was published with the title How the Irish Saved Civilisation. It told of how, by copying ancient manuscripts, Irish monks preserved the knowledge of ancient times through the Dark Ages, when Europe was plunged into ignorance and turmoil. Far to the East, a more extensive rescue operation was under way.

Evidence of Arabic science, the science practiced by the scholars of the Islamic Empire, is all around us. For example, most of the stars in the sky have Arabic names. We owe a huge debt to the achievements of the scholars of the Arabic world. The scientific revolution in sixteenth and seventeenth century Europe depended greatly on the advances made in mathematics, physics, chemistry, medicine and philosophy in the medieval Islamic world.</p>
    <img src="https://mmc.tirto.id/image/2017/05/27/Ilustrasi-muhammad-ibn-musa-IST.jpg"  alt="Al Kwarzmi" class="image" >
<div class="caption">Al-Khwarizmi was also known as:
Abu Ja'far Muhammad ibn Musa Al-Khwarizmi
</div>
   </div>
        
        <h4>Al-Khwarizmi was known for:</h4><p>Writing major works on astronomy and mathematics that introduced Hindu-Arabic numerals and the idea of algebra to European scholars. The Latinized version of his name gave us the term &#34;algorithm,&#34; and the title of his most famous and important work gave us the word &#34;algebra.&#34;</p>
        
        <h4>OCCUPATIONS:
</h4><p>Scientist, astronomer, geographer and mathematician
Writer</p>
        
         <h4>PLACES OF RESIDENCE AND INFLUENCE:
</h4><p>Asia: Arabia</p>
        
         <h4>IMPORTANT DATES:</h4>
        <ul>
        <li><strong>Born: c. 786</strong></li>
          <li><strong>Died: c. 850</strong></li>
           </ul>
          
          <h4>ABOUT AL-KHWARIZMI:
</h4><p>Muhammad ibn Musa al-Khwarizmi was born in Baghdad in the 780s, around about the time that Harun al-Rashid became the fifth Abbasid caliph. Harun's son and successor, al-Mamun, founded an academy of science known as the "House of Wisdom" (Dar al-Hikma), where research was conducted and scientific and philosophic treatises were translated, particularly Greek works from the Eastern Roman Empire. Al-Khwarizmi became a scholar at the House of Wisdom.

At this important center of learning, al-Khwarizmi studied algebra, geometry and astronomy and wrote influential texts on the subjects. He appears to have received the specific patronage of al-Mamun, to whom he dedicated two of his books: his treatise on algebra and his treatise on astronomy.

Al-Khwarizmi's treatise on algebra, al-Kitab al-mukhtasar fi hisab al-jabr waʾl-muqabala (“The Compendious Book on Calculation by Completion and Balancing”), was his most important and well-known work. Elements of Greek, Hebrew, and Hindu works that were derived from Babylonian mathematics of more than 2000 years earlier were incorporated into al-Khwarizmi's treatise.


The term "al-jabr" in its title brought the word "algebra" into western use when it was translated into Latin several centuries later. 

Although it sets forth the basic rules of algebra, Hisab al-jabr w'al-muqabala had a practical objective: to teach, as al-Khwarizmi put it,Hisab al-jabr w'al-muqabala included examples as well as algebraic rules in order to help the reader with these practical applications.

Al-Khwarizmi also produced a work on Hindu numerals. These symbols, which we recognize as the "Arabic" numerals used in the west today, originated in India and had only recently been introduced into Arabic mathematics. Al-Khwarizmi's treatise describes the place-value system of numerals from 0 to 9, and may be the first known use of a symbol for zero as a place-holder (a blank space had been used in some methods of calculation). The treatise provides methods for arithmetical calculation, and it is believed that a procedure for finding square roots was included.

Unfortunately, the original Arabic text is lost. A Latin translation exists, and though it is thought to be considerably changed from the original, it did make an important addition to western mathematical knowledge. From the word "Algoritmi" in its title, Algoritmi de numero Indorum (in English, "Al-Khwarizmi on the Hindu Art of Reckoning"), the term "algorithm" came into western usage.

In addition to his works in mathematics, al-Khwarizmi made important strides in geography. He helped create a world map for al-Mamun and took part in a project to find the Earth's circumference, in which he measured the length of a degree of a meridian in the plain of Sinjar. His book Kitab surat al-arḍ (literally, "The Image of the Earth," translated as Geography), was based on the Geography of Ptolemy and provided the coordinates of approximately 2400 sites in the known world, including cities, islands, rivers, seas, mountains and general geographical regions.

Al-Khwarizmi improved on Ptolemy with more accurate values for sites in Africa and Asia and for the length of the Mediterranean Sea. 

Al-Khwarizmi wrote yet another work that made it into the western canon of mathematical studies: a compilation of astronomical tables. This included a table of sines, and either its original or an Andalusian revision was translated into Latin. He also produced two treatises on the astrolabe, one on the sundial and one on the Jewish calendar, and wrote a political history that included the horoscopes of prominent people.</p>

<h4>Algabra</h4>
<p><img class="book" src="//upload.wikimedia.org/wikipedia/commons/thumb/2/23/Image-Al-Kit%C4%81b_al-mu%E1%B8%ABta%E1%B9%A3ar_f%C4%AB_%E1%B8%A5is%C4%81b_al-%C4%9Fabr_wa-l-muq%C4%81bala.jpg/220px-Image-Al-Kit%C4%81b_al-mu%E1%B8%ABta%E1%B9%A3ar_f%C4%AB_%E1%B8%A5is%C4%81b_al-%C4%9Fabr_wa-l-muq%C4%81bala.jpg" width="200" height="300"  alt="Al Kwarzmi Book">The Compendious Book on Calculation by Completion and Balancing (Arabic: الكتاب المختصر في حساب الجبر والمقابلة‎‎ al-Kitāb al-mukhtaṣar fī ḥisāb al-jabr wal-muqābala) is a mathematical book written approximately 830 CE. The book was written with the encouragement of Caliph al-Ma'mun as a popular work on calculation and is replete with examples and applications to a wide range of problems in trade, surveying and legal inheritance.[16] The term "algebra" is derived from the name of one of the basic operations with equations (al-jabr, meaning "restoration", referring to adding a number to both sides of the equation to consolidate or cancel terms) described in this book. The book was translated in Latin as Liber algebrae et almucabala by Robert of Chester (Segovia, 1145) hence "algebra", and also by Gerard of Cremona. A unique Arabic copy is kept at Oxford and was translated in 1831 by F. Rosen. A Latin translation is kept in Cambridge.[17]
It provided an exhaustive account of solving polynomial equations up to the second degree,[18] and discussed the fundamental methods of "reduction" and "balancing", referring to the transposition of terms to the other side of an equation, that is, the cancellation of like terms on opposite sides of the equation.[19]
Al-Khwārizmī's method of solving linear and quadratic equations worked by first reducing the equation to one of six standard forms (where b and c are positive integers) </p>
<ul>
<li>squares equal roots (<i>ax</i><sup>2</sup> = <i>bx</i>)</li>
<li>squares equal number (<i>ax</i><sup>2</sup> = <i>c</i>)</li>
<li>roots equal number (<i>bx</i> = <i>c</i>)</li>
<li>squares and roots equal number (<i>ax</i><sup>2</sup> + <i>bx</i> = <i>c</i>)</li>
<li>squares and number equal roots (<i>ax</i><sup>2</sup> + <i>c</i> = <i>bx</i>)</li>
<li>roots and number equal squares (<i>bx</i> + <i>c</i> = <i>ax</i><sup>2</sup>)</li>
</ul>

<p>for <strong>more information</strong> about Muhammad ibn Musa al-Khwarizmi <a href="https://en.wikipedia.org/wiki/Muhammad_ibn_Musa_al-Khwarizmi" target="_blank">Wikipedia entry</a>.</p>
                     </div> 


<div class="clear"></div>

<footer class="footer">
    <hr>
    <p >Written and coded by <a href="https://www.freecodecamp.org/ksawalme" target="_blank">Khaled Al Sawalmeh<em></a></p>
  </footer> 

       
              
            
!

CSS

              
                
.container {background:#F0F0F0 ;
    margin: auto;
    width: 80%;
    padding: 20px;

}
.clear {clear:both;}


.header {    text-align: center;
  margin: auto;
   
    }
		#show {
			width: 120%;
			position: relative;
			height: 420px;
		}

		#show .slide {
			border: 10px solid #fff;
			position: absolute;
			top: 0;
			left: 0;
			width: 80%;
			height: 400px;
			overflow: hidden;
			text-align: center;
		}

		#show .slide p {
			font-size: 13px;
			text-align: left;
			position: relative;
			z-index: 5;
			padding: 5px;
			margin-top: -83px;
			color: #fefefe;
			height: 70px;
			background: rgba(0,0,0,0.8);
		}

/* single image - copy from here */

	.img1 {
		animation: img1 40s infinite;
		-o-animation: img1 40s infinite;
		-moz-animation: img1 40s infinite;
		-webkit-animation: img1 40s infinite;
	}

@-webkit-keyframes img1 {
0% {opacity: 0;}
10% {opacity: 1;}
20% {opacity: 1;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes img1 {
0% {opacity: 0;}
10% {opacity: 1;}
20% {opacity: 1;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-moz-keyframes img1 {
0% {opacity: 0;}
10% {opacity: 1;}
20% {opacity: 1;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

/* 
to that moment 
then change the number on img{}
also you have to make it right with % (remember!)
*/

	.img2 {
		animation: img2 40s infinite;
		-o-animation: img2 40s infinite;
		-moz-animation: img2 40s infinite;
		-webkit-animation: img2 40s infinite;
	}

	.img3 {
		animation: img3 40s infinite;
		-o-animation: img3 40s infinite;
		-moz-animation: img3 40s infinite;
		-webkit-animation: img3 40s infinite;
	}

	.img4 {
		animation: img4 40s infinite;
		-o-animation: img4 40s infinite;
		-moz-animation: img4 40s infinite;
		-webkit-animation: img4 40s infinite;
	}

	.img5 {
		animation: img5 40s infinite;
		-o-animation: img5 40s infinite;
		-moz-animation: img5 40s infinite;
		-webkit-animation: img5 40s infinite;
	}

/* keyframing */

@-webkit-keyframes img2 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 1;}
40% {opacity: 1;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes img2 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 1;}
40% {opacity: 1;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-moz-keyframes img2 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 1;}
40% {opacity: 1;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes img3 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 1;}
60% {opacity: 1;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes img3 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 1;}
60% {opacity: 1;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-moz-keyframes img3 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 1;}
60% {opacity: 1;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes img4 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 1;}
80% {opacity: 1;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes img4 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 1;}
80% {opacity: 1;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-moz-keyframes img4 {
0% {opacity: 0;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 1;}
80% {opacity: 1;}
90% {opacity: 0;}
100% {opacity: 0;}
}

@-webkit-keyframes img5 {
0% {opacity: 1;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 1;}
100% {opacity: 1;}
}

@keyframes img5 {
0% {opacity: 1;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 1;}
100% {opacity: 1;}
}

@-moz-keyframes img5 {
0% {opacity: 1;}
10% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 0;}
40% {opacity: 0;}
50% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 0;}
90% {opacity: 1;}
100% {opacity: 1;}
}
.image {
margin: auto;
    width: 85%;
  
    }
  .caption {
      text-align: center;
    font-size:18px;
    font-style:italic;
    font-family:cursive;

    
  } 

p { font-size:16px;
}

h2 { font-size:34px;
  font-family: cursive;
    text-align: center;
      font-style:italic;
  }
h3 { font-size:24px;
  font-family: Trebuchet MS;
    text-align: center;
      font-style:italic;
    }
h4 { font-size:22px;
    }
.book {    float: right;
    }

.footer {    text-align: center;
        background-color: #F0F0F0	;
        font-style:italic;
  margin: auto;
    width: 80%;
    padding: 20px;


    }

              
            
!

JS

              
                document.getElementsByTagName("h1")[0].style.fontSize = "80px";
              
            
!
999px

Console