John Norman• 880
@norman02
Posted
This is a hard project to start with. There are a couple issues with sizing the components and the background. Also see your report for HTML and accessibility issues. There are a couple ways to style the status bar. Here is what I did:
<div id="status-panel">
<p id="storage-message">You’ve used <em>815 GB</em> of your storage</p>
<div id="status-bar">
<div id="status-bottom">
<div id="status-middle">
<div id="status-top"></div>
</div>
</div>
</div>
<div id="status-text">
<p>0 GB</p>
<p>1000 GB</p>
</div>
css:
#status-bar {
margin-left: 3rem;
width: 85%;
}
#status-bottom {
background-color: var(--VeryDarkBlue);
width: 100%;
height: 1.8rem;
display: flex;
border-radius: 10px;
}
#status-middle {
background: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
width: 81.5%;
height: 1.4rem;
margin: 0.2rem;
z-index: 1;
position: relative;
border-radius: 10px;
display: flex;
}
#status-top {
z-index: 2;
background-color: white;
height: 1.2rem;
width: 1.2rem;
margin: 0.1rem;
border-radius: 100%;
position: absolute;
right: 0;
top: 1;
}
2