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.

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>
<div id="main" class="main">         
    <div class="title" id="title">
            <h1>George W. Bush</h1>
    </div>
    <div id="tagline"> 
        The Man Who took America through 9/11
    </div> 
    <div id="img-div">
        <img id="image" alt="Photo of President Bush" src="https://upload.wikimedia.org/wikipedia/commons/d/d4/George-W-Bush.jpeg">
        <div id="img-caption">President of the US, George W. Bush.</div>
    </div>
    <div id="tribute-info">               
        <div id="timeline-year">1946</div>
        <div id="timeline-info">Born in New Haven Connecticut.</div>
        <div id="timeline-year">1948</div>
        <div id="timeline-info">George H.W. Bush moved the family to Midland, Texas where they made their fortune.</div>
        <div id="timeline-year">1961</div>
        <div id="timeline-info">Moved to Houston. George left Houston and went to Philips Academy in Andover, Massachusetts.</div>
        <div id="timeline-year">1964</div>
        <div id="timeline-info">Despite only being a fair student with a reputation of a troublemaker, George was accepted into Yale.</div>
        <div id="timeline-year">1968</div>
        <div id="timeline-info">Two weeks before his draft deferment, George enlisted in the Texas Air National Guard. This was the height of the Vietnam War. He was commissioned as a 2nd LT.  </div>
        <div id="timeline-year">1970</div>
        <div id="timeline-info">Earned his fighter pilot certification.</div>
        <div id="timeline-year">1974</div>
        <div id="timeline-info">Despite irregular attendance, George was honorably discharged on Nov. 21st.</div>
        <div id="timeline-year">1975</div>
        <div id="timeline-info">Earned his MBA from Harvard. He then returned to Midland to enter the oil business, working for a friend. He then started his own company.</div>
        <div id="timeline-year">1977</div>
        <div id="timeline-info">At a backyard BBQ, George met Laura Welch. After a quick three month courtship they married on Novemeber 5th.</div>
        <div id="timeline-year">1981</div>
        <div id="timeline-info">Twin daughters, Barbara and Jenna, born in Midland, Texas.</div>
        <div id="timeline-year">1986</div>
        <div id="timeline-info">Sold his struggling business to Harken Energy Corporation in exchange for stock and a seat on the board.</div>
        <div id="timeline-year">1988</div>
        <div id="timeline-info">Moved to Washington, DC to help with his father's Presidental election. After his father's victory he moved back to Texas</div>
        <div id="timeline-year">1989</div>
        <div id="timeline-info">Invested with a group into the Texas Rangers team. Became the de facto leader of the group and earned a reputation as a savvy businessman. In 1998, when he sold of his part of the team, he received 17 times his initiat investment.</div>
        <div id="timeline-year">1994</div>
        <div id="timeline-info">After his father's 1992 loss to Bill Clinton, George decided to run for governor of Texas. He won out over Democratic incumbant Ann Richards.</div>
        <div id="timeline-year">1998</div>
        <div id="timeline-info">Became the first person to serve as Texas Governor for two consecutive four year terms.</div>
        <div id="timeline-year">1999</div>
        <div id="timeline-info">Began his chase for the Presidency. He got the Republican nomination in 2000, up against Democratic candidate, Al Gore.</div>
        <div id="timeline-year">2001</div>
        <div id="timeline-info">On September 11th, after the terrorist attacks on the Twin Towers, Bush jumped into action. </div>
        <div id="timeline-year">2004</div>
        <div id="timeline-info">Despite the war not going well and his social security plans not going well, Bush won his re-election.</div>
        <div id="timeline-year">2009</div>
        <div id="timeline-info">Bush left office with extremely low approval ratings and a large amount of unfinished business. He and Laura relocated to Dallas, Texas.</div>
        <div id="timeline-year">2010</div>
        <div id="timeline-info">Bush joined former president Clinton and President Obama in a fundraiser for Haiti.</div>
        <div id="timeline-year">2013</div>
        <div id="timeline-info">Bush opened his memorial library. In July of that year, he made history by meeting President Obama in Africa to commemorate the 15th anniversary of Bin Laden's first attack on the US. Bush also began to undergo some heart issues, resulting in a stent and multiple hospital visits.</div>
    </div>
       <div class="quote">
            <blockquote><p>"The face of terror is not the true faith of Islam. That's not what Islam is all about. 
                Islam is peace. These terrorists don't represent peace. They represent evil and war. 
                When we think of Islam we think of a faith that brings comfort to a billion people around the world. 
                Billions of people find comfort and solace and peace, and that's made brothers and 
                sisters out of every race, out of every race."</p><footer><cite>George W. Bush on 9/17/2001</cite></footer></blockquote>
    </div>
    <div id="link" class="link">
                    <p>  Here is <a id="tribute-link" href="https://en.wikipedia.org/wiki/George_W._Bush" target="_blank">a link to his Wikipedia page</a>. 
                        To learn more about this President, visit the page and form your own opinions.</p>
    </div>
     <div class="footer" class="footer">Written and Designed by <a href="https://codepen.io/wswalker87/" target="_blank">Scott Walker</a>
    </div>  
 </div>  
