Can you tell me what's wrong with my first psd to css project?

HTML-CSS
1

I made my first psd to css practice. Images and icons doesn’t display because there are no in the template folder. Can you check and tell me what’s wrong in my code?

Template psd download link : nobodysfool.psd
Template jpeg link : https://i.hizliresim.com/99xcx6d.jpg

2

Well, you haven’t posted any code so no we can’t. If the project does not include icons for you to use you can use something like font awesome instead.

1 Like
3

Sorry, i forgot

4

You are using relative paths to files, that won’t work on normal Codepen projects because you can’t upload files. Do you have the icons locally and if so does it work locally?

For Codepen you can use font awesome instead, they have all the social media icons. Or you can use CodeSandbox which lets you upload files.

1 Like
5

I couldn’t add it because the template has its own icons. I couldn’t find it on the internet.

6

Like I said, just use font awesome you can seach for the name of the icon.

7

icons had their own background and text colors

8

You can change that as needed.

      <div class="social-media">
        <i class="fab fa-linkedin-in"></i>
        <i class="fab fa-twitter"></i>
        <i class="fab fa-pinterest"></i>
        <i class="fab fa-google-plus-g"></i>
        <i class="fas fa-rss"></i>
      </div>

.social-media > i {
  color: white;
  background: gray;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
}

.social-media > .fa-google-plus-g:hover {
  background: red;
}

If you want the exact icons that are used you can open the PSD file in Photoshop and export them as png but I wouldn’t suggest doing so. It would be better to use FA or find some SVG icons that look close enough. Just search for the icons.

1 Like
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.