Skip to content
OverviewSolutions
4
Comments
3
KOMA TOZ
@Maksym-Paselsky

All comments

  • KOMA TOZ•110
    @Maksym-PaselskyPosted over 1 year ago

    👋 Hi

    Email validation pattern not validating my email 🙃 [email protected] because it has a dot. You can use more general pattern like this one.

    ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

    On second step it's more intuitive to click on toggle itself rather than words "Montly" & "Yearly".

    Marked as helpful
    0
  • JessicaSamtani•160
    @JessicaSamtaniSubmitted over 1 year ago

    Starting out with front end developing with this as my first project.

    Initially writing of the media query was tricky, wonder if following the style guide is the best idea as the max/min widths could have been a bigger size.

    Open to any suggestions

    Responsive Product Preview Card

    3
    KOMA TOZ•110
    @Maksym-PaselskyPosted over 1 year ago

    Hi 👋

    You can use flex on button to center the icon and text so they appear in one line.

    display:flex;
align-items:center;
justify-content:center;

    and add little margin to icon✨

    button > img {
margin-right:20px;
}

    Also, you can use more abstact css classes name for example change perfume to product. I know it's not a real project but treat it like it is📝.

    Nice work! Keep it going! 👨‍💻

    Marked as helpful
    0
  • KOMA TOZ•110
    @Maksym-PaselskyPosted over 1 year ago

    Hi,

    I think you can use same style for statictic containers and separate style for colors.

    Basically all four statistics are the same but different colors. To avoid code duplication you can use separate styles 📝

    .statistic-container{
    display: flex;
    border-radius: 10px;
    gap: 60px;
    padding: 0 10px 0 10px;
    width: 100%;
} 
.red {
 background: hsla(0, 91%, 73%, 0.08);
}

    and then combine styles in HTML 🪄

     <div class="statistic-container red">...</div>
 <div class="statistic-container yellow">...</div>

    same goes for other styles related to statistic

    also you can aplly mobile styling using media-query by changing flex-direction.

    Nice work. Keep going🤘

    Marked as helpful
    0