</div>

              
            
!

CSS

              
                
.main {
    background-color: rgb(232, 236, 236);
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: repeat(7, auto);
   grid-template-areas: "title title title title"
                        "tag tag tag tag"
                         ". img img ."
                         "timeline timeline timeline timeline"
                         "quote quote quote quote"
                         "link link link link"
                         "footer footer footer footer";
}
.title{
  grid-area: title;
  /* justify-self: center;
  align-self: center;*/
  font-size: 2em;
  word-breaK:break-word;
  display: flex;
  justify-content: center;
}
#tagline{
  grid-area: tag;
  /*justify-self: center;
  align-self: center;*/
  font-size: 2em;
  word-breaK:break-word;
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
}
#img-div{
  grid-area: img;
  justify-self: center;
  align-self: center;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  grid-template-areas: "photo"
                       "caption";
  padding: 10px 10px 10px 10px;
}
#image {
  object-fit: cover;
  /*width: 100%;
  max-height: 100%;*/
  max-width: 500px;
  height: auto;
  grid-area: photo;
  justify-self: center;
  align-self: center;
  border-color: blue;
  border-width: 5px;
  border-style: groove;
  border-radius: 15px;
}
#img-caption{
  grid-area: caption;
  justify-self: center;
  align-self: center;
  display: flex;
  justify-content: center;
  padding-top: 25px;
  padding-bottom: 50px;
  font-size: 2rem;
}
#tribute-info{
  grid-area: timeline;
  border-color: red;
  border-width: 5px;
  border-style: groove;
  border-radius: 15px;
  /*justify-self: center;
  align-self: center;*/
  display: grid;
  grid-template-rows: repeat(22, auto);
  grid-template-columns: auto auto;
  grid-template-areas: "year info";
  word-break: break-word;                      
}
#timeline-year {
  grid-area: year
  align-self: center;  
  /*border-color: black;
  border-width: 2px;
  border-style: solid;
  border-left: 0;
  border-right: 0;*/
  font-size: 2rem;
  word-break: break-word;
  display: flex;
  justify-content: center;

}

#timeline-info {
  grid-area: info
  align-self: center;
  border-color: black;
  /*border-width: 2px;
  border-style: solid;
  border-left: 0;
  border-right: 0;*/
  font-size: 1.5rem;
  padding-left: 3rem;
  display: flex;
  justify-content: flex-start;
}
.quote{
  grid-area: quote;
  padding: 50px 0px 50px 0px;
  font-size: 2rem;
}
.link{
  grid-area: link;
  justify-self: center;
  align-self: center;
  display: flex;
  font-size: 2rem;
  justify-content: stretch;
}
.footer{
  grid-area: footer;
  justify-self: center;
  align-self: center;
  padding-top: 70px;
  display: flex;
  font-size: 2rem;
  justify-content: stretch;
}
a:hover {
  color: red;
  text-decoration: underline overline;
}

/*li{
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
  font-family: avenir;
  font-size: 1.8rem;
  justify-self: start;
  padding: 15px 0px 15px 0px;
}*/
/*body {
              
            
!

JS

              
                
              
            
!
999px

Console