How to code a brewery website - The Intro Section [Design & Code] Code part 3

Key Takeaways

hi and welcome back to this series we're building out the website for a brewery you haven't yet watched the other videos in this series I strongly recommend that you do so you know how we got to where we are now and in this one we're gonna be building out the intro section to the site so the part just with the local brewery in the little text there with the background image we're going to explore some fun little sass things but nothing too complicated just some nice features that are in sass that you can use and it's gave me a pretty simple and pretty fast video so let's jump right into it now I'm gonna just going to let's go back to my file structure here and I'm gonna go into my layout and when I'm pretty much gonna do often I would have this Rattray page but because I'm not having several pages and having lots of different sections the home page usually has some custom layout stuff in this case I'm just gonna do like each section will get its own file in my layout so the first thing to underscore intro s CSS and don't forget to import it so add import layout slash intro save that close my main for now close all these I haven't made a mixin yet I still think we'll have B we'll probably have one mix in for this I'm thinking I don't really need my assets open so we new dodge intro in my dot intro I didn't do my nav we'll come back and do my nav in my intro we're gonna have my let's just I'm just trying to think um okay we'll do background-image:url dot dot images slash add just really important here when you do this if it's doing like now if I do back it's going back right because we're inside of we're inside of this so I'm going back a step I'm in my S CSS folder but in reality once this is compiled I'm going out of here so what do they call it even hero BG 0 bgj big background actually show you a nice little trick you can do you can nest inside of sass so background and then I do like this and then here I can do size that size URL a background image and then my usual URL and background size cover even if it's like Rapide no-repeat so if I do all that and I hit saved all of this is nested inside the background so if I come in I'll actually look at my main thing here when I scroll all the way down it's doing background image background size background repeat' and all of that fun stuff so a nice little trick with sass that you can do to save some keystrokes along the way let's go see how this is all looking we don't see anything and of course it's still not working because this should be images there we go awesome obviously my logo is kind of crazy so let's just for the moment with of I don't know 250 pixels margin:0 auto and bottom to em and my auto margin left and right won't work just display:block cool actually I don't even know if I need that because on here what I'm gonna do is I'm going to do a whoops display grid because what I want to do I'm just gonna do up here on here margin of 0 make my life a little easier oops wrong place okay padding of like ten viewport height zero okay for my grit what I'm gonna do is grid Auto flow so that's for my [Music] columns enter my rows and if you're not too familiar with grid I do have several videos where I sort of explore it so you can check out my series on that Auto flow and then I'm just trying to think for my width here what I want to do what do i do what do I want to do what do I want to do Auto flow and I'm gonna do like a min max min max I mean max but they're all gonna be well they're not all different the middle one will be different minimum will be one em come on 1fr I guess yep and we'll do the same thing here one M comma one fr and in my middle will say like 400 pixels I'm trying to think how wide my design gets this is have a width width well my width is pretty narrow that I did on that sole say 650 650 pixels so if I did that properly I clearly did not I actually might have still anyway that means that this has a width of between 450 and 650 and then my two sides will grow and shrink in accordance but they will never get smaller and then one M as I'm growing and shrinking stuff so it's working actually really well the only problem is obviously this is here now instead of being on top and it's because this is actually falling into the first column here and then the rest of it is in the middle column like I'd want it to so I'm just gonna say dot logo so this is my logo that's inside my section intro and this logo will get a grid column two over three and my this doesn't really have to be in your intro text the same thing there we go super so that is good and now I have like a little line that's right here so I'm just going to do that as like a before element on here so on my intro text what I can do is nested inside of there ampersand and then after and what that gets compiled down to would be taking this copy and pasting that there so it's just a lot easier than having to write the whole thing up by nesting it like that and using the ampersand so content it's a before so I need some content I need a display:block height will do one pixel background can be void opacity can be like 0.3 width will start with 100 pixels and play from there it's there so let's do position top position:absolute aiming which means this one position relative save top zero top one M mmm where did he go oh it's there top negative one em my bad cool margin 0.25 M Otto oh I have it is display up so position:absolute so this won't do anything we can do the whole left 50% transform translate X negative 50% trick cool cool cool that worked and this I can just give this a little margin error will do get my logo margin bottom margin bottom hmm interesting we'll go up to 3 and we'll stick with a 2.5 and we'll be happy with that cool so I'm happy with that that's going to grow and shrink and be nice and dandy super duper um two things left let's just come back up to my section intro here text-align:center and the color is going to be color brown light question mark yeah I think that's what I did our base maybe even I think I made it a little darker that's easy enough to read I think cool so that is looking nice and dandy alright so and yeah that's it for this video I hope you've liked it we're gonna do in the next video is just keep this going my next one is actually in me by the time you get to it the navigation will be done we won't even worry about that because it's really so basic and simple if you really want to check it out you can always go over to the github repo and check and the next video Juli give me a focus on this one and then we're gonna wrap everything up so thank you so much before watching you guys are amazing I love all the support I've been getting from you guys lately it's been incredible so thank you very much and a big THANK YOU my patrons who are supporting me financially so you guys are absolutely amazing if you'd be curious or want to know more about that you can go and check out my patron there's links to that in the description below and on the side there probably and of course until next time don't forget to make your corner the internet just a little bit more awesome