123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="styles.css">
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="wrapper"> 
		<div class="header">
			<h1 class="main_header">Valentino Rossi</h1>
			<h2 class="h2_main_header">He is one of the most successful motorcycle racers of all time
			</h2>
			<figure>
				<img src="https://cdn-4.motorsport.com/static/img/mgl/11600000/11670000/11673000/11673500/11673584/s8/motogp-yamaha-motogp-unveil-2017-valentino-rossi-yamaha-factory-racing.jpg" alt="valentino rossi">
				<figcaption> Valentino Rossi with his Yamaha Bike </figcaption>
			</figure>
		</div>
		<!-- end div header   -->
		<div class="text">
			
			<h1 class="h1_text">Valentino Rossi Biography</h1>
			<p>Valentino Rossi, the ultimate idol of international motorbike racing, is one of the most talented and successful motorbike racers ever. Harboring a passion for race at a very young age, he won his first world racing title at the age of 18. Since then, he never missed a race and has been making records, one after another. Undoubtedly, he is on the track to becoming a motorbike legend or rather, he is one already! The Italian sensation who turned 34 this year, is also known for being a tad superstitious, especially, before competing in any race. His pre-ride rituals, as they are called, include bending down and holding the right-side foot-peg of his bike with his head bowed. For this he once made a statement, "It’s just a moment to focus and ‘talk’ to my bike, like moving from one place to the next." Today, he is one of most famous celebrities and is one of the greatest sportspersons. His achievements in the sport make him the most successful racer ever. However, this coveted racer is quite discreet about his personal life and likes to stay off the radar. Read more about his life, career and amazing achievements, in the article below.</p>
			<h2>Childhood & Early Life</h2>
			<ul>
				<li>Valentino is the son of Graziano Rossi, who was also a motorcycle racer once. As a child, he was given a kart instead of a bike, because his mother was worried about her son’s safety.</li>
				<li>When he was five, his kart’s 60cc motor was replaced with a 100cc motor for more speed and in 1990 he won the local kart championship.</li>
				<li>By the end of 1991, he had become an expert in minibike riding and had also won many awards.</li>
				<li>He participated in the national kart championships held at Parma and came fifth in the race. In 1993, his father took the help of his former racing friends, one of whom was Claudio Lusuardi, who operated the Cagiva Sport Production team, to provide his son with a Cagiva Mito 125cc motorcycle.</li>
				<li>He crashed his first bike, despite which he was allowed to take part in the Italian Sport Production Championship, where he performed reasonably in the beginning, but later won the title in 1994.</li>
			</ul>
			<h2>Career</h2>
			<ul>
				<li>After winning the championship, he was trained to ride 125cc racing motor bikes and in 1995, he won the Italian 125cc Championship. He also raced in the 125cc European Championship where he claimed the third position.</li>
				<li>His next move was big and ambitious i.e. he participated in the World Championship in 1996 in the Malaysian Grand Prix, where he finished 9th.</li>
				<li>However, he won the 1997 125cc World Championship held in Aprilia, to become the youngest rider ever to claim the championship.</li>
				<li>In 1998, he took up 250cc racing and came second in the World Championship which was won by Loris Capirossi.
				</li>
				<li>He won the 250cc World Championship held in 1999 in Aprilia, where he had won his first world championship title.
				</li>
				<li>In 2000, he signed up with Honda to race in the 500cc class and was mentored by Michael Doohan, a former 500 cc World Champion. He raced that year and finished second to Kenny Roberts, Jr.
				</li>
				<li>The 500 cc World Championship conducted its final race in 2001 and Rossi who had come second the previous year, finished first and claimed the championship.
				</li>
				<li>In 2004, he signed up with Yamaha and raced in the opening season of the Grand Prix in South Africa. He won the championship to become the first ever rider to win premier class championships in a sequence, representing two different manufacturers.
				</li>
				<li>Out of the 16 races held that season he won nine, securing the World Championship title for himself.
				</li>
				<li>The year 2005 was extremely good because he won eleven races in total to become the World Champion that year too.
				</li>
				<li>In 2006, however, he finished second to Nicky Hayden, from Honda, by five points. It was only the second time in his premier class racing career that he came second.
				</li>
				<li>The year 2007, was a little rough for him as he could only win four races owing to several technical problems. He was also injured in one of the races and finished third in the World Championship that year, his lowest achievement since his first championship win.
				</li>
				<li>In 2008, he regained his repute by winning the MotoGP title by winning nine races.
				</li>
				<li>The following year was also very fruitful, but in 2010, he suffered another injury in which he broke his leg while practicing at Mugello. He finished third in the championship and missed four races that season.
				</li>
				<li>In 2011, he left long time sponsor Yamaha to sign a two-year contract with Ducati.
				</li>
				<li>However, in the mid of 2012, he announced that he would go back to Yamaha at the end of the season.
				</li>
			</ul>
			<h2>Awards & Achievements</h2>
			<ul>
				<li>In 2005, Grand Prix motorcycle racing season, he won his 7th World Championship and fifth consecutive MotoGP Championship. That year he earned a place among the only five riders in the history of motorcycle racing to win premier-class title five times.</li>
				<li>As of 2013 he has won an grand total of 106 races, 80 of which are 500cc/MotoGP championships.
				</li>
			</ul>
			<h2>Personal Life & Legacy</h2>
			<ul>
				<li>In 2007, he was suspected of tax evasion for which he paid 35 million euros to the Italian tax authorities to arrive at a settlement.
				</li>
				<li>He is a fan of the Italian football club Internazionale, who congratulated him in October 2009, on his ninth World Championship win, through their website.
				</li>
			</ul>
			<h2>Trivia</h2>
			<ul>
				<li>This renowned World Champion motorbike racer from Italy goes by the nickname ‘the Doctor’.
				</li>
				<li>He has always ridden under the number 46 which also happens to be the number that his father rode with in his racing days.
				</li>
			</ul>
			<blockquote>"I am Valentino Rossi. If I stay MotoGP it is to try to win.When that is not possible it is time to stay at home nd work in the garden!"<br>
				<em>-Valentino Rossi</em></blockquote>

				<p class="links">More Information at <a href="https://en.wikipedia.org/wiki/Valentino_Rossi">Wikipedia</a> or <a href="https://www.thefamouspeople.com/profiles/valentino-rossi-4159.php">Thefamouspeople.com</a></p>
				
			</div>
			<!-- end div text   -->
			<footer>
				Written and coded by <a href="https://codepen.io/Adler9/">Andrii</a>
			</footer>
		</div> 
		<!--  end div wrapper  -->
	</body>
	</html>

