Skip to content
OverviewSolutions
5
Comments
658
Rio Cantre
@RioCantre

All comments

  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Nice job in completing this challenge. Regarding your solution, I would like to take notes of the following…

    • Instead of div, alternatively wrap the whole content with main tag . Use semantic tags, for HTML structures, refer it with this one Semantics
    • Include description with the alt in image tags but that's optional
    • Add the hover state of the design. For the hero image , refer it with this one Overlay in image. For the fonts, add color: hsl(178, 100%, 50%); and cursor: pointer; in .text1 and span
    • Try viewing the compositions in the CSS file, one section needs to be fix
    • Add border: 1px solid white; and border-radius: 50%; in the #avatar ruleset
    • Increase the font size of .text1 into font-size: 22px;
    • Add padding: 1rem 0; in the .textss ruleset

    In the brighter side...

    • The project is responsive and utilized the details based on the original design
    • The CSS file have proper properties and sizing elements
    • The HTML structure is well organized and readable

    Above all, the project is done well. Keep up the good work! Cheers!

    Marked as helpful
    0
  • atika najla•30
    @atikanajlaSubmitted over 2 years ago

    still there is some bug on my project. i'm struggle with eye icon. maybe you guys can give me sugestion. thx

    nft preview card component

    1
    Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Good job in completing this challenge. Regarding your solution, I would like you to notice the following…

    • Instead of div, alternatively wrap the whole content with semantic tags, for HTML structures, refer it with this one Semantics
    • Import the attribution style in CSS file and remove the style tag
    • Add hsla(215, 51%, 70%, 1); in the root variable as soft blue and change the color in the body ruleset
    • Set the color in a ruleset into color: var(--White); and add the hover state with color: var(--Cyan);
    • Add a class in this line ...
    <div><img src="images/icon-ethereum.svg">0.041 ETH</div>

Into
<div class="sample name here"><img src="images/icon-ethereum.svg">0.041 ETH</div>

