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

              
                <head>
  <title>Francesco Totti - Tribute Page</title>
</head>

<body>
  <div class="container">
    
<!-- FIRST JUMBOTRON -->   
    
    <div class="jumbotron">
      <div class="row">
        <div class="col-xs-12">
          <h1><strong>FRANCESCO TOTTI</strong></h1>
          <h2><b>10</b></h2>
          <div class="col-xs-12">
            <img src="https://upload.wikimedia.org/wikipedia/it/thumb/b/ba/FIFA_World_Cup_Icon_%28Campionato_mondiale_di_calcio%29.svg/10px-FIFA_World_Cup_Icon_%28Campionato_mondiale_di_calcio%29.svg.png" alt="World Cup Winner"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Scudetto.svg/18px-Scudetto.svg.png"
              alt="Serie A Winner"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Super_coppa_italiana.svg/12px-Super_coppa_italiana.svg.png" alt="Supercoppa Italiana Winner"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Super_coppa_italiana.svg/12px-Super_coppa_italiana.svg.png"
              alt="Supercoppa Italiana Winner"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Coccarda_Coppa_Italia.svg/20px-Coccarda_Coppa_Italia.svg.png" alt="Coppa Italia Winner"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Coccarda_Coppa_Italia.svg/20px-Coccarda_Coppa_Italia.svg.png"
              alt="Coppa Italia Winner">
          </div>
        </div>
        <div class="col-xs-12">
          <img src="http://idols-on-canvas.com/home/sys/images/francesco-totti-image-2.jpg" alt="Totti painting" height="350">
        </div>
      </div>
    </div>
    
<!-- SECOND JUMBOTRON -->
    
    <div class="jumbotron">
      <div class="row">
        <div class="col-xs-12" id="textabout">
          <p>Francesco Totti (born 27 September 1976) is an Italian professional footballer who plays for and captains Roma. His primary playing positions are those of an attacking midfielder or second striker, although he has also been successfully utilised
            as a lone striker and as a winger.
            <br><br> Totti has spent his entire career at Roma, winning a Serie A title, two Coppa Italia titles, and two Supercoppa Italiana titles; he is the top goalscorer and the most capped player in the club's history. Totti also holds the record
            for the youngest club captain in the history of Serie A. Often referred to as Il Bimbo d'Oro (The Golden Boy), Il Re di Roma (The King of Rome), Er Pupone (The Big Baby), and Il Gladiatore (The Gladiator) by the Italian sports media, Totti
            is the top goalscorer amongst currently active players in Serie A, and the second highest scorer of all-time in Italian league history with 250 goals; he also holds the record for the most goals scored in Serie A while playing for a single
            club.
            <br><br> A creative offensive playmaker, renowned for his vision, technical ability, and goalscoring, Totti is considered to be one of the greatest Italian players of all time, one of the most talented players of his generation, and also Roma's
            greatest ever player. He has won a record eleven Oscar del calcio awards from the Italian Footballers' Association, which consists of five Serie A Italian Footballer of the Year awards, two Serie A Footballer of the Year awards, two Serie
            A Goal of the Year awards, one Serie A Goalscorer of the Year award and one Serie A Young Footballer of the Year award. Totti is the fifth highest scoring Italian in all competitions, with 316 goals.
            <br><br> A 2006 <abbr title="Fédération Internationale de Football Association" class="initialism">FIFA</abbr> World Cup winner and <abbr title="Union of European Football Associations" class="initialism">UEFA</abbr> Euro 2000 finalist with
            Italy, Totti was selected in the All-Star team for both tournaments; he also represented his country at the 2002 World Cup, and at Euro 2004. He has also won several individual awards, notably the 2007 European Golden Shoe and the Golden Foot.
            In 2004, he was named in the <abbr title="Fédération Internationale de Football Association" class="initialism">FIFA</abbr> 100, a list of the world's greatest living players, selected by Pelé, as part of <abbr title="Fédération Internationale de Football Association"
              class="initialism">FIFA</abbr>'s centenary celebrations. In 2011, Totti was recognised by <abbr title="International Federation of Football History & Statistics" class="initialism">IFFHS</abbr> as the most popular footballer in Europe. In
            November 2014, Totti extended his record as the oldest goalscorer in <abbr title="Union of European Football Associations" class="initialism">UEFA</abbr> Champions League history, aged 38 years and 59 days.
          </p>
          <p><strong>READ MORE ABOUT FRANCESCO TOTTI ON
            <a title="Go on Wikipedia page about Francesco Totti" href="https://en.wikipedia.org/wiki/Francesco_Totti" target="_blank">WIKIPEDIA
            </a></strong>
          </p>
        </div>
      </div>
    </div>
    
<!-- THIRD JUMBOTRON -->
    
    <div class="jumbotron">
      <div class="video-container">
        <iframe src="https://www.youtube.com/embed/ioJuL62afVU" frameborder="0" allowfullscreen>
        </iframe>
      </div>
    </div>
    
