All comments

• 

  adithya cj• 70

  @Adithya-CJ

  Submitted about 1 year ago

  I found difficulty in coding a navbar and how to make the content slide down when the dropdown is clicked. I am unsure that whether the way I used media querry is the right way.

  

  Intro Section

  2

  50

  

  Andrea• 290

  @MirMurr

  Posted about 1 year ago

  Hello Adithya,

  I like your solution! There´s another way to solve the "dropdown issue". Simply add an eventListener to the target (in this case your target is the button you want to click on and the event is "click"). Then toggle the active class on your target element and you just format the .active class in CSS accordingly.

  Here´s an example in JS:

  featureButton.addEventListener('click', () => {
  featureDropdown.classList.toggle('active');
  });
  

  I hope it helps. :)

  0
• 

  Huy Phan• 1,360

  @huyphan2210

  Submitted over 1 year ago

  Hello😁! My name is Huy, and this is my solution for this challenge.

  Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Open a lightbox gallery by clicking on the large product image
  • Switch the large product image by clicking on the small thumbnail images
  • Add items to the cart
  • View the cart and remove items from it

  What I used🚀:

  • Framework: Angular
  • Language: Typescript, HTML, SASS
  • I don't use any extra libraries

  Thank you! Cheers🎉

  

  Ecommerce Product Page | Angular 15

  1

  70

  

  Andrea• 290

  @MirMurr

  Posted over 1 year ago

  Hello Huy!

  I like your solution! I have also completed this project and I really enjoyed working on it! I have some formatting tips for you:

  • Footer: I was struggling with the issue that the footer doesn´t stay on the bottom of the page. :) It is easy to solve: you can add position relative to the <main> HTML tag and set a min-width of 100vh. To the footer HTML tag you can add position absolute and bottom: 0 properties in CSS. This will place your footer to the bottom of the page and it won´t overlap the content above.

  • lightbox gallery: there are no arrows on the main image when I open the lightbox on laptop. This is a great resource on lightbox image gallery: https://www.w3schools.com/howto/howto_js_lightbox.asp

  I hope it was helpful. :)

  Best regards, Andrea

  Marked as helpful

  0

  This comment has received 3 repliesShow
• 

  P

  DANIEL SLAGER• 10

  @toasteater

  Submitted almost 2 years ago

  Wasn't sure how to...

  • add the mini cart pic.
  • size the main add appropriately.

  

  css grid

  2

  20

  

  Andrea• 290

  @MirMurr

  Posted almost 2 years ago

  Hey!

  There is an alt text so you might have added the link incorrectly to your HTML code. In order to display images on the page the images and your index.html file should be located in the same folder.

  Here is an example code from my code:

  ´´´ <img class="woman-desktop" src="./illustration-woman-online-desktop.svg" alt="computer"> ´´´

  You should use the image tag and paste the link between the src"". It´s important that your HTML File and the image are in the same folder.

  I hope it helps!

  0