Personal Portfolio need help, kinda stuck

1

Tell us what’s happening:
Hello people ! So I’m working on my portfolio and got stuck with coloring the background of the different areas like “About me” , “Portfolio”, “Contact me”, I tried to do it but it doesnt seem to work but that’s not the whole problem, my “Contact me” header is next to my portfolio and not under it… I will show you guys my code so you understand better, thanks in advance :slight_smile:

EDIT: if someone also know a way to fix “pixel art maker” size so it fits with the others or if I can make all portfolios in the future have the same size would be great :slight_smile:

2

In CSS “.cards” remove “float: left” and change “display: block” to “display: inline-block”

To color different areas (not sure I fully understand what you mean) but try putting those areas into their own

with a unique ID… example add [div id=“test1”] to line 8 of the HTML and [/div] around line 13. Then in CSS…

#test1 {
color: #FF00FF;
}

Should allow you to then color whatever area is within that [div]?

I’m pretty new to this, but hope that helps a bit!

3

Thanks, it helped a lot with the first thing, but the background color thing works too but its not really what I’m looking for (I think), maybe I’m doing it wrong somehow but if you look at this page: https://codepen.io/freeCodeCamp/full/YqLyXB, then you can see that this guy have different colors, hope this helps you understand what I mean !

4

Ah that’s a bit beyond me at the moment I’m afraid - hopefully someone else can help!

I had another look at your code and saw you got the cards working. Might I suggest making a CSS class and setting image width and height there, then also adding a slight shadow to complete the border at the top and margin from the image.

Add this to HTML:

<a href=“https://codepen.io/Vookie/full/ppdYeG/”>
img class=“cardimage” src=“https://s26.postimg.org/pixk7c1t5/pixel_art.png” alt=“Pixel art maker”>
</a>

Add this to CSS:

.cards {
box-shadow: 0 4px 6px 2px rgba(0,0,0,.3);
}

.cardimage {
width: 200px;
height: 150px;
margin-top: 20px;
}

Personal preference but just playing around and thought it worked quite well.

5

Thanks ! I will try it out and see how it looks, I’m new myself so my code might be the worst :smiley: but thanks for the advice !

1 Like