Skip to content
OverviewSolutions
1
Comments
5
Nathan
@Ayddan

All comments

  • Nathan•90
    @AyddanPosted over 1 year ago

    Hi angelomarlopez,

    Your image drop because it's not the same src for big images.

    You have in the folder project, each image with two src.

    In your js you are giving the src of the thumbnail that is clicked. But it should be the src without the thumbnail.

    If you dont want to change all your code, you can just use a myString.replace('-thumbnail','') on your src string that you are giving to the big image.

    If you need more dont hesitate

    Hope it help

    1
  • TwixGamer00•40
    @TwixGamer00Submitted over 1 year ago

    • How should I do the footer on the mobile version? I couldn't get it done so I made 2 footers, 1 for desktop, and 1 for mobile. How can I place the footer at the bottom of the page without messing up the layout

    • All other feedback is also welcome, such as things I should do differently or things I did which should avoid doing

    Responsive Results with random values

    1
    Nathan•90
    @AyddanPosted over 1 year ago

    Hi TwixGamer00,

    You struggle because your are using several parameters that are not usefull in your case

    You footer

    For your footer just remove the postion absolute and the transform

    Your body

    Your body have a display: flex; so add a flex-direction: column;

    With that your component and your footer will display in one column

    Your second footer

    You can just remove it

    Change the background color

    For your mobile version just change the background color to white and it will to the trick

    Ask if you need any precisions.

    Hope it help

    Marked as helpful
    1
  • Emmanuel Akpan•790
    @heisemmaco-devSubmitted over 1 year ago

    I thank God for giving my the knowledge to complete my 5th frontend mentor project.

    Secondly I have a little bit problem styling the <hr> tag to make it more tiny and the avatar image border also, I look forward to hear some anyone with the solution, thanks

    NFT preview card component

    2
    Nathan•90
    @AyddanPosted over 1 year ago

    Hi Moderateemmaco !

    For your hr tag you have the default border of the hr. so just a border: none; should be good to set the height as you wich

    For the border of your avatar, is should be better to use a box-shadow with a spread and no blur. It's better for animations and will not squeeze your image.

    Something like this should work : box-shadow: 0 0 0 1px white;

    Box-shadow parameters are, position x and y, blur, spread and color.

    Hope it help !

    Marked as helpful
    0
  • Nathan•90
    @AyddanPosted over 1 year ago

    Hi Sergio !

    Ive check your code to see if i can help you. First it looks great ! unless the background is not the same color as the design, it looks very cool !

    Main tag

    in your code you are using the main tag as your component .

    The main tag should wrap the main content of the page, but not "be the main content".

    I recomend to put your component into the main tag and wrap it with a div

    <main>
 <div class="my-component">
    <div>
        <img src="images/image-product-desktop.jpg" class="desk" alt="Image of chanel perfume bottle">
        <img src="images/image-product-mobile.jpg" class="mob" alt="Image of chanel perfume bottle">
    </div>

    <article>
      <p class="tag">PERFUME</p>
      <h1>Gabrielle Essence Eau De Parfum</h1>
      <p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
      <div class="price">
        <h1 class="p-off">$149.99</h1>
        <p class="p-list">$169.99</p>
      </div>
      <a href="" class="btn">
        <ul>
          <li><img src="images/icon-cart.svg" alt=""></li>
          <li>Add to Cart</li>
        </ul>
      </a>
    </article>
 </div>
</main>

    H1 tags

    You are using to many h1 tags in your html.

    a page can only contain one h1 tag and it should contain something that clearly tell whats the page is about.

    For example in this page, if you have only this component, your first h1 is good. you should not use h1 tags because its biger or have a different style.

    List in your link

    You have a link for the "Add to cart" button with a list in it.

    You are using flex box on this list button you could have done the same with your link tank and have the same result. I dont think the list is usefull here.

    <a href="#" class="btn">
   <img src="images/icon-cart.svg" alt />
   Add to cart
</a>

    Hope it help

    If you or someone have completions/feedbacks to say about my comment, feel free to make correct me.

    Marked as helpful
    0
  • Nathan•90
    @AyddanPosted over 1 year ago

    Hi s17 !

    Can you be more precise on your problem ? So i can dig into it ?

    0