Stats preview card using html, css and tailwindcss

Community feedback

• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge!

  I have some suggestions about your code that might interest you.

  HTML:

  • Wrap the whole content in the <main> tag. This challenge doesn’t have a header or a footer so you only need the <main> tag.
  • Inside this <main> tag, you could create the “container” tag that will contain the images and the content

  CSS:

  • Try to merge the style.css and the main.css this way

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap');
    
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    :root {
      /* ## Colors */
    
      /* ### Primary */
    
      --Very-dark-blue-main-background: hsl(233, 47%, 7%);
      --Dark-desaturated-blue-card-background: hsl(244, 38%, 16%);
      --Soft-violet-accent: hsl(277, 64%, 61%);
      --Dark-violet-accent: hsl(278, 94%, 20%);  
    
      /* ### Neutral */
     
      --Slightly-transparent-white-main-paragraph: hsla(0, 0%, 100%, 0.75);
      --Slightly-transparent-white-stat-headings: hsla(0, 0%, 100%, 0.6);
    }
    
    @layer base {
    	* {
    	  margin: 0;
    	  padding: 0;
    	  box-sizing: border-box;
    	  text-decoration: none;
    	}
    	
    	html,
    	body {
    	  font-family: 'Inter', sans-serif;
    	}
    }
    
    @layer utilities {
    	.font-lexend {
    	  font-family: 'Lexend Deca', sans-serif ;
    	}
    }
    

    Also, you could write the colors variables in the tailwind.config.js

  Marked as helpful

  0

  ---

  

  Guilherme Henrique•310

  @devgguiPosted over 1 year ago

  @AGutierrezR Thanks for the feedback. I will apply the suggestions in my next codes.

  0