Skip to content
OverviewSolutions
15
Comments
18
ERIGO Chigozie Nicholas
@nick335

All 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

  • ERIGO Chigozie Nicholas•650
    @nick335

    Hello, NIKOLA’S

    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, TOMIFUCHI’S

    Great job with the challenge, 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 on your website and keeping the fonts folder that comes with it besides the CSS file of FontAwesome.

    Hope this was helpful!

    Happy Coding!

    Marked as helpful
  • ERIGO Chigozie Nicholas•650
    @nick335

    Hello, ALEX

    Great job with the challenge, for your social icons instead of working with SVG images, you should use an icon library like fontawesome super easy and fast to use, with this you will be able to effect its on-hover state.

    in section two, I noticed they were spaces between each row, to get rid of this you should change the height value ` //from

    height: 255vh;

    //to

    height: fit-content or 100%; `

    the same should be done to other sections where you gave a fixed height, to reduce the spacing or excessive length of the section.

    hope this was helpful!

    Happy Coding!!!

  • ERIGO Chigozie Nicholas•650
    @nick335

    Hello, FAYSSALG’S

    Great job with the challenge, for the accurate positioning of the background image, you can use the 'background-position' attribute in your style sheet like this:

    `background-position: top 400px left 500px;

    // you can play with the values to get your desired positioning and also the position, you can use the bottom and right`.

    Hope this was helpful!!

    Happy Coding!!.

    Marked as helpful
  • ERIGO Chigozie Nicholas•650
    @nick335

    Hello, Dusan

    Great work with the challenge, you didn't mention specifically the section you had issues with the background image. but generally speaking, if you are trying to precisely position a background image you can use the 'background-position' attribute in your style sheet like this: background-position: top 400px left 500px; // you can play with the values to get your desired positioning and also the position, you can use the bottom and right. Hope this was helpful!!

    Happy Coding!!.

    Marked as helpful
  • ERIGO Chigozie Nicholas•650
    @nick335

    Hello, Asha

    Great work with the challenge, if you are still looking for a better solution for the carousel, you can check out this Article super easy and helpful.

    Happy Coding!!!

  • ERIGO Chigozie Nicholas•650
    @nick335

    Hello, Alexander Cruz Great job with the challenge, on the issue of taking longer to complete the challenge you can check out Tailwind CSS Tailwind CSS makes it quicker to write and maintain the code of your application. By using this utility-first framework, you don’t have to write custom CSS to style your application. Instead, you can use utility classes to control the padding, margin, color, font, shadow, and more of your application. check it out here!

    you can also check Sass, Syntactically Awesome Stylesheet. Sass reduces the repetition of CSS and therefore saves time check it out here!

    for your Icons, you can use fontawesome Icons, very fast and easy to work with! instead of using inline SVG!!

    Marked as helpful
  • ERIGO Chigozie Nicholas•650
    @nick335

    Hello, MITS

    for faster coding, you can use Tailwind CSS, Tailwind CSS makes it quicker to write and maintain the code of your application. By using this utility-first framework, you don’t have to write custom CSS to style your application. Instead, you can use utility classes to control the padding, margin, color, font, shadow, and more of your application.

    check it out here!

    happy coding!!

  • ERIGO Chigozie Nicholas•650
    @nick335

    Hi TANVIR ANZUM’S,

    If you decide to implement the drag and drop functionality, this Article was helpful to me and I hope it can be helpful to you too!!

    Happy coding.

    Marked as helpful
  • ERIGO Chigozie Nicholas•650
    @nick335

    Hi JORDAN VELOSO’S,

    for the footer icons, you could set your SVG as a mask that way setting a background color would act as your fill color.

    HTML
<div class="logo"></div>

CSS
.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;
}

    Or you can make use of fontawesome icon Happy coding!!!

    Marked as helpful
  • ERIGO Chigozie Nicholas•650
    @nick335

    Hello Sravan

    you can try wrapping the header content in a div and give the style for the background image there. let's say you name the div 'header-content', in your style.css you can do this:

      background: url(../images/bg-pattern-intro-desktop.svg);
  background-repeat: no-repeat;
  background-size:  height  width;  //you can give the height and width of your background 
  manually instead of using 'cover' or 'contain'
  background-position: left -400px top -1350px; //you can also style the positon manually like I have done in the code above you can also use 'bottom' and 'right'!!
}```

in your footer section, it's better to use the 'ul' and 'li' tags for lists, you can read more about them [here](https://www.w3schools.com/html/html_lists.asp)

Happy Coding!!!!
    Marked as helpful
  • ERIGO Chigozie Nicholas•650
    @nick335

    nice work... just completed the same project, instead of giving 'over-flow: hidden;' to the hero-wrapper, give it to the main tag! which will make the bottom of the image show!