<!-- FOURTH JUMBOTRON -->
    
    <div class="jumbotron">
      <h3><strong>Francesco Totti's time line</strong></h3>
      <p>
        <ul>
          <li><b>28 March 1993:</b> First appearance</li>
          <li><b>4 September 1994:</b> First goal</li>
          <li><b>31 October 1998:</b> Becames Captain</li>
          <li><b>17 June 2001:</b> Champion of Italy</li>
          <li><b>17 June 2007:</b> European Golden Shoe</li>
          <li><b>9 July 2006:</b> World Cup</li>
          <li><b>19 April 2009:</b> With 175 goals becames the highest scorer of all time in the AS Roma's history
            <li><b>21 January 2012:</b> With 211 goals becames the highest scorer of all time with the same team in Serie A</li>
            <li><b>17 March 2013:</b> With 226 goals becames the second highest scorer of all time in Serie A</li>
        </ul>
      </p>
    </div>
  
<!-- FIFTH JUMBOTRON -->
  
    <div class="jumbotron">
      <blockquote>
        <p><em>Totti is the best player in the world. He has just been a little unlucky in the past.</em></p>
        <footer><strong>Pelé</strong></footer>
      </blockquote>
      <br>
      <br>
      <blockquote class="blockquote-reverse">
        <p><em>He is a great player and he will keep on showing that. He represents Italian soccer and the Italian fans will have fun with him.</em></p>
        <footer><strong>Diego Armando Maradona</strong></footer>
      </blockquote>
      <br>
      <br>
      <blockquote>
        <p><em>Totti is an artist of football, a true Number 10, just like I was.</em></p>
        <footer><strong>Michel Platini</strong></footer>
      </blockquote>
      <br>
      <br>
      <blockquote class="blockquote-reverse">
        <p><em>There are many star players in Italy, but the only one I would bring to Bayern Munich would be Totti. I know him well and he deserves to win the Ballon d'Or.</em></p>
        <footer><strong>Franz Beckenbauer</strong></footer>
      </blockquote>
      <br>
      <br>
      <blockquote>
        <p><em>I spent a lot of money in my life to build a powerful team like Real Madrid, but my desire, I always liked the captain of Roma, Francesco Totti. Unfortunately, it was impossible to reach him because Totti always want to remain with his club and his city.</em></p>
        <footer><strong>Florentino Pérez</strong></footer>
      </blockquote>
      <br>
      <br>
      <blockquote class="blockquote-reverse">
        <p><em>He is not only the King of Rome, but of the world. He is unique and it’s a pleasure to have players like Totti in the side.</em></p>
        <footer><strong>Luis Enrique</strong></footer>
      </blockquote>
      <br>
      <br>
      <blockquote>
        <p><em>Totti is more than a simple player for Roma. He is outstanding, the team's real standard bearer.</em></p>
        <footer><strong>Laurent Blanc</strong></footer>
      </blockquote>
      <br>
      <br>
      <blockquote class="blockquote-reverse">
        <p><em>Totti is a top, top class player. He is typical of the Roman game and I’m sure he will never move outside of Roma. He used to play in behind the strikers and then one day they had no central striker so they played him up front and won game after game. He suddenly became the topscorer in Italy as a central striker. That means this guy has absolutely everything. He has a fantastic protection of the ball, he has a quick turn and then he has a very good pass in the final third of the pitch. He can be deadly with every single pass. He will certainly be the most dangerous provider in the final third for them in this game. He is not the only player who can be dangerous but he can open the defence with any pass at any moment of the day if you give him the freedom.</em></p>
        <footer><strong>Arsene Wenger</strong></footer>
      </blockquote>
      <br>
      <br>
      <blockquote>
        <p><em>Only Gigi Riva could kick the ball like him in Italy. But only with his left foot. Totti can use both feet and can hit the ball in several ways. Such champions can shoot ten times per match and eight of them are aimed on target, while five are very dangerous and can turn into a goal. Totti's shooting qualities are unique and they will stay intact for life.</em></p>
        <footer><strong>Fabio Capello</strong></footer>
      </blockquote>
      <br>
      <br>
      <blockquote class="blockquote-reverse">
        <p><em>You know more than me what Totti means for Roma, for the Serie A, and for his team-mates. I want him to play because he's the best player in the Italian championship in terms of spectacle and quality of play.</em></p>
        <footer><strong>José Mourinho</strong></footer>
      </blockquote>
    </div>
  
  
    <p class="text-center">Built by<a title="Mirko Sorbara's Linkedin profile" href="https://it.linkedin.com/in/mirkosorbara" target="_blank"><strong> Mirko Sorbara</strong></a></p>

</body>
              
            
!

CSS

              
                /* GENERAL SETTING */

body {
  background-color: #A79660;
  margin: 0 auto;
  padding: 0 auto; 
}

.jumbotron {
  background-color: #862633;
  color: #f2a900;
  text-align: center;
  font-family: Verdana;
}

p {
  text-align: left;
  margin-right: 15px;
}

a {
  color: black;
}

/* FIRST JUMBOTRON */

h1 {
  margin-top: -15px;
}

img {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* SECOND JUMBOTRON */

#textabout {
  margin-top: 0px;
  margin-right: 20px;
  margin-bottom: -15px;
  margin-left: 20px;
}

/* THIRD JUMBOTRON */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* FOURTH JUMBOTRON */

li {
  text-align: left;
  font-size: 20px;
}

/* FIFTH JUMBOTRON */

footer {
  float: left;
  font-size: 20px !important;
}

              
            
!

JS

              
                
              
            
!
999px

Console