</body>
</html>
            
          
!
            
              

.wrapper {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: 70px;
	margin-left: 70px;
}
.header {
	background: linear-gradient(  #0D61BC , #8AA9D6);
	padding: 50px 60px 50px 60px;
	border-radius: 20px;
} 

.main_header {
	color: yellow;
	text-align: center;
	font-family: Lobster;
	font-size: 72px;
	margin-top: 20px;
	text-shadow: -5px -5px 5px violet;
	margin-bottom: 10px;
}

.h2_main_header {
	font-family: Lobster;
	text-align: center;
	color: blue;
	font-size: 50px;
	margin-bottom: 0;
	text-shadow: -5px -5px 0px orange;
	margin-top: 0;
}

figure { 
	text-align: center;
	display: block;
	position: relative;
}

img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 35px;
	border: solid orange;
}

figcaption {
	
	font-size: 30px;
	color: yellow;
	text-shadow: -2px -2px 2px violet;
	font-family: Lobster;
}

.text {
	background-color: #8AA9D6;
	border-radius: 20px;
	padding: 0 50px 40px 50px;
}



.h1_text {
	text-align: center;
	margin-top: 0;
	font-style: italic;
}

p {
	text-indent: 1.5em;
}
	
blockquote {
	color: ;
	font-size: 30px;
}
em {
	font-style: italic; 

}

.links {
	font-size: 35px;
}

footer {
	text-align: center;
	margin-top: 30px;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console