I am stuck in between two massive boulders, squishing my spleen

1

Two questions, actually. By the way, this is pertaining to the Portfolio Project.

1) Opaque Elements and Translucent Background
I’m attempting to have the footer of my page a transparent black, as well as my div container that has all of the three sections of my page. I don’t know how to change the opacity of the background without affecting its children.

2) Moving to a Part of the Page by Clicking a Button
I’ve tried looking for a way to accomplish this, but I could never find the code that actually accomplishes this. If possible, I’d like to make a smooth transition. I believe this is done with javascript, but I’m simply lost.

Here’s the Pen: https://codepen.io/drewH/full/QaJzoK/

1 Like
2
  1. For your background color use rgba().
  2. You can use anchors (<a>) to jump to an element on the page via id or name.

The rest is left as an exercise for the reader.

1 Like
3

I tried using rgba, but it doesn’t affect the opacity of my element. Do I have to use a certain Bootstrap update to do it?

4

I’m not sure if this will help you, but I ended up doing a transparent background in parts of my tribute project using rgba() like @ArielLeslie suggested.

Here’s a bit of my style sheet for example:

#history{
  max-width: 75rem;
  margin: 0 auto;
  padding: 4%;
  background: rgba(92, 92, 92, 0.4);
  border-radius: 10px;
}

That color comes out to a light grey btw, but you can at least see the formatting. I should also mention that this was on the main container element to that section.

1 Like
5

Just to add a little… the ‘a’ in RGBA stands for ‘alpha channel’ which is why it is also gauged/scaled differently.

2 Likes
6

I don’t have an answer for you… but wanted to say I appreciate your sense of, a, despair?? humour in your choice of title :wink:

1 Like
7

No, rgba has absolutely nothing to do with Bootstrap.

You were probably not including the opacity value:

{
  background: rgb(0, 0, 0);
}

/* vs. */
{
  background: rgba(0, 0, 0, 0.5);
}

Using opacity in an rgba background color will not make the children elements transparent too like the opacity property does.

As for the second, you don’t need JavaScript to move to part of a page. You will need JavaScript to make the transition smooth however. Do first what Ariel suggested and use <a href="..."></a>. You will then want to google smooth scrolling anchor tags, and you will then want to include a small snippet of code in your JavaScript. You don’t really need to know what the snippet does, it should just work out of the box.

4 Likes
8

So here’s the thing…

you did rgba(0, 0, 0, 0.5)

I did rbga(0, 0, 0, 0.5)

:man_facepalming:

1 Like
9

You have no idea how often this sort of thing happens to professional developers.

1 Like