Submitted about 2 years ago

desktop page

Hibatul Rahman Adeeb Peerboccus•50

@adeeb-peerboccus

Preview site View code

This is a solution for...Fylo data storage component

HTML
CSS

2junior

Design comparison

SolutionDesign

Community feedback

Suraj Raju Hadage•670

@SurajHadagePosted about 2 years ago

Okay! your design look pretty cool but here is what can you do to improve it. Use <!DOCTYPE html> at top of your document. You can make all the design inside <main> tag. And take tow <div>. Always use <h1> tag. Here for you have used 815gb of 1000gb. For icons you have used <a> tag, images inside <a> tag is not accessible, try to use only text inside <a>. For more accessibility and ease to make that range one thing you can do with that range illustration is

      <div class="bar-container">
        <input type="range" class="range" min="0" max="1000" value="1000" disabled>
      </div>

And

.bar-container {
    height: 20px;
    width: 100%;
    margin-top: 20px;
    background-color: var(--Very-Dark-Blue);
    border-radius: 10px;
    overflow: hidden;
    padding: 2px;
}
.range {
    -webkit-appearance: none;
    appearance: none;
    width: 81.5%;
    height: 90%;
    border-radius: 10px;
    background-image: linear-gradient(90deg,hsl(6, 100%, 80%), hsl(335, 100%, 65%));
    outline: none;
}
.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
}
.range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #fff;
}

That's it from me. Happy coding.

Marked as helpful

Hibatul Rahman Adeeb Peerboccus•50

@adeeb-peerboccusPosted about 2 years ago

@SurajHadage thank you very much. i appreciate the comments as I am still new to coding.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord