Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions5Comments660

All comments

  • Rio Cantre• 9,710

    @RioCantre

    Posted

    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

    @atikanajla

    Submitted

    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,710

    @RioCantre

    Posted

    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,710

    @RioCantre

    Posted

    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,710

    @RioCantre

    Posted

    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

    @imxbartus

    Submitted

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

    NFT Card

    #sass/scss

    1

    Rio Cantre• 9,710

    @RioCantre

    Posted

    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,710

    @RioCantre

    Posted

    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,710

    @RioCantre

    Posted

    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,710

    @RioCantre

    Posted

    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,710

    @RioCantre

    Posted

    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,710

    @RioCantre

    Posted

    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,710

    @RioCantre

    Posted

    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,710

    @RioCantre

    Posted

    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
  • Rio Cantre• 9,710

    @RioCantre

    Posted

    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!

    0
  • Rio Cantre• 9,710

    @RioCantre

    Posted

    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

    1
  • Rio Cantre• 9,710

    @RioCantre

    Posted

    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

    0
  • Rio Cantre• 9,710

    @RioCantre

    Posted

    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

    0
  • Rio Cantre• 9,710

    @RioCantre

    Posted

    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

    0
  • OnfeVS• 30

    @onfevs

    Submitted

    Fue una buena practica, realmente me diverti bastante realizando esta tarjeta, me tome el atrevimiento de personalizar un poco, y adaptarla a mi camino. Sigueme en mis redes sociales para mas contenido IG @OnfeVS, o simplemente entra en la pagina y darle by ONFEVS seras redireccionado.

    NFT Eternium

    1

    Rio Cantre• 9,710

    @RioCantre

    Posted

    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

    1
  • Rio Cantre• 9,710

    @RioCantre

    Posted

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

    • Add margin: 5rem auto; in the .card ruleset
    • Adjust the borders in the main image into calc(0.70rem - 1px);
    • Add the hover state of the CTA button and links
    • 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

    Other than that...

    • Well done in using React for this project
    • The project is responsive and utilized the details based on the original design
    • Good job in using bootstrap for inline styling
    • The CSS file is well organized and used proper sizing element

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

    0
  • Rio Cantre• 9,710

    @RioCantre

    Posted

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

    • Try viewing the project at 500px viewport, there is a whitespace on the right side
    • I recommend to remove the width and height on the body rule set and set it only in the .global_container ruleset
    • Add cursor: pointer for the hover state of the design
    • Add font-size: 22px; in the h1 ruleset
    • Instead of justify-content: space-between;, change it into justify-content: center; in the .global_container ruleset
    • 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 its optional
    • It is possible to separate the variables in styling with it's own file

    In the brighter side...

    • 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 alignments in the content is done properly
    • Good job in using Sass for styling, the compositions are looking great and proper usage of variables
    • The HTML structure is organized and readable

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

    Marked as helpful

    1
  • hend• 260

    @hendsaeedd

    Submitted

    thanks

    vs code

    #accessibility

    2

    Rio Cantre• 9,710

    @RioCantre

    Posted

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

    • Remove this line in the code...
      Improve your front-end skills by building projects

  Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
    • Instead of div, alternatively wrap the whole content with semantic tags, for HTML structures, refer it with this one Semantics. This line <div class="all"> can be wrap with main tag
    • Add the inline style which is bgcolor="#D5E1EF" in the CSS file on body ruleset
    • Remove margin: 250px;, margin-top: 60px;, position: relative; and display: inline-block; in the .all ruleset and add display: flex;, justify-content: center;, align-items: center; and margin: 7rem auto;
    • Remove border-left: 14px solid transparent; and border-right: 17px solid transparent; in the .txt1 ruleset and add padding: 0 1rem;
    • Remove border-left: 22px solid transparent; and border-right: 13px solid transparent; in the .txt2 ruleset and add padding: 0 1.5rem;

    In the brighter side...

    • The project is responsive and utilized the details based on the original design
    • Good job in using a separate file for the CSS in styling, the composition is done well

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

    0
  • Rio Cantre• 9,710

    @RioCantre

    Posted

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

    • 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 h1 and Jules Wyvern
    • Wrap Jules Wyvern with a span tag
    • Add color: hsl(215, 51%, 70%); in p and hr rulsets
    • Increase the font size of h1 into font-size: 20px;
    • This line <div class="attribution"> can be wrap with footer tag or placed it inside the main tag
    • Include description with the alt in image tags but it's optional
    • Adjust the margin in p into margin: 10px 0; and margin: 7rem auto; in the main ruleset

    In the brighter side...

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

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

    Marked as helpful

    0
  • Rio Cantre• 9,710

    @RioCantre

    Posted

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

    • For best practice, wrap this line <article class="nft-card"> which is the starting point of the content with main tag. Refer it with this one Semantics
    • Make a separate ruleset for .nft-card__text and add color: var(--soft-blue); or view this line &__image-wrapper &__text in the Sass file if , is needed in between
    • Organized the HTML structure

    Other than that...

    • 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
    • Great job in using Sass for styling, the composition is organized and proper usage of sizing elements
    • The alignment of details and elements are done accordingly

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

    1
  • Rio Cantre• 9,710

    @RioCantre

    Posted

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

    • The image is not showing on the live preview, either change the directory path or make it as a background image.
    • Instead of div, alternatively wrap the whole content with semantic tags, for HTML structures, refer it with this one Semantics. Like this line <div class="container"> can be wrap with main tag and this <div class="attribution"> with footer tag.
    • Another option is to place the attribution inside the main tag or container
    • Clean the whitespaces in the code

    Other than that...

    • The project is responsive, thought the image is missing the details are utilized based on the original design
    • The CSS file is well structure and used proper sizing elements

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

    Marked as helpful

    0