title
Pure CSS Hamburger Menu & Overlay

description
In this video we will create a landing page with a pure CSS responsive hamburger menu (No JavaScript) with a bit of animation using CSS transitions. CSS Starts - 6:27 Menu CSS Starts - 15:40 Sponsor: Freelancer Bundle (Use "brad25" for 25% off) https://studywebdevelopment.com/freelancing.html Code: https://codepen.io/bradtraversy/pen/vMGBjQ 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Modern HTML & CSS From The Beginning: https://www.udemy.com/modern-html-css-from-the-beginning/?couponCode=TRAVERSYMEDIA Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'Pure CSS Hamburger Menu & Overlay', 'heatmap': [{'end': 386.757, 'start': 258.12, 'weight': 0.806}, {'end': 1002.88, 'start': 923.494, 'weight': 0.896}, {'end': 1031.914, 'start': 1004.321, 'weight': 0.751}, {'end': 1123.343, 'start': 1069.91, 'weight': 0.72}, {'end': 1201.653, 'start': 1157.389, 'weight': 0.769}, {'end': 1444.338, 'start': 1372.429, 'weight': 0.829}, {'end': 1483.313, 'start': 1452.931, 'weight': 0.756}, {'end': 1934.601, 'start': 1910.008, 'weight': 0.716}, {'end': 2083.827, 'start': 2057.985, 'weight': 0.817}], 'summary': 'Tutorial series covers building a css hamburger menu with transitions, animations, and responsiveness, setting css variables for styling, web design and css positioning, styling web elements like flexbox, creating and styling a hamburger menu, and techniques for styling, animating, and creating smooth transitions with css.', 'chapters': [{'end': 371.594, 'segs': [{'end': 47.957, 'src': 'embed', 'start': 7.165, 'weight': 0, 'content': [{'end': 11.727, 'text': 'This video is sponsored by the Ultimate Freelancing Bundle by StudyWebDevelopment.com,', 'start': 7.165, 'duration': 4.562}, {'end': 19.71, 'text': 'which gives you everything you need to start your own freelancing business, including 130-page in-depth guide invoicing and client proposal templates,', 'start': 11.727, 'duration': 7.983}, {'end': 22.811, 'text': 'website templates, an SEO checklist and much more.', 'start': 19.71, 'duration': 3.101}, {'end': 25.892, 'text': 'Visit the link in the description and use the code BRAD25 to get 25% off.', 'start': 23.131, 'duration': 2.761}, {'end': 34.574, 'text': "Hey, what's going on, guys? So in this project, we're going to be building a landing page that has a CSS only hamburger menu.", 'start': 27.893, 'duration': 6.681}, {'end': 38.415, 'text': "And I'm sure most of you know what a hamburger menu is, or you've at least seen them.", 'start': 35.094, 'duration': 3.321}, {'end': 44.536, 'text': "They're these menus that have the three lines kind of looks like a hamburger and you click it and then some kind of menu opens.", 'start': 38.455, 'duration': 6.081}, {'end': 47.957, 'text': 'So sometimes it can slide over from the side or the top.', 'start': 44.977, 'duration': 2.98}], 'summary': 'Video sponsored by ultimate freelancing bundle, offers 130-page guide, templates, and more. building a landing page with css-only hamburger menu.', 'duration': 40.792, 'max_score': 7.165, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg7165.jpg'}, {'end': 176.567, 'src': 'embed', 'start': 151.594, 'weight': 1, 'content': [{'end': 156.856, 'text': "So let's go ahead and get started in the way that this works without JavaScript.", 'start': 151.594, 'duration': 5.262}, {'end': 158.437, 'text': 'Just show you real quick.', 'start': 157.497, 'duration': 0.94}, {'end': 163.139, 'text': 'The hamburger menu actually has a checkbox.', 'start': 158.957, 'duration': 4.182}, {'end': 166.301, 'text': "OK, so we're using a checkbox with the class of toggler.", 'start': 163.479, 'duration': 2.822}, {'end': 171.064, 'text': "And that's how we're toggling it is we're styling the checked state.", 'start': 166.921, 'duration': 4.143}, {'end': 176.567, 'text': "OK, usually you'll use JavaScript to do stuff like this, but in CSS you can target the checked state.", 'start': 171.084, 'duration': 5.483}], 'summary': 'Using css, a checkbox with the class of toggler is styled to toggle the hamburger menu without javascript.', 'duration': 24.973, 'max_score': 151.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg151594.jpg'}], 'start': 7.165, 'title': 'Css hamburger menu', 'summary': 'Covers building a css hamburger menu for a landing page, focusing on css transitions, animations, and responsiveness. it includes a brief html structure introduction and is sponsored by ultimate freelancing bundle by studywebdevelopment.com offering a 25% discount using code brad25.', 'chapters': [{'end': 371.594, 'start': 7.165, 'title': 'Building a css hamburger menu', 'summary': 'Covers building a css hamburger menu for a landing page, including the use of css transitions, animations, and responsiveness, alongside a brief introduction to the html structure. the tutorial is sponsored by the ultimate freelancing bundle by studywebdevelopment.com, offering a 130-page in-depth guide, client proposal templates, website templates, and an seo checklist, with a 25% discount using the code brad25.', 'duration': 364.429, 'highlights': ['The tutorial is sponsored by the Ultimate Freelancing Bundle by StudyWebDevelopment.com, which provides a 130-page in-depth guide, client proposal templates, website templates, and an SEO checklist with a 25% discount using the code BRAD25. The Ultimate Freelancing Bundle by StudyWebDevelopment.com provides a 130-page in-depth guide, client proposal templates, website templates, and an SEO checklist, with a 25% discount using the code BRAD25.', 'The tutorial demonstrates building a CSS hamburger menu for a landing page, including the use of CSS transitions, animations, and responsiveness. The chapter covers building a CSS hamburger menu for a landing page, including the use of CSS transitions, animations, and responsiveness.', 'The tutorial introduces the HTML structure for the hamburger menu, including the use of checkboxes, classes, and various elements. The tutorial provides a brief introduction to the HTML structure for the hamburger menu, including the use of checkboxes, classes, and various elements.']}], 'duration': 364.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg7165.jpg', 'highlights': ['The tutorial demonstrates building a CSS hamburger menu for a landing page, including the use of CSS transitions, animations, and responsiveness.', 'The tutorial introduces the HTML structure for the hamburger menu, including the use of checkboxes, classes, and various elements.', 'The tutorial is sponsored by the Ultimate Freelancing Bundle by StudyWebDevelopment.com, which provides a 130-page in-depth guide, client proposal templates, website templates, and an SEO checklist with a 25% discount using the code BRAD25.']}, {'end': 550.836, 'segs': [{'end': 426.712, 'src': 'embed', 'start': 400.281, 'weight': 0, 'content': [{'end': 403.923, 'text': "I do have a video on CSS variables, if you've never used them before.", 'start': 400.281, 'duration': 3.642}, {'end': 404.863, 'text': "But they're pretty easy.", 'start': 403.983, 'duration': 0.88}, {'end': 406.444, 'text': 'We just use double hyphen.', 'start': 404.903, 'duration': 1.541}, {'end': 409.245, 'text': "I'm going to set the primary color variable.", 'start': 406.464, 'duration': 2.781}, {'end': 415.487, 'text': 'And I want to set this to an RGBA value so that it can have some transparency.', 'start': 409.825, 'duration': 5.662}, {'end': 422.41, 'text': 'So red, green, blue, alpha will allow us to assign the last value is the opacity.', 'start': 416.007, 'duration': 6.403}, {'end': 425.592, 'text': "So let's do 13 red 110 green and 139 blue.", 'start': 423.01, 'duration': 2.582}, {'end': 426.712, 'text': 'And then for the opacity 0.75.', 'start': 425.652, 'duration': 1.06}], 'summary': 'Css variables make styling easier, using rgba values for transparency. example: 13 red, 110 green, 139 blue, with 0.75 opacity.', 'duration': 26.431, 'max_score': 400.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg400281.jpg'}, {'end': 550.836, 'src': 'embed', 'start': 486.201, 'weight': 1, 'content': [{'end': 494.242, 'text': "So let's do font, family, and Roboto, and sans serif.", 'start': 486.201, 'duration': 8.041}, {'end': 499.623, 'text': "OK, and I'm going to set the line height to, let's say, 1.4.", 'start': 494.262, 'duration': 5.361}, {'end': 502.704, 'text': 'And if I save that, you can see those styles now take effect.', 'start': 499.623, 'duration': 3.081}, {'end': 507.605, 'text': "So let's do the container, which just kind of pushes everything to the middle.", 'start': 503.384, 'duration': 4.221}, {'end': 515.057, 'text': "And we're going to set the max width to kind of a narrow width.", 'start': 509.626, 'duration': 5.431}, {'end': 520.648, 'text': "I'm just going to do 960 and then set the margin to auto.", 'start': 515.116, 'duration': 5.532}, {'end': 531.022, 'text': 'which will move everything to the middle and set an overflow of hidden and set the padding on the sides to three rim.', 'start': 521.556, 'duration': 9.466}, {'end': 533.784, 'text': 'Okay, so now it pushes that to the middle.', 'start': 531.042, 'duration': 2.742}, {'end': 542.11, 'text': "And I know I'm not explaining every single little detail of the CSS, but I'm guessing that you guys know at least a little bit of CSS.", 'start': 534.184, 'duration': 7.926}, {'end': 550.836, 'text': 'If not, check out my CSS crash course or take the Udemy course, the HTML and CSS from the beginning.', 'start': 542.19, 'duration': 8.646}], 'summary': 'Styling includes font family roboto, line height 1.4, container with max width 960, margin auto, overflow hidden, padding 3 rem.', 'duration': 64.635, 'max_score': 486.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg486201.jpg'}], 'start': 372.552, 'title': 'Styling showcase area with css variables', 'summary': 'Discusses setting css variables for primary color, overlay color, and menu speed, along with core styling for the showcase area, including container width, font family, and line height.', 'chapters': [{'end': 550.836, 'start': 372.552, 'title': 'Styling showcase area with css variables', 'summary': 'Discusses setting css variables for primary color, overlay color, and menu speed, along with core styling for the showcase area, including container width, font family, and line height.', 'duration': 178.284, 'highlights': ['The chapter covers setting CSS variables for primary color, overlay color, and menu speed, providing RGBA values and transparency levels, such as 13 red, 110 green, 139 blue with 0.75 opacity for primary color, and 24 red, 39 green, 51 blue with 0.85 transparency for overlay color.', 'It demonstrates core styling elements including setting box sizing to border box, zeroing out margin and padding, applying Roboto font family with sans serif fallback, and setting line height to 1.4.', 'The chapter also includes styling the container by setting its max width to 960, margin to auto for centering, overflow to hidden, and padding on the sides to three rim.']}], 'duration': 178.284, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg372552.jpg', 'highlights': ['The chapter covers setting CSS variables for primary color, overlay color, and menu speed, providing RGBA values and transparency levels.', 'It demonstrates core styling elements including setting box sizing to border box, zeroing out margin and padding, applying Roboto font family with sans serif fallback, and setting line height to 1.4.', 'The chapter also includes styling the container by setting its max width to 960, margin to auto for centering, overflow to hidden, and padding on the sides to three rim.']}, {'end': 733.17, 'segs': [{'end': 584.734, 'src': 'embed', 'start': 552.296, 'weight': 0, 'content': [{'end': 554.777, 'text': "which is a 20, I think it's a 20 hour course.", 'start': 552.296, 'duration': 2.481}, {'end': 557.959, 'text': "So now let's do the showcase.", 'start': 556.038, 'duration': 1.921}, {'end': 562.581, 'text': "So for the showcase, I'm going to set a background color.", 'start': 559.619, 'duration': 2.962}, {'end': 572.945, 'text': "And I'm going to use the primary color, so to use a variable, we need to do VAR and then put in whatever that variable is.", 'start': 566.242, 'duration': 6.703}, {'end': 576.787, 'text': "OK, and I'll set the text color to white.", 'start': 572.965, 'duration': 3.822}, {'end': 579.531, 'text': "So if I save that, it's going to look like that.", 'start': 577.93, 'duration': 1.601}, {'end': 584.734, 'text': 'Now I want this to take up the entire screen and just ignore the menu for now.', 'start': 579.591, 'duration': 5.143}], 'summary': 'A 20-hour course showcase with setting background and text color for the entire screen.', 'duration': 32.438, 'max_score': 552.296, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg552296.jpg'}, {'end': 656.172, 'src': 'embed', 'start': 628.587, 'weight': 1, 'content': [{'end': 632.649, 'text': "And then let's put the background as an image.", 'start': 628.587, 'duration': 4.062}, {'end': 636.132, 'text': 'OK, we want that beach background or whatever you want to use.', 'start': 632.669, 'duration': 3.463}, {'end': 639.255, 'text': 'So IMG slash showcase.', 'start': 637.092, 'duration': 2.163}, {'end': 643.381, 'text': "Then we're going to set the background repeat value to no repeat.", 'start': 639.275, 'duration': 4.106}, {'end': 645.424, 'text': 'The position to center, center.', 'start': 643.421, 'duration': 2.003}, {'end': 648.969, 'text': "And then let's cover the entire thing.", 'start': 646.546, 'duration': 2.423}, {'end': 651.012, 'text': 'All right.', 'start': 648.989, 'duration': 2.023}, {'end': 653.251, 'text': 'So if I save that, nothing happens.', 'start': 651.57, 'duration': 1.681}, {'end': 656.172, 'text': "What we're going to do is position this absolute.", 'start': 653.651, 'duration': 2.521}], 'summary': 'Setting background image with no repeat and center position.', 'duration': 27.585, 'max_score': 628.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg628587.jpg'}, {'end': 710.777, 'src': 'embed', 'start': 685.286, 'weight': 2, 'content': [{'end': 690.047, 'text': 'So if I go ahead and save this, what happens is it gets put on top of it.', 'start': 685.286, 'duration': 4.761}, {'end': 694.929, 'text': 'So this image is now on top of the content.', 'start': 690.668, 'duration': 4.261}, {'end': 701.932, 'text': "So to move it in back of it, we're going to just set the z-index to negative 1 to push it back.", 'start': 695.369, 'duration': 6.563}, {'end': 702.812, 'text': 'All right.', 'start': 702.552, 'duration': 0.26}, {'end': 703.753, 'text': "So now it's behind it.", 'start': 702.832, 'duration': 0.921}, {'end': 709.436, 'text': 'And the reason we can see it is because the showcase background color is RGBA.', 'start': 703.773, 'duration': 5.663}, {'end': 710.777, 'text': 'So we can see through it.', 'start': 709.556, 'duration': 1.221}], 'summary': 'Image is set behind content using z-index -1.', 'duration': 25.491, 'max_score': 685.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg685286.jpg'}], 'start': 552.296, 'title': 'Web design and css positioning', 'summary': 'Covers a 20-hour web design course showcase, including setting background and text color, and adjusting the screen layout to take up 100% viewport height. it also explains how to position a css overlay using relative and absolute positioning, setting background image and size, and using pseudo-selector before to create and style the overlay. additionally, it explores repositioning an image by adjusting its z-index to negative 1 and changing its transparency using rgba values, with the primary color set at 0.75 for semi-transparency.', 'chapters': [{'end': 602.463, 'start': 552.296, 'title': 'Web design course showcase', 'summary': 'Covers a 20-hour web design course showcase, including setting background and text color, and adjusting the screen layout to take up 100% viewport height.', 'duration': 50.167, 'highlights': ['The showcase covers a 20-hour web design course, focusing on setting background and text color and adjusting the screen layout to take up 100% viewport height.', 'The showcase demonstrates setting the background color to the primary color and using a variable, as well as setting the text color to white.', 'The chapter emphasizes the importance of the screen layout taking up 100 viewport heights to occupy the entire screen.']}, {'end': 684.045, 'start': 603.504, 'title': 'Css overlay positioning', 'summary': 'Explains how to position a css overlay using the relative and absolute positioning, setting background image and size, and using pseudo-selector before to create and style the overlay.', 'duration': 80.541, 'highlights': ['The overlay is positioned absolute inside a relative container, and the background image is set with no repeat, centered position, and covering the entire area.', 'The pseudo-selector before is used to create a ghost element for the overlay, allowing for styling and adding content.']}, {'end': 733.17, 'start': 685.286, 'title': 'Repositioning and styling elements', 'summary': 'Explains repositioning an image by adjusting its z-index to negative 1 and changing its transparency using rgba values, with the primary color set at 0.75 for semi-transparency.', 'duration': 47.884, 'highlights': ['Adjusting z-index to negative 1 repositions the image behind the content.', "Changing the RGBA values affects the image's transparency, with 0.75 being recommended for semi-transparency.", 'Setting the primary color to 1 results in a completely solid image.']}], 'duration': 180.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg552296.jpg', 'highlights': ['The showcase covers a 20-hour web design course, focusing on setting background and text color and adjusting the screen layout to take up 100% viewport height.', 'The overlay is positioned absolute inside a relative container, and the background image is set with no repeat, centered position, and covering the entire area.', 'Adjusting z-index to negative 1 repositions the image behind the content.']}, {'end': 1027.471, 'segs': [{'end': 818.984, 'src': 'embed', 'start': 733.21, 'weight': 0, 'content': [{'end': 741.576, 'text': "So we have our showcase class and then we remember, we have a showcase, dash inner, which we're going to.", 'start': 733.21, 'duration': 8.366}, {'end': 745.918, 'text': "we're going to use flex box to center everything.", 'start': 741.576, 'duration': 4.342}, {'end': 747.539, 'text': "So let's do display flex.", 'start': 746.018, 'duration': 1.521}, {'end': 752.062, 'text': 'Now, if I do that automatically, it turns into a row, a horizontal row.', 'start': 747.64, 'duration': 4.422}, {'end': 755.464, 'text': 'So I want to set the flex direction to column.', 'start': 752.082, 'duration': 3.382}, {'end': 757.942, 'text': 'All right.', 'start': 757.602, 'duration': 0.34}, {'end': 763.587, 'text': 'That puts it back and then we can use align items to center.', 'start': 757.982, 'duration': 5.605}, {'end': 772.254, 'text': "Let's do justify content to center and text align to center.", 'start': 763.667, 'duration': 8.587}, {'end': 772.934, 'text': 'All right.', 'start': 772.274, 'duration': 0.66}, {'end': 780.48, 'text': "Now, if I do that, it doesn't center it this way because this the element that it's in doesn't have a height.", 'start': 773.034, 'duration': 7.446}, {'end': 782.202, 'text': 'So we want to set the height.', 'start': 780.841, 'duration': 1.361}, {'end': 788.005, 'text': 'to 100 percent the whole thing and save.', 'start': 785.163, 'duration': 2.842}, {'end': 790.187, 'text': "And that didn't work because I need a semicolon.", 'start': 788.085, 'duration': 2.102}, {'end': 791.548, 'text': 'And there we go.', 'start': 790.968, 'duration': 0.58}, {'end': 793.85, 'text': 'And it might not look center just because of the menu.', 'start': 791.688, 'duration': 2.162}, {'end': 797.073, 'text': "It's pushing everything down, but it's it's centered within this.", 'start': 793.89, 'duration': 3.183}, {'end': 803.218, 'text': "And we're going to just change some styles on the text here, the heading and so on.", 'start': 798.834, 'duration': 4.384}, {'end': 808.522, 'text': "So let's do showcase each one and let's make that heading bigger.", 'start': 803.798, 'duration': 4.724}, {'end': 811.885, 'text': "So I'm going to do a font size of four rem.", 'start': 808.602, 'duration': 3.283}, {'end': 818.984, 'text': "And let's target the paragraph and let's make that a little bigger.", 'start': 813.839, 'duration': 5.145}], 'summary': 'Using flex box to center showcase content vertically and horizontally.', 'duration': 85.774, 'max_score': 733.21, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg733210.jpg'}, {'end': 1027.471, 'src': 'heatmap', 'start': 923.494, 'weight': 3, 'content': [{'end': 929.001, 'text': "Let's do one second and we'll just do ease in and save,", 'start': 923.494, 'duration': 5.507}, {'end': 937.362, 'text': 'and now You can see that it happens nice and smooth instead of just flicking to the opacity being less.', 'start': 929.001, 'duration': 8.361}, {'end': 938.182, 'text': 'All right.', 'start': 937.942, 'duration': 0.24}, {'end': 940.764, 'text': "So that's it for the showcase area.", 'start': 938.282, 'duration': 2.482}, {'end': 942.305, 'text': "Now we're going to move on to the menu.", 'start': 940.824, 'duration': 1.481}, {'end': 950.71, 'text': "So in our menu CSS at the very top, let's add the menu wrap, which wraps around everything.", 'start': 943.145, 'duration': 7.565}, {'end': 956.263, 'text': 'And we want to position this fixed.', 'start': 952.882, 'duration': 3.381}, {'end': 957.984, 'text': 'If I can spell position.', 'start': 956.784, 'duration': 1.2}, {'end': 964.927, 'text': "So position fixed because we want it to be always at the top, even if we could scroll down, which we can't.", 'start': 959.105, 'duration': 5.822}, {'end': 966.988, 'text': 'But if we could, it would still stay at the top.', 'start': 964.987, 'duration': 2.001}, {'end': 971.389, 'text': "So we want to do top zero and let's do left zero.", 'start': 967.068, 'duration': 4.321}, {'end': 974.951, 'text': "And then to make sure it's on top, let's do Z index one.", 'start': 971.83, 'duration': 3.121}, {'end': 975.831, 'text': 'All right.', 'start': 974.971, 'duration': 0.86}, {'end': 976.672, 'text': "So we'll save that.", 'start': 975.851, 'duration': 0.821}, {'end': 979.893, 'text': "And now you can see it's on top of the rest of the content.", 'start': 976.732, 'duration': 3.161}, {'end': 984.322, 'text': "So now let's do the toggler, which is the checkbox.", 'start': 980.839, 'duration': 3.483}, {'end': 997.895, 'text': 'So menu wrap, uh, toggler, and we want to position this absolute and set it to top zero left zero.', 'start': 985.003, 'duration': 12.892}, {'end': 1002.88, 'text': "We're going to be doing this with a bunch of the elements and then Z index of two.", 'start': 997.915, 'duration': 4.965}, {'end': 1015.066, 'text': 'and the cursor should be a pointer if we hover over it and the width is going to be 50 pixels and the height is going to be 50 pixels.', 'start': 1004.321, 'duration': 10.745}, {'end': 1016.867, 'text': 'however, we want to make this invisible.', 'start': 1015.066, 'duration': 1.801}, {'end': 1025.069, 'text': "okay, we don't want to see the checkbox, so we're going to set opacity to zero and if i save, you can see now the checkbox is gone, OK.", 'start': 1016.867, 'duration': 8.202}, {'end': 1026.111, 'text': "It's it's still there.", 'start': 1025.13, 'duration': 0.981}, {'end': 1027.471, 'text': "It's just hidden.", 'start': 1026.171, 'duration': 1.3}], 'summary': 'Demonstrating css positioning and opacity in web design for smooth transitions and fixed menu placement.', 'duration': 175.087, 'max_score': 923.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg923494.jpg'}], 'start': 733.21, 'title': 'Styling web elements with css', 'summary': 'Demonstrates the use of flexbox to center elements vertically and horizontally, setting the height to 100 percent, styling heading, paragraph, and button sizes, explaining the styling of showcase and menu, including setting background and text color, padding, margin, removing text decoration, setting hover opacity, and adding transition for smooth effect, and covering the process of positioning the menu wrap and the toggler using css, setting the menu wrap to a fixed position with top and left properties and a z index of 1, and the toggler to an absolute position with top, left, z index, and cursor properties, while making it invisible with an opacity of 0.', 'chapters': [{'end': 850.104, 'start': 733.21, 'title': 'Styling showcase with flexbox', 'summary': 'Demonstrates the use of flexbox to center elements vertically and horizontally, setting the height to 100 percent, and styling heading, paragraph, and button sizes.', 'duration': 116.894, 'highlights': ['Using flexbox to center elements vertically and horizontally The instructor demonstrates using flexbox to center elements vertically by setting the flex direction to column and horizontally using align items and justify content properties.', 'Setting the height to 100 percent The instructor sets the height of the element to 100 percent to ensure proper centering of the content.', 'Styling heading, paragraph, and button sizes The instructor styles the heading with a font size of 4 rem, the paragraph with a font size of 1.3 rem, and the button as an inline element.']}, {'end': 942.305, 'start': 852.384, 'title': 'Styling showcase and menu', 'summary': 'Explains the styling of showcase and menu, including setting background and text color, padding, margin, removing text decoration, setting hover opacity, and adding transition for smooth effect.', 'duration': 89.921, 'highlights': ['The background color is set to the primary color, and the text color is set to white, with specific padding and margin values.', 'The opacity is set to 0.7 on hover, making it lighter with a smooth transition effect.', 'A transition of one second with ease-in effect is applied to the opacity property for a smooth visual effect.']}, {'end': 1027.471, 'start': 943.145, 'title': 'Css menu positioning and toggling', 'summary': 'Covers the process of positioning the menu wrap and the toggler using css, setting the menu wrap to a fixed position with top and left properties and a z index of 1, and the toggler to an absolute position with top, left, z index, and cursor properties, while making it invisible with an opacity of 0.', 'duration': 84.326, 'highlights': ["Setting menu wrap to a fixed position The menu wrap is set to a fixed position using 'position: fixed', ensuring it stays at the top even while scrolling.", "Positioning the toggler with absolute position The toggler is positioned absolutely with 'position: absolute', 'top: 0', 'left: 0', and a higher Z index to ensure it remains on top of other elements.", 'Making the toggler invisible The toggler is made invisible by setting its opacity to zero while still maintaining its presence on the page.']}], 'duration': 294.261, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg733210.jpg', 'highlights': ['Using flexbox to center elements vertically and horizontally The instructor demonstrates using flexbox to center elements vertically by setting the flex direction to column and horizontally using align items and justify content properties.', 'Setting the height to 100 percent The instructor sets the height of the element to 100 percent to ensure proper centering of the content.', 'Styling heading, paragraph, and button sizes The instructor styles the heading with a font size of 4 rem, the paragraph with a font size of 1.3 rem, and the button as an inline element.', 'The background color is set to the primary color, and the text color is set to white, with specific padding and margin values.', 'The opacity is set to 0.7 on hover, making it lighter with a smooth transition effect.', 'A transition of one second with ease-in effect is applied to the opacity property for a smooth visual effect.', "Setting menu wrap to a fixed position The menu wrap is set to a fixed position using 'position: fixed', ensuring it stays at the top even while scrolling.", "Positioning the toggler with absolute position The toggler is positioned absolutely with 'position: absolute', 'top: 0', 'left: 0', and a higher Z index to ensure it remains on top of other elements.", 'Making the toggler invisible The toggler is made invisible by setting its opacity to zero while still maintaining its presence on the page.']}, {'end': 1296.414, 'segs': [{'end': 1201.653, 'src': 'heatmap', 'start': 1069.91, 'weight': 0, 'content': [{'end': 1074.593, 'text': 'OK So this is that square that the hamburger that the lines are going to be inside of.', 'start': 1069.91, 'duration': 4.683}, {'end': 1081.509, 'text': "So we're going to set a padding of one rem because we don't want the lines to be right up against the side and then a background.", 'start': 1075.385, 'duration': 6.124}, {'end': 1084.691, 'text': "I'm going to use the primary color.", 'start': 1081.529, 'duration': 3.162}, {'end': 1086.051, 'text': 'So we use our variable.', 'start': 1084.771, 'duration': 1.28}, {'end': 1093.476, 'text': "It doesn't show up in the IntelliSense because the variables are actually in the other file.", 'start': 1089.013, 'duration': 4.463}, {'end': 1101.901, 'text': 'However, they will work because if we look at our index HTML, the style CSS is above the menu CSS.', 'start': 1093.816, 'duration': 8.085}, {'end': 1103.722, 'text': 'So we can inherit those variables.', 'start': 1101.981, 'duration': 1.741}, {'end': 1106.852, 'text': "Alright, so we'll just have to type it out.", 'start': 1104.77, 'duration': 2.082}, {'end': 1107.912, 'text': 'Primary color.', 'start': 1107.012, 'duration': 0.9}, {'end': 1114.497, 'text': "Okay, and then we're going to use flex here to align to the center.", 'start': 1107.932, 'duration': 6.565}, {'end': 1123.343, 'text': "So flex and then align items to the center and let's justify content to the center.", 'start': 1114.577, 'duration': 8.766}, {'end': 1132.617, 'text': "And save and now you can see that outline of the box and it's see through because we have the primary color, which has that alpha value.", 'start': 1123.994, 'duration': 8.623}, {'end': 1133.917, 'text': 'All right.', 'start': 1133.597, 'duration': 0.32}, {'end': 1136.678, 'text': "So now let's work on the lines inside of the hamburger.", 'start': 1133.937, 'duration': 2.741}, {'end': 1138.239, 'text': 'So say hamburger.', 'start': 1136.818, 'duration': 1.421}, {'end': 1144.694, 'text': "line This is what we're going to do here is going to be the middle line.", 'start': 1140.268, 'duration': 4.426}, {'end': 1152.643, 'text': "OK so let's do menu wrap and then we want to target hamburger and we want the immediate div.", 'start': 1144.714, 'duration': 7.929}, {'end': 1156.548, 'text': 'And the way that we can do that is with a greater than sign and then the immediate div.', 'start': 1152.863, 'duration': 3.685}, {'end': 1162.29, 'text': "So we're targeting in the HTML, I might as well just leave this file open just to show you.", 'start': 1157.389, 'duration': 4.901}, {'end': 1166.451, 'text': "So we want to target this div right here, and that's what we want to put the line on.", 'start': 1162.41, 'duration': 4.041}, {'end': 1174.534, 'text': "So let's say position relative and we want to set the width of the line to 100%.", 'start': 1167.131, 'duration': 7.403}, {'end': 1178.535, 'text': 'The height is going to be two pixels.', 'start': 1174.534, 'duration': 4.001}, {'end': 1182.936, 'text': 'We want to set a background color of white.', 'start': 1178.555, 'duration': 4.381}, {'end': 1201.653, 'text': "And let's add display So we can add a line items center and justify content center and save.", 'start': 1185.797, 'duration': 15.856}], 'summary': 'Styling the hamburger icon with padding, background, flex, and center alignment.', 'duration': 113.026, 'max_score': 1069.91, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg1069910.jpg'}, {'end': 1271.745, 'src': 'embed', 'start': 1246.422, 'weight': 3, 'content': [{'end': 1253.744, 'text': "OK, so I'm going to do a top position of negative 10 pixels, which will move both of them above to begin with.", 'start': 1246.422, 'duration': 7.322}, {'end': 1261.966, 'text': 'And we also want to set a width of 100 percent and a height of two pixels, just like the middle line.', 'start': 1254.084, 'duration': 7.882}, {'end': 1266.027, 'text': "And then the background is going to be white, but we're just going to we'll inherit.", 'start': 1262.086, 'duration': 3.941}, {'end': 1271.745, 'text': "OK, so if I save that now, it looks like there's one line above it, but there's actually two.", 'start': 1266.781, 'duration': 4.964}], 'summary': 'Setting a top position of -10 pixels, width of 100%, and white background, resulting in two lines appearing above.', 'duration': 25.323, 'max_score': 1246.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg1246422.jpg'}], 'start': 1029.071, 'title': 'Creating and styling hamburger menu', 'summary': 'Covers creating a 60x60 pixel menu wrap and hamburger, adding padding, using primary color as background, and aligning content to center using flexbox. it also demonstrates styling hamburger menu lines with specific dimensions, background color, and positioning using css.', 'chapters': [{'end': 1133.917, 'start': 1029.071, 'title': 'Creating menu wrap and hamburger', 'summary': 'Covers creating a menu wrap and hamburger, positioning it absolute, setting its dimensions to 60 pixels by 60 pixels, adding padding of one rem and using primary color as the background, and aligning its content to the center using flexbox.', 'duration': 104.846, 'highlights': ['The lines are going to be inside a square, with the dimensions set to 60 pixels by 60 pixels.', 'Setting a padding of one rem to ensure the lines are not right up against the side.', 'Using flexbox to align the content to the center, ensuring the outline of the box is see-through due to the alpha value of the primary color.']}, {'end': 1296.414, 'start': 1133.937, 'title': 'Styling hamburger menu lines', 'summary': 'Demonstrates how to use css to style a hamburger menu by creating three lines with specific dimensions, background color, and positioning.', 'duration': 162.477, 'highlights': ['The chapter demonstrates how to use CSS to style a hamburger menu by creating three lines with specific dimensions, background color, and positioning.', 'The lines are created using HTML elements with CSS properties such as position, width, height, background color, and pseudo-selectors like before and after.', 'The middle line is styled with a width of 100%, a height of two pixels, and a white background color, while the top and bottom lines are positioned using pseudo-selectors and specific top positions.', 'The top and bottom lines are positioned using before and after pseudo-selectors with a top position of negative 10 pixels and 10 pixels respectively, resulting in three lines for the hamburger menu.']}], 'duration': 267.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg1029070.jpg', 'highlights': ['The chapter demonstrates how to use CSS to style a hamburger menu by creating three lines with specific dimensions, background color, and positioning.', 'Using flexbox to align the content to the center, ensuring the outline of the box is see-through due to the alpha value of the primary color.', 'The lines are created using HTML elements with CSS properties such as position, width, height, background color, and pseudo-selectors like before and after.', 'The middle line is styled with a width of 100%, a height of two pixels, and a white background color, while the top and bottom lines are positioned using pseudo-selectors and specific top positions.', 'Setting a padding of one rem to ensure the lines are not right up against the side.', 'The lines are going to be inside a square, with the dimensions set to 60 pixels by 60 pixels.']}, {'end': 1660.246, 'segs': [{'end': 1447.24, 'src': 'heatmap', 'start': 1354.599, 'weight': 1, 'content': [{'end': 1359.265, 'text': "And then we want to do plus hamburger because we don't actually want to style the checkbox.", 'start': 1354.599, 'duration': 4.666}, {'end': 1361.848, 'text': 'We want to do the hamburger immediate div.', 'start': 1359.305, 'duration': 2.543}, {'end': 1365.26, 'text': 'Okay, so just like we did above.', 'start': 1363.638, 'duration': 1.622}, {'end': 1371.848, 'text': 'And then to rotate it, we can use the CSS transform property with rotate.', 'start': 1366.402, 'duration': 5.446}, {'end': 1374.712, 'text': 'And this takes in degrees.', 'start': 1372.429, 'duration': 2.283}, {'end': 1375.433, 'text': "We're going to do 135 degrees.", 'start': 1374.732, 'duration': 0.701}, {'end': 1378.071, 'text': 'All right.', 'start': 1377.711, 'duration': 0.36}, {'end': 1385.536, 'text': "So now if I save this and I go up here and I click, you can see that it's rotated 135 degrees.", 'start': 1378.091, 'duration': 7.445}, {'end': 1390.139, 'text': "So let's see.", 'start': 1387.638, 'duration': 2.501}, {'end': 1393.301, 'text': 'I think did I forget something here? Yes, I did.', 'start': 1390.48, 'duration': 2.821}, {'end': 1394.562, 'text': 'I forgot the transition.', 'start': 1393.361, 'duration': 1.201}, {'end': 1397.184, 'text': 'You see how it just kind of flicks to that.', 'start': 1394.602, 'duration': 2.582}, {'end': 1399.406, 'text': 'I want it to to transition into that.', 'start': 1397.304, 'duration': 2.102}, {'end': 1402.748, 'text': "So right on the hamburger div here, I'm going to add in a transition.", 'start': 1399.446, 'duration': 3.302}, {'end': 1406.134, 'text': 'on all properties.', 'start': 1404.933, 'duration': 1.201}, {'end': 1409.278, 'text': 'I could have swore I did this.', 'start': 1406.795, 'duration': 2.483}, {'end': 1410.539, 'text': 'I guess not.', 'start': 1409.298, 'duration': 1.241}, {'end': 1412.801, 'text': 'So transition on all properties.', 'start': 1411.42, 'duration': 1.381}, {'end': 1417.586, 'text': "We'll do 0.4 seconds and ease and save.", 'start': 1412.841, 'duration': 4.745}, {'end': 1425.534, 'text': 'And now when I click, we get that nice transition effect instead of just flickering to that rotation.', 'start': 1417.986, 'duration': 7.548}, {'end': 1427.428, 'text': 'All right.', 'start': 1427.148, 'duration': 0.28}, {'end': 1428.969, 'text': "So obviously that's not what we want.", 'start': 1427.468, 'duration': 1.501}, {'end': 1430.71, 'text': 'We want an X.', 'start': 1429.009, 'duration': 1.701}, {'end': 1433.372, 'text': "So in order to do that, it's pretty easy.", 'start': 1430.71, 'duration': 2.662}, {'end': 1444.338, 'text': "We're just going to grab this here and let's say turn lines into X.", 'start': 1433.412, 'duration': 10.926}, {'end': 1447.24, 'text': "So we'll paste this in and we want the before and after.", 'start': 1444.338, 'duration': 2.902}], 'summary': 'Using css, rotated hamburger icon with transition effect, then transformed into x shape.', 'duration': 92.641, 'max_score': 1354.599, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg1354599.jpg'}, {'end': 1483.313, 'src': 'heatmap', 'start': 1444.338, 'weight': 2, 'content': [{'end': 1447.24, 'text': "So we'll paste this in and we want the before and after.", 'start': 1444.338, 'duration': 2.902}, {'end': 1450.542, 'text': 'So before and after.', 'start': 1447.881, 'duration': 2.661}, {'end': 1463.996, 'text': 'and set the top position to zero and then we just want to add a transform on this to rotate 90 degrees because we want it to be in an X fashion.', 'start': 1452.931, 'duration': 11.065}, {'end': 1471.76, 'text': 'So if I save that and now I click both of them go 90 degrees and turn into an X.', 'start': 1464.597, 'duration': 7.163}, {'end': 1475.382, 'text': 'So pretty easy not not too much CSS at all to be able to do that.', 'start': 1471.76, 'duration': 3.622}, {'end': 1483.313, 'text': "Now, I also want the effect where if it's checked, OK, right now, just think the checkbox is in its check state.", 'start': 1476.848, 'duration': 6.465}], 'summary': 'Using css, rotated elements to form an x shape with 90 degrees rotation, achieving the desired effect with minimal code.', 'duration': 31.044, 'max_score': 1444.338, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg1444338.jpg'}, {'end': 1597.593, 'src': 'embed', 'start': 1567.32, 'weight': 0, 'content': [{'end': 1578.944, 'text': "So for the main menu class, we're going to position this to be fixed and set the top left zero.", 'start': 1567.32, 'duration': 11.624}, {'end': 1584.708, 'text': "And with 100 percent, we're basically doing the same thing we did with the overlay.", 'start': 1580.966, 'duration': 3.742}, {'end': 1587.329, 'text': 'We wanted to cover the entire area.', 'start': 1585.308, 'duration': 2.021}, {'end': 1597.593, 'text': "Now, initially, it's going to be set to visibility hidden, but I want to be able to see it so I can style it first.", 'start': 1588.63, 'duration': 8.963}], 'summary': "In the main menu class, we'll fix the position to top left zero and set it to 100% to cover the entire area.", 'duration': 30.273, 'max_score': 1567.32, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg1567320.jpg'}], 'start': 1296.474, 'title': 'Styling and animating menu with css', 'summary': 'Discusses techniques for styling and animating a menu with css, covering rotating elements, transitions, and targeting different states within css.', 'chapters': [{'end': 1660.246, 'start': 1296.474, 'title': 'Styling and animating menu with css', 'summary': 'Discusses how to style and animate a menu with css, including rotating elements, transitions, and targeting different states within css.', 'duration': 363.772, 'highlights': ['Styling the menu to be in the middle and making it visible Setting the main menu class to position fixed, top left zero, width 100%, and visibility hidden initially, then setting overflow to hidden and display to flex and align items and justify content to center, making the menu visible and positioned in the middle.', 'Animating the checkbox on click and hover Using CSS to rotate the hamburger menu div 135 degrees on click, adding a transition to create a smooth effect, and rotating it 225 degrees on hover when checked.', 'Transforming lines into an X shape Turning lines into an X shape by setting the top position to zero, adding a transform to rotate 90 degrees, and applying this style to both before and after elements.']}], 'duration': 363.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg1296474.jpg', 'highlights': ['Styling the menu to be in the middle and making it visible Setting the main menu class to position fixed, top left zero, width 100%, and visibility hidden initially, then setting overflow to hidden and display to flex and align items and justify content to center, making the menu visible and positioned in the middle.', 'Animating the checkbox on click and hover Using CSS to rotate the hamburger menu div 135 degrees on click, adding a transition to create a smooth effect, and rotating it 225 degrees on hover when checked.', 'Transforming lines into an X shape Turning lines into an X shape by setting the top position to zero, adding a transform to rotate 90 degrees, and applying this style to both before and after elements.']}, {'end': 2144.817, 'segs': [{'end': 1707.164, 'src': 'embed', 'start': 1660.286, 'weight': 2, 'content': [{'end': 1667.632, 'text': "We want to set a border radius because I want it to have that circle effect, although you don't have to do that.", 'start': 1660.286, 'duration': 7.346}, {'end': 1672.516, 'text': "But I'm going to set that to 50 percent and then the width and the height.", 'start': 1667.672, 'duration': 4.844}, {'end': 1676.979, 'text': "I'm going to set to 200 viewport widths because I want it to go outside of the screen.", 'start': 1672.516, 'duration': 4.463}, {'end': 1681.807, 'text': "So let's say height also 200 viewport widths.", 'start': 1678.284, 'duration': 3.523}, {'end': 1690.234, 'text': 'Okay And then we want to set display flex, but we want to set the flex property in a none.', 'start': 1681.827, 'duration': 8.407}, {'end': 1694.817, 'text': "Otherwise it's going to give us this weird oval type of look.", 'start': 1690.414, 'duration': 4.403}, {'end': 1702.883, 'text': "So let's align items to the center, justify content center.", 'start': 1696.201, 'duration': 6.682}, {'end': 1707.164, 'text': "I know this is that's pretty repetitive, but we want to make sure everything's centered correctly.", 'start': 1702.903, 'duration': 4.261}], 'summary': 'Setting border radius to 50%, width and height to 200 viewport widths, and using flexbox for center alignment.', 'duration': 46.878, 'max_score': 1660.286, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg1660286.jpg'}, {'end': 1791.643, 'src': 'embed', 'start': 1733.87, 'weight': 0, 'content': [{'end': 1738.752, 'text': 'What we want to happen is when we click this, we want it to then scale to one and also transition.', 'start': 1733.87, 'duration': 4.882}, {'end': 1739.892, 'text': "So it's nice and smooth.", 'start': 1738.792, 'duration': 1.1}, {'end': 1748.915, 'text': "So, again, I'm going to comment this out for now just so we can still see it and notice that the overlay color is now show is now in the background.", 'start': 1740.352, 'duration': 8.563}, {'end': 1750.181, 'text': 'All right.', 'start': 1749.861, 'duration': 0.32}, {'end': 1754.106, 'text': 'So in order for it to transition smoothly, we need to add a transition.', 'start': 1750.302, 'duration': 3.804}, {'end': 1758.551, 'text': "I'm going to say on all properties, 0.4 seconds and ease.", 'start': 1754.126, 'duration': 4.425}, {'end': 1763.596, 'text': 'OK Next thing we want to do is that second div.', 'start': 1758.571, 'duration': 5.025}, {'end': 1768.802, 'text': "So I'm going to copy this and just add in.", 'start': 1763.616, 'duration': 5.186}, {'end': 1791.643, 'text': "that. so we can target the next div and we want to set the text align to center and we're going to set a max width to 90 viewport widths and then a max height of that div will be 100 viewport heights.", 'start': 1770.097, 'duration': 21.546}], 'summary': "When clicking, the element should scale to 1 and transition smoothly with a 0.4-second ease. the second div's text aligns center, with a max width of 90 viewport widths and max height of 100 viewport heights.", 'duration': 57.773, 'max_score': 1733.87, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg1733870.jpg'}, {'end': 1934.601, 'src': 'heatmap', 'start': 1910.008, 'weight': 0.716, 'content': [{'end': 1916.769, 'text': 'we have the effect we want when we click it, but we need to make it so that you know this is not here initially,', 'start': 1910.008, 'duration': 6.761}, {'end': 1919.37, 'text': 'and then it pops up when we click this.', 'start': 1916.769, 'duration': 2.601}, {'end': 1923.571, 'text': 'So we want to go back and comment everything, the opacity.', 'start': 1920.07, 'duration': 3.501}, {'end': 1926.852, 'text': 'OK, so that will take away the links to.', 'start': 1923.591, 'duration': 3.261}, {'end': 1933.399, 'text': 'Uncomment the scale to zero and the visibility to hidden.', 'start': 1927.333, 'duration': 6.066}, {'end': 1934.601, 'text': 'All right.', 'start': 1934.28, 'duration': 0.321}], 'summary': 'To achieve the desired effect, the initial state should have zero opacity and hidden visibility, with the pop-up occurring upon click.', 'duration': 24.593, 'max_score': 1910.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg1910008.jpg'}, {'end': 2084.668, 'src': 'heatmap', 'start': 2044.611, 'weight': 3, 'content': [{'end': 2045.892, 'text': 'Now we want to set it to one.', 'start': 2044.611, 'duration': 1.281}, {'end': 2055.623, 'text': 'And we just want to add a transition on the opacity 0.4 and ease.', 'start': 2047.356, 'duration': 8.267}, {'end': 2057.485, 'text': 'All right, so that should do it.', 'start': 2055.844, 'duration': 1.641}, {'end': 2062.11, 'text': 'So now if I click that, awesome.', 'start': 2057.985, 'duration': 4.125}, {'end': 2072.976, 'text': "So if it's big like this, you can see it goes right out of the screen because we set number the height and width to 200 viewport widths.", 'start': 2064.187, 'duration': 8.789}, {'end': 2079.683, 'text': "And if it's smaller, like that, you can kind of see the outline of the circles and you can change that if you want,", 'start': 2074.257, 'duration': 5.426}, {'end': 2082.065, 'text': 'if you want to extend that height and width or whatever.', 'start': 2079.683, 'duration': 2.382}, {'end': 2083.827, 'text': 'But I kind of like that.', 'start': 2082.686, 'duration': 1.141}, {'end': 2084.668, 'text': 'I like the effect.', 'start': 2083.927, 'duration': 0.741}], 'summary': 'Setting transition on opacity with ease, adjusting height and width for visual effect.', 'duration': 40.057, 'max_score': 2044.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg2044611.jpg'}], 'start': 1660.286, 'title': 'Css styling and smooth transitions', 'summary': 'Covers css techniques for creating circle effects and smooth transitions, including setting border radius, using 50% for width and height, and applying display flex, as well as creating smooth transitions and effects using transform, scale, visibility, and transition properties, with a focus on targeting div elements and adjusting styles for links and menu toggles.', 'chapters': [{'end': 1707.164, 'start': 1660.286, 'title': 'Styling circle effect with css', 'summary': 'Discusses setting a border radius to create a circle effect, using 50% for width and height to go outside the screen, and applying display flex with align items and justify content set to center for proper centering.', 'duration': 46.878, 'highlights': ['Setting border radius to create a circle effect The speaker sets the border radius to 50 percent to achieve a circle effect.', 'Using 200 viewport widths for width and height to go outside the screen The speaker sets the width and height to 200 viewport widths to extend the element outside the screen.', 'Applying display flex with align items and justify content set to center for proper centering The speaker applies display flex with align items and justify content set to center to ensure proper centering of the elements.']}, {'end': 2144.817, 'start': 1707.904, 'title': 'Creating smooth transitions and effects', 'summary': 'Demonstrates how to create smooth transitions and effects using transform, scale, visibility, and transition properties, with a focus on setting properties to zero, transitioning to one, targeting div elements, and adjusting styles for links and menu toggles.', 'duration': 436.913, 'highlights': ['The chapter demonstrates how to create smooth transitions and effects using transform, scale, visibility, and transition properties. The chapter explains the use of transform, scale, visibility, and transition properties to create smooth transitions and effects.', 'Setting properties to zero and transitioning to one for smooth effects. The tutorial explains setting properties like scale and opacity to zero by default, and then transitioning them to one for smooth effects.', 'Targeting div elements and adjusting styles for links and menu toggles. The tutorial covers targeting div elements and adjusting styles for links and menu toggles, including setting text alignment, max width, max height, list styles, color, font size, padding, and transitions.']}], 'duration': 484.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DZg6UfS5zYg/pics/DZg6UfS5zYg1660286.jpg', 'highlights': ['The tutorial covers targeting div elements and adjusting styles for links and menu toggles, including setting text alignment, max width, max height, list styles, color, font size, padding, and transitions.', 'The chapter demonstrates how to create smooth transitions and effects using transform, scale, visibility, and transition properties.', 'Applying display flex with align items and justify content set to center for proper centering.', 'Setting properties to zero and transitioning to one for smooth effects.', 'Setting border radius to create a circle effect.']}], 'highlights': ['The tutorial demonstrates building a CSS hamburger menu for a landing page, including the use of CSS transitions, animations, and responsiveness.', 'The chapter covers setting CSS variables for primary color, overlay color, and menu speed, providing RGBA values and transparency levels.', 'The showcase covers a 20-hour web design course, focusing on setting background and text color and adjusting the screen layout to take up 100% viewport height.', 'Using flexbox to center elements vertically and horizontally The instructor demonstrates using flexbox to center elements vertically by setting the flex direction to column and horizontally using align items and justify content properties.', 'The chapter demonstrates how to use CSS to style a hamburger menu by creating three lines with specific dimensions, background color, and positioning.', 'Styling the menu to be in the middle and making it visible Setting the main menu class to position fixed, top left zero, width 100%, and visibility hidden initially, then setting overflow to hidden and display to flex and align items and justify content to center, making the menu visible and positioned in the middle.', 'The tutorial covers targeting div elements and adjusting styles for links and menu toggles, including setting text alignment, max width, max height, list styles, color, font size, padding, and transitions.']}