<!DOCTYPE html>
<html>
<head>
<title>Achievements - Aman Babu Hemant</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.badge-grid {
display: grid;
//display: inline-block;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust the width as needed */
//min-width: 200px;
//max-width: 200px;
gap: 20px; /* Adjust the gap between badges */
}
.badge {
text-align: center;
border: 3px solid #ccc;
border-right: 5px solid black;
border-bottom: 5px solid black;
padding: 10px; /* Add padding for spacing */
}
.badge img {
width: 100px;
height: 100px;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 3px solid black;
border-bottom: 3px solid black;
}
.badge h3 {
margin: 10px 0;
}
.badge p {
margin: 10px 0;
}
.badge a {
color: #ccc;
text-decoration: none;
}
</style>
</head>
<body>
<h1>My Achievments..</h1>
<div class="badge-grid">
<div class="badge">
<img src="badges/pe_award_01.png" alt="ProjectEuler Baby Steps">
<h3>Baby Steps</h3>
<p>Solve three problems</p>
<a href="https://projecteuler.net/profile/amanbabuhemant.png">[ProjectEuler]</a>
</div>
<div class="badge">
<img src="badges/pe_award_02.png" alt="ProjectEuler The Journey Begins">
<h3>The Journey Begins</h3>
<p>Progress to Level 1 by solving twenty-five problems</p>
<a href="https://projecteuler.net/profile/amanbabuhemant.png">[ProjectEuler]</a>
</div>
<div class="badge">
<img src="badges/pe_award_03.png" alt="ProjectEuler Decathlete">
<h3>Decathlete</h3>
<p>Solve ten consecutive problems</p>
<a href="https://projecteuler.net/profile/amanbabuhemant.png">[ProjectEuler]</a>
</div>
<div class="badge">
<img src="badges/gh_pullshark.png" alt="GitHub Pull Shark">
<h3>Pull Shark</h3>
<p>2nd pull request merged</p>
<a href="https://github.com/amanbabuhemant">[GitHub]</a>
</div>
<div class="badge">
<img src="badges/hr_python_level_1_stars_2.png" alt="HackerRank Python bronze 2 stars">
<h3>Python Level 1 Star 2</h3>
<p>70 Points earned</p>
<a href="https://hackerrank.com/amanbabuhemant">[HackerRank]</a>
<details><summary>More</summary>
<div class="badge">
<img src="badges/hr_python_level_1_stars_1.png" alt="HackerRank Python bronze 1 star">
<h3>Python Level 1 Star 1</h3>
<p>35 Points earned</p>
<a href="https://hackerrank.com/amanbabuhemant">[HackerRank]</a>
</div>
</details>
</div>
<div class="badge">
<img src="badges/tr_typist_6.png" alt="TypeRacer Typist 6">
<h3>Typist 6</h3>
<p>Completed 1,000 Races</p>
<a href="https://data.typeracer.com/pit/profile?user=aman_babu_hemant">[TypeRacer]</a>
<details><summary>More</summary>
<div class="badge">
<img src="badges/tr_typist_5.png" alt="TypeRacer Typist 5">
<h3>Typist 5</h3>
<p>Completed 500 Races</p>
<a href="https://data.typeracer.com/pit/profile?user=aman_babu_hemant">[TypeRacer]</a>
</div>
<br>
<div class="badge">
<img src="badges/tr_typist_4.png" alt="TypeRacer Typist 4">
<h3>Typist 4</h3>
<p>Completed 250 Races</p>
<a href="https://data.typeracer.com/pit/profile?user=aman_babu_hemant">[TypeRacer]</a>
</div>
<br>
<div class="badge">
<img src="badges/tr_typist_3.png" alt="TypeRacer Typist 3">
<h3>Typist 3</h3>
<p>Completed 100 Races</p>
<a href="https://data.typeracer.com/pit/profile?user=aman_babu_hemant">[TypeRacer]</a>
</div>
<br>
<div class="badge">
<img src="badges/tr_typist_2.png" alt="TypeRacer Typist 2">
<h3>Typist 2</h3>
<p>Completed 50 Races</p>
<a href="https://data.typeracer.com/pit/profile?user=aman_babu_hemant">[TypeRacer]</a>
</div>
<br>
<div class="badge">
<img src="badges/tr_typist_1.png" alt="TypeRacer Typist 1">
<h3>Typist 1</h3>
<p>Completed 10 Races</p>
<a href="https://data.typeracer.com/pit/profile?user=aman_babu_hemant">[TypeRacer]</a>
</div>
</details>
</div>
<!--
<div class="badge">
<img src="badge image path" alt="image alt">
<h3>Badge title</h3>
<p>Badge dexcription</p>
<a href="sitepath">Site name</a>
</div>
-->
</div>
</body>
</html>