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

              
                <body>
  <h1 class="text-center">
    Merci, Arsène Wenger</h1>

  <h5 class="text-center">"My love and support forever.”</h5>

  <h6 class="text-center">- Arsène Wenger</h6>

  <img class="img-fluid" id="left-cannon" align="left" src="https://i.pinimg.com/originals/21/5b/24/215b24eee713a7a2796467ff2adae1a5.png" alt="Picture of Arsenal Cannon" class="img-responsive">
  <img class="img-fluid" id="wenger-photo" align="middle" src="https://static.independent.co.uk/s3fs-public/styles/story_large/public/thumbnails/image/2015/11/11/07/wenger.jpg" alt="Picture of Arsène Wenger at Emirates Stadium." onmouseover="this.src='https://www.arsenal.com/sites/default/files/styles/large_16x9/public/images/wenger_trophies.jpg?itok=lTxykY_U'"
    onmouseout="this.src='https://static.independent.co.uk/s3fs-public/styles/story_large/public/thumbnails/image/2015/11/11/07/wenger.jpg'">
  <img class="img-fluid" id="right-cannon" align="right" src="https://i.pinimg.com/originals/21/5b/24/215b24eee713a7a2796467ff2adae1a5.png" alt="Picture of Arsenal Cannon">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <h3><u>Mini Biography:</u></h3>
      <p>Arsene Wenger was born on October 22, 1949 in Strasbourg, France, Wenger became a professional soccer player for the first time in 1978. He came off as a defender to strengthen the club RC Strasbourg against Monaco. Wenger academic career almost
        smelled his career as a football manager.</p>
      <p>He completed his undergraduate degree at the faculty of engineering and took a master's degree in economics from the University of Starsbourg. Wenger plenty to master a foreign language. In addition to his mother tongue, French, Wenger was able
        to speak the language fluently Alsatian, German, and English. In addition, he is also fluent in Italian, Spanish, and Japanese.</p>
    </div>
    <div class="col-md-4">
      <h3><u>Five Fun Facts:</u></h3>
      <ol>
        <li>Arsene Wenger was a Borussia Monchengladbach fan</li>
        <li>Arsene Wenger has an asteroid named after him.</li>
        <li>Arsene Wenger holds a Master in Economics</li>
        <li>Arsene Wenger used to coach in Japan</li>
        <li>Arsene Wenger is the first Manager from outside the British Isles to win the Premier League.</li>
      </ol>
    </div>
  </div>
</div>

  <br>

  <div class="text-center">
    <h2>Thank you for the memories...</h2>
  </div>

  <section class="timeline">
    <ul>
      <li>
        <div>
          <time><b>1st October, 1996:</b></time><span> Arsène Wenger was unveilved as Arsenal Football Club manager, where he want on to finish 3rd in the League table in his first season.
        </div>
      </li>
      <li>
        <div>
          <time><b>1997/98:</b></time> The Frenchman's first full season got off to a poor start but ended in glory as he led Arsenal to the league and the FA Cup, becoming the first non-British manager to clinch a domestic double in England.
        </div>
      </li>
      <li>
        <div>
          <time><b>1998/99-2000/01:</b></time> Arsenal endured a period of frustration, finishing second in the league behind Manchester United for three seasons.
        </div>
      </li>
      <li>
        <div>
          <time><b>2001/02:</b></time> Wenger signed defender Sol Campbell and a re-galvanised Arsenal reclaimed the league title and completed a second domestic double by winning the FA Cup.
        </div>
      </li>
      <li>
        <div>
          <time><b>2002/03:</b></time> Arsenal retained the FA Cup but Manchester United won the Premier League. Wenger dubbed the campaign a success, saying it was a miracle Arsenal were able to challenge for the league given they spent far less than
          United.
        </div>
      </li>
      <li>
        <div>
          <time><b>2003/04:</b></time> In his best season, Wenger's 'Invincibles' won the Premier League after staying unbeaten for the entire season.
        </div>
      </li>
      <li>
        <div>
          <time><b>2004/05:</b></time> Arsenal started strongly, extending their unbeaten league record to 49 games, but finished second behind Chelsea. Wenger's team beat Manchester United to win the FA Cup.
        </div>
      </li>
      <li>
        <div>
          <time><b>2005/06:</b></time> Wenger took Arsenal to their only Champions League final where they lost to Barcelona. Arsenal finished fourth in the Premier League to seal Champions League qualification for the next season, but prolific forward
          Dennis Bergkamp retired.
        </div>
      </li>
      <li>
        <div>
          <time><b>2006/07:</b></time> Arsenal swapped their historic Highbury ground for the Emirates Stadium, ushering in an era of financial prudence.
        </div>
      </li>
      <li>
        <div>
          <time><b>2007/08-2012/13:</b></time> Arsenal were hindered by their lack of spending in the transfer market but Wenger still managed to consistently finish in the league's top four and ensure a steady stream of Champions League revenue.
        </div>
      </li>
      <li>
        <div>
          <time><b>2013/14:</b></time> Wenger helped Arsenal end their trophy drought with an FA Cup triumph. Arsenal's challenge for the league title ebbed away by March and they finished fourth for the third time in four seasons. Mandela freed.
        </div>
      </li>
      <li>
        <div>
          <time><b>2014/15:</b></time> Wenger bought striker Alexis Sanchez from Barcelona and the Chilean's 25-goal haul helped the team finish third in the league and win another FA Cup.
        </div>
      </li>
      <li>
        <div>
          <time><b>2015/16:</b></time> Arsenal finished second behind shock champions Leicester City, marking the club's highest finish since 2005, but Wenger's team ended the season without a trophy.
        </div>
      </li>
      <li>
        <div>
          <time><b>2016/17:</b></time> Arsenal finished the league campaign outside the top four for the first time under Wenger, meaning the club would not play in the Champions League the following season.
        </div>
      </li>
      <li>
        <div>
          <time><b>2017/18:</b></time> <u>Wenger leaves Arsenal!</u> Wenger announced he would leave the club at the end of the campaign, where Arsenal finished sixth place in the league table, and made it to the Europa League semi-finals.
        </div>
      </li>
    </ul>
  </section>

  <br>
  <br>
  <br>

  <h4 class="text-center">For more on Arsène Wenger and his legacy, view his <a href="https://en.wikipedia.org/wiki/Arsène_Wenger" target="_blank">Wikipedia</a> page.</h4>

  <footer class="text-center">
    <hr>
    <p id="footer">Written, Designed and Coded by Milan Patel.</p>

    <a href="https://www.linkedin.com/in/milan-patel-a003b1a5/" target="blank"><img class="img-fluid" id="linkedin-badge" src="http://www.findandconvert.com/wp-content/uploads/2011/10/LinkedIn-1.png" alt="Picture of linkedIn Badge"></a>
  </footer>
  <br>
