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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

 <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hasan Ibn al-Haytham</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

<section id ="main">

<h1 id= "title">Hasan Ibn al-Haytham</h1>
<p  id= "behind">The man behind Camera</p>

<div id= "img-div">
<img id= "image" src="https://i1.wp.com/mvslim.com/wp-content/uploads/2015/06/optics_of_time_03.jpg">
<p   id= "img-caption"> Al-Haytham Explain How Camera Obscura Work.</p>
</div>

<p class= "time-line-p">Here's a time line of Hasan Ibn al-Haytham life:</p>
 
<div id= "tribute-info">
  
  
  <p class="flex-item1">
    <span class="date">JUL 1, 965 | Birth</span>
    He was born in Basra, Iraq. His birth name was Abū ‘Alī al-Ḥasan ibn al-Haytham. But he became known by his "Western" name of Alhazen.
  </p>
  
  <p class="flex-item2"> 
    <span class="date">1000 | Mathmatics</span>
    Al-Haytham contributed to geometry and number theory that went beyond the Archimedean tradition. He also worked on analytical geometry and was the first to link algebra and geometry. This work led to the fusion of algebra and geometry that was epitomized by Descartes in geometric analysis and later on by Newton in calculus.
    (Faruqi, 2006).
  </p>
  
  <p class="flex-item3">
    <span class="date">1011 | Arrest in Egypt</span>
    Alhazen traveled to Egypt where word spread that he claimed he could dam the Nile to prevent the continuous floods. These claims were made prior to seeing the river. After his arrival, he saw how daunting a task it would have been and realized he would be unable to fulfill his claims. For fear of death, he claimed insanity and was arrested and held under house arrest for a decade. It was during this time period that Alhazen performed his greatest work. ("Who was Ibn al-Haytham" 2015)
  </p>
  
  <p class="flex-item4">
    <span class="date"> 1012 | Father of Optics</span>
    Alhazen made great discoveries in the field of optics. His theory of vision, that the eyes receive rays of light, strongly contradicted the existing theory that the eye sends out rays to the object it "sees". His arrest played a huge role in this new theory. His cell was very dark except for the light coming in through a hole. If the currently accepted idea was true then he shouldn't have been able to see images of items on the other side of the wall being reflected onto a screen.
  </p>
   
  <p class="flex-item5">
    <span class="date"> 1020 | Scholarly Works</span>
    Alhazen is credited with writing nearly 100 books throughout his life. They ranged from mathematics to astronomy to physics. His so-called masterpiece is several volumes of books on optics and is called 'Book of Optics’. Thankfully over half of his books have survived to this day which has allowed us to have such great details on his work throughout his life.
  </p>
    
  <p class="flex-item6" style= "text-align:center" >
    <span class="date">Mar 6, 1040 | Death</span>
    Cairo, Egypt
  </p>
  
</div>

<p>If you have time, you should read more about this incredible human being on his <a id= "tribute-link" href = "https://en.wikipedia.org/wiki/Ibn_al-Haytham" target="_blank">Wikipedia page</a>.
</p>
</section>
   
</body>

</html>
              
            
!

CSS

              
                 /* Global Style */
 * {
  margin:0;
  padding:0;

} 

/*******************
Extra small devices
********************/
body {
  max-width:600px;
  font-family:arial;
}


#main {
  width:350px;
  margin:25px auto;
  text-align:center;
}


#title {
font-size:25px;
color:#223761;;
margin-bottom:3px;
padding:6px;
border:3px solid #FFF;
outline:3px solid #cac6c6;
background-color:#979aa0;
color:#FFF;
}

#behind {
font-size:15px;
font-style: italic;
border:1px solid #FFF;
outline:2px solid #cac6c6;
background-color:#d87614;
color:#FFF;
padding:5px;
width:200px;
margin:auto;
}

#image {
max-width:100%;
display:block;
margin:auto;
margin-top:20px;
border:5px solid #FFF;
outline:2px solid #c3c1c1;
}

#img-caption {
font-family:Open Sans;
font-size:16px;
color:#FFF;
background-color:#d87614;
padding:5px;
width:100.9%;
margin-left:-2px
}

.time-line-p {
margin-top:20px;
margin-bottom:30px;
font-weight:bold;
font-size:14px;
}

#tribute-info {
width:300px;
margin:auto;
display:flex;
flex-direction:column;
}


.flex-item1,.flex-item2,.flex-item3,
.flex-item4,.flex-item4,.flex-item5,
.flex-item6 {
border:3px solid #ffffff;
outline:2px solid #d2cfcf;
color:#FFF;
padding:8px;
margin-bottom:15px;
} 

.flex-item1 span,.flex-item2 span,
.flex-item3 span,.flex-item4 span,
.flex-item5 span,.flex-item6 span
{
padding:5px;
display:block;
width:101.1%;
position:relative;
bottom:8.3px;
right:7.2px;
color:#FFF;
border-bottom:3px solid #DDD;
border-radius:2px;
}


.flex-item1 {
background-color:#4a8ddc;

}

.flex-item1 span {
background-color:#949494;

}

.flex-item2 {
background-color:#d87614;
}

.flex-item2 span {
background-color:#949494;

}


.flex-item3 {
background-color:#4a8ddc;
}

.flex-item3 span {
background-color:#949494;

}


.flex-item4 {
background-color:#d87614;

}

.flex-item4 span {
background-color:#949494;

}


.flex-item5 {
background-color:#4a8ddc;
}

.flex-item5 span {
background-color:#949494;

}


.flex-item6 {
background-color:#d87614;
}

.flex-item6 span {
background-color:#949494;

}

/*************
Small devices
**************/
@media screen and (min-width:600px) {
body {
  max-width:768px;
}
#main {
  width:450px;
}


#tribute-info {
width:450px;
}

}


/**************
Medium devices
***************/
@media screen and (min-width:768px) {
body {
  max-width:992px;
}

#main {
  width:550px;
}


#tribute-info {
width:550px;

}

}



/*******************
Extra large devices
********************/
@media screen and (min-width:922px) {
body {
  max-width:100%;
}

#main {
  width:800px;
}


#tribute-info {
width:800px;
display:grid;
grid-template-columns:auto auto;
grid-gap:30px;
}

.flex-item1{
height:100px;
align-self:center;
} 

.flex-item6 {
height:50px;
align-self:center;
} 

}

              
            
!

JS

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

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual tst 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. 

              
            
!
999px

Console