title
Sliding Sign In & Sign Up Form

description
In this video we will be creating a sign in/up form with some animation using CSS and a tiny bit of JavaScript. Thanks to Florin Pop for creating this project and letting me create a video with it. Florin Pop YouTube Channel https://www.youtube.com/channel/UCeU-1X402kT-JlLdAitxSMA Sponsor: DevMountain Bootcamp https://goo.gl/6q0dEa Code: https://codepen.io/FlorinPop17/pen/vPKWjd 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'Sliding Sign In & Sign Up Form', 'heatmap': [{'end': 135.958, 'start': 95.127, 'weight': 0.961}, {'end': 735.765, 'start': 693.971, 'weight': 0.721}, {'end': 949.227, 'start': 828.003, 'weight': 0.733}, {'end': 1046.799, 'start': 1005.517, 'weight': 0.833}, {'end': 1450.835, 'start': 1422.651, 'weight': 0.96}, {'end': 1605.63, 'start': 1565.422, 'weight': 0.975}, {'end': 1690.281, 'start': 1661.713, 'weight': 0.778}, {'end': 1721.537, 'start': 1698.038, 'weight': 0.74}, {'end': 1789.141, 'start': 1757.815, 'weight': 0.722}], 'summary': 'Tutorial series features a ui project by florin pop for a sliding sign-in/sign-up form and includes html/css tutorials, core element styling, form layout and buttons, css positioning and transformation techniques, and javascript and css for ui elements, with quantifiable effects like a 20% push effect and opacity change from 0 to 1.', 'chapters': [{'end': 244.595, 'segs': [{'end': 40.595, 'src': 'embed', 'start': 7.059, 'weight': 1, 'content': [{'end': 8.922, 'text': 'this video is sponsored by devmountain.', 'start': 7.059, 'duration': 1.863}, {'end': 12.987, 'text': "if you're interested in learning web development, ios or ux design,", 'start': 8.922, 'duration': 4.065}, {'end': 18.975, 'text': 'devmountain is a 12-week design and development boot camp intended to get you a full-time position in the industry.', 'start': 12.987, 'duration': 5.988}, {'end': 22.58, 'text': 'to learn more, visit devmountain.com or click the link in the description below.', 'start': 18.975, 'duration': 3.605}, {'end': 23.962, 'text': "Hey, what's going on, guys?", 'start': 23.041, 'duration': 0.921}, {'end': 31.047, 'text': 'So today I have a UI project that was actually created by a friend of mine, Florin Pop, who is a front-end developer,', 'start': 24.002, 'duration': 7.045}, {'end': 33.889, 'text': 'and he created this sliding sign-in sign-up form.', 'start': 31.047, 'duration': 2.842}, {'end': 40.595, 'text': 'So basically we have just this elegant looking form with this overlay on the side that has a sign-up button.', 'start': 33.989, 'duration': 6.606}], 'summary': 'Devmountain offers 12-week boot camps for web development, ios, and ux design, aiming to secure full-time industry positions.', 'duration': 33.536, 'max_score': 7.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh47059.jpg'}, {'end': 75.599, 'src': 'embed', 'start': 44.281, 'weight': 0, 'content': [{'end': 47.783, 'text': 'So we can toggle between the sign in and sign up with this cool effect.', 'start': 44.281, 'duration': 3.502}, {'end': 53.706, 'text': 'And we can do this by having CSS transitions, using transform,', 'start': 48.343, 'duration': 5.363}, {'end': 62.871, 'text': 'translate and also adding a little bit of JavaScript to trigger an event when we click the button to add and remove a class to the container.', 'start': 53.706, 'duration': 9.165}, {'end': 68.554, 'text': 'all. right now, florin has a website that has a blog and some weekly coding challenges.', 'start': 63.371, 'duration': 5.183}, {'end': 75.599, 'text': 'actually, this is one of the challenges and this is a post that has basically a written tutorial for this project.', 'start': 68.554, 'duration': 7.045}], 'summary': "Florin's website features a blog and weekly coding challenges, with a tutorial for a sign-in/sign-up effect using css transitions and javascript.", 'duration': 31.318, 'max_score': 44.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh444281.jpg'}, {'end': 135.958, 'src': 'heatmap', 'start': 89.706, 'weight': 2, 'content': [{'end': 93.207, 'text': "I will go over it, but I don't want to spend time just typing out HTML.", 'start': 89.706, 'duration': 3.501}, {'end': 94.067, 'text': "It's pretty simple.", 'start': 93.267, 'duration': 0.8}, {'end': 96.868, 'text': "So let's take a look at it real quick.", 'start': 95.127, 'duration': 1.741}, {'end': 100.088, 'text': 'We have a link to Font Awesome for our social icons.', 'start': 96.908, 'duration': 3.18}, {'end': 101.569, 'text': 'We have a link to the CSS.', 'start': 100.128, 'duration': 1.441}, {'end': 107.29, 'text': "As far as the structure, it's just an index HTML, style CSS, and main JS.", 'start': 102.589, 'duration': 4.701}, {'end': 115.492, 'text': 'So, down in the body, we have a div with the class of container and the ID of container, so we can grab onto this in JavaScript.', 'start': 108.27, 'duration': 7.222}, {'end': 117.232, 'text': 'And this surrounds everything.', 'start': 115.892, 'duration': 1.34}, {'end': 119.393, 'text': 'The overlays, the form, everything.', 'start': 117.633, 'duration': 1.76}, {'end': 124.694, 'text': 'And then inside here, we have a form container, and then we have another form container.', 'start': 119.933, 'duration': 4.761}, {'end': 128.756, 'text': 'So, we have the sign up form here and the sign in form down here.', 'start': 125.275, 'duration': 3.481}, {'end': 131.036, 'text': "And there's a special class for each one.", 'start': 129.356, 'duration': 1.68}, {'end': 134.057, 'text': 'We have sign up container and sign in container as well.', 'start': 131.076, 'duration': 2.981}, {'end': 135.958, 'text': 'And then the forms themselves.', 'start': 134.737, 'duration': 1.221}], 'summary': 'Transcript covers html setup with font awesome, css, and js. includes structure and form details.', 'duration': 41.33, 'max_score': 89.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh489706.jpg'}, {'end': 228.984, 'src': 'embed', 'start': 199.544, 'weight': 3, 'content': [{'end': 201.186, 'text': 'the CSS will be.', 'start': 199.544, 'duration': 1.642}, {'end': 206.309, 'text': "it's the same CSS, but I'm going to write it in a different order just because I needed to change it up.", 'start': 201.186, 'duration': 5.123}, {'end': 210.112, 'text': 'to kind of explain it in the best way possible.', 'start': 206.309, 'duration': 3.803}, {'end': 210.872, 'text': 'all right.', 'start': 210.592, 'duration': 0.28}, {'end': 215.095, 'text': "so we're going to jump into our style sheet, and all i have here is an import of our font,", 'start': 210.872, 'duration': 4.223}, {'end': 218.937, 'text': "which is this montserrat font that i'm using from google fonts.", 'start': 215.095, 'duration': 3.842}, {'end': 220.418, 'text': "so we're going to go ahead and get started.", 'start': 218.937, 'duration': 1.481}, {'end': 223.14, 'text': "i'm going to just make this a little smaller.", 'start': 220.418, 'duration': 2.722}, {'end': 228.984, 'text': "i just want to be able to see both at the same time, and it's not really that responsive.", 'start': 223.14, 'duration': 5.844}], 'summary': 'Reordering css for improved explanation and readability, using montserrat font from google fonts.', 'duration': 29.44, 'max_score': 199.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh4199544.jpg'}], 'start': 7.059, 'title': 'Ui and html/css tutorials', 'summary': "Features a ui project by florin pop for a sliding sign-in/sign-up form and mentions devmountain's 12-week boot camp, also provides an overview of html and css structure for signup and login form, and use of font awesome for social icons.", 'chapters': [{'end': 68.554, 'start': 7.059, 'title': 'Sliding ui sign-in/sign-up form', 'summary': "Features a ui project by florin pop, showcasing a sliding sign-in/sign-up form with elegant design and css transitions, and mentions devmountain's 12-week design and development boot camp.", 'duration': 61.495, 'highlights': ['Florin Pop, a front-end developer, created a sliding sign-in/sign-up form with a toggle effect using CSS transitions and JavaScript.', 'Devmountain sponsors the video, offering a 12-week design and development boot camp to secure a full-time position in the industry.']}, {'end': 244.595, 'start': 68.554, 'title': 'Html and css tutorial overview', 'summary': 'Provides an overview of the html and css structure for a signup and login form, including the organization of containers, forms, and overlays, as well as the use of font awesome for social icons.', 'duration': 176.041, 'highlights': ['The HTML structure includes a div with the class of container and the ID of container, surrounding everything, and separate form containers for sign up and sign in, each with their own special class.', 'The CSS stylesheet includes an import of the Montserrat font from Google Fonts and can be adjusted for responsive design, with the tutorial focusing on a desktop UI.', 'The tutorial also includes a link to Font Awesome for social icons and provides a code pen with the HTML and CSS code in the description for further exploration.']}], 'duration': 237.536, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh47059.jpg', 'highlights': ['Florin Pop created a sliding sign-in/sign-up form with a toggle effect using CSS transitions and JavaScript.', 'Devmountain sponsors a 12-week design and development boot camp for securing a full-time position in the industry.', 'The HTML structure includes a div with the class of container and the ID of container, separate form containers for sign up and sign in, each with their own special class.', 'The CSS stylesheet includes an import of the Montserrat font from Google Fonts and can be adjusted for responsive design, with the tutorial focusing on a desktop UI.', 'The tutorial includes a link to Font Awesome for social icons and provides a code pen with the HTML and CSS code in the description for further exploration.']}, {'end': 509.573, 'segs': [{'end': 413.322, 'src': 'embed', 'start': 266.287, 'weight': 0, 'content': [{'end': 272.077, 'text': "so let's go ahead and start off by adding box sizing to everything, uh.", 'start': 266.287, 'duration': 5.79}, {'end': 276.341, 'text': "we want to set box sizing to border box so that the padding doesn't uh..", 'start': 272.077, 'duration': 4.264}, {'end': 280.524, 'text': "so the padding stays within the box model, doesn't make the width bigger.", 'start': 276.341, 'duration': 4.183}, {'end': 289.672, 'text': "and then for the body we're going to add our font family, which is going to be, whoops, which is going to be this uh.", 'start': 280.524, 'duration': 9.148}, {'end': 299.52, 'text': "monserrat i think that's how you say it and then we'll do sans serif okay and then the background of the body is going to be a light gray.", 'start': 289.672, 'duration': 9.848}, {'end': 304.164, 'text': "It's going to be hexadecimal F6F5.", 'start': 299.561, 'duration': 4.603}, {'end': 306.086, 'text': 'What is it? 5F7.', 'start': 304.805, 'duration': 1.281}, {'end': 308.988, 'text': 'Okay, so we get that light gray.', 'start': 306.106, 'duration': 2.882}, {'end': 310.93, 'text': "And if I save, it's going to auto refresh.", 'start': 309.008, 'duration': 1.922}, {'end': 316.214, 'text': 'So we also want to make the body display flex.', 'start': 312.191, 'duration': 4.023}, {'end': 319.577, 'text': 'However, we want to make the direction up and down.', 'start': 317.355, 'duration': 2.222}, {'end': 322.94, 'text': "So we're going to do flex direction column instead of row.", 'start': 319.637, 'duration': 3.303}, {'end': 327.277, 'text': 'OK, that way we can add our justify content.', 'start': 324.155, 'duration': 3.122}, {'end': 330.239, 'text': 'We want to do justify content center.', 'start': 327.297, 'duration': 2.942}, {'end': 334.902, 'text': "And let's do align items center.", 'start': 331.339, 'duration': 3.563}, {'end': 336.523, 'text': 'So I save that.', 'start': 335.782, 'duration': 0.741}, {'end': 337.964, 'text': 'That pushes everything to the middle.', 'start': 336.583, 'duration': 1.381}, {'end': 341.466, 'text': 'Now I also want it to be in the middle vertically, so I have to add a height.', 'start': 338.024, 'duration': 3.442}, {'end': 347.273, 'text': 'of 100 viewport heights or vh, which is going to take up the whole browser.', 'start': 342.907, 'duration': 4.366}, {'end': 350.797, 'text': "so now it's centered that way, but i want to bring it up a little bit.", 'start': 347.273, 'duration': 3.524}, {'end': 352.079, 'text': "so i'm going to add some margin.", 'start': 350.797, 'duration': 1.282}, {'end': 361.535, 'text': "i'm going to do negative 20 pixels on the top and then let's do 0 and then 50 pixels, And that should do it for the body styling.", 'start': 352.079, 'duration': 9.456}, {'end': 366.256, 'text': "Next thing we're going to do is some of the core elements like the H1.", 'start': 362.495, 'duration': 3.761}, {'end': 368.777, 'text': "So for the H1, I'm going to add a font.", 'start': 366.877, 'duration': 1.9}, {'end': 373.599, 'text': "Let's do a font weight of bold and let's do margin.", 'start': 369.477, 'duration': 4.122}, {'end': 374.919, 'text': "Let's remove the margin.", 'start': 373.619, 'duration': 1.3}, {'end': 377.86, 'text': 'Okay Next is the paragraph.', 'start': 374.939, 'duration': 2.921}, {'end': 386.783, 'text': "So we're talking about this and this, the two paragraphs here, we're going to do a font size of 14 pixels.", 'start': 378.801, 'duration': 7.982}, {'end': 388.084, 'text': "Let's do font weight.", 'start': 386.823, 'duration': 1.261}, {'end': 391.164, 'text': 'of 100 and a line height of 20 pixels.', 'start': 389.801, 'duration': 1.363}, {'end': 407.577, 'text': 'and letter spacing is going to be 0.5 pixels and then some margin.', 'start': 401.332, 'duration': 6.245}, {'end': 410.019, 'text': "we'll do 20 top.", 'start': 407.577, 'duration': 2.442}, {'end': 413.322, 'text': "let's do 0 and 30 pixels, okay.", 'start': 410.019, 'duration': 3.303}], 'summary': 'Styling process includes setting box sizing, font family, background color, flex display, and core element styles.', 'duration': 147.035, 'max_score': 266.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh4266287.jpg'}, {'end': 509.573, 'src': 'embed', 'start': 442.023, 'weight': 5, 'content': [{'end': 448.11, 'text': "14 pixels text decoration, want to make sure there's no underline, so we want to set that to none.", 'start': 442.023, 'duration': 6.087}, {'end': 448.931, 'text': 'and then margin.', 'start': 448.11, 'duration': 0.821}, {'end': 455.778, 'text': "we're going to do 15 pixels top and bottom and you can see the icon colors have changed all right.", 'start': 448.931, 'duration': 6.847}, {'end': 459.122, 'text': "so that's that's it for the, the core styles, this core elements.", 'start': 455.778, 'duration': 3.344}, {'end': 460.204, 'text': 'i should say so.', 'start': 459.122, 'duration': 1.082}, {'end': 464.974, 'text': "now let's do the container, And the container wraps around everything.", 'start': 460.204, 'duration': 4.77}, {'end': 470.236, 'text': "So I'm going to add a background of white case.", 'start': 465.574, 'duration': 4.662}, {'end': 473.137, 'text': 'If I save that, you can see that now the container is white.', 'start': 470.256, 'duration': 2.881}, {'end': 475.598, 'text': "We're going to add a border radius.", 'start': 473.157, 'duration': 2.441}, {'end': 477.459, 'text': 'I want to have some rounded corners.', 'start': 475.878, 'duration': 1.581}, {'end': 478.619, 'text': "We'll do 10 pixels.", 'start': 477.479, 'duration': 1.14}, {'end': 483.361, 'text': "I'm going to add a box shadow, pretty deep box shadow, which I'm going to just paste in here.", 'start': 479.139, 'duration': 4.222}, {'end': 487.443, 'text': "And you can see I'm using RGB, a red, green, blue alpha.", 'start': 483.381, 'duration': 4.062}, {'end': 489.283, 'text': 'So black zero zero zero.', 'start': 487.763, 'duration': 1.52}, {'end': 490.764, 'text': 'And then the alpha values.', 'start': 489.603, 'duration': 1.161}, {'end': 495.656, 'text': 'So if I save that, we get a pretty deep box shadow on this.', 'start': 491.311, 'duration': 4.345}, {'end': 498.319, 'text': 'And if you wanna lighten it up a little bit, you can mess with the numbers.', 'start': 495.736, 'duration': 2.583}, {'end': 506.629, 'text': "Next thing I'm gonna do is position this relative because we're gonna have some stuff positioned absolute within it.", 'start': 499.381, 'duration': 7.248}, {'end': 509.573, 'text': "We're gonna add an overflow of hidden.", 'start': 506.649, 'duration': 2.924}], 'summary': 'Setting 14 pixels text decoration, 15 pixels margin, white container with 10 pixels border radius, and deep box shadow using rgb values.', 'duration': 67.55, 'max_score': 442.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh4442023.jpg'}], 'start': 244.595, 'title': 'Styling core elements', 'summary': 'Covers creating core styles and positioning elements for a web page, including setting box sizing to border box, defining font family and background color, and styling core elements like h1, paragraph, span, and links. it also covers styling core elements such as text decoration, margin, and container properties including background color, border radius, box shadow, and positioning.', 'chapters': [{'end': 440.36, 'start': 244.595, 'title': 'Creating core styles and positioning elements', 'summary': 'Covers creating core styles and positioning elements for a web page, including setting box sizing to border box, defining font family and background color, and styling core elements like h1, paragraph, span, and links.', 'duration': 195.765, 'highlights': ["Setting box sizing to border box to ensure padding stays within the box model and doesn't affect width Box sizing is set to border box to prevent padding from altering the width of elements.", "Defining font family as 'Montserrat' and 'sans serif', and setting the background color of the body to a light gray (hexadecimal F6F5F7) The font family is set as 'Montserrat' and 'sans serif', while the background color of the body is defined as a light gray using the hexadecimal value F6F5F7.", 'Styling the body to display flex with flex direction column, justify content center, and align items center The body is styled to display flex with a column direction, centered content using justify content center, and aligned items using align items center.', "Setting the height of the body to 100 viewport heights for full browser coverage and adding negative top margin to adjust positioning The body's height is set to 100 viewport heights for full browser coverage, and negative top margin of 20 pixels is applied for vertical positioning.", 'Styling core elements like H1 with font weight of bold, removing margin, and paragraphs with specific font size, weight, line height, letter spacing, and margin The H1 element is styled with bold font weight and margin removal, while paragraphs are styled with specific font size, weight, line height, letter spacing, and margin.']}, {'end': 509.573, 'start': 442.023, 'title': 'Styling container with core elements', 'summary': 'Covers styling core elements such as text decoration, margin, and container properties including background color, border radius, box shadow, and positioning.', 'duration': 67.55, 'highlights': ['The chapter covers styling core elements such as text decoration, margin, and container properties including background color, border radius, box shadow, and positioning.', 'Adding a background of white to the container and setting a margin of 15 pixels top and bottom.', 'Applying a border radius of 10 pixels to achieve rounded corners on the container.', "Introducing a deep box shadow using RGB alpha values, with the option to adjust the shadow's intensity by modifying the numbers."]}], 'duration': 264.978, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh4244595.jpg', 'highlights': ["Setting box sizing to border box to ensure padding stays within the box model and doesn't affect width", "Defining font family as 'Montserrat' and 'sans serif', and setting the background color of the body to a light gray (hexadecimal F6F5F7)", 'Styling the body to display flex with flex direction column, justify content center, and align items center', 'Setting the height of the body to 100 viewport heights for full browser coverage and adding negative top margin to adjust positioning', 'Styling core elements like H1 with font weight of bold, removing margin, and paragraphs with specific font size, weight, line height, letter spacing, and margin', 'The chapter covers styling core elements such as text decoration, margin, and container properties including background color, border radius, box shadow, and positioning', 'Adding a background of white to the container and setting a margin of 15 pixels top and bottom', 'Applying a border radius of 10 pixels to achieve rounded corners on the container', "Introducing a deep box shadow using RGB alpha values, with the option to adjust the shadow's intensity by modifying the numbers"]}, {'end': 884.394, 'segs': [{'end': 566.357, 'src': 'embed', 'start': 511.568, 'weight': 0, 'content': [{'end': 524.019, 'text': "And we're going to set a width of 768 pixels and just set a max width of 100% and then a minimum height as well.", 'start': 511.568, 'duration': 12.451}, {'end': 528.032, 'text': "So that's going to be 480.", 'start': 524.52, 'duration': 3.512}, {'end': 531.235, 'text': 'OK, and again, you can mess with some of these values if you want.', 'start': 528.032, 'duration': 3.203}, {'end': 534.377, 'text': "So next thing I'm going to do is the actual forms.", 'start': 531.995, 'duration': 2.382}, {'end': 538.06, 'text': "And if you remember, they're inside a class called form container.", 'start': 534.918, 'duration': 3.142}, {'end': 544.845, 'text': "I'm not going to do the form container just yet because I want to do the main styling first before we do positioning.", 'start': 538.56, 'duration': 6.285}, {'end': 548.989, 'text': "So in the form, the form itself, let's do background.", 'start': 545.886, 'duration': 3.103}, {'end': 556.79, 'text': "white and let's let's display flex.", 'start': 550.786, 'duration': 6.004}, {'end': 559.712, 'text': 'And remember, this is for both forms as two forms.', 'start': 557.291, 'duration': 2.421}, {'end': 566.357, 'text': 'But we want to do a flex direction of column because we want it to go up and down.', 'start': 560.253, 'duration': 6.104}], 'summary': 'Setting width to 768px, max width 100%, and minimum height to 480px. styling form with white background and using flex display for both forms.', 'duration': 54.789, 'max_score': 511.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh4511568.jpg'}, {'end': 735.765, 'src': 'heatmap', 'start': 634.071, 'weight': 2, 'content': [{'end': 636.852, 'text': 'And we want them to be circular or rounded.', 'start': 634.071, 'duration': 2.781}, {'end': 639.733, 'text': "So we're going to do a border radius of 50%.", 'start': 636.892, 'duration': 2.841}, {'end': 647.536, 'text': "All right, and let's do a display inline flex.", 'start': 639.733, 'duration': 7.803}, {'end': 650.838, 'text': 'And we can add justify content center.', 'start': 648.437, 'duration': 2.401}, {'end': 661.084, 'text': "line items center and let's add margin.", 'start': 653.681, 'duration': 7.403}, {'end': 667.587, 'text': 'say zero top and bottom, five, left and right, just to push them away from each other, and then the height,', 'start': 661.084, 'duration': 6.503}, {'end': 679.778, 'text': 'the height and the width will be 40 pixels, if i can spell height right, So with will be 40 pixels.', 'start': 667.587, 'duration': 12.191}, {'end': 681.68, 'text': 'OK, so there we go.', 'start': 680.699, 'duration': 0.981}, {'end': 682.761, 'text': 'Those look pretty good.', 'start': 681.7, 'duration': 1.061}, {'end': 684.983, 'text': "Next, let's do these inputs.", 'start': 683.682, 'duration': 1.301}, {'end': 693.891, 'text': "So say form container input and I'm going to set the background to be a little darker.", 'start': 686.744, 'duration': 7.147}, {'end': 697.755, 'text': "So we'll do triple E and I'm going to take away the border.", 'start': 693.971, 'duration': 3.784}, {'end': 699.477, 'text': 'So border none.', 'start': 698.576, 'duration': 0.901}, {'end': 700.838, 'text': 'So save that.', 'start': 700.057, 'duration': 0.781}, {'end': 702.817, 'text': "still doesn't look very good.", 'start': 701.616, 'duration': 1.201}, {'end': 704.298, 'text': "so let's add some padding.", 'start': 702.817, 'duration': 1.481}, {'end': 708.5, 'text': "we'll do 12 pixels, 15 pixels.", 'start': 704.298, 'duration': 4.202}, {'end': 710.161, 'text': "let's separate them out a little bit.", 'start': 708.5, 'duration': 1.661}, {'end': 717.266, 'text': "so we'll do eight pixels top and bottom and then let's make them a hundred percent of their container.", 'start': 710.161, 'duration': 7.105}, {'end': 717.866, 'text': 'and there we go.', 'start': 717.266, 'duration': 0.6}, {'end': 720.148, 'text': 'so that looks pretty nice.', 'start': 717.866, 'duration': 2.282}, {'end': 723.39, 'text': "so next we're going to move on to the button or buttons.", 'start': 720.148, 'duration': 3.242}, {'end': 726.859, 'text': "i'm going to give them some core styles.", 'start': 724.898, 'duration': 1.961}, {'end': 730.622, 'text': "we'll do border radius of.", 'start': 726.859, 'duration': 3.763}, {'end': 735.765, 'text': "let's do 20 pixels, which will make them pretty rounded border.", 'start': 730.622, 'duration': 5.143}], 'summary': 'Styling elements with border radius, display, and padding. inputs set to 100% width and buttons with 20px border radius.', 'duration': 96.551, 'max_score': 634.071, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh4634071.jpg'}], 'start': 511.568, 'title': 'Styling forms, layout, and buttons', 'summary': 'Covers setting a width of 768 pixels, applying flexbox styling, and setting the background to white for form containers. it also includes creating a stylish layout with specific color, border, and text properties for input fields and buttons.', 'chapters': [{'end': 566.357, 'start': 511.568, 'title': 'Styling forms and containers', 'summary': 'Covers setting a width of 768 pixels with a max width of 100% and a minimum height of 480 pixels, applying flexbox styling for the form containers and setting the background to white with a column flex direction for the forms.', 'duration': 54.789, 'highlights': ['Setting a width of 768 pixels with a max width of 100% and a minimum height of 480 pixels. The speaker mentions the specific dimensions for the layout, providing clear instructions for the styling of forms and containers.', 'Applying flexbox styling for the form containers and setting the background to white. The speaker discusses using flexbox for the form containers and specifying the background color, indicating a key aspect of the styling process.', 'Setting a column flex direction for the forms to arrange them vertically. The speaker emphasizes the use of a column flex direction for the forms, indicating a specific design choice to arrange the forms vertically.']}, {'end': 884.394, 'start': 566.397, 'title': 'Creating stylish layout and styling buttons', 'summary': 'Covers creating a stylish layout with css by adding flex properties, setting dimensions, and styling input fields and buttons with specific color, border, and text properties.', 'duration': 317.997, 'highlights': ['Styling buttons with specific color, border, and text properties The speaker demonstrates setting border radius, background color, text color, font size, weight, padding, and transition properties for buttons.', 'Styling input fields with specific color, border, and text properties The speaker modifies the background color, border, padding, and dimensions for input fields to improve their visual appearance.', 'Creating a stylish layout with flex properties and dimensions The speaker uses flex properties, padding, and dimensions to create a visually appealing layout for the content.']}], 'duration': 372.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh4511568.jpg', 'highlights': ['Setting a width of 768 pixels with a max width of 100% and a minimum height of 480 pixels.', 'Applying flexbox styling for the form containers and setting the background to white.', 'Styling buttons with specific color, border, and text properties.', 'Setting a column flex direction for the forms to arrange them vertically.', 'Styling input fields with specific color, border, and text properties.', 'Creating a stylish layout with flex properties and dimensions.']}, {'end': 1212.918, 'segs': [{'end': 1058.556, 'src': 'heatmap', 'start': 981.061, 'weight': 2, 'content': [{'end': 983.022, 'text': 'But we want to say left 0.', 'start': 981.061, 'duration': 1.961}, {'end': 986.305, 'text': "And let's make the width 50%.", 'start': 983.022, 'duration': 3.283}, {'end': 990.007, 'text': 'So if I save that, now you can see the sign in container goes out 50%.', 'start': 986.305, 'duration': 3.702}, {'end': 996.272, 'text': "I'm also going to add a z index of 2 so that it's always on top of the sign up.", 'start': 990.007, 'duration': 6.265}, {'end': 1001.775, 'text': "Now the sign up is underneath and it's going to have pretty close to the same styling.", 'start': 996.832, 'duration': 4.943}, {'end': 1005.257, 'text': "So I'm going to just copy that and say sign up.", 'start': 1001.795, 'duration': 3.462}, {'end': 1007.058, 'text': 'We want left zero with 50%.', 'start': 1005.517, 'duration': 1.541}, {'end': 1014.942, 'text': "I'm going to put the Z index less than the sign in, and I'm also going to add an opacity of zero.", 'start': 1007.058, 'duration': 7.884}, {'end': 1016.643, 'text': 'All right.', 'start': 1014.962, 'duration': 1.681}, {'end': 1017.804, 'text': "So that's that.", 'start': 1016.823, 'duration': 0.981}, {'end': 1020.805, 'text': 'Now, the next thing we want to do is start to work with the overlay.', 'start': 1017.964, 'duration': 2.841}, {'end': 1029.242, 'text': "Okay The forms are styled, so we're going to work with the overlays, which is this welcome back and this hello friend.", 'start': 1020.825, 'duration': 8.417}, {'end': 1032.645, 'text': "Okay And remember there's a class of overlay container.", 'start': 1029.262, 'duration': 3.383}, {'end': 1038.351, 'text': 'If we look right here and then a class of overlay and then within that we have the two panels.', 'start': 1032.665, 'duration': 5.686}, {'end': 1041.032, 'text': "So let's start from top, top down.", 'start': 1038.691, 'duration': 2.341}, {'end': 1043.295, 'text': "So we'll start with a overlay container.", 'start': 1041.133, 'duration': 2.162}, {'end': 1046.799, 'text': "Okay So let's say overlay.", 'start': 1043.315, 'duration': 3.484}, {'end': 1058.556, 'text': "container. So we're going to position this absolute within the container and we're going to say from the top, zero position,", 'start': 1049.172, 'duration': 9.384}], 'summary': 'Styling adjustments made to sign in and sign up containers, including z-index, width, and opacity changes.', 'duration': 77.495, 'max_score': 981.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh4981061.jpg'}, {'end': 1063.858, 'src': 'embed', 'start': 1032.665, 'weight': 1, 'content': [{'end': 1038.351, 'text': 'If we look right here and then a class of overlay and then within that we have the two panels.', 'start': 1032.665, 'duration': 5.686}, {'end': 1041.032, 'text': "So let's start from top, top down.", 'start': 1038.691, 'duration': 2.341}, {'end': 1043.295, 'text': "So we'll start with a overlay container.", 'start': 1041.133, 'duration': 2.162}, {'end': 1046.799, 'text': "Okay So let's say overlay.", 'start': 1043.315, 'duration': 3.484}, {'end': 1058.556, 'text': "container. So we're going to position this absolute within the container and we're going to say from the top, zero position,", 'start': 1049.172, 'duration': 9.384}, {'end': 1063.858, 'text': "and we're going to move it from the left, 50 percent.", 'start': 1058.556, 'duration': 5.302}], 'summary': 'Creating an overlay container positioned absolutely within the main container with top at 0 and left at 50%', 'duration': 31.193, 'max_score': 1032.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41032665.jpg'}, {'end': 1131.14, 'src': 'embed', 'start': 1100.317, 'weight': 3, 'content': [{'end': 1111.347, 'text': "okay so now we're going to do the overlay class And this is the class that actually has like the background color and gradient.", 'start': 1100.317, 'duration': 11.03}, {'end': 1118.236, 'text': "So I'm going to do both background and also I'm going to do a regular color background and a linear gradient,", 'start': 1111.988, 'duration': 6.248}, {'end': 1120.739, 'text': "just for browsers that don't support gradient.", 'start': 1118.236, 'duration': 2.503}, {'end': 1126.577, 'text': "So let's say FF416C.", 'start': 1122.954, 'duration': 3.623}, {'end': 1131.14, 'text': "And then for the gradient, I'm actually going to just paste that in.", 'start': 1127.978, 'duration': 3.162}], 'summary': 'Creating an overlay class with background color and linear gradient for browsers, using ff416c as the color.', 'duration': 30.823, 'max_score': 1100.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41100317.jpg'}, {'end': 1212.918, 'src': 'embed', 'start': 1183.994, 'weight': 0, 'content': [{'end': 1188.059, 'text': 'So the overlay has a width of 200%.', 'start': 1183.994, 'duration': 4.065}, {'end': 1192.162, 'text': 'which has a double width size of 200%.', 'start': 1188.059, 'duration': 4.103}, {'end': 1195.205, 'text': "So it's taking the full width of the main container.", 'start': 1192.162, 'duration': 3.043}, {'end': 1201.249, 'text': 'So 200% times 50%, which is this right here, 50%, equals 100%.', 'start': 1195.625, 'duration': 5.624}, {'end': 1206.774, 'text': 'And again, the 50% is from the overlay container, which is that right there.', 'start': 1201.249, 'duration': 5.525}, {'end': 1211.277, 'text': 'And he goes on to explain some of the other things pretty in depth.', 'start': 1207.854, 'duration': 3.423}, {'end': 1212.918, 'text': 'So definitely check that out.', 'start': 1211.317, 'duration': 1.601}], 'summary': 'Overlay has a width of 200%, taking full width of main container. 200% x 50% = 100%.', 'duration': 28.924, 'max_score': 1183.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41183994.jpg'}], 'start': 884.414, 'title': 'Css positioning and styling', 'summary': 'Covers the positioning and styling of form containers, individual forms, and overlay containers using css, including setting widths, heights, transitions, and z-index, as well as overlay class styling with specific details such as background color, linear gradient, text color, positioning, and setting the width to 200%.', 'chapters': [{'end': 1100.317, 'start': 884.414, 'title': 'Css positioning and styling', 'summary': 'Covers the positioning and styling of form containers, individual forms, and overlay containers using css, including setting widths, heights, transitions, and z-index.', 'duration': 215.903, 'highlights': ['The chapter covers the positioning and styling of form containers, individual forms, and overlay containers using CSS, including setting widths, heights, transitions, and z-index.', 'The forms are styled with the sign-in container set to left 0 and width 50%, and the sign-up container with similar styling and an opacity of zero.', 'The overlay container is positioned absolute within the container, with a width of 50%, a height of 100%, and a transition on the transform property.']}, {'end': 1212.918, 'start': 1100.317, 'title': 'Overlay class styling', 'summary': "Covers the styling of the overlay class, including the background color, linear gradient, text color, and positioning, with a demonstration of setting the width to 200% to take up the whole space, as well as a reference to florin's explanation of the concept.", 'duration': 112.601, 'highlights': ["The overlay class is styled with a background color and a linear gradient, with the gradient being applied as a fallback for browsers that don't support it.", 'The text color is set to white, and the positioning is set to relative, with the intention of positioning absolute elements inside it.', 'The width of the overlay is set to 200%, effectively taking up the entire space within the main container.', 'Florin provides a detailed explanation of the percentage calculations and other aspects of the overlay class, offering additional insights for further understanding.']}], 'duration': 328.504, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh4884414.jpg', 'highlights': ['The width of the overlay is set to 200%, effectively taking up the entire space within the main container.', 'The overlay container is positioned absolute within the container, with a width of 50%, a height of 100%, and a transition on the transform property.', 'The forms are styled with the sign-in container set to left 0 and width 50%, and the sign-up container with similar styling and an opacity of zero.', "The overlay class is styled with a background color and a linear gradient, with the gradient being applied as a fallback for browsers that don't support it."]}, {'end': 1450.835, 'segs': [{'end': 1243.549, 'src': 'embed', 'start': 1212.938, 'weight': 0, 'content': [{'end': 1216.501, 'text': 'All right, so the next thing we want to do is add..', 'start': 1212.938, 'duration': 3.563}, {'end': 1224.055, 'text': "a transform property and we're going to use translate X.", 'start': 1218.411, 'duration': 5.644}, {'end': 1227.798, 'text': "So if you're not familiar with translate, what am I doing here? No, that's right.", 'start': 1224.055, 'duration': 3.743}, {'end': 1232.962, 'text': "Translate X just means we're positioning it along the X axis.", 'start': 1228.699, 'duration': 4.263}, {'end': 1236.684, 'text': 'Translate Y would be, you know, this way, the Y axis.', 'start': 1233.482, 'duration': 3.202}, {'end': 1243.549, 'text': "So we're going to set that to zero and let's add a transition on the transform.", 'start': 1237.245, 'duration': 6.304}], 'summary': 'Adding a transform property using translate x with zero position and adding a transition.', 'duration': 30.611, 'max_score': 1212.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41212938.jpg'}, {'end': 1309.587, 'src': 'embed', 'start': 1279.023, 'weight': 3, 'content': [{'end': 1281.487, 'text': 'We want to display flex.', 'start': 1279.023, 'duration': 2.464}, {'end': 1283.67, 'text': "I know that we can't see this yet really.", 'start': 1281.627, 'duration': 2.043}, {'end': 1289.618, 'text': 'We want to do flex direction column.', 'start': 1283.69, 'duration': 5.928}, {'end': 1293.903, 'text': "We can't see it because it's behind this, but we'll fix that in a second.", 'start': 1290.202, 'duration': 3.701}, {'end': 1297.204, 'text': "We're going to have the overlay right pushed over here.", 'start': 1293.963, 'duration': 3.241}, {'end': 1302.265, 'text': "Actually, I guess I can do that before we finish this, just so we can kind of see what we're doing.", 'start': 1298.024, 'duration': 4.241}, {'end': 1305.266, 'text': "So let's say overlay right.", 'start': 1302.845, 'duration': 2.421}, {'end': 1309.587, 'text': 'And we want to say from the right side zero.', 'start': 1307.046, 'duration': 2.541}], 'summary': 'Desire to use flex with overlay right from right side at zero.', 'duration': 30.564, 'max_score': 1279.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41279023.jpg'}, {'end': 1375.133, 'src': 'embed', 'start': 1341.585, 'weight': 4, 'content': [{'end': 1347.849, 'text': "Let's do justify content center and let's do a line.", 'start': 1341.585, 'duration': 6.264}, {'end': 1351.586, 'text': 'items center.', 'start': 1349.725, 'duration': 1.861}, {'end': 1355.547, 'text': "OK, and then we're going to add some padding.", 'start': 1351.606, 'duration': 3.941}, {'end': 1370.671, 'text': "So zero 40 pixels on the sides and let's do a height of 100 percent, a width of 50 percent.", 'start': 1356.967, 'duration': 13.704}, {'end': 1372.412, 'text': "So that's going to kind of fix that.", 'start': 1370.692, 'duration': 1.72}, {'end': 1375.133, 'text': "And let's do a text align.", 'start': 1373.412, 'duration': 1.721}], 'summary': 'Setting justify content center, padding 0 40px, height 100%, width 50%.', 'duration': 33.548, 'max_score': 1341.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41341585.jpg'}, {'end': 1450.835, 'src': 'heatmap', 'start': 1422.651, 'weight': 0.96, 'content': [{'end': 1435.622, 'text': "Left So I'm actually going to add a transform translate X for negative 20% here, and we can't see the overlay left is actually behind this.", 'start': 1422.651, 'duration': 12.971}, {'end': 1446.791, 'text': 'But if we look at the finished product When this moves over, see the welcome back, see how it comes in from the left? Right now,', 'start': 1436.563, 'duration': 10.228}, {'end': 1450.835, 'text': 'when it comes in from the left, instead of just staying in that same spot.', 'start': 1446.791, 'duration': 4.044}], 'summary': 'Applying a transform translate x of -20% for the overlay to come in from the left in the finished product.', 'duration': 28.184, 'max_score': 1422.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41422651.jpg'}], 'start': 1212.938, 'title': 'Css transformation techniques', 'summary': 'Covers css transform properties for positioning elements along the x axis, setting transition on the transform, and styling overlay panels with flexbox and positioning properties. it also demonstrates the use of css transform and transition properties to create sliding effects, including translating x for overlay positioning and transition for smooth animation in web design.', 'chapters': [{'end': 1375.133, 'start': 1212.938, 'title': 'Css transform and overlay panels', 'summary': 'Covers the addition of transform properties for positioning elements along the x axis, setting transition on the transform, and styling overlay panels with flexbox and positioning properties.', 'duration': 162.195, 'highlights': ['The chapter covers the addition of transform properties for positioning elements along the X axis, setting transition on the transform, and styling overlay panels with flexbox and positioning properties.', 'The use of transform properties, such as translate X, and the application of transition effects are demonstrated for positioning elements.', 'Styling overlay panels with flexbox properties, including flex direction, justify content, align items, and padding, is detailed for creating visually appealing layouts.']}, {'end': 1450.835, 'start': 1376.873, 'title': 'Web design css transformation', 'summary': 'Covers the use of css transform and transition properties to create sliding effects, including translating x for overlay positioning and transition for smooth animation, demonstrating the application of these techniques in web design.', 'duration': 73.962, 'highlights': ['The use of transform, translate x, and transition properties in CSS to create sliding effects, including a translation of X for overlay positioning and transition for smooth animation.', 'Demonstration of the application of these techniques in web design.']}], 'duration': 237.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41212938.jpg', 'highlights': ['The chapter covers the addition of transform properties for positioning elements along the X axis, setting transition on the transform, and styling overlay panels with flexbox and positioning properties.', 'The use of transform properties, such as translate X, and the application of transition effects are demonstrated for positioning elements.', 'The use of transform, translate x, and transition properties in CSS to create sliding effects, including a translation of X for overlay positioning and transition for smooth animation.', 'Styling overlay panels with flexbox properties, including flex direction, justify content, align items, and padding, is detailed for creating visually appealing layouts.', 'Demonstration of the application of these techniques in web design.']}, {'end': 1932.86, 'segs': [{'end': 1501.37, 'src': 'embed', 'start': 1450.835, 'weight': 0, 'content': [{'end': 1452.336, 'text': "that's why we're doing this negative 20%.", 'start': 1450.835, 'duration': 1.501}, {'end': 1459.962, 'text': "We're starting with it over here and then later on, when we add the container class through JavaScript,", 'start': 1452.336, 'duration': 7.626}, {'end': 1463.846, 'text': "we're going to have it push over by setting it to zero, if that makes sense.", 'start': 1459.962, 'duration': 3.884}, {'end': 1474.09, 'text': "All right, so I think that we're pretty much ready to add the JavaScript so that we can start to style style this stuff with the active class.", 'start': 1464.54, 'duration': 9.55}, {'end': 1478.895, 'text': "What's going to happen is when we click the button, it's going to add a class of right panel active.", 'start': 1474.53, 'duration': 4.365}, {'end': 1482.118, 'text': "OK, so let's jump into our main JS.", 'start': 1479.616, 'duration': 2.502}, {'end': 1484.92, 'text': "And this isn't going to be very difficult at all.", 'start': 1483.039, 'duration': 1.881}, {'end': 1490.264, 'text': "We're just going to select a couple elements and we're going to add a listener and then add and remove a class.", 'start': 1484.96, 'duration': 5.304}, {'end': 1495.687, 'text': "So let's create a variable called sign up button.", 'start': 1490.844, 'duration': 4.843}, {'end': 1501.37, 'text': 'Set it to document dot get element by D.', 'start': 1497.348, 'duration': 4.022}], 'summary': 'Styling will be adjusted by adding a class through javascript, with a 20% negative starting point and a zero push for the container class.', 'duration': 50.535, 'max_score': 1450.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41450835.jpg'}, {'end': 1605.63, 'src': 'heatmap', 'start': 1565.422, 'weight': 0.975, 'content': [{'end': 1566.543, 'text': 'So we click sign up.', 'start': 1565.422, 'duration': 1.121}, {'end': 1569.264, 'text': "It's going to add this class sign in.", 'start': 1566.623, 'duration': 2.641}, {'end': 1570.124, 'text': "We'll remove it.", 'start': 1569.364, 'duration': 0.76}, {'end': 1571.244, 'text': 'All right.', 'start': 1570.144, 'duration': 1.1}, {'end': 1572.445, 'text': "So let's try that out.", 'start': 1571.284, 'duration': 1.161}, {'end': 1574.686, 'text': "We're going to go over here and open up our dev tools.", 'start': 1572.465, 'duration': 2.221}, {'end': 1577.627, 'text': "And I'll just reload.", 'start': 1576.186, 'duration': 1.441}, {'end': 1584.871, 'text': "so you see this div here with the container I'm gonna go ahead and click sign up and now right panel active has been added.", 'start': 1577.627, 'duration': 7.244}, {'end': 1588.693, 'text': "if I click, well, actually I can't show you Like.", 'start': 1584.871, 'duration': 3.822}, {'end': 1595.617, 'text': "we can't see the other overlay, which has the button to take it off, but you can see that that class has been added Alright.", 'start': 1588.693, 'duration': 6.924}, {'end': 1600.38, 'text': 'so now we can start to finish up our styles and animations here.', 'start': 1595.617, 'duration': 4.763}, {'end': 1601.825, 'text': 'All right.', 'start': 1601.485, 'duration': 0.34}, {'end': 1605.63, 'text': "so let's go ahead and I'm just going to put in animation here, just so.", 'start': 1601.825, 'duration': 3.805}], 'summary': 'Testing sign-up functionality added a new class to the panel.', 'duration': 40.208, 'max_score': 1565.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41565422.jpg'}, {'end': 1690.281, 'src': 'heatmap', 'start': 1613.779, 'weight': 4, 'content': [{'end': 1618.425, 'text': "And I'm just going to put some comments to what each of these do because I know that this stuff can get a little confusing.", 'start': 1613.779, 'duration': 4.646}, {'end': 1620.647, 'text': "So we're going to create a style to move.", 'start': 1618.505, 'duration': 2.142}, {'end': 1624.291, 'text': 'the sign-in to the right.', 'start': 1621.889, 'duration': 2.402}, {'end': 1628.375, 'text': 'So basically we want this sign-in form to move over.', 'start': 1625.392, 'duration': 2.983}, {'end': 1637.385, 'text': "So we're going to take the container with the right panel active.", 'start': 1629.236, 'duration': 8.149}, {'end': 1642.951, 'text': "So when that's active we want to target the sign-in container.", 'start': 1637.945, 'duration': 5.006}, {'end': 1650.797, 'text': 'Okay, so basically when this class is added, so when we click this button, we want to style the sign in container.', 'start': 1644.332, 'duration': 6.465}, {'end': 1655.78, 'text': 'And what we want to do is transform translate x because that will move it.', 'start': 1651.197, 'duration': 4.583}, {'end': 1659.703, 'text': 'Okay, move it along the x axis and we want to move it 100% over to the right.', 'start': 1656.641, 'duration': 3.062}, {'end': 1665.254, 'text': 'a positive number is going to move right, a negative number will move left.', 'start': 1661.713, 'duration': 3.541}, {'end': 1666.755, 'text': "so let's save that.", 'start': 1665.254, 'duration': 1.501}, {'end': 1670.816, 'text': "let's click sign up and there it goes all right.", 'start': 1666.755, 'duration': 4.061}, {'end': 1675.418, 'text': 'reload, click again so that takes care of that functionality.', 'start': 1670.816, 'duration': 4.602}, {'end': 1680.479, 'text': 'so next thing i want to do is move this overlay here to the left.', 'start': 1675.418, 'duration': 5.061}, {'end': 1690.281, 'text': "so let's say move Overlay to, or I should say yeah, move overlay to left.", 'start': 1680.479, 'duration': 9.802}], 'summary': 'Styling to move sign-in form right by 100% and overlay left.', 'duration': 52.976, 'max_score': 1613.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41613779.jpg'}, {'end': 1721.537, 'src': 'heatmap', 'start': 1698.038, 'weight': 0.74, 'content': [{'end': 1705.745, 'text': 'and we just want to add a transform, translate x, and we want to move it to the left.', 'start': 1698.038, 'duration': 7.707}, {'end': 1708.227, 'text': "so we're going to do negative 100, not 100.", 'start': 1705.745, 'duration': 2.482}, {'end': 1711.349, 'text': "i don't think that's going to do anything.", 'start': 1708.227, 'duration': 3.122}, {'end': 1711.79, 'text': 'negative 100.', 'start': 1711.349, 'duration': 0.441}, {'end': 1719.196, 'text': 'so now, if i click this, the sign in goes over and the overlay goes over this way.', 'start': 1711.79, 'duration': 7.406}, {'end': 1721.537, 'text': 'Now, notice, we still have sign in.', 'start': 1719.756, 'duration': 1.781}], 'summary': 'Adding a transform to move left by -100, resulting in sign-in overlay movement.', 'duration': 23.499, 'max_score': 1698.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41698038.jpg'}, {'end': 1789.141, 'src': 'heatmap', 'start': 1726.52, 'weight': 5, 'content': [{'end': 1727.461, 'text': "So let's do that.", 'start': 1726.52, 'duration': 0.941}, {'end': 1734.305, 'text': "Let's say bring sign up over sign in.", 'start': 1728.542, 'duration': 5.763}, {'end': 1737.908, 'text': "I know these comments aren't that great, but it is what it is.", 'start': 1734.345, 'duration': 3.563}, {'end': 1743.832, 'text': "So let's do container right panel active and then target the sign up container.", 'start': 1738.028, 'duration': 5.804}, {'end': 1747.554, 'text': 'And we want to add a transform translate.', 'start': 1745.333, 'duration': 2.221}, {'end': 1756.494, 'text': "Translate X and we're going to move it 100 percent.", 'start': 1750.371, 'duration': 6.123}, {'end': 1763.158, 'text': 'Now, remember, the sign up container has an opacity of zero.', 'start': 1757.815, 'duration': 5.343}, {'end': 1769.441, 'text': 'So we want to change that to one and we want to change the Z index to go on top of the sign in.', 'start': 1763.198, 'duration': 6.243}, {'end': 1771.823, 'text': "So we're going to we're going to put that to five.", 'start': 1769.501, 'duration': 2.322}, {'end': 1775.666, 'text': "So we'll save and now when I click, there we go.", 'start': 1772.503, 'duration': 3.163}, {'end': 1782.232, 'text': "So the create account or I should say the sign up container is now on top of the sign in when it's on this side.", 'start': 1775.726, 'duration': 6.506}, {'end': 1789.141, 'text': 'All right, so now we want to work on getting this back, also not showing hello friend.', 'start': 1783.717, 'duration': 5.424}], 'summary': 'Adjust container position and opacity for sign up over sign in, achieving 100% translation and z-index of 5.', 'duration': 62.621, 'max_score': 1726.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41726520.jpg'}], 'start': 1450.835, 'title': 'Javascript and css for ui elements', 'summary': 'Covers javascript class addition and removal for a 20% push effect and css transformations for moving and styling ui elements, resulting in a user-friendly interface with quantifiable effects like 20% push effect and opacity change from 0 to 1.', 'chapters': [{'end': 1612.938, 'start': 1450.835, 'title': 'Javascript class addition and removal', 'summary': "Explains the addition and removal of classes in javascript to activate and deactivate the right panel, achieving a 20% push effect when the container class is added, and a button click event listener to add or remove the 'right panel active' class.", 'duration': 162.103, 'highlights': ["The JavaScript code adds a class called 'right panel active' when the sign up button is clicked, resulting in a 20% push effect on the container. The addition of the 'right panel active' class through JavaScript results in a 20% push effect on the container, creating a visual transition.", "The sign up and sign in buttons are equipped with event listeners to add or remove the 'right panel active' class, enabling the activation and deactivation of the right panel. Event listeners are used to add or remove the 'right panel active' class upon clicking the sign up or sign in buttons, facilitating the activation and deactivation of the right panel."]}, {'end': 1932.86, 'start': 1613.779, 'title': 'Css transformations for ui elements', 'summary': 'Demonstrates using css transformations to move and style ui elements, including translating right and left by 100% and -100%, changing opacity from 0 to 1, and adjusting z index to display ui elements in a layered fashion, resulting in a user-friendly interface.', 'duration': 319.081, 'highlights': ['Demonstrated moving UI elements using CSS transformations, such as translating them right and left by 100% and -100%, to enhance user experience.', 'Showed how to change the opacity of UI elements from 0 to 1, ensuring smooth transition and visibility.', 'Illustrated adjusting the Z index of UI elements to display them in a layered fashion, improving the visual hierarchy of the interface.', 'Explained the process of using CSS to create a sliding effect for UI elements, enhancing the overall user experience.']}], 'duration': 482.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/mUdo6w87rh4/pics/mUdo6w87rh41450835.jpg', 'highlights': ["The JavaScript code adds a class called 'right panel active' when the sign up button is clicked, resulting in a 20% push effect on the container.", "The addition of the 'right panel active' class through JavaScript results in a 20% push effect on the container, creating a visual transition.", "The sign up and sign in buttons are equipped with event listeners to add or remove the 'right panel active' class, enabling the activation and deactivation of the right panel.", "Event listeners are used to add or remove the 'right panel active' class upon clicking the sign up or sign in buttons, facilitating the activation and deactivation of the right panel.", 'Demonstrated moving UI elements using CSS transformations, such as translating them right and left by 100% and -100%, to enhance user experience.', 'Showed how to change the opacity of UI elements from 0 to 1, ensuring smooth transition and visibility.', 'Explained the process of using CSS to create a sliding effect for UI elements, enhancing the overall user experience.', 'Illustrated adjusting the Z index of UI elements to display them in a layered fashion, improving the visual hierarchy of the interface.']}], 'highlights': ['Florin Pop created a sliding sign-in/sign-up form with a toggle effect using CSS transitions and JavaScript.', "The JavaScript code adds a class called 'right panel active' when the sign up button is clicked, resulting in a 20% push effect on the container.", "The addition of the 'right panel active' class through JavaScript results in a 20% push effect on the container, creating a visual transition.", "Event listeners are used to add or remove the 'right panel active' class upon clicking the sign up or sign in buttons, facilitating the activation and deactivation of the right panel.", 'The HTML structure includes a div with the class of container and the ID of container, separate form containers for sign up and sign in, each with their own special class.', 'The CSS stylesheet includes an import of the Montserrat font from Google Fonts and can be adjusted for responsive design, with the tutorial focusing on a desktop UI.', "Setting box sizing to border box to ensure padding stays within the box model and doesn't affect width", "Defining font family as 'Montserrat' and 'sans serif', and setting the background color of the body to a light gray (hexadecimal F6F5F7)", 'Styling the body to display flex with flex direction column, justify content center, and align items center', 'Setting the height of the body to 100 viewport heights for full browser coverage and adding negative top margin to adjust positioning', 'Styling core elements like H1 with font weight of bold, removing margin, and paragraphs with specific font size, weight, line height, letter spacing, and margin', 'The chapter covers the addition of transform properties for positioning elements along the X axis, setting transition on the transform, and styling overlay panels with flexbox and positioning properties.', 'The use of transform properties, such as translate X, and the application of transition effects are demonstrated for positioning elements.', 'The use of transform, translate x, and transition properties in CSS to create sliding effects, including a translation of X for overlay positioning and transition for smooth animation.', "The JavaScript code adds a class called 'right panel active' when the sign up button is clicked, resulting in a 20% push effect on the container.", "The addition of the 'right panel active' class through JavaScript results in a 20% push effect on the container, creating a visual transition.", "Event listeners are used to add or remove the 'right panel active' class upon clicking the sign up or sign in buttons, facilitating the activation and deactivation of the right panel."]}