Css:
.sample name here {
    color: var(--Cyan);
}
    • Add align-items: center; in the user ruleset

    In the brighter side...

    • The HTML structure is well organized and readable
    • The project is responsive and utilized the details based on the original design
    • The CSS properties is done accordingly with proper compositions and sizing elements
    • The hover state of the design is done well, specially the hero image

    Above all, the project is done well. Keep up the good work! Cheers!

    0
  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Great work with this one. Regarding the solution you submitted, I think you should know the following notes…

    • This line <div class="attribution"> can be wrap with footer tag or place it inside the article tag
    • The Sass file can be break into smaller parts, for instance, a separate file for variables.
    • Include description with the alt in image tags but that is optional

    Other than that...

    • The project is responsive and utilized the details based on the original design
    • Well done in using Sass for styling, the composition and properties are done accordingly
    • Proper usage of semantic tags
    • The HTML structure is well organized and readable
    • The hover state of the design is done properly, specially the hero image

    Above all, The project is awesome! Keep it up!

    Marked as helpful
    1
  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Great work with this one. Regarding the solution you submitted, I think you should know the following notes…

    • Instead of div, alternatively wrap the whole content with semantic tags, for HTML structures, refer it with this one Semantics
    • Include description with the alt in image tags but it's optional

    In the brighter side...

    • The HTML structure is organized and readable
    • The CSS file is done properly with proper composition and sizing elements
    • The project is responsive and utilized the details based on the original design

    Above all, The project is awesome! Keep it up!

    1
  • Bartek•400
    @imxbartusSubmitted over 2 years ago

    Can't set position absolute on the image, so it's setted on the body. Have a nice day.

    NFT Card

    1
    Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Great work with this one. Regarding the solution you submitted, I think you should know the following notes…

    • Adjust the top position in the .main-container .main-img .cover into top: 36.5%;
    • Instead of using section to wrap the whole content, use main tag , refer it with this one Semantics

    Other than that...

    • The project is responsive and utilized the details based on the original design
    • The hover state of the design is done accordingly, specially the hero image
    • The HTML structure is well organized and readable
    • Proper usage of semantic tags
    • The CSS file is all compressed, how come?

    Above all, The project is awesome! Keep it up!

    Marked as helpful
    0
  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Awesome work with this challenge. Looking at your solution, I think you should know the following as well…

    • Create a ruleset for .avatar and add border: 1px solid white; and border-radius: 50%;
    • Remove unnecessary code to keep it clean

    In the brighter side...

    • The HTML structure is organized and readable
    • Proper usage of semantic tags
    • Great job in utilizing the svgs
    • The CSS file is well organized with proper compositions and sizing elements
    • The project is responsive and utilized the details based on the original design
    • Well done with the hover state of the design, specially the hero image
    • The alignment of the elements are done accordingly

    Above all, the project is well implemented. Keep up the good work!

    Marked as helpful
    1
  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Great work with this one. Regarding the solution you submitted, I think you should know the following notes…

    • Instead of div, alternatively wrap the whole content with semantic tags, for HTML structures, refer it with this one Semantics
    • Clean the whitespaces in the code
    • Remove unnecessary code to keep it clean

    In the brighter side...

    • The project is responsive and utilized the details based on the original design
    • Well done in using Sass for styling with proper compositions and sizing elements
    • The active and hover state of the design is done accordingly
    • The JS functionality of the project is done properly, it generates the selected number upon the click event

    Above all, The project is awesome! Keep it up!

    Marked as helpful
    1
  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Good job in completing this challenge. Regarding your solution, I would like you to notice the following…

    • Clean the whitespaces in the code
    • Instead of div, alternatively wrap the whole content with semantic tags, for HTML structures, refer it with this one Semantics
    • Remove height: 75vh; in the div.container ruleset
    • To understand more about the hero image hover state, refer it with this example Overlay in Image
    • The project is not responsive, use Flexbox for the aligment or margin:auto or better adjust the properties in the media queries

    In the brighter side...

    • The hover state of the design is done properly
    • The CSS files is well structured and proper usage of sizing elements

    Above all, the project is done well. Keep up the good work! Cheers!

    0
  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Awesome work with this challenge. Looking at your solution, I think you should know the following as well…

    • The HTML structure is well organized and readable
    • Proper usage of semantic tags
    • Well done in using Sass for styling with proper compositions and sizing elements
    • The project is responsive and utilized the details based on the original design
    • The hover and active state of the button and numbers is done properly
    • Awesome work in adding animation for the numbers and button
    • The JS functionality is working well, it generate selected number upon the click event

    Question: How come there are three big script tag content , is it part of the animation on the project?

    Above all, the project is well implemented. Keep up the good work!

    0
  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Awesome work with this challenge. Looking at your solution, I think you should know the following as well…

    • Import the attribution style in CSS file and remove the style tag
    • Clean the whitespaces in the code
    • Include description with the alt in image tags but it's optional

    Other than that...

    • Proper usage of semantic tags
    • The HTML structure is organized and readable
    • Well done in using Sass for styling with separate files for specific target elements. The compositions are done properly
    • The navbar is done accordingly, it transition into a hamburger menu once in smaller viewport
    • The project is responsive and utilized the details based on the original design
    • The hover state of the buttons and links of the project is done properly as well

    Above all, the project is well implemented. Keep up the good work!

    Marked as helpful
    0
  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Awesome work with this challenge. Looking at your solution, I think you should know the following as well…

    • Remove unnecessary code to keep it clean

    In the brighter side...

    • Proper usage of semantic tags
    • The HTML structure is organized and readable with descriptions
    • The project is responsive and utilized the details based on the original design accordingly
    • The hover state for the links, buttons and icons are done properly
    • Proper alignments of the elements
    • Great job in using Sass for styling, the compositions and together with individual specific styling files are done well
    • The input generate specific functionality which is proper email address

    Above all, the project is well implemented. Keep up the good work!

    Marked as helpful
    0
  • Rio Cantre•9,690
    @RioCantrePosted over 2 years ago

    Hello there! Great work with this one. Regarding the solution you submitted, I think you should know the following notes…

    • Add top: 1.2rem; in the .image:hover::after ruleset

    In the brighter side...

    • Well done with the hover state of the design, specially the hero image
    • The project is responsive and utilized the details based on the original design
    • The CSS file is organized and proper composition with root variables
    • Proper usage of semantic tags
    • The HTML structure is organized and readable

    Above all, The project is awesome! Keep it up!

    Marked as helpful
    0