
Rio Cantre
@RioCantreAll comments
- @youssra-ghninou@RioCantre
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 withmain
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%);
andcursor: pointer;
in.text1
andspan
- Try viewing the compositions in the CSS file, one section needs to be fix
- Add
border: 1px solid white;
andborder-radius: 50%;
in the#avatar
ruleset - Increase the font size of
.text1
intofont-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 - Instead of
- @atikanajla@RioCantre
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 thestyle
tag - Add
hsla(215, 51%, 70%, 1);
in the root variable assoft blue
and change the color in thebody
ruleset - Set the color in
a
ruleset intocolor: var(--White);
and add the hover state withcolor: 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 theuser
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!
- Instead of
- @Lino-OTM@RioCantre
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 withfooter
tag or place it inside thearticle
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 - This line
- @xsaul@RioCantre
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!
- Instead of
- @imxbartus@RioCantre
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
intotop: 36.5%;
- Instead of using
section
to wrap the whole content, usemain
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 - Adjust the top position in the
- @CharlesFreeman2016@RioCantre
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 addborder: 1px solid white;
andborder-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 - Create a ruleset for
- @saulry90@RioCantre
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 - Instead of
- @t3ju-doyin@RioCantre
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 thediv.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!
- @DanK1368@RioCantre
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!
- @PedroS2001@RioCantre
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 thestyle
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 - Import the
- @cornelber@RioCantre
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 - @VViinnaayyaa@RioCantre
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 - Add
- @SatellitePeace@RioCantre
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 themain
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!
- Add
- @wallas938@RioCantre
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 withmain
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 - @vignalbrice@RioCantre
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 - It is possible to add semantic tag on the
- @AthreyaG4@RioCantre
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 themain
tag or if not wrap it with a semantic tag likesection
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 - It is possible to place this part
- @SkPb2705@RioCantre
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 intomargin: 1.25rem auto;
- Adjust the border of the boxes when in mobile viewport state
- Instead of
div
, alternatively wrap the whole content withmain
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 - Adjust the margin in
- @onfevs@RioCantre
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 smallw
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 - Remove the