00:00,150 --> 00:06,150
There's one small issue with our angled stripe that I didn't address in the previous couple
of videos
00:06,150 --> 00:10,500
because it wasn't an issue until we change the background color of this.
00:10,800 --> 00:12,100
This is our BG light.
00:12,120 --> 00:13,200
This is white.
00:13,200 --> 00:15,090
So we'll just call this our gray color.
00:15,390 --> 00:17,310
And that issue is right here.
00:17,490 --> 00:24,240
So there's a sliver of white right here on the integration section, and there's also a
sliver of white
00:24,240 --> 00:25,050
over here.
00:25,050 --> 00:30,660
But it's not a problem because this element, the next section Y swipe, has a white
background.
00:30,660 --> 00:31,500
So that's what we want.
00:31,500 --> 00:32,820
It fits seamlessly.
00:33,030 --> 00:39,180
But here, when I change the background color of this to be our gray color, this little
white stripe,
00:39,180 --> 00:40,060
it's revealed.
00:40,080 --> 00:41,370
And if we inspect.
00:42,170 --> 00:46,670
What's happening here is that it's just the background color of our integration section.
00:47,060 --> 00:48,260
Zoom in a little bit.
00:48,950 --> 00:52,670
I'll turn the background color on to red to make it more obvious.
00:52,880 --> 00:54,110
So there it is.
00:54,110 --> 00:54,350
Right.
00:54,350 --> 00:56,030
That's the part of the background peeking out.
00:56,030 --> 00:57,950
This is the before pseudo element.
00:58,100 --> 01:00,620
And here's part of the background peeking out down there.
01:00,620 --> 01:03,770
And again, when it's not red, it's just white.
01:03,770 --> 01:04,880
That works great.
01:04,880 --> 01:06,530
But up here it's a problem.
01:07,100 --> 01:13,250
So it doesn't really work for me to just say, okay, the background of this element should
be our variable.
01:14,090 --> 01:14,960
What was it called?
01:14,960 --> 01:16,070
BG Light?
01:17,720 --> 01:23,510
It works up here, but then it causes a problem here because now we have this little
triangle of the
01:23,510 --> 01:28,310
gray color up against the white background of the Y swipe section.
01:28,460 --> 01:31,640
So what I'm going to do is basically patch the hole.
01:32,240 --> 01:34,310
I'll refresh the page to get rid of those styles.
01:34,310 --> 01:36,800
And I'm going to make a little sliver here.
01:36,800 --> 01:38,050
It doesn't even have to be a triangle.
01:38,060 --> 01:39,860
I'll just put it behind this blue.
01:39,920 --> 01:46,730
But I'm going to make a sliver of the BG light color and I could use a div to do that and
clutter my
01:46,730 --> 01:47,630
mark up more.
01:47,630 --> 01:53,090
But as has been the trend in this whole project, we're going to stick to pseudo elements.
01:53,090 --> 01:58,220
So I'm going to make a after pseudo element because we already have a before pseudo element
and we only
01:58,220 --> 02:03,470
have two choices before and after and the before pseudo element is making the stripe that's
blue.
02:03,470 --> 02:09,050
I'm going to make one that's just a rectangle to cover this up here and I'll give it this
big light
02:09,050 --> 02:09,680
color.
02:10,550 --> 02:20,000
So inside of my integrations section, all these styles here, here's the before that gives
me the stripe,
02:20,390 --> 02:22,490
I'm going to make an after element.
02:22,670 --> 02:25,940
So integration section, colon, Colon.
02:25,940 --> 02:32,450
After no content, I'm going to give it a background color of red to start.
02:32,450 --> 02:35,240
It's just way easier to look at and see what's happening.
02:35,720 --> 02:43,310
I'll make it 100% wide and the height is going to be just 50% because I don't want it to
peek out on
02:43,310 --> 02:46,520
the bottom and then I'm going to give it a position of absolute.
02:46,880 --> 02:52,010
And we already have the ancestor positioned, which is the integration section.
02:52,040 --> 02:54,020
Okay, so there's our box.
02:54,020 --> 03:02,210
And now if I set it to have a here's the after pseudo element, a top of zero, a left of
zero, it
03:02,210 --> 03:03,590
goes to the right spot.
03:03,590 --> 03:05,180
I mean, it's on top of everything.
03:05,180 --> 03:06,740
So I want to change that color.
03:06,950 --> 03:08,960
Sorry, I want to change the Z index.
03:08,960 --> 03:12,920
I do want to change the color to, but let's go with a negative to Z index.
03:12,920 --> 03:14,270
This one has negative one.
03:14,270 --> 03:15,980
That's our blue stripe.
03:16,070 --> 03:17,600
This should go behind it.
03:18,110 --> 03:19,520
And there we are.
03:19,520 --> 03:22,250
I just need to change the color and we'll be good to go.
03:22,250 --> 03:24,500
So there's a box back there, right?
03:24,500 --> 03:25,490
It's just being hidden.
03:25,490 --> 03:30,230
It looks like a triangle because I use the index to push this to the back with negative two
Z index.
03:30,230 --> 03:34,910
This has negative one, this has the greater index even though it's negative.
03:34,910 --> 03:37,070
So it sits on top of this red box.
03:37,160 --> 03:41,510
And now I just need to give it the correct color, which is variable.
03:41,540 --> 03:43,100
BG light.
03:44,290 --> 03:45,070
And there we are.
03:46,300 --> 03:48,070
So there's no transition.
03:48,070 --> 03:50,530
It just goes from BG Lite to BG Lite.
03:50,560 --> 03:52,710
It looks like one continuous color.
03:52,720 --> 03:55,210
I mean, it is, but it's across two elements.
03:55,210 --> 04:00,430
And then I have my blue stripe going across, and then here we just have the white
background poking
04:00,430 --> 04:05,620
out from the integration section and the white background of the Y swipe section.
04:05,980 --> 04:07,740
And that should do it for us.
04:07,750 --> 04:09,040
So just a little fix.
04:09,160 --> 04:15,340
I didn't notice that problem until we then change the background color of this section,
which we did
04:15,340 --> 04:17,650
after creating our blue stripe.