Portfolio Project: Creating <div>s with background colors

Portfolio Project: Creating <div>s with background colors
0

#1

Just started here today, and have been very happy with the course thus far. I’m now at the point, however, where I’m sure that I’m going to reach all sorts of issues I’ll have a difficult time solving. Here’s my first.

I’m trying to do the project to make a personal portfolio like this one. Currently, I am trying to create the different divs with the different background colors.

First, I have assigned a background color to the body. Next, I have created a div with the class “profile”, and nested all the elements currently written up within that div (the two text pieces, plus the picture). However, when I apply use css to apply a background color to .profile, nothing changes, and I am not sure why.

Can anyone clarify what I’m doing wrong? Thanks!


#2

Can you post the link to your Codepen? It is always much better for us to be able to see and work with the actual code instead of a screenshot.


#3

ok, try to add a <div class="profile" id="insertnamehere">

then in your CSS add #insertnamehere {background-color: #fff; }

(do you see what i did, it might be that you using class profile is the problem, maybe you added something like bootstrap (which uses class profile?) it is easier to use an ID than class unless there are multiple objects with the same class)


#4

Thanks for the suggestions, but no luck with using an id instead of a class.

Here’s a link to my codepen: https://codepen.io/lankyjon/pen/XZPxbd


#5

ok, i see what you did there, now, depending on how you wanted to do this, i have edited it so that you can see what goes where… (generally good practice)

i have incorporated the row and first column (title) into one div ( use a space to use more than one class) otherwise you will have a box in a box which is no use, and included the picture into that as it looks like that is what you wanted (col-xs- 8 and 4) programatically they needed to be within the same .row and now they are.

Where possible i have kept the DIV and closing tags in the same vertical line (this helps to read the code)
If you wanted a section such as the entire row for the title as the .profile you can move it from its current div, to the row e.g. <div class="row profile">