Skip to content
OverviewSolutions
10
Comments
40
P

Dean

@DeanogitLondon480 points

I'm a code newbie, on my quest to become a full stack developer!

I’m currently learning...

HTML, CSS, JavaScript, Git, TailwindCSS

Latest solutions

View more solutions

Latest comments

  • P
    Dean•480
    @Deanogit

    Hi @iamkayleb,

    I was taking a look at your code to see if I could help with your question The part where the accordion icon toggles between "icon-plus" and "icon-minus" is where I still can't seem to fix. I will really appreciate your help on that part?

    One way to achieve the toggle would be to declare both icons in your HTML, and use a hidden class to show and hide the icons. So the minus icon would start with a hidden class, which would be removed when needed, when minus icon is visible the plus icon would become hidden.

    There are a few different approaches to applying this method, here's some further reading

    I hope this helps

  • P
    Dean•480
    @Deanogit

    Hello @AlvaroCordoba-5

    Great effort putting together this solution

    I was taking a look at your code and thought you might be interested,

    In order to center the card in the browser, try applying these declarations to your body selector in your CSS file

    body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

    Its possible to change the background-color to 'hsl(212, 45%, 89%)' too, in order to better match the design.

    I hope this helps,

    Above all, your solution looks great!

  • P
    Dean•480
    @Deanogit

    Hi @rahulkumarpahwa,

    Great work getting this solution built!

    I was taking a look at your code and found something you might be interested in

    In order to center the card in the middle of the screen, try including this code in your CSS file.

    body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh
}

    Remove the margin top on the .main selector for this to work optimally.

    I hope this helps

    Above all, your solution is looking great.

  • P
    Dean•480
    @Deanogit

    Hey @Enayut,

    Great work getting this solution submitted

    I was just taking a look at your code and noticed something you might be interested in.

    The background images are not loading due to a small error in the syntax.

    Your code:

    function changeImg(){
      let width = window.innerWidth
      console.log(width)
      if (width > 700) {
          img.setAttribute("src","/assets/images/background-pattern-desktop.svg");
      } else {
          img.setAttribute("src","/assets/images/background-pattern-mobile.svg");
      }

    try adding a . in-front of the first / when declaring the image paths.

    Try checking the syntax for the icons too

    I hope this helps

    Great effort building this solution

    Marked as helpful
  • P
    Dean•480
    @Deanogit

    Hi @sami09876543;

    Great job submitting your solution for this challenge,

    I was just taking a look at your code and may have found something you might be interested in.

    In the index.html file you have an inline style for the body selector, and inside the style.css you also have a body selector.

    The inline style in the index.html has the highest specificity and so overrides the styles declared in the style.css file.

    Check out the docs HERE for more information about specificity

    Try tidying this conflict up and you should be able to get your solution closer to the design.

    Above all, great effort getting this solution built

  • P
    Dean•480
    @Deanogit

    Hey @coding-stock

    I tried to take a look at your code, but the link to your code is not working.

View more comments