</body>
              
            
!

CSS

              
                body {
  background-color: #8A0707;
  color: white;
}

h1 {
  margin-top: 25px;
  font-family: "Palatino", Helvetica;
}

h5 {
  color: silver;
  font-family: "Palatino", Helvetica;
  font-style: italic;
}

h6 {
  color: silver;
  font-size: 15px;
  font-family: "Palatino", Helvetica;
}

img {
  width: 400px;
  height: 300px;
  border-radius: 100px;
  border-style: none;
  border-width: 2px;
  border-color: grey;
  margin-top: 20px;
}

h3 {
  font-family: "Palatino", Helvetica;
}

p {
  color: silver;
  font-family: "Palatino", Helvetica;
  
}

li {
  color: silver;
  font-family: "Palatino", Helvetica;

}

h2 {
  font-family: "Palatino", Helvetica;
  color: white;
  text-decoration: overline;
}

.timeline {
  font-style: italic
}

.timeline ul li { 
  list-style-type: none; 
  position: relative; 
  width: 9px; 
  margin: 0 auto; 
  padding-top: 50px; 
  background: white; 
  color: #8A0707;
   
}
.timeline ul li::after {
  content: '';
  position: absolute; 
  left: 50%; 
  botton: 0; 
  transform: translateX(-50%); 
  width: 30px; 
  height: 30px; 
  border-radius: 50%; 
  background: inherit;  
}

.timeline ul li div{ 
  position: relative; 
  bottom: 0; 
  width: 400px; 
  padding: 15px; 
  background: silver;
  border-radius: 10px;
}
.timeline ul li div::before{ 
  content: ''; 
  position: absolute; 
  bottom: 18px; 
  width: 0; 
  height: 0; 
  border-style: solid;   
}
.timeline ul li:nth-child(odd) div{ 
  left: 48px; 
  bottom: -43px;
  
}
.timeline ul li:nth-child(odd) div::before{
  left: -15px; 
  border-width: 8px 16px 8px 0; 
  border-color: transparent silver transparent transparent; 
}
.timeline ul li:nth-child(even) div{
  left: -439px;
  bottom: -43px;
  
}
.timeline ul li:nth-child(even) div::before { 
  right: -15px; 
  border-width: 8px 0 8px 16px; 
  border-color: transparent transparent transparent silver; 
}

#wenger-photo {
  width: 450px;
  height: 350px;
  margin-left: 15px;
  transition: all 1s;
  border-style: solid;
}

#wenger-photo:hover {
  transform: rotate(360deg);
}

#right-cannon {
  height: 210px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

#left-cannon {
  height: 210px;
}

h4 {
  color: silver;
  font-family: "Palatino", Helvetica;
}

#linkedin-badge {
  height: 30px;
  width: 50px;
  margin-top: -10px;
  margin-left: -5px  
}

#footer {
  color: black;
}

              
            
!

JS

              
                
              
            
!
999px

Console