Hey there, aspiring coders! Today, we’re going to blend the excitement of web development with the thrill of paying tribute to your favorite sportsperson. Get ready to dive into HTML and CSS to create a cool interactive webpage that showcases your sports icon. Let’s get started!
My favorite sportsperson is M.S. Dhoni. So here is a picture of him. You could download your favorite.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Favorite Sportsperson</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Mahendra Singh Dhoni </h1>
</header>
<main>
<div class="animation"></div>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="content-container">
<div class="image-container">
<img class="sports-person-image" src="sports-person.png" alt="">
</div>
<div class="desc-container">
Mahendra Singh Dhoni (/məˈheɪndrə ˈsɪŋ dhæˈnɪ/ ⓘ; born 7 July 1981) is an Indian professional cricketer. He is a right handed batter and a wicket-keeper. Widely regarded as one of the most prolific wicket-keeper-batsmen and captains, he represented the Indian cricket team and was the captain of the side in limited-overs formats from 2007 to 2017 and in test cricket from 2008 to 2014. Dhoni has captained the most international matches and is the most successful Indian captain. He has led India to victory in the 2011 Cricket World Cup, the 2007 ICC World Twenty20 and the 2013 ICC Champions Trophy, the only captain to win three different limited overs tournaments. He also led the teams that won the Asia Cup in 2010, 2016 and was a member of the title winning squad in 2018
</div>
</div>
</main>
<footer>
<p>© 2024 Electronics Simplified</p>
</footer>
</body>
</html>
/* Global styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 5px 0;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
/* Component styles */
.button {
background-color: #ccc;
width: 50px;
height: 20px;
border: none;
border-radius: 5px;
}
.animation {
width: 50px;
height: 20px;
background-color: rgb(255, 208, 0);
animation: charge 10s infinite alternate;
}
@keyframes charge {
0% { width: 1%; }
100% { width: 100%; }
}
.navbar {
/* Add styles for the navigation bar */
}
.navbar ul {
list-style-type: none;
padding: 0;
}
.navbar li {
display: inline;
margin-right: 10px;
}
.navbar a {
text-decoration: none;
color: #333;
padding: 5px 10px;
border: 1px solid #333;
border-radius: 5px;
}
.image-container{
width: 50%;
}
.desc-container{
width: 50%;
margin-left: 10px;
}
.image-container img{
width: 100%;
}
.content-container{
display: flex;
}
Ensure that you have all the files saved in the same folder. In case you do not do that, the HTML file will look scary and the image wont appear too.
Great job, coding enthusiasts! You’ve crafted an awesome tribute webpage for your favorite sportsperson using HTML and CSS. Now, feel free to tweak and personalize your design further. Add more elements, experiment with colors, and let your creativity shine. Remember, coding is all about exploration and expression. Keep coding, keep learning, and keep building amazing things! Happy coding!
One Reply on “Favorite Sportsperson Web page HTML for Kids”