ERIGO Chigozie Nicholas

Latest comments

• 

  Moscow•420

  @MOSCOW2022Submitted over 2 years ago

  

  react tailwindcss

  #react#tailwind-css

  1

  40
  

  ERIGO Chigozie Nicholas•650

  @nick335Posted over 2 years ago

  Hello, Moscow's

  great work on the project, for your social icons instead of using SVG images you should try fontAwesome, Font Awesome Is a Web font used by websites designer & developers for icons instead of traditional old image icons. It's flexible in terms of coloring, sizing & stacking on top of other background styles using plain CSS. You can use it by referencing the CSS files in your website and keeping the fonts folder that comes with it besides the CSS file of FontAwesome. it,s very easy and simple to use.

  for implementing font awesome with React you can check out this article

  for implementing on hover state in tailwind CSS, you should try this className = 'hover:text-white-100 '

  Hope this was helpful

  Happy Coding

  Marked as helpful

  0
• 

  RobertoBaiochi•170

  @RobertoBaiochiSubmitted over 2 years ago

  

  Solution Sunnyside agency landing page using ReactJs and Sass

  #react#react-testing-library

  1

  40
  

  ERIGO Chigozie Nicholas•650

  @nick335Posted over 2 years ago

  Hello RobertoBaiochi,

  Nice work with the challenge, for your social icons instead of using SVG images you should try fontAwesome, Font Awesome Is a Web font used by websites designer & developers for icons instead of traditional old image icons. It's flexible in terms of coloring, sizing & stacking on top of other background styles using plain CSS. You can use it by referencing the CSS files in your website and keeping the fonts folder that comes with it besides the CSS file of FontAwesome. it,s very easy and simple to use.

  Hope this was helpful

  Happy Coding

  1
• 

  Nate Pañares•150

  @ShinjiX-WebSubmitted over 2 years ago

  

  Manage Landing Page - Tailwind CSS

  #accessibility#tailwind-css

  1

  10
  

  ERIGO Chigozie Nicholas•650

  @nick335Posted over 2 years ago

  Hello, Nate Pañares

  Nice work with the challenge, for accurate sizing of the background image you can do this:

  // normally you do this
  
  background-size : cover 'or' contain;
  
  background-position: center 'or' Top 'or' Left 'or' Bottom 'or' Right;
  
  //but to accurately position it you can try this!!
  
  background-size: 300px 100px; 'which is the width and height';
  
  background-position: top 100px  right 100px; //the same can done for the bottom and the left
  

  hope this was helpful

  Happy Coding.

  Marked as helpful

  1
• 

  dashdash•20

  @monsdaSubmitted over 2 years ago

  

  product-preview-card

  3

  30
  

  ERIGO Chigozie Nicholas•650

  @nick335Posted over 2 years ago

  Hello, DASHDASH’S

  Great work on the challenge, to center the div you need to do:

  //remove the width and position styling in the body
  
  //from this
  body {
      background-color: hsl(30, 38%, 92%);
       width: 1440px;
      position: absolute;
      top: 20%;
      left: 35%; 
  }
  
  // to this
  
  body {
      background-color: hsl(30, 38%, 92%);
  }
  
  // after that you can position the container in 2 ways
  
  // 1, directly positioning the container  by adding this line of code to the container class
  
  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  
  // 2, wrapping the container in a div then styling the div, let's say we wrap it in a div we give a class name of center then we can style it like this
  .center{
     width: 100vw; // i.e width is equal to the width of the screen
     height: 100vh; // 1.e height is equal to the height of the screen
     display: flex;
     align-items: center;
      justify-content: center;
  }
  
  

  Hope this was helpful.

  Happy Coding!!

  Marked as helpful

  0
• 

  Nyrell Leonor•400

  @nyrellclSubmitted over 2 years ago

  

  Manage Landing Page built with SASS & Swiper.js for slider feature

  #sass/scss

  1

  20
  

  ERIGO Chigozie Nicholas•650

  @nick335Posted over 2 years ago

  Hello NYRELL LEONOR’S,

  Great Job with the challenge! noticed you didn't implement the background images if you had issues with it, this is how you resolve it:

  // normally you do this
  
  background-size : cover 'or' contain;
  
  background-position: center 'or' Top 'or' Left 'or' Bottom 'or' Right;
  
  //but to accurately position it you can try this!!
  
  background-size: 300px 100px; 'which is the width and height';
  
  background-position: top 100px  right 100px; //the same can done for the bottom and the left
  

  Hope this was helpful,

  Happy Coding

  Marked as helpful

  0
• 

  Shady Omar•950

  @Shady-OmarSubmitted over 2 years ago

  

  Sunnyside agency landing page challenge

  #accessibility

  1

  30
  

  ERIGO Chigozie Nicholas•650

  @nick335Posted over 2 years ago

  Hello SHADY OMAR’S,

  Nice work with the challenge, for your social icons instead of using SVG images you should try fontAwesome, Font Awesome Is a Webfont used by websites designer & developers for icons instead of traditional old image icons. It's flexible in terms of coloring, sizing & stacking on top of other background styles using plain CSS. You can use it by referencing the CSS files in your website and keeping the fonts folder that comes with it besides the CSS file of FontAwesome. it,s very easy and simple to use.

  Hope this was helpful

  Happy Coding

  0