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

              
                <!DOCTYPE html>
<html lang="en">
  <head>  
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
    <title>Simona Halep </title>
  </head>
  <body>
    <header>
      <h1 id="title">Simona Halep</h1>
      <h3>The champion</h3>
    </header>
    <main id="main">
    <div id="img-div">
      <figure>
        <img id="image" src="https://cdn.fanatik.ro/wp-content/uploads/2019/07/simona-halep-serena-williams-2-1.jpg" alt="Simona Halep Wimbledon">
        <figcaption id="img-caption">Simona Halep winning her first Wimbledon title in 2019</figcaption>
      </figure> 
     </div>
      <section id="tribute-info">
        <h2>Biography</h2>
      <ul>
    <li>In 2008, at the age of 17, she started participating in junior competitions and entered the main draw as the ninth seed at the ‘Roland Garros Junior Championships.’ Halep played at many senior developmental ‘International Tennis Federation’ (ITF) tournaments during the spring of that year and won two $10,000 tournaments in Bucharest.</li>
<li>In 2009, she won $50,000 at a tournament in Makarska and attempted to qualify for a ‘Grand Slam’ at the ‘Roland Garros.’ The same year, she won a $25,000 ‘ITF’ tournament in Maribor. She also made her way to the semifinals of the indoor $50,000 ‘ITF’ tournament in Minsk, Belarus, and played brilliantly at a $25000 ‘ITF’ tournament played in Opole, Poland, in November.</li>
<li>In 2010, she lost the ‘Australian Open.’ However, during the ‘Andalucia Tennis Experience,’ at the clay court of Marbella, she secured a breakthrough by winning three matches and then qualified for the ‘Barcelona Ladies Open.’ In May 2010, she qualified for her first-ever ‘Grand Slam’ main draw, at the ‘French Open,’ but was defeated. In August 2010, she qualified for the main draw of the ‘US Open’ and lost there, too.</li>
<li> Halep reached the quarterfinals of the 2011 ‘ASB Classic’ in January 2011. For the first time in her career, she secured a spot in the third round of a ‘Grand Slam’ senior tournament, at the 2011 ‘Australian Open.’ However, she faced defeat there, too, and could not move on to the fourth round. She lost the ‘French Open’ and the ‘BGL Luxembourg Open’ in 2011. However, she was top-seeded at the 2011 ‘BCR Open Romania Ladies.’</li>
<li>Again, in 2012, she lost the ‘Australian Open.’ However, she made it to the third round of the ‘Indian Wells Masters’ in 2012 and the ‘Miami Masters’ the same year. Halep played at the 2012 ‘Brussels Open’ and managed to secure a place in the semifinals of the ‘WTA’ event.</li>
 <li> At the ‘French Open’ in 2013, she faced her second successive ‘Grand Slam’ first-round exit. She won the ‘Budapest Grand Prix’ but lost the ‘Cincinnati’ championships. However, despite many failures on her journey uphill, she was ranked No. 11 on the global list of women tennis players in 2013–2014.</li>
<li>She played at the ‘Sydney International’ in January 2014 and was the No. 7 seed in a draw that contained six of the ‘WTA’s top 10 players. In the 2014 ‘Australian Open,’ she was the No. 11 seed.</li>
 <li>In 2015, she won her ninth ‘WTA’ title at the ‘Shenzhen Open’ and her tenth title at the hardcourt event in Dubai. This helped her regain the third spot in the WTA rankings. At ‘Wimbledon,’ she was one of the six seeded female players who were knocked out in the first round. She competed at the 2015 ‘WTA Finals’ in Singapore and secured the second spot in the ‘WTA’ rankings. She clocked the best year-end ranking after winning three titles.
In 2016, she reached the semifinals of the Sydney tournament. She lost her first match at the ‘Fed Cup.’ However, despite the loss, she was chosen for Romania’s ‘Fed Cup World Group Playoffs.’ She faced defeat later at the ‘French Open’ and lost to Serena Williams at the ‘US Open’ in 2016.</li>
<li>She lost in the second round of the ‘Shenzhen’ tournament in 2017 and the first round of the ‘Australian Open’ that year. She played at the ‘St. Petersburg Ladies’ Trophy’ in 2017 but was later forced to withdraw due to an injury. She was seeded third at the ‘French Open’ in 2017, but she lost the final match. She also lost in the first round at the 2017 ‘US Open.’ She became the seventh player to achieve the No. 1 rank without winning any ‘Grand Slam’ tournaments.</li>
<li>In 2018, she won her first-ever ‘WTA’ doubles title at the ‘Shenzhen’ tournament, with partner Begu. She was defeated at the ‘Australian Open’ but won the ‘French Open’ title the same year.</li>
<li>In 2019, Simona Halep won her first Wimbledon title, when she defeated seven-time champion Serena Williams in the finals. </li>    
      </ul> 
      </section>
    </main>
      <footer>For more info, please visit
        <a href = "https://www.thefamouspeople.com/profiles/simona-halep-15433.php" target="_blank" id="tribute-link"> the link </a>
        <p>	&copy; 2019 Ioana-Maria Filip</p>
    </footer>
  </body>
</html>

              
            
!

CSS

              
                header, footer {
  text-align: center;
  background-image: linear-gradient(lightgrey, silver, lightgrey);
  padding: 10px 20px;
  font-family: 'Dancing Script', cursive;
  font-size: larger;
  border-radius: 10px;
}

main {
  background-image: linear-gradient(seashell, pink, seashell);
  padding: 10px 10px;
  margin: 20px 0px;
  border-radius: 10px;
}

img {
  max-width: 100%;
  display: block;
  border-radius: 20px;
  text-align: inherit;
}

img:hover {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(255,255,255, 0.5);
}

#img-div {
  text-align: center;
 
  height: auto; 
  width: 100%;
}

#img-caption {
  text-align: inherit;
  font-style: italic;
}
              
            
!

JS

              
                
              
            
!
999px

Console