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

              
                <!DOCTYPE html>
<html>


<title id="title">Ahmed H. Zewail</title>
<link href="index.css" rel="stylesheet" type="text/css">

<body>

    <main id="main">

        <header class="header" id="tribute-info">
            <h1> Ahmed H. Zewail :Father of Femto-Chemistry </h1>
        </header>



        <div class="bio">
            <ul>
                <li>
                    <h5>Born:</h5> 26 February 1946, Damanhur, Egypt</li>
                <li>
                    <h5>Died:</h5> 2 August 2016 </li>
                <li>
                    <h5>Affiliation at the time of the award:</h5> California Institute of Technology (Caltech), Pasadena, CA,
                    USA
                </li>
                <li>
                    <h5>Prize motivation:</h5> "for his studies of the transition states of chemical reactions using femtosecond
                    spectroscopy"
                </li>
                <li>
                    <h5>Field:</h5> chemical kinetics, physical chemistry </li>
                <li>
                    <h5>Prize share:</h5> 1/1 </li>
            </ul>
        </div>



         <div id="img-div">
        <img id="image" src="http://muftah.org/wp-content/uploads/2016/08/Ahmed-Zewail-Nicolaas-Bloembergen.jpg"  
        />
           <figcaption id="img-caption">Nobel Literature Dr. Ahmed Zewail (left) and Dr. Nicolaas bloembergen (Source: Flicker) </figcaption>
</div>

        <div class="data">
            <h6>Life:</h6>
            Ahmed Zewail was born in Damanhur, Egypt, and grew up in Alexandria. His father worked as a bicycle and motorbike fitter
            before becoming a government official. After studying at the university in Alexandria, Zewail moved to the US
            to undertake his PhD at the University of Pennsylvania in Philadelphia. After some time spent working at the
            University of California, Berkeley, Zewail transferred to the California Institute of Technology in Pasadena
            in 1976, where he continues to work. Ahmed Zewail is married with four children.
        </div>


        <div class="data">
            <h6>Work:</h6>
            Chemical reactions in which molecules held together by atoms meet and reorganize into new compounds are one of nature's most
            fundamental processes. This transition from one constellation to another happens very quickly. The process is
            possible because the atoms inside a molecule vibrate. The time between these vibrations is very short - 10-100
            femtoseconds. In the late 1980s Ahmed Zewail developed methods for studying chemical reactions in detail. By
            using laser technology to produce flashes of light just a few femtoseconds long, reactions can be mapped.
        </div>



        <div class="more">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/Ahmed_Zewail" target="_blank"> Wikipedia entry .</a>
        </div>

        <div class="footer">
            <hr>
            <p>Written and Coded by
                <a href="http://www.linkedin.com/in/mohammed-habib" target="_blank"> &copy;mohammedhabib</a>
            </p>
        </div>



    </main>
</body>

</html>
              
            
!

CSS

              
                 main {
     display: grid;
     grid-gap: 10px;
     grid-template-columns: 1fr 1fr;
     margin: 0px 1fr;
     font-size: 20px;
     font-family: Times, serif;
     background-color: wheat;
     border-radius: 20px;
   min-width:250px;
 }

 .bio {
     padding: 10px;
 }

 .data {
     padding: 10px;
     text-align: justify;
     hyphens: auto;
 }

 .header {
     text-align: center;
     grid-column: 1/-1;
     font-size:1.5vw;
 }

 .footer {
     grid-column: 1/-1;
     justify-self: center;
     align-self: center;
 }

 img {
     width: 100%;
   max-width:none;
 }

 .more {
     grid-column: 1/-1;
     text-align: center;
 }

 h5 {
     margin: 0;
     font-size: 2vw !important;
 }

 h6 {
     text-align: center;
     font-size: 5vw !important;
     margin: 0;
 }

 a {
     text-decoration: none;
     color: black;
 }

 @media (max-width:900px) {
     main {
         display: grid;
         grid-template-columns: 1fr;
         font-size: 4vw;
          
     }
     h5 {
         margin: 0;
         font-size: 5vw !important;
     }
     h6 {
         text-align: center;
         font-size: 5vw !important;
         margin: 0;
     }
header{
  margin:0;
  padding:0;
  font-size:20px   !important   ;
}
}

              
            
!

JS

              
                
              
            
!
999px

Console