Skip to content
OverviewSolutions
18
Comments
31
Phúc (Scott) Nguyễn
@NationsAnarchy

All comments

  • Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted about 2 years ago

    Everything looks and functions great Lawrence, well done! I guess the only thing we can do to match the design is to perfectly center the card to the screen :D

    0
  • Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted about 2 years ago

    You can try Font Awesome - it's a very popular website for using and hosting a font library so you can use with your own projects :D

    https://fontawesome.com/

    Marked as helpful
    1
  • udinjelek•10
    @udinjelekSubmitted about 2 years ago

    I still don't know the best practice convert from web to mobile, especially breakdown div from this case

    in web view

    <div class='containerFlex'>
	<div class='containerA leftSide'>
		<div class='title'></div>
		<div class='article'></div>
	</div>

	<div class='containerB rightSide'>
		<div class='photo'></div>
	</div>
</div>

    in mobile view

    <div class='container viewFromTopToDown'>	
		<div class='title'></div>
		<div class='photo'></div>                       /*see photo are in mid!!! */
		<div class='article'></div>
</div>

    /* ------------------------------------- */ so my solution are:

    <div class='containerFlex'>
	<div class='containerA'>
		<div class='title'></div>
		<div class='photo mobileMode'></div>
		<div class='article'></div>
	</div>

	<div class='containerB'>
		<div class='photo webMode'></div>
	</div>
</div>

    /* ------------------------------------- */ so the css are:

    .mobileMode{
	display:none;
}
.webeMode{
	display:block;
}

@media {
	.webMode{
	display:none;
	}
	.mobileeMode{
		display:block;
	}	
}

    /* ------------------------------------- */ but again, I don't think thats the right answer since I'm newbie and none of my friend are web programer

    basic flex and mainpulation css hide and show

    1
    Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted about 2 years ago

    Hey there Udin, good job showing your solution here on the website!

    If you want to have a different layout for a smaller width, you can use the CSS media query properties: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Please have a look at that article, it should give you the idea on how to align/size elements properly with different screen widths. Do let us know what else we can help you with as well, and happy coding!

    0
  • T0R0•280
    @XxtbmfxXSubmitted about 2 years ago

    I don't know how to do the escalated thing in the stars and the reviews ☹ everything else is ok i think Any feedback is welcome UwU.

    IDK man just having fun

    3
    Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted about 2 years ago

    Good job with the solution, Alexis!

    If you want those star ratings/review cards to be escalated like the design - you can use the CSS Grid system, where you can align elements within a grid/table system, that way you can have them align accordingly :D

    https://www.w3schools.com/css/css_grid.asp

    Feel free to play around it - and let us know what else we can help you as well. Happy coding!

    1
  • Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted about 2 years ago

    Well done on completing the challenge, Mouhib!

    I believe that the next step we can do with this one is to implement responsive designs once the website shifts the layout to smaller screen width.

    You can have a look at the @media query CSS properties and start working from there: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Let us know what else we can help you with, and have fun coding!

    Marked as helpful
    0
  • Joanna Lee•140
    @doleetosSubmitted about 2 years ago

    Can someone help with the awkward animation on page load at first..? I'm having major difficulty figuring that out. I don't want the animation to run on page load.

    NFT preview card component

    1
    Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted about 2 years ago

    I believe that awkward animation you were referring to is actually the webpage's elements loading - so I don't think it can be changed/fixed from the code we write.

    Otherwise, this is an excellent solution - so well done for completing it!

    1
  • SylpX•10
    @sylpxSubmitted about 2 years ago

    I find it difficult to implement it on a responsive website, I also think the code that i'm not sure about is at "@media-querry", for the question i don't think it exists, everything is clear, thanks for the challenge

    Responsive Website with CSS and HTML

    1
    Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted about 2 years ago

    Hey there, Sylpx! Great job for finishing the challenge and submitting it here on the website!

    For the @media query properties that you are wondering about, please refer to this page:

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Once you've seen it, please give it a try and see if you can get the solution working correctly for you!

    Please do let us know what else we can help you with too, and happy coding!

    0
  • Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted about 2 years ago

    Not really sure what you mean with the feedback section Joan - the card looks perfect to me. So can you be a bit more specific with that?

    Good job, by the way - I love seeing simple solutions using modern tools and frameworks :D

    1
  • Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted about 2 years ago

    Hey Brandon! Congrats for submitting a solution here on frontendmentor.io

    I would say the easiest thing we can do is to add a transition effect + a different state when we hover for the "Add to cart" button.

    Plus, please have a look at responsive design by using the @media query as well! That way we can shift the card's layout when the screen reaches a smaller width :D

    Have fun coding, and please let us know what else we can help you with!

    0
  • Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted over 2 years ago

    Well done, Dženita! Congratulations on your very first solution submitted here on frontendmentor.io!

    I feel like everything is good so far with the desktop layout - which is a very good start.

    The next step we can think about is to shift the card design into a different layout like the design file has shown. Feel free to have a look at this link for the specific CSS properties that can help us with doing so, and try to implement it by yourself.

    Let us know what else we can help you with, and most importantly - happy coding!

    0
  • Filip•110
    @fica25Submitted over 2 years ago

    It was a little hard to center a image into a div and take the other side of the main section but I managed this at the end. Any tips to center a img into a div and take a full space , except my example.? And can someone answer how I can adjust length of paragraph , that is, determine where my words stand? Also I know that there is a small error in paragraph, but I made it as close as I could like original.

    stats-preview-card-component

    3
    Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted over 2 years ago

    Hi Filip! Good job on the solution :D

    Personally for this challenge, I used the CSS properties called max-width to adjust how all of the texts would spread out/go down.

    Let me know if that helps you out, and as always - happy coding!

    0
  • Phúc (Scott) Nguyễn•430
    @NationsAnarchyPosted over 2 years ago

    Hey OpiniIsaac! Congrats on submitting a solution here on frontendmentor.io!

    Here's the article that I can show you on how to use Google Fonts

    Let me know if this helps you, and happy coding!

    0