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>
<body>
  <main id="main">
    <h1 id="title">Cristiano Ronaldo - CR7</h1>
    <p id="tribute-info">O melhor jogador do mundo</p>
    <div id="img-div" class="flex-container">
      <figure id="img-caption">
        <img id="image" src="https://i.imgur.com/a3XapiZ.png">
        <figcaption>Cristiano Ronaldo em ação pela Juventus</figcaption>
      </figure>
    </div>
    <div class="grid-container">
      <section id="infancia" class="grid-1">
        <h3 id="infancia-titulo">Infância</h3>
        <p class="descricao">Cristiano Ronaldo dos Santos Aveiro nasceu na cidade de Funchal, na Ilha da Madeira, Portugal, no dia 05 de fevereiro de 1985. Filho caçula do jardineiro José Diniz Pereira Aveiro e da cozinheira Maria Dolores dos Santos Aveiro, quando criança passava a maior parte de seu dia jogando bola na rua com os amigos.</p>
      </section>
      <section id="carreira" class="grid-2">
        <article id="inicio">
          <h3 id="inicio-carreira">Início da carreira</h3>
          <p class="descricao">Cristiano Ronaldo começou sua carreira aos 9 anos de idade quando estreou no Futebol Clube Andorinha, na Ilha da Madeira. Com grandes habilidades logo despertou o interesse do maior clube da ilha, o Nacional, que o contratou em 1995.</p>
        </article>
        <article id="first-team">
          <h3 id="sporting-title">Sporting Lisboa</h3>
          <p class="descricao">No dia 14 de abril de 1997, Cristiano Ronaldo fez o teste no Sporting Lisboa e, com apenas 11 anos entrou para as categorias de base do clube, onde jogou no Sub 16, Sub 17 e no Sub 18.</p>
          <img class="carreira-img" src="https://i.imgur.com/71GELPB.png" alt="Foto de CR7 atuando pelo Sporting">
          <p class="descricao">No dia 13 de julho de 2002, Ronaldo entrou como titular na equipe principal do Sporting. Desse dia em diante disputou mais de 30 partidas com a equipe e marcou 5 gols.</p>
        </article>
        <article id="second-team">
          <h3 id="manchester-united">Manchester United</h3>
          <p class="descricao">Em 2003, Cristiano Ronaldo chamou a atenção do técnico do Manchester United, da Inglaterra. Foi contratado para substituir o jogador David Beckham, que havia sido contratado pelo Real Madrid, da Espanha.</p>
          <img class="carreira-img" src="https://i.imgur.com/8TDSJuv.png" alt="Foto de CR7 atuando pelo Manchester United">
          <p class="descricao">No Manchester, Ronaldo conquistou vários campeonatos e começou a mostrar seu estilo.</p>
        </article>
        <article id="third-team">
          <h3 id="real-madrid">Real Madrid</h3>
          <p class="descricao">Em 2008, depois de muitas especulações, Cristiano Ronaldo foi para o Real Madrid, e participou da temporada 2009-2010. Sua contratação foi a mais cara do clube, que tinha outros jogadores de destaque mundial como Kaká, Zidane, Ronaldo e Roberto Carlos, que fizeram parte da primeira fase das grandes estrelas do time espanhol, que ficaram conhecidos como os Intergalácticos.</p>
          <img class="carreira-img" src="https://i.imgur.com/1M3MriV.png" alt="Foto de CR7 atuando pelo Real Madrid">
          <p class="descricao">Em 2011, Ronaldo chegou a marcar 53 gols, número nunca alcançado antes pelo clube durante uma temporada</p>
        </article>
        <article id="fourth-team">
          <h3 id="juventus">Juventus</h3>
          <p class="descricao">No dia 10 de julho de 2018, foi anunciada a transferência de Cristiano Ronaldo para a Juventus. Sua estreia foi no dia 17 de agosto na série A do Campeonato Italiano, no jogo Juventus e Chievo, mas só no quaro jogo, conta o Sassuollo, que Cristiano Ronaldo marcou dois gols e garantiu a vitória por 2 a 1.</p>
          <img class="carreira-img" src="https://i.imgur.com/D6dA7wk.png" alt="Foto de CR7 atuando pela Juventus">
          <p class="descricao">Em sua estreia pela Liga dos Campeões da UEFA de 2018-19, no jogo contra o Valencia, Ronaldo acabou expulso no primeiro tempo depois de desentendimentos com o colombiano Jeison Murillo.<br><br>No dia 16 de janeiro de 2019, Cristiano levantou a primeira taça com a camisa do Juventus, ao marcar o gol do título da Supercopa da Itália de 2018, frente ao Milan pelo placar de 1-0.<br><br>Na partida de ida das oitavas de final da Liga dos Campeões da UEFA de 2018-19, o Juventus perdeu de 2-0 para o Atlético de Madri. Na partida de volta, no dia 12 de março de 2018, Cristiano Ronaldo garantiu a classificação marcando 3 gols na vitória de 3-0.</p>
        </article>
      </section>
      <section id="titulos" class="grid-3">
        <h3 id="titulos-title">Títulos</h3>
        <p id="sporting-titulos"><strong>Sporting Lisboa</strong></p>
        <ul>
          <li>Supertaça de Portugal 2002</li>
        </ul>
        <p id="manchester-titulos"><strong>Manchester United</strong></p>
        <ul>
          <li>Copa da Inglaterra 2003-2004, 2007-2008</li>
          <li>Copa da Liga Inglesa 2005-2006</li>
          <li>Campeonato Inglês 2006-07, 2007-08</li>
          <li>Liga dos Campeões da Europa 2007-2008</li>
          <li>Mundial de Clubes 2008</li>
        </ul>
        <p id="real-madrid-titulos"><strong>Real Madrid</strong></p>
        <ul>
          <li>Campeonato do Mundo de Clubes da FIFA: 2014, 2016, 2017</li>
          <li>Liga dos Campeões da UEFA: 2013–14, 2015–16, 2016–17, 2017–18</li>
          <li>Supercopa da UEFA: 2014, 2017</li>
          <li>Campeonato Espanhol: 2011–12, 2016–17</li>
          <li>Copa do Rei: 2010–11, 2013–14</li>
          <li>Supercopa da Espanha: 2012, 2017</li>
        </ul>
      </section>
      </div>
        <h3>Se você tiver tempo, você deveria ler um pouco mais a respeito de um dos maiores futebolistas que já existiu, <a href="https://pt.wikipedia.org/wiki/Cristiano_Ronaldo" id="tribute-link" target="_blank">acessando sua página no Wikipedia</a></h3>
  </main>
</body>
              
            
!

CSS

              
                body {
  background: #EEEEEE;
  font-family: calibri;
}

h1, h3, p {
  text-align: center;
}

.flex-container {
  display: flex;
  justify-content: center;
}

#img-div {
  background: #F5F5F5;
  margin: 20px;
  border-radius: 50px;
}

img {
  max-width: 100%;
  display: block;
}

#image {
  border-radius: 50px;
  border-width: 2px;
  border-style: solid;
  border-color: #000000;
}

figcaption {
  margin: 10px;
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

.grid-1 {justify-self: center;}
.grid-2 {justify-self: center;}
.grid-3 {justify-self: center;}

.descricao {
  text-align: justify;
  max-width: 600px;
}

.carreira-img {
  max-width: 500px;
  max-height: 500px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
              
            
!

JS

              
                
              
            
!
999px

Console