Skip to content
OverviewSolutions
15
Comments
18

ERIGO Chigozie Nicholas

@nick335Nigeria650 points

self-taught frontend developer

Latest solutions

View more solutions

Latest comments

  • ERIGO Chigozie Nicholas•650
    @nick335

    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
  • ERIGO Chigozie Nicholas•650
    @nick335

    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

  • ERIGO Chigozie Nicholas•650
    @nick335

    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
  • ERIGO Chigozie Nicholas•650
    @nick335

    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
  • ERIGO Chigozie Nicholas•650
    @nick335

    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
  • ERIGO Chigozie Nicholas•650
    @nick335

    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

View more comments