How to code a brewery website - Finishing up the code [Design & Code] Code part 8

Key Takeaways

hi and welcome back to this series where I'm finally going to finish coding up the brewery website so in this video I'm finally finishing off the rest of the brewery website so I'm gonna be doing the part with the keg in it there that I hadn't finished it and the footer and I'm also just cleaning things up and fixing up a few little loose ends that I had missed along the way so let's just jump right into it so let's might as well wrap this all up now let's go and tackle this one I'm gonna go back to my type auger fee for one section section one second because I realized I made a bit of a mistake along the way so a layout components abstract not abstract space typography put the margin to zero in all of these but then I never did my paragraph margin bottom I'll just do one in four now so that's going to be better and I need to bring my image into there whoops let's open up my index and I completely forgot when I was doing this to bring my image in so we can do that right now section brewery so title da da da da find it more I'm just gonna bring the image right here image images / keg I'm pretty sure some gigs there we go good now this section is getting a completely different look than the other ones right I'm pretty much going to give this one - and I need some space there just do I do three one two three one two I'm gonna do two and I'm just going to give this boy some padding so on my layouts and my layout I'll make a new file called brewery dot s CSS and you can see I never even made layouts for that all that fell into the general stuff I think general yeah so here on my brewery one let's go back to my main that's import brewery save that so what I want to do is say that my section brewery which I'm just going to double check that's what I called it it is did I spell it the same brewery okay so my section brewery what I want to do is grid is auto flow over repeat to 1fr I just want to columns for this one column for the picture one column for that which already it's making it much better the problem with images when you do something like this actually what I'm gonna do is come in here and just do div class section section very text box we're just gonna call it text box because it's a text box close and boom because now all of these don't fall on the grid anymore they just fall where they need to fall and super duper now there's a few things that do want to set up on this to make it work a little better but you can see it's sort of getting already the look that I want it to have so what I'm gonna do should I do okay it's great section burying a text box okay and the only reason I'm doing that is because I can just dot text box padding so my padding is gonna be like 3m [Music] on all sides and whoops this should be and double underscore there we go okay good hmm maybe this isn't gonna work the way I wanted it to here what if I get that to stop you know what I'm gonna get rid of this save I'm gonna keep my text box though um section for a text box this is going to get a class equals section Brewery whoops section brewery image and what we're gonna do in here because that other thing wasn't working the way ed originally wanted it to and what we're gonna do is my and image will have a grid column of 1 over 3 this padding and then my text box will have a grid column of 3 over 4 let's turn this off what's this giant space it's o1 over let's go see what's happening 1 2 3 and 3 to 4 yeah that's what I thought would happen oh right that makes sense maybe I do need to have a different grid on here they misspelled it in both places real that's hilarious what if I just redefine the columns a little bit and add a little gap okay we're gonna change it up actually I'm gonna do grid is autoflow when fr whoops over one fr how big - I'm with my text to be now min max 300 pixels 650 pixels when fr what if I did this one is too I'm gonna do a min max on this min max 300 pixels it's ufr we're also gonna put a gap on this one because it looks weird if not gap grid and gap 1m to a grid this would be a column just in case probably could just be grid gap but just to be safe that just gives us our space there this can still get bigger smaller and one thing I want to do is I want to make sure that my like right now it's not doing it but when this gets bigger when my image is bigger I want to keep this centered in that space so on my textbox I don't need my padding on there I knew NL loops align self-center I think there we go so I just stay centered in that space so that'll work for my image could I do I want to keep my image I've tried a few things here that I've deleted because it wasn't working I want to make sure my image always stays on this side and the only thing left that I can think of is if I do a margin left of auto oh there we go okay that worked and it pushes it that way super I'm something good good good good so I'm actually really happy with that the biggest issue now that we have is all this gigantic spacing this spacing is driving me absolutely bananas and part of the reason that is there is on my general you may remember I did padding 5 m0 I think we just need to do a zero on this too let's just go and check this out to see you why oh you see here it's because some of my text is long maybe no if something in this that's making it taller than it needs to be that's okay what I think I might do is just make it actually you know what that's a lot better yeah I'm pretty happy with that cool good good good so that's looking pretty nice ma'am all I have left to do is my footer and I realize it's not a hundred percent responsive and that's gonna have to stay that way if you want to be my guest I'd love it if you were to turn this into a fully responsive design and if you do make sure to let me know about it and let me see it but I think it's more interesting the parts that I'm doing now and if I have other sites that I've done that are fully responsive so you can go and check those out where we're using some media queries and stuff like that so for my footer let's just go and bring that into my main here footer and I can close my brewery now that one's done I can close my cards I can close my typography buttons for my footer so footer text-align:center I have the SVG here that we can't see which is my logo I'm gonna sort of cheat here with some sass and just do my logo I want to change the field the problem is if I just did logo and it fill on here of the Stewart red for now it doesn't actually fill anything because if we look at the logo let's just go look fast on my logo itself so the SVG there's no fill set on this the fill is on the things inside of there so you can see that this path has a fill on it and all the individual paths have fills on them so what I'm going to do is just logo star so everything inside my logo that's inside my footer it gets that on it and actually I don't need to know did I give that a separate class logo oh I called it logo light I could do this exact same thing on logo late then instead of having it you know this could just be logo light and then this could be brought out from here and put them here and then even that could be brought to my general except the color on it should be the color on it should be color brown light I believe did I leave this here save there we go perfect and even that might make it no I'm gonna leave it like that that's fine because here I need my color to be color color color brown light and my footer paragraphs which it's a little lazy doing this instead of giving in the class but they both need to be checked a font family font family title their line Heights can be one their margins can be zero they're kind of spaced out a little more oh there we go that's getting more where that was after let's just go and take a look at what I was after something like that what was my font size on that 20 well we'll stick with that I think I misspelled it there yeah I think we'll stick with that um that's probably coming just straight off my SVG so I'm not going to fiddle around too much now I've logo okay I'm gonna cheat a little here too then logo margin bottom 0.2 M need some space on that cool and my footer can have a margin or LG padding padding bottom of like 5 mm as well to give me that space so I can scroll all the way down mmm there we have it the site is done so I hope that you liked it I hope you learned something through watching this and if you did please let me know down in the comments below honestly if you've made it this far through this series thank you so much for watching all of these videos it's you guys watching these videos that helps support this channel and helps make this possible also a huge thank you to my patrons who helped support me financially if you'd like to know more about that go and check out my patreon page and as I've been seeing throughout the series if some of the sass stuff that I've been doing interests you there is a link down below that you can sign up to find out when I launched my sass course one last time thank you for watching and don't forget until next time to make your corner the Internet just a little bit more awesome [Music]