- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Progress</title>
<style>
body {
display: flex;
width: 500px;
padding: 20px 0;
justify-content: center;
align-items: center;
background-color: #f8f8f8;
font-family: 'Arial', sans-serif;
}
.container {
width: var(--container-width);
padding: var(--container-padding);
background: white;
border-radius: var(--border-radius);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.item {
display: flex;
align-items: center;
gap: var(--item-gap);
padding: 15px 0;
border-bottom: 1px solid #ddd;
}
.item:last-child {
border-bottom: none;
}
.icon {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 50%;
}
.gold {
background-color: #fbc02d;
}
.purple {
background-color: #7b1fa2;
}
.orange {
background-color: #e64a19;
}
.text h4 {
margin: 0;
font-size: 25px;
font-weight: bold;
}
.text p {
margin: 3px 0 0;
font-size: 14px;
color: #555;
}
.date {
margin-bottom: 5px;
font-size: 12px;
color: #888;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<div class="icon gold"></div>
<div class="text">
<div class="date">Today</div>
<h4>5,72 KM</h4>
<p>30 days nonstop run. Congrats!</p>
</div>
</div>
<div class="item">
<div class="icon purple"></div>
<div class="text">
<div class="date">Yesterday</div>
<h4>12,876 Steps</h4>
<p>You reached 200K foot steps this month. You are awesome!</p>
</div>
</div>
<div class="item">
<div class="icon orange"></div>
<div class="text">
<div class="date">1 march</div>
<h4>11,983 Steps</h4>
<p>Another 10K steps, you are awesome!</p>
</div>
</div>
</div>
</body>
</html>
CSS
:root {
}
- Goal
- Result
- Overlay
- Differences
- ?
Press Compare to send your code for review.