Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
653
Rio Cantre
@RioCantre

All comments

  • ussraa•180
    @youssra-ghninou
    Submitted over 3 years ago

    NFT preview card component

    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 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
  • atika najla•30
    @atikanajla
    Submitted over 3 years ago

    nft preview card component

    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 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!

  • Iván De León Lino•600
    @Lino-OTM
    Submitted over 3 years ago

    NFT preview card component layout [With SASS/SCSS]

    #bem#sass/scss
    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 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
  • Saul•1,260
    @xsaul
    Submitted over 3 years ago

    Qr code component main

    #accessibility#styled-components
    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 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!

  • Bartek•400
    @imxbartus
    Submitted over 3 years ago

    NFT Card

    #sass/scss
    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 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
  • Charles Ekesiobi•20
    @CharlesFreeman2016
    Submitted over 3 years ago

    NFT Preview Card component uisng HTML & CSS

    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 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
  • Saul Roldan•30
    @saulry90
    Submitted over 3 years ago

    Responsive rating card using JS and CSS

    #sass/scss
    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 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
  • Teju Adedoyin•230
    @t3ju-doyin
    Submitted over 3 years ago

    NFT preview card using CSS flexbox

    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 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!

  • DanielK•440
    @DanK1368
    Submitted over 3 years ago

    Interactive Rating Componen, using SASS, vanilla JS, animation

    #sass/scss
    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 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!

  • Pedro Señeriz•30
    @PedroS2001
    Submitted over 3 years ago

    SunnySide agency landing page with flexbox

    #sass/scss
    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 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
  • cornelber•160
    @cornelber
    Submitted over 3 years ago

    Fylo - Landing Page - Only Flexbox

    #accessibility#sass/scss
    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 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
  • Vinaya Bhagat•30
    @VViinnaayyaa
    Submitted over 3 years ago

    NFT-Preview-Card Using Flex Box

    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 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
  • Nneoma Njoku•1,210
    @SatellitePeace
    Submitted over 3 years ago

    Responsive Price Grid Component Using HTML and CSS grid

    #accessibility
    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 years ago

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

    • Add margin: 8rem auto; in the main ruleset
    • Add cursor:pointer for the hover state of the button

    Other than that...

    • Proper usage of semantic tags
    • The HTML structure is done well and organized with descriptions
    • The project is responsive and utilized the details based on the original design
    • The CSS file is organized and proper composition and sizing elements

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

  • Wallas9_3•430
    @wallas938
    Submitted over 3 years ago

    Flex scss grid html javascript

    #sass/scss
    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 years ago

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

    • Add the hover state of the buttons
    • It is possible to wrap all the section of the content with main tag
    • Remove unnecessary code to keep it clean

    In the brighter side...

    • Proper usage of semantic tags
    • The HTML structure is organized and readable
    • The project is responsive and utilized the details based on the original design
    • Well done with the hamburger menu, it's working well accordingly
    • The alignment of the elements is done properly as well
    • Great job in using Sass for styling with proper compositions and sizing elements
    • The slides is done properly as well

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

    Marked as helpful
  • Brice VIGNAL•280
    @vignalbrice
    Submitted over 3 years ago

    Responsive Github User Search App

    #node
    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 years ago

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

    • It is possible to add semantic tag on the .innerHTML of the card

    Other than that...

    • The project is responsive and utilized the details based on the original design
    • The HTML structure is well organized and readable
    • Proper usage of semantic tags
    • Well done in using API accordingly, the search engine generate specific profile account
    • The toggle for light and dark theme is done properly
    • Great job in using Typescript for the functionality
    • The CSS file is looking great with proper usage of properties and compositions

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

    Marked as helpful
  • Athreya G•410
    @AthreyaG4
    Submitted over 3 years ago

    HTML SASS and JS

    #sass/scss
    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 years ago

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

    • It is possible to place this part <div class="thankyou-card invisible"> inside the main tag or if not wrap it with a semantic tag like section tag

    Besides that...

    • The HTML structure is organized and readable
    • Proper usage of semantic tag
    • Well done in using Sass for styling the composition and properties are used accordingly
    • The project is responsive and utilized the details based on the original design
    • The active and hover state is done accordingly
    • The JS functionality is done well, it generates the selected number upon submit

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

    Marked as helpful
  • sk•40
    @SkPb2705
    Submitted over 3 years ago

    Responsive 3-column preview card usnig bootstrapv5

    #bootstrap
    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 years ago

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

    • Adjust the margin in .btn-style1 ruleset into margin: 1.25rem auto;
    • Adjust the border of the boxes when in mobile viewport state
    • Instead of div, alternatively wrap the whole content with main tag . Use semantic tags, for HTML structures, refer it with this one Semantics
    • Clean the whitespaces in the code
    • Add the border: solid hsl(0, 0%, 95%); in the .btn-style1 and not on the hover, apply the same on the other buttons

    Other than that...

    • The project is responsive and utilized the details based on the original design
    • The hover state is working well
    • The CSS file is well organized and proper usage of sizing elements
    • The HTML structure is organized but lacks of semantic tags

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

    Marked as helpful
  • OnfeVS•30
    @onfevs
    Submitted over 3 years ago

    NFT Eternium

    1
    Rio Cantre•9,650
    @RioCantre
    Posted over 3 years ago

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

    • Remove the br in the last part of the code
    • There's a typo with this line border: 2px solid var(--White); it was in small w which didn't apply the chnages
    • Add cursor: pointer; in the hero image

    Other than that...

    • Well done in customizing the project, I like the fact you made it like your own project
    • The project is responsive and the details are similar with the original design
    • The CSS file is done properly with proper sizing elements
    • Proper usage of semantic tags
    • The HTML structure is organized and readable
    • The hover state of the design is done accordingly, specially the hero image
    • The alignments of the elements are done well

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

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub