Skip to content
OverviewSolutions
4
Comments
8
Ruby
@Rubylena

All comments

  • Ruby•170
    @RubylenaPosted about 2 years ago

    Just in case you were looking to get the particular background used under the star and the ratings, The hsla() function for light grey can be used. $Light-Grey-a: hsla(217, 12%, 63%,0.1);

    0
  • Ruby•170
    @RubylenaPosted about 2 years ago

    A few suggestions:

    1. you can use the very-dark-blue for your card background.
    2. Light grey for the star background and the numbers, you can use hsla() function to have control of color opacity.
    3. To display the selected vote on your results page, you need to use javascript insert the vote in your ratings by inserting this line in each of your selected functions.
    vote = '4';
document.getElementById('rating').innerHTML=vote;

    With this there is no need to return each of the vote.

    Marked as helpful
    1
  • Kml_joshi•560
    @KamalJoshi-webSubmitted about 2 years ago

    This is my 7th project and I have learned so much about CSS Grid and responsive design. If I have made mistakes, feel free to correct me and tell me how I could have done things differently and give me your opinion to make my code more compact.

    Sunnyside agency landing page(HTML ,CSS and JavaScript)

    1
    Ruby•170
    @RubylenaPosted about 2 years ago

    There are a few things of note, The welcome message "We are creatives" is not close to the desired size, you can consider specifying the font size.

    A project should have only one h1 tag.

    Your "Learn more" link doesn't exactly conform, you can try using an a tag within a container. You can then use the :: before and :: after pseudo-elements of the container to get a nice border below on hover.

    Marked as helpful
    0
  • Haminimuri•200
    @KiranchaiSubmitted about 2 years ago

    Hey coders,

    I found it difficult to correctly create sections with "Graphic Design" and "Photography" headers. I am still not very proud of the result but overall it looks okay. Would love to get any feedback from you

    Responsive landing page with pure html css and js

    1
    Ruby•170
    @RubylenaPosted about 2 years ago

    Hi Haminimuri, Your overall design looks good, I can suggest for the sections of concern that you try using background images through CSS and display: flex on the whole container. Giving you the maximum flexibility that you need to move the text around.

    An overall height can also be placed on each container to get your desired dimensions.

    0
  • Andres Uribe•20
    @AndresUribe1234Submitted about 2 years ago

    I used a specific class for each testimonial container, is this best practices or is it better to assign same class to all containers and attach ccs styles with nth-chil element?

    Responsive landing page using css

    1
    Ruby•170
    @RubylenaPosted about 2 years ago

    I personally used nth-child and other specific styling systems that do not really on giving each element a class name. This could make your HTML look messy.

    0
  • Ouss_Ach•810
    @OUSSAMAACHICHESubmitted about 2 years ago

    It was a difficult design for me, but I learned many things. Please take a look and tell me what to do better

    Responsive using css grid

    2
    Ruby•170
    @RubylenaPosted about 2 years ago

    I will also recommend display: flex for the body element or parent container, with justify-content: center and align-items: center. Everything will be perfectly aligned in the middle. Also do not forget to add your side padding

    Marked as helpful
    1
  • Pretty Kunene•690
    @nonozaSubmitted about 2 years ago

    Hi community!!

    Can you guys please review my project? I enjoyed building it. My challenge was on the range input. I couldn't make it exactly as it looks in the design. More feedback is appreciated.

    Thanks Pretty

    Fylo data storage component using Vanilla CSS

    1
    Ruby•170
    @RubylenaPosted about 2 years ago

    To get the range you can try using a container div of fixed height housing 2 elements, the first taking up a quarter of the div that you want and the second element will be placed within the first element. The first element can have a display of flex and justify-content should be flex-end so that the second element will always remain fixed.

    Marked as helpful
    0
  • Frank Ruiz•410
    @fruizoteroSubmitted about 2 years ago

    Hi guys, this challenge gave me a bit of a headache, especially the part where you have to make a sort of triangle for the bottom of the bubble, so any advice is helpful or a page to help me with the borders.

    Fylo data storage component

    1
    Ruby•170
    @RubylenaPosted about 2 years ago

    For the triangle section, using :before and :after pseudo-elements is advised. You can visit these pages to get more understanding. These pseudo-elements will be used on the 185GB left container. https://css-tricks.com/snippets/css/css-triangle/ https://stackoverflow.com/questions/20589780/css-triangle-before-element

    Marked as helpful
    0