Skip to content
OverviewSolutions
22
Comments
11

Shiv

@undrthegraveyardAustralia350 points

G'day, ☘️ I'm a Designer and a Developer with a passion for problem-solving and creating intuitive designs. ⚜️ And I do both.✌🏻 Cheers.🍻

I’m currently learning...

HTML5, CSS3, and JavaScript

Latest solutions

View more solutions

Latest comments

  • P
    Prem Kumar•370
    @prem-kumartSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?
    • I learned on async/await usage while extracting data from json files.
    What challenges did you encounter, and how did you overcome them?
    • Initial challenges was creating. overlapping effect of the cards. but was able to overcome by using grid.
    • Main challenge faced while programming rendering data dynamically from json file to the html page.
    What specific areas of your project would you like help with?
    • how can improve my code and better structure my html and css?

    timetracking-dashboard

    1
    Shiv•350
    @undrthegraveyardPosted 8 months ago

    Hey,

    Your HTML, and CSS structure is quite neat and provides sufficient context. I opened your design on my laptop, and it was loading up your mobile view. I think you need to declare another media query to handle your component's design for devices above 375px, and less than 1440px. Hope this helps.

    Regards

    Marked as helpful
    0
  • Maobugichi•470
    @MaobugichiSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    i got the hang of form validation after a month

    What challenges did you encounter, and how did you overcome them?

    looping arrays

    email form validation

    1
    Shiv•350
    @undrthegraveyardPosted 9 months ago

    Hey, good work buddy. I read your logic, and it's pretty clean. Keeping the JS only for toggling classes, and using CSS to handle all the styling, and varients is something that I have been working on. And, you did a pretty good job in this regard.

    Happy Coding 😁

    0
  • Shiv•350
    @undrthegraveyardPosted 9 months ago

    Hey,

    I opened up the live preview site on my laptop, and for some reason, it's not responsive. It's not showing up like it should, as given in the design brief. I'm seeing it on a 14-inch Macbook Pro.

    I have uploaded a screenshot in Google Drive for reference, just in case.

    Google Drive Link

    Lemme know...

    Happy Coding.

    0
  • Shiv•350
    @undrthegraveyardPosted 10 months ago

    Hey buddy,

    Nice work. I need some pro-advice from someone such as yourself. I'm currently learning HTML and CSS, and would not say that I'm great at it yet. So would it be a good idea to integrate a little javascript into my workflow, or just I just keep focussing on these two only for now?

    Cheers😁

    0
  • ErrorCode710•150
    @ErrorCode710Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    Nothing

    What challenges did you encounter, and how did you overcome them?

    The annual something how do i achieve like the annual at the top and the bottom is price and the icon and change is from the each side.

    What specific areas of your project would you like help with?

    The annual something how do i achieve like the annual at the top and the bottom is price and the icon and change is from the each side.

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Order Summary Component

    2
    Shiv•350
    @undrthegraveyardPosted 10 months ago

    Here is what I meant. You could change the name of the classes and/or variables according to your case.

    HTML Syntax:

    <body>
  <div class="card__component">
        <div class="card__component-details">
        <img src="images/icon-music.svg" alt="Music icon">
         <div class="plans">
          <h2>Annual Plan</h2>
          <p>$59.99/year</p>
         </div>
        </div>
        <a href="#" class="card__link-button">Change</a>
      </div>
</body>

    Custom CSS:

        display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2em;
    background-color: var(--clr-neutral-100);
    padding: 1rem 0.5rem;
    border-radius: 1em;
    margin: 0.5em 1.5em;
}
.card__component-details{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1em;
}
.plans h2{
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--clr-neutral-400);
}
.plans p{
    font-size: var(--fs-base);
    font-weight: var(--fw-base);
    color: var(--clr-neutral-200);
}
.card__component-details img{
    color: var(--clr-neutral-200);
}
.card__link-button{
    color: var(--clr-primary-400);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    text-decoration: underline;
}
.card__link-button:hover,
.card__link-button:focus {
    color: hsl(245, 56%, 62%);
} ```
    0
  • ErrorCode710•150
    @ErrorCode710Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    Nothing

    What challenges did you encounter, and how did you overcome them?

    The annual something how do i achieve like the annual at the top and the bottom is price and the icon and change is from the each side.

    What specific areas of your project would you like help with?

    The annual something how do i achieve like the annual at the top and the bottom is price and the icon and change is from the each side.

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Order Summary Component

    2
    Shiv•350
    @undrthegraveyardPosted 10 months ago

    Hey,

    Good job on the code.

    To get the desired design for the .card__plan component, you need to implement a nested flexbox concept. Include the "<img src="/images/icon-music.svg" alt="" />" and "<div class="card__plan-content">" under <div class="card__plan-img">. Then implement flexbox in the "card__plan-img" class, with a flex-direction of row, and also with a suitable gap: between them. PS: Your class "card__plan-content" should also be in flex, with a flex-direction: column and with a gap between both the text.

    Try this, and let me know.

    Happy Coding 😁

    1
View more comments