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>

<main id="main">
  <h1 id="title">Dr. Abdus Salam</h1>
  <p id="title1">A Noble Prize winner Pakistani Theoretical Physicist</p>
  <figure id="img-div">
    <img
      id="image"
src="https://live.staticflickr.com/3664/3444193647_713d31ceb0_o.jpg"
alt= "Dr. Abdus Salam sitting at his workplace, talking to his colleagues"
    />
    <figcaption id="img-caption">
      Dr. Abdus Salam at his workplace, teaching the basic concepts of his Physics Theory to young Physicist.
    </figcaption>
  </figure>
   <section id="tribute-info">
    <h3 id="headline">Here's a time line of Salam's life:</h3>
    <ul>
      <li><strong>1914</strong> - Born in Country Town of Jhang, then part of British India, now Pakistan.</li>
      <li>
        <strong>1940</strong> - At 14, he scored record breaking marks in Punjab University's matriculation entrance exams. At that day, people were standing outside their shops to pay homage to him.
      </li>
      <li>
        <strong>1942</strong> - Salam joined the Government College University at Lahore. He enrolled to study Mathematics A and B, and English. It is recorded that some of his tutors thought he would make a great English teacher.
      </li>
      <li>
        <strong>1943</strong> - In Mathematics, Salam published his first paper in 1943. It was titled, "A problem of Ramanujan". He graduated next year with jaw-dropping scores.
      </li>
      <li>
        <strong>1946</strong> - Salam went to Cambridge University. His time at Cambridge ended, for the time being, with a PhD at the Cavendish Laboratory at St John's. By the end of his tenure, he had made a mark in the scientific fraternity as a promising young scientist.
      </li>
      <li>
        <strong>1951</strong> - After having won a number of awards and accolades, Salam was ready to move back to Pakistan.He dismissed an opportunity to spend a year at Princeton University (where Professor Albert Einstein was too!) and took up the offer to head the mathematics department at the Government College Lahore (GC).  The university allegedly failed to give him an official accommodation. Salam, with his wife, moved in with his colleague Qazi Mohammad, a professor of Philosophy at GC. To resolve the matter, Salam scheduled a meeting with then minister of education, Abdul Hameed Dasti. Salaam also looked after the footballer.
      </li>
      <li>
        <strong>1953</strong> - Anti-Ahmadiyya riots set the city of Lahore ablaze. When the dust settled, Abdus Salam had returned to St John's College as a mathematics lecturer.
      </li>
      <li>
        <strong>1954</strong> - Despite his move from Pakistan, sections of the Pakistani academia and intelligentsia had begun to value Salam as an asset. He was inducted as a fellow at the Pakistan Academy of Sciences.
      </li>
      <li>
        <strong>1955</strong> - In 1955, Salam had his first brush with the UN as scientific secretary at the first 'Atoms for Peace' conference. He also helped set up the United Nations Advisory Committee for Science and Technology. The experience was memorable, as he narrated in an interview, years later.
      </li>
      <li>
        <strong>1957</strong> - Salam joined Imperial College London, initially, as a lecturer of applied mathematics. By next 1960, he was bestowed with the responsibility of chairing the Theoretical Physics department, along with Paul Matthews.
      </li>
      <li>
        <strong>1962</strong> - President Field Marshal Ayub Khan appointed Abdus Salam as his Chief Scientific Officer. During the 60s Abdus Salam gained influence in Pakistan’s domestic scientific policy and established a number of scientific institutions in Pakistan.
      </li>
      <li><strong>1962</strong> - Despite the obstacles in his path, Salam devoted his energies towards establishing scientific institutions in Pakistan. Together, with I H Usmani, another Pakistani scientist, Salam set out to do this. He became a member of Pakistan's Atomic Energy Commission and under the 'nuclear' umbrella, did much more than just enhance Pakistan's nuclear energy capabilities.</li>
      <li>
        <strong>1964</strong> - The International Centre for Theoretical Physics was another brainchild of Professor Abdus Salam. Professor Salam believed in the potential that scientists from the third-world could offer to the global scientific community. ICTP was set up in Italy’s Trieste after attempts to establish such an institution in Pakistan failed.
      </li>
      <li>
        <strong>1968</strong> - Salam received the Atoms for Peace award for his efforts in “making the world aware of the benefits to be gained from using nuclear knowledge for peace, health and prosperity.”
      </li>
      <li>
        <strong>1970</strong> - Salam helped set up Pakistan’s first nuclear power plant in Karachi with the help of Canadian and Pakistani engineers.
      </li>
      <li><strong>1979</strong> - Received the Nobel Prize for Physics
      </li>
      <li><strong>1983</strong> - Set up the Third World Academy of Sciences.
</li>
      <li><strong>1996</strong> - died at the age of 70.</li>
    </ul>
     <p>Abdus Salam's information has been taken from  <a
        id="dawn-link"
        href="https://www.dawn.com/news/1311473"
        target="_blank">Dawn</a>.
    <h3>
      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/Abdus_Salam"
        target="_blank"
        >Wikipedia entry</a
      >.
    </h3>
  </section>
</main>

              
            
!

CSS

              
                html {
  /* Setting a base font size of 10px give us easier rem calculations
     Info: 1rem === 10px, 1.5rem === 15px, 2rem === 20px and so forth
   */
  font-size: 10px;
}

body {
  /* Native font stack https://getbootstrap.com/docs/4.2/content/reboot/#native-font-stack */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Helvetica Neue', Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #333;
  margin: 0;
}

h1 {
  font-size: 4rem;
  margin-bottom: 0;
}

@media (max-width: 460px) {
  h1 {
    font-size: 3.5rem;
    line-height: 1.2;
  }
}

h2 {
  font-size: 3.25rem;
}

a {
  color: #477ca7;
}

a:visited {
  color: #74638f;
}

#main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 5px;
  background: rgb(255,300,205);
}

@media (max-width: 460px) {
  #main {
    margin: 0;
  }
}
#title1{
  font-size: 15px;
}
img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

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

#img-caption {
  margin: 5px 0 5px 0;
}

@media (max-width: 460px) {
  #img-caption {
    font-size: 1.4rem;
  }
}

#headline {
  margin: 50px 0;
  text-align: center;
}

ul {
  max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;
}

li {
  margin: 16px 0;
}

              
            
!

JS

              
                // eslint-disable-next-line no-unused-vars
const projectName = 'tribute-page'
              
            
!
999px

Console