Hey, what is going on everybody? My name is Roddy and you're watching my channel Roddy the Brand. Today we're going to build a fully responsive landing page using Bootstrap. And I just wanted to mention that Bootstrap is still one of the most popular CSS frameworks out there that can help us with fast prototyping, accessibility, usability, a lot of components and responsive design I guess. There is a lot to it. Let's jump on the computer and get started. Welcome everybody and let's get started.  Just like so. Let's open this folder and this is where we're going to be creating all project files. I'm going to open Visual Studio Code as this is what I'm going to be using today for my code editor but you can use whatever you wish. So I'm going to go into File, Open folder and I'm going to open the folder that we just created. Here is the folder, select and this should open the project here on the left side of the Explorer. By the way you can open and close the Explorer by doing Ctrl and B just like so and if you're mark obviously you have to do Command and B and that's it. I've zoomed in quite a bit just so you can see a little bit better and one thing that I want to mention before we start is that I will be using an extension so if you click on extensions the extension that I will be using is called the Live Server and the reason I like to use this extension is because every time we make a change on our website it's going to automatically refresh the page for us which is great. So it saves us a little time. You don't have to have it but it's really nice. I'm going to close this and remove the extensions go to the Explorer and we can start creating all project files. So let's start by creating the photos. So I'm going to have a CSS folder for style sheet. I'm going to have an images folder and I'm going to shorten this with three letters IMG for images and then I'm going to create our main HTML file which is going to be the front page of our website. So this is going to be called index.html just like so. Now let's create the CSS for this project. I'm going to have a custom CSS style sheet for everything that we do and also we're going to include both trap from cdn in a second. So let's create a new style sheet and this is going to be called main.css. Feel free to name it whatever you like. So main.css that's absolutely fine and for the images I've already prepared some images from my design here in Figma. Basically all of the images inside here come from unsplash.com. They will be linked in the description below if you like to check them out and I've already exported those images as JPEGs. So I'm going to copy and paste them into my project. So let me copy let's open the images folder by right click reveal in file explorer and I'm going to copy the images inside here and that's it. I will actually also use a video for this tutorial so I'm going to copy this as well and I can either paste it inside the images let's paste it in here actually I think that would be fine. So this video comes from pixels and it will be linked in the description below as well and we'll link that later on as well. All right let's close this as we won't need it anymore and here the images and the videos that we just pasted. We can now open the index.html with the live server by right click open with live server and this should open the browser for us. As you can see the page is empty but it seems to be working and now we can start building our page. Let's do some of the scaffolding so we're gonna do a very basic HTML we're gonna test we're gonna link the style sheet test it out and then we will jump to burstrap. So I'm gonna close the explorer here just so it doesn't get in a way and I'm going to be using a lot of shortcuts in this tutorial starting with writing HTML and the emitter abbreviation is going to help me out and save me a few seconds I'm going to use HTML5 in here and this is a very simple HTML5 document. I'm gonna change the title super quickly so coffee so gorilla coffee like so and let's just put something like gorilla gorilla coffee like so just so we can test it save this let's go to the website refresh sometimes I think the first time you might have to refresh and after that every time it should be automatic but as you can see we have gorilla coffee in here which is fine okay let's link our style sheet first of all I'm talking about the style sheet that we just created inside here inside css and the title here we can do link select link css and then replace this so we remove this and we do css slash main dot css and this is how we link all star sheet so I'm gonna put a comment here main main star sheet like so and then let's quickly test this out so what I'm gonna do is change the background color super quickly let's go to main dot css and let's type something like body and then background color off anything like self black will do let's go back to the website and as you can see it automatically refreshed for me I didn't have to refresh the browser and we get a black background I actually don't want this but that was just a quick test so I'm gonna remove this save it let's go back to or index dot html and let's link bush trap so I'm gonna go back to the browser let me close this for this one go to get bush trap dot com and click on get started before we do this I just wanted to mention that as of now the version is on 5.1.3 and of course if you're watching this in future things might change slightly but hopefully there won't be any big breaking changes anytime soon so let's click on get started and there are multiple ways of including bush trap but today I'm gonna do it with the cdn here which is the fastest and easiest way so I'm gonna copy this and this needs to go inside or head element so let's go back and paste this somewhere around here so I'm gonna leave it there let's go to view well wrap because I've zoomed in so much we don't have so much space let me comment this as well just so we know what it is so this is bush trap style sheet style sheet like so and save this let's go back to the bush trap website and let's also get the javascript and I'm gonna get this one here so the reason we're getting the javascript is because if you want to use any of the components of functionality such as pop-ups, toggles, navigation and so on we need the javascript so I'm gonna copy this and I'm going to paste this under here just above the body tag so let's paste it in here and maybe we can comment this as well just so we're consistent so bush trap js like so let's save this and if the styles are working now we should see a change in the font as you can see the font I don't know if you remember what it looked like but the font has changed now this is the default bush trap font which will actually change in a second as well but as you can see bush trap is working and another way you can find out where it's working is if you right click inspect and let's say we inspect this h1 tag here you will see that in the styles panel here if we scroll down if we zoom in and scroll down you will see that we're getting all the bush trap styles in here popping up the root colors and so on so you can actually use this to reference stuff if you want to override something which we'll do in a second but yeah you get all of them in here you get the bush trap font sans serif the mono space the body font family and so on so there is a lot that you can use from here if you wish to and obviously you have everything in the documentation as well so I'm going to close this zoom out just like so and let's start by changing some of the default bush trap styles just so it suits the style that we are going for so I'm going to go back to visual studio coding here I'm going to click on main.tss and let's change a couple of things so first of all I want to change some of the variables so what we can do is column root and then add some of the variables that I want to change so first of all I want to change the primary color to do this I can do primary dash color and then I can put the color in here so this will be so the color that I'm gonna go for is 0a1118 which is almost like a dark blueish kind of tint of a color it's pretty nice I don't want it to be fully black and then for the highlights I'm gonna do primary color now I'm gonna put highlight and I'm gonna put a color of hash 233d54 which is kind of like a lighter version of this I'll probably won't use that too much but it will be nice to have later on and for the body I don't want the body to be fully white so what I'm gonna do is bs body dash bg this is a bush trap one that I'm overwriting again so I'm gonna do hash fbf9f6 and this is gonna be a very creamy white color and then I just want to change the bush trap font family to Montserrat so to do this I'm gonna do dash dash bush trap body font and then family like so and this is gonna be Montserrat which I'm gonna have to get from Google in a second Montserrat like so and this is gonna be sans serif like so let's get this font super quickly so I'm gonna copy this go back to the browser search for Montserrat font and it comes up with google font in here and the one that I want and actually only want two weights of this font and the first one is gonna be the 400 which is this one here so regular 400 I'm going to oh I've already selected it I think this is because I was using earlier so I've I want this one here the 400 and also I want the both 700 and when you click on here this will actually generate the script for you so you can either copy the link from here or you can import it into your star sheet I'm just gonna copy the link go to index dot html and we can paste it somewhere in here maybe I can comment this as well like so and this is gonna be Google fonts like so okay okay we should be good to go and start developing the website now as you can see the font actually has changed the background color is no longer white it's a little bit creamy and let's start building the header so let me first of all show you the design and just so it makes a little bit more sense what we're doing first of all I'm gonna concentrate on the header of this website which is only gonna be this part here and this this header is literally gonna have two elements the logo and a menu and basically we're gonna need a little bit of space from the top and left here and also right here for the menu so let's concentrate on that first of all and then we'll move on one thing that I wanted to mention is that we are going to develop everything from mobile first working our way up to tablet laptop screen and desktop so let's remove this and let's start writing or header so for the header we don't have to comment everything but I think it's gonna be nice so I'm gonna do a little comment here header start and once we finish here I'm gonna close it somewhere below and to build a header I can use the HTML5 element header like so and then this opens and closes for me which is great and I'm gonna have to add a few classes now what I like doing is I like to give each section a class even if I don't use it it just describes what the section actually does and it's very easy to pick up the class and style it from it and also I will be using BAM in this tutorial which is a CSS methodology and I'm gonna show you how but I'm not gonna follow it super strictly and you don't have to do it the way I do it all right let's give it the class name of header so we're super descriptive of what this is and we can actually use this class to style additional stuff inside this section as well and then I want to add a little bit of padding from the left top right and bottom so I can just use p-3 and this will give my header a padding of one rem on each side so left top right and bottom then I want this header to be positioned absolutely because this is actually going to go on top of my hero image and to do this there are two ways of doing it we can either use the bush drop classes or we can use the header put in our style sheet and style it from there either way is fine we can actually mix them if you wish let me show you how we might do it with with the bush drop classes so I could use position dash absolute and I can position it the way I like we are a little bit restricted with the position of bush drop but for the what I'm doing right now we can actually make this work really well so what I want to do I want the header to be positioned from from the left side of zero so this will be start dash zero and then I want it to be positioned top zero and I want it to be positioned to the right of zero which is end zero save this but because this is position absolute I'm gonna need a z index as well so now maybe I can use this class to actually style the z index so I'm gonna copy this I'm gonna go to main.css and I'm gonna leave it inside here header and maybe just put z index of two for example and of course I could have typed the position absolute in here as well and I could have changed the top left right position on here as well it's a preference but of course I think that you have a lot more power to do it from the style sheet because literally the options on here are endless while these are already predefined and you can only use so many of them let me show you so if you go to the bush drop and we say position as you can see so not this position position values maybe okay that's it so as you can see we have a couple of values in here but they might not be enough for every situation so that's why sometimes it might be best to just write your css but in this situation we are good so let's go back and now let's add the logo and the button in order to do this I'm actually going to add another diffs inside it with the class name of the dash flex and what this does is basically it converts the diff into a flexbox so we can use all the flexbox styles such as the justify and align so let me show you what I'm gonna do so I want to basically push the lego to be on the left side and I want to push the navigation to be on the right side so I'm going to do justify dash content between and I want to also make sure that the logo and the button are in the middle of the diff so to do this I can do align dash items dash center like so close this and obviously close the diff here let's tidy things up and now we can add the logo so for the logo I'm just going to use a link a href and this is going to be slash because this is our homepage so every time we click on the logo it's just going to go to the homepage and we can give it a class name because this is a link I don't want it to be underlined and I don't actually have a logo I'm just going to write it with text so I'm going to do text decoration dash none I don't want it to be underlined I want the text to be white so we can do text white and in fact we could have done it on the probably the one above but I should be fine as well and we can do font size of five which should technically make the font slightly bigger and then I'm going to make it both as well so font weight dash both okay let's type the logo now gorilla coffee like so and just make sure that your link is closed if we go to the website refresh it's very hard to see because the logo is white at the moment but it's here it's working we have the space everywhere which is good and now let's create the button because we use an flexbox for the button I'm going to create it in another diff so I'm going to do a diff and then I'm going to insert the button in here all right so this is going to be a button but because I want to trigger the let's call it native bushwrap navigation we're gonna have to do quite a bit of working here so first of all I can actually add an icon in here or you can style it with css whatever you prefer I'm gonna add an icon so I'm gonna go back to bushwrap and let's go to icons let's click on bushwrap icon actually and if you scroll down a little bit you should see this bushwrap what is it learn more about bushwrap icons they should probably make this a little more visible I guess it's always really hard to find this but it's here learn more about bushwrap icons and you can either install this or you can grab it with tdn and you'll be able to use all of those icons really easily so if I scroll that to the bottom actually you will see that we can literally either use svg's or we can use it like this if you wanted to use it like this we're gonna have to include the icons to our website to do this scroll down is pretty much at the bottom where it says install you can literally grab the cdn link from here so I'm gonna copy this go back to my index.html and I can maybe leave it inside here so I'm gonna say bushwrap icons you don't have to do that you don't have to do that because most of the icons I think you can use as svg as well so let me show you one with svg and I'm gonna do the other ones with icons so this one let's go to the search at the top let's have a look now this one is gonna be menu I think that this one is gonna do the job so let's click on the list and as you can see I can either copy this now and this is gonna work or I can just copy the svg from here and this should work as well so I can copy this go back to my button paste it like so and save if I go back hopefully you'll see it in here as you can see I mean it's not start that's why it's a little bit but I think it's working so it will work in a second let me zoom in as you can see the icon is here which is so good obviously the button is not started yet but I'm gonna do that right now and in fact what we can do because we're starting from mobile first I can put this on the right side maybe zoom out a little bit maybe a lot more and let's do this let's see if this is gonna work okay I think this is gonna work okay so we have a button there so let's have a look at how we can actually make this button work so what are we gonna have to do so we can give it a class name of not by toggler and by the way this is all coming from the bootstrap documentation I know I'm not making it up and obviously I'm giving it a little bit of style by myself so let's give it a text white like so and as you can see it's gone now maybe we should have changed the background color to something else so let's give it a style of background color and I'm just gonna put black for now this is just for now just so we can see I'll remove in a bit we are zoomed in quite a lot as well just have that in mind the text white seems to be working then we need to set this to be a type of button in order to make this button to work and to toggle the navigation we're gonna have to do the following so data vs toggle equals collapse and then we can do data vs-target and this is gonna be the target that we actually open this is gonna be or menu that it's gonna slide down and I'm gonna make this in a second as well so the target is gonna be cool let's call it let's call it navbar like so it's also nice to have some area controls and this is mainly for accessibility and this is all gonna work from bootstrap as well so we might as well do it it makes things a lot better so area dash controls equals and then I just need to grab this navbar equals navbar like so and then let's see what else do we have we have area expanded equals false so the default value of all menu is false because it's not expanded so when we open the website we don't want the menu to be expanded that's why we set it to false and also the screen readers will know that the the navigation is not expanded but when you toggle between a this will change to true and the screen reader will tell that it's now expanded which is awesome and finally let's give it an area label and this is gonna be equals to toggle toggle navigation like so every width smaller and okay this is pretty much all button done obviously when we click on it now nothing is gonna happen and I am zoomed in so much I'm zoomed in a lot but it is super tiny but it is super tiny so what I'm gonna do is change the width to be somewhere around 36 and the height to be around 36 so it's a little bit easier to see okay this is so much better okay when we press on this now nothing is really happening and this is because we don't actually have the menu and we could potentially do it now and then focus on the rest so we might as well this is the header done so what I'm gonna do is copy this and paste it underneath here and I'm gonna say header and that's it we're done with the header we're not gonna mess any more with it and let's do the fly out menu now all right let's now focus on the actual drop down menu and in order to make this work is actually fairly simple we can now use this nav bar id that we created here and put it on pretty much any div and that would make it work so what I mean is let's create a nav with the id so id of nav bar in here and this will now actually work so if you were to go the standard way and do a url with let's say a few lists and then inside each list you have a link don't do this by the way I just want to show you so we have link one well feel free to do whatever you like obviously we have link two link four this is how you normally do a navigation and then your style now at this point the reason that we're not seeing these ones is because this is positioned as absolute on top of it and that's why I created a few more just so you can see them so this is all working and if we make a little experiment here and we press the navigation button you will see that something is happening it is toggling up and down but it's not working as it should and the reason for this is because we need to add a couple of classes on here to make this work now the default behavior of this is that this is actually hidden and when we press the button it appears at the moment because we don't have those bootstrap classes it's shown so let me show you how this is going to work so what we have to do is add a couple of classes so let's do collapse the next one is nav nav bar dash collapse and then drop down nav like so if we save this you'll see that they're gone and if I click on this it's appearing so the links appearing just like so and the default behavior of this navigation is now working which is great now technically speaking we can start styling this and make it work the way we want so what I'm going to do is I can either use one of them class names to styler or I can just use the id I'm gonna use the id for this one just because I don't want to be adding any more classes and I'm gonna go to the main star sheet and do it in here so this is gonna be hash and then nav bar like so the book we need to stay organized so what I'm gonna do is I'm gonna comment this above this here and I'm gonna say this is or main header like so and close it this is a little bit better I'm going to copy this and paste it here on the nav bar and I'm gonna say main or just like navigation bar that would do or maybe we can make it a little bit more specific flyout navigation bar now I can style this the way I want and what I want to achieve here is when I press the button I want the navigation bar to go full screen from top to bottom left to right I want to change the background color just so we can see something is happening and I think that's pretty much it let's have a look at how we can do that so on the nav bar let's do the position as fixed because I want even if somehow we scroll down I want the menu to always stay on top so let's do position fixed then we go left zero top zero right zero and bottom zero clockwise bottom zero like so and we get to go and let's give it a background color so background color of something like RG RGB and this is going to be 255 247 and then 231 which should be a very creamy white color as you can see like so and now if we were to open this you will see that the navigation is opening but it's still below this here which is not what I want now I could move a few pixels from the top but I actually want it to be on top of this so what I'm gonna do is just give it a setting next of four for now and as you can see this is now on top which is great so if I'm just gonna refresh it's a little bit weird how it stop is here but I think I know how to fix this I think the animation stops around here and then it continues and this is because I think that the JavaScript looks at the height of this and he wants to stop but then I've done this as position fixed to the bottom zero and then it's continuing and it's making the animation a little bit worse but we'll fix this in a second so the next thing that I want to do actually is let's create the closing button so for the closed button we can actually copy the one from here from above so this one here button we can paste it somewhere around the bottom we'll have to change this in a bit anyway but here we go we have the nav bar obviously I want to change the svg to something else so let me have a look so let's go to bush drop super quickly open it and let's go to something like close I think this one is gonna do the job so I can just copy the svg go back and paste it in here so hopefully so hopefully now if I click on this we can't see it just yet I think it's because we might need to style this a little bit so let me show you how we can do that so this button needs to be let's have a look first of all let's use this class name just to make it a little bit more specific and give it to the button so I'm gonna do drop down nav and then underscore underscore and I'm gonna call this one closed nav button like so so this is super specific now and I can go back to my css and I can do dot drop down dash nav and then underscore underscore and then close nav bt and like so and target it so for this for this I want to make sure that this is positioned absolute I want to make sure that the top is set to 20 pixels and I want to run 16 pixels to the right and I also want to change the background color to something else just in case it's hard to see I'm going to show you in a second so this is going to be RGB a 255 255 255 and I'm going to put the opacity to 0.6 so this is white with a little bit of opacity as a background color and let me have a look whether we can see it yes it's here but I think we need to change the color of it so to change the color maybe we can just remove the text white from here let's have a look save okay that's working but obviously it's tiny so I'm gonna change the size from 16 to 36 and then 36 save and here it is the button in here it's looking great I can close it open close and that's it so this is how the navigation can work feel free to style this if you wish but I'm going to do something else I want to make it look a little bit better and this is going to be a tricky bit I think so let me remove all of this and I want to wrap first of all everything in a fluid container there are different sizes of containers I think if we do a class container they are and I and I want to wrap pretty much everything I could wrap the button as well I guess yeah let's wrap the button as well so everything is inside this container and let me show you about the containers so if we go back to bush wrap the thing bush wrap get started search for container as you can see we have different containers in here so we have a small one medium one large XLXXL and fluid so the fluid one is pretty much always 100% and the biggest one which is the large one here stops at 1 3 2 0 which might not be enough for my layout so I might have to create a custom one in a minute so I'm gonna use the fluid one because it's always 100% let's do that I think that's gonna work well so let me go to container dash fluid and inside this container is where I'm gonna be wrapping pretty much everything so I'm gonna actually create a row okay let's create a new row and inside this row we're gonna create a few columns but I want them to be aligned items to the start so align items start and I'm not putting deflects on this one because as default rows are set to flex now inside here I'm gonna create a column let me type this up a little bit so let's create a column so co and now for the small screens we usually start with column so for the small screens I want this column to take the full width of the screen and this is 12 now after this we have small we have medium large and so on so on slightly larger screens on the next breakpoint I want the column to be actually set to four because we have 12 12 columns in bootstrap four plus four and I'm gonna have three columns four plus four plus four equals 12 it's gonna make sense in a minute so as a default we're gonna have 12 columns and above this media query let's do call dash small I want it to be four and this is gonna work in a minute you will see how it works and in fact we could potentially test it now so I could put call okay let's do it let's test it now just so you can see what's gonna happen so for example call one and I can duplicate this one here we go call two and call three so this is what we're trying to achieve and let me see how this works I'm gonna pop this out let's open the navigation and as you can see we have column one in here column two in here and column three now watch what happens when we go down to small as you can see there will stack in so this is taking 12 this is taking 12 and this is taking 12 if I go that if I go up as you can see they're now stuck in so this is how we do the responsive layouts and of course you can have you can change it on larger screens and so on I think this is gonna do a wonderful job for me so I'm gonna leave it as it is let's build the links inside it I know that I'm not using an unordered listing here but this allows me to style things a little bit better so I'm gonna do it this way so let's do an a href and this is where your link will go at the moment because we're doing a dummy website I'm just gonna do hash so it's not a broken link and then I'm gonna put a class of row here and I'm gonna remove any of the text decoration because this is a link I don't want the text to be underlined so text decoration equals none and after that as a row which means it's a flex box that's cool so let's close this and inside the link I'm gonna create a column just like here we can actually nest columns it's no problem at all we can nest them as much as we want so inside this row I'm gonna create another column so let's do a div with the class name of call and this is gonna start with two so this is gonna be a tiny little column on mobile and the reason for this is because I want the image to be tiny and I want the text to take the rest of the space I mean we can't make it a little bit bigger we'll see in a second and then on slightly bigger screens I can do call small and then that could be 12 because I want the image to be full screen and then let's add a little bit of margin to the bottom to push the text which we'll have in a second so this is where my image is gonna go I can create the image by doing img and then source and and let's add my first image in here which is gonna be one coffee flavor I've numbered them quite nicely let's put an old tag which is gonna be coffee flavor something like this and then this image I want it to be fluid so so I'm gonna do class of img-fluid we have the old text in there also it would be nice to put the width and the height of the image so let's do width and this one I'm gonna have to do control and click on this and this is one 553 746 okay so 553 and then height 746 and that's it whatever some are missing maybe we can do it as loading lazy as well and that's it that's all image let me have a look how it looks here it is it's a tiny little image in here but I think it's gonna look pretty cool we'll see we'll see and then for the next bit I want a little bit of text underneath here so I'm gonna do another call this one is gonna take 10 let's have a look if this is gonna work and inside this and I'm gonna say amazing flavor and then I'm gonna copy a little bit of text inside a paragraph so let me copy that I'm just gonna say something I find out about or amazing flavor and then at the end I'm just gonna say with another paragraph I'm gonna say learn more and I'm gonna put an icon here with an arrow so let me go to bootstrap I should have kept that open okay so so arrow the one that I want maybe this one short arrow and I can just use this from here because we included the library earlier I'm gonna paste in here the reason I'm not doing the learn more as a link is because the whole bit is a link so no matter what you're clicking on the image or the text anywhere I want the whole bit to be a link so that's pretty much it in here I hope this works safe let's go and have a look okay this is actually the way I want it maybe that needs to be moved down a little bit maybe I can do it on here I'm not so sure margin top or four I don't know yeah maybe that will work okay this is looking good one thing that's pretty is that the link color is still the default bootstrap one which I definitely want to change but we're gonna do that in second so what I'm gonna do now is let's do a quick experiment and copy this column so this is gonna be copied two times one two save it and let's see hi looks okay that's exactly what I wanted and now if I open this on desktop super quickly and if I open it yes that's exactly what I wanted all right that's looking pretty good maybe I just want to send this a little bit because we have a little more space to the right side so let me have a look what I missed um so on this one here maybe we can do it as the flex display as flex and then align items center I think that this might do the job let me test it out okay and the reason for this is because the actual columns are taking are taking a little bit the actual columns are now taking the full width which is absolutely fine to be fair I mean what I could do is either change the container to be xxl which is kind of like the biggest one available there unless we create our own one right I think that this is going to work I'm not sure whether to make it a little bit bigger but also if you remember this jaggedy animation here where it stops we can fix this and potentially we can move this to the bottom by giving this the container fluid which is this one or it's not fluid anymore the container xxl now we can give this a height of 100 vh and I think that might do the job and maybe a little bit of padding let's have a look so I wonder what it's name this let's say um let's do let's give it a name just in case I change the container again so drop down nav underscore underscore container this one I'm going to call it let me copy this let's go to the star sheet and let's do drop down nav container and inside here I'm going to give it a height of 100 vh hopefully this will sort out the animation problems and let's add a little bit of padding to left and right 0 and top and bottom 1 rem I hope that this works so we do this boom it's in the middle I mean I don't know if I prefer them a little bit bigger maybe I can mess around with this so if I was to change it back to fluid where is it container fluid boom I don't know I don't know which one I prefer so I'm gonna leave it I'm gonna leave it as container xxl and let's move on all right now let's quickly change the default links on here okay so one thing that's spotted just now is that these elements are now in the center and this is because I changed the align item center so what I can do is I can set align items to start for mobile and for the rest I can do align items maybe medium or small center and now we have these at the top here and if I open this on desktop let's say and we open it this is centered that's it so let's change the links now everywhere on the whole website and I'm gonna do this in the star sheet at the top I should have done this maybe at the start it doesn't really matter I guess to change the links what I'm gonna do is put a and then inside here we can just put color and I'm gonna put the var color of the primary color like so which we have in here and that's it this is gonna be this is gonna be a very dark color and for the hover we can do exactly the same so I can duplicate this by holding alt shift and down and I can do hover and I can change the color to whatever I like I'm just gonna leave it as it is for now and that's it so if we go back here we go the links are now black which is awesome and the text also because this entire thing is a link okay cool let's now focus on the header this is gonna be the next tricky bit so for the header let's go back to index.html let's scroll down let's tidy things up because it's getting messy and let's make it inside here okay all right first of all for the hero let's remove this black color here that we added earlier that was only for testing purposes so I'm gonna remove it super quickly like so save it obviously it's hard to see now but that's absolutely fine and because we're gonna put or hero so for the hero let's quickly finish this by the way so this is gonna be fly out navigation start like so let me copy this and let's end in here okay let's quickly build the hero section now this is probably gonna be the most interesting part of this video and let me quickly show you what we're gonna do so if I pull up Figma super quickly so we're gonna have a couple of things so I want this section to be full screen all the time no matter whether it's mobile or desktop I'm gonna have a little overlay on top of the video and this is basically going to let us kind of like make the video darker or lighter depending on the video the text might not be readable and that's why we're gonna have a small overlay and then we obviously gonna have the heading a little bit of paragraph a button and this explore button here which is also gonna work and it's gonna send you to the second section which will build later on so let's start building this so what I'm gonna do is inside the html I'm gonna grab a comment super quickly and put it in here let's say hero start like so and then I'm gonna start creating the hero section so this is gonna be a section element and for this section element I'm going to add a class name of hero just so it's self-explanatory and everything inside it can use this as the keyword and as we build everything we can style it as well so it makes sense so let's first of all style the hero section as we just made it so I'm gonna copy the star from here and paste it around here at the bottom obviously this is gonna be a class and I want to make everything organized so I'm gonna put hero section like so and let's start styling the hero so for the hero basically I want it to be relative so we can position absolute stuff inside it which we'll do in a sec so let's do position relative so this is going to have the height of 100 vh which is basically gonna take the full height and I need a background color just so we can see as well so background color var and I'm gonna use the primary color which is quite dark as you can see this is already working and just in case because I'm gonna have a video and I want the video to be stretched inside this I might need to add an overflow hidden overflow hidden just so we don't get a scroll bar here on the left and right now the next thing that I can do is make the overlay or we can start with the video actually let's start with the video and then we can add the overlay on top of it so for the video let's start by adding a video tag like so this is actually not correct what I'm going to do is video and inside here is where I'm gonna add the source so we're gonna have a video and we want to actually auto play this video I mean auto playing is probably not the best for accessibility but we're gonna stop the music but there won't be any music plays in line equals plays in line we need to set auto play to auto play like so we need to set this to mute it otherwise it won't auto play so mute it is equals muted and then loop I wanted to loop all the time so it doesn't stop I could set the loading to lazy let's give it a class name of hero underscore underscore video so it's tied up to this but it's a separate class on its own and now we need to add the source in here so source and the source for this video is going to be source equals and is it the reporting images yes I did so this is the source I probably should have put underscore something but that should work is all and then type equals video dash mp4 okay if I save as you can see we have the video this is pretty cool it's obviously kind of like not in the center just yet but I can do that it's auto playing which is amazing and yeah let's style this now so what I'm gonna do is grab this hero video first of all go to main.tss and inside here is where I'm gonna do the hero video let's position this as absolute and this is gonna be top of 50% I want to move in and then we have left 50% so minimum width needs to be set to 100% minimum height needs to be set to 100% width needs to be set to auto height needs to be set to auto to make it and now to bring it back because as you can see it's here in the corner to bring it back and make it in the middle we can just use the transform property and then this is gonna be translate x translate x and this is gonna be minus 50% so you can see what's gonna happen and we also need translate y in here translate y and that's gonna be 50% as well let me save okay as you can see this is now there on center the video is so now let's create the overlay so we can make this a little bit darker to do this we can actually make the overlay here on top and what I'm gonna do is create a div with the class of hero underscore overlay like so and that's it let's now style it copy paste it in here and what I can do for the overlay is let's position a absolute festival position absolute so we can start with left zero top zero right zero and bottom zero like so the background color maybe we can do what can we do maybe we can do var and I'm gonna do the primary color let's have a look at how this works but I'm gonna set the opacity to something like half of it so opacity we can do zero point five that's okay that might not work and I wonder whether this is because I need z index to one or I can put z index on this to zero hero overlay hero overlay it's potentially because I need z index to one yeah I think that works so z index to one moves at the front of the video and everything seems to be working and now we can add some of the titles and the paragraph let me do that super quickly so for the title let's go back to index dot html let's make a little space and we can add it in here so let's do a div with the class name of h 100 so this is gonna take the full width so I'm creating a container that is gonna take the full height sorry and then I'm gonna do a container maybe xxl to be honest I might create my own one in a second just to make it expand a little bit more so let's give it so let's leave us this for now and then let's do position relative like so this is also gonna need a z index so I could either do it in here or I could give it a special class so what should I do maybe we can do it as hero underscore underscore hero underscore underscore content and I can do it inside here so and then what did I say z index of one so we'll see whether this works we might need to change it and then I'm gonna create another div in here and I'm gonna cover this div to flex so we can do h 100 again and now I can use the align item center open close and then inside here and then inside here we can create another div which is gonna hold everything and is gonna be aligned in the middle of the screen so for this I could do a text white text white like so close it and inside here is where I'm gonna add the title so for example we can have h1 and this is gonna be discover discover the taste of real coffee then we can have a little paragraph just gonna paste some laura emerson text for this and as you can see this is already looking good and the last thing that I'm gonna do is add a link href and this is gonna be let's not have a broken let's have it as class margin top of 2 btn dash this is gonna be a button it's gonna be a button large and the button I wanted to be outline light so it's one of them ghost buttons obviously it's broken at the moment so light and then I need to give it a row of button because it's a link it's kind of like nice for accessibility to give it a row of button and now let's call it by now by now like so with a capital letter okay this is already looking good I might want to make this a little bit bigger to be honest so what I'm gonna do is this h1 I'm gonna do fw both oh no class this needs a class name fw both okay that's a little bit better and maybe I can do margin bottom four yep that's a little bit better for the paragraph let's do lead which is gonna make it a little bit bigger and better and let's do margin bottom four okay that's pretty awesome let's have a look how this looks on desktop I'm gonna open this I'm not extremely happy with this so there are a couple of things I want to fix here I want to make the container a little bit bigger than this I want to give this max width so it's not like this because it doesn't look right and potentially I want to make this a little bit bigger let's start with the container festival so let's go back to the css and let's go to the top and let's create a custom container so I'm gonna copy a comment paste it here and let's do custom container for a custom container I'm gonna start with container and then custom that's it and what I'm gonna do is I'm gonna set the original one so the as default I wanted to have a width of 100% I want padding left to be one rem and padding right to be one rem I could have done this in one thing I guess and I want to do margin left and right to be auto so potentially I could have done this padding of one rem and then zero and then I could have the and I could do margin margin zero auto like so and I think that should do the job let me change this to container custom and let's have a look at it okay that's all good but this is 100% but for I didn't mix up the padding I probably did so we have yeah I've mixed up the padding so it needs to be zero and then probably one my fault yep okay so we have the padding this is in the middle it's all good and the but for bigger screens I actually wanted to have it a little bit inside so what I'm gonna do is a few media queries and in fact this might be a good time to paste all the media queries just so you can have them actually so I'm gonna copy them here is the media queries that you could use obviously you can modify them and add as much as you want but I'm gonna copy these ones for here for you to copy and paste if you wish and what I'm gonna do now I'm gonna copy this one here and I'm gonna add in here so for 1200 I'm gonna do copy this and I'm gonna change it a little bit so for the width I'm gonna want this to be around 1140 this is in pixels and we don't change anything else that's absolutely fine in fact I can put this on one line and one more I'm gonna copy this and I'm gonna change this to the next so to 1400 I'm gonna make this a little bit bigger and one more I'm gonna put it as 1600 and then this is gonna be 1520 okay this looks a little bit better to me so let's have a look it's working on mobile and yeah that's pretty cool the only thing that I'm gonna change now is the heading to be a little bit bigger and put a max width on this container let's do that for this I'm gonna actually give it a unique class name so let's say we call it something like hero underscore underscore content width I'm gonna copy this go to the hero section here paste it and we need to give it a max width and the max width for this I'm gonna put as max width of 540 pixels like so let's have a look that did not work maybe it didn't save save okay yeah that's working I'd much prefer this it's a little bit better and maybe we can make the text a little bit bigger so I'm just gonna nest I mean in the in the hero section here what I'm gonna do is I'm just gonna do h1 like so I could give it a unique in fact let's let's do it probably so we can do hero underscore underscore heading like so and then I can change the heading to whatever I like and for this to be honest what I'm gonna do is add another media query so what I'm gonna do is add media and then this is gonna be min width min width of 1400 pixels and then I'm gonna put this inside here and just change the h1 to be a little bit bigger than it is so font font size and this can be 3.2 wrap save did I break something yes that needs to be gone that needs to be gone that needs to be gone okay so I need to copy this go to the html here and add it to the heading so here we're heading and this is properly done now let's have a look okay this is much better and when we go down it goes too small and that's it I don't mind this I think this is a little bit better this is obviously a vnl desktop but if you wish the height of the screen to be smaller you can always change that with media queries as well but this is looking pretty cool let's now focus on this explore button here which is gonna move everything if you click on it is gonna go down to this section so to do this let's go back in here let's tidy things up first of all like so and let's do a link so href and this is gonna be let's go let's scroll down like so and let's give it a class name of hero underscore underscore scroll bvn and then I can put inside here super like explore and we're gonna need an icon of arrow down so I already know which one this is I'm gonna copy it and paste it so bbi dash arrow down short and now we can style this super quickly I'm gonna grab the class name go here at the bottom and then let's position this at the bottom and let's position it absolute so to this position absolute and then we can do left 50 percent bottom it's gonna be somewhere around 30 pixels let's do transform to bring it back to the center translate x minus 50 percent then the z index money to go up a little bit let's do let's do a color of va let's do a color of va dash dash bush trap light which is a very light color I think you might be just white to be fair and let's display this as flex because we have two elements in there and let's do it as flex direction column and then align item center and text decoration oops text decoration set to none not orange none okay what else do we need so let me have a look whether this works first of all it's nice to test okay this is perfect the hover is not great I can change this as well so I can copy this and do hover and on hover I can do color in fact I'm gonna copy this one here it's not going to be a big hover that's absolutely fine let me go back yeah that's absolutely fine we could change it to a slightly opaque color or maybe like even do the opacity opacity of 0.8 I don't know simple like this would do and let's add a little bit of animation why not but let's add it to the arrow instead so the arrow we can grab this bi class name so what we can do is whoops so what we can do is grab this hero scroll btn and we nest the bi inside it and now we can animate it so let's say transition delay transition and we say whoops that needs to be delay and we do 0.8 seconds and then let's say animation which we're gonna have to create let's call a bounce or something like that one second infinite and then alternative let's create this animation super quickly with key frames add key frames and then the identifier is bounce and then inside here we're gonna do from transform translate y which is up and down basically and this is gonna be zero pixels and then oh sorry this needs to be from from and then we need to put two and this is gonna be transform and then translate y minus 10 pixels like so and hopefully if we go back is it working did I save him I have too many of them open oh sorry this is a class name that's why so but dot hopefully oh here we go this is pretty cool real real nice animation and now we just need to link it to the next section which we actually haven't created yet and let's create it and let's link it so to link this we've already given it a link here which is good but we just need to create this uncle link somewhere so I'm just gonna create it below here and we should be good to go the anchor can be just a id and we copy the id from here scroll down like so and we close that's it hopefully this should work but I'm not we probably don't have yeah we don't have anything just yet so let me quickly add something so now one two three yeah okay so I think this is gonna work now boom cool that's pretty cool if you want the animation to be smooth is well what we can do if you go to main.css and let's do it at the top so maybe under the root here we can do let's put htmo and we can do scroll behavior and we can set this to smooth like so and now it would be nice we'll test it in a minute but it would be the animation will be a lot smoother now because we don't have much many things at the bottom we can't really see the animation very well but it should be much smoother now I believe and if we test this on mobile super quickly you will see that it's all working quite well and we can inspect the test on mobile like so and yeah pretty cool let's focus on the next section now let's focus on the next section which is this one here and this is pretty much going to repeat a few times so one two three and we just have the image swapped on this one here which is absolutely fine so let's do that all right let's focus on the next section now so I'm gonna move this let's make a little comment in here so I'm gonna say section one start like so and we should be good to go also I forgot to close this one here me close a hero and so let's start by opening a section tag and then closing it and then this section is gonna have a couple of classes so let's go with first one I'm gonna name this one something so let's call it step or something like that just because we have step one step two and step three so I'm just gonna call it steps we can add the custom container that we created earlier so container dash custom and I'm gonna do patting patting y which is top and bottom to be four now I don't think that this is gonna be good enough so I might make myself I'm wondering whether to you know what I'm gonna add the padding to the steps on its own because four won't be enough so what I'm gonna do inside here is I'm gonna add a div with the class name of row and then inside this div is where we're gonna add two columns one is gonna be for the image and one is gonna be for the actual text so the first one so let's create a column with 12 so basically on mobile we want the first column to be full width then on slightly bigger screens which is the next media query call dash sm small I want it to go to six so because we have 12 columns I want when we go up this to take half of the screen and and then I'm gonna have another column that's gonna take the other half so I hope that makes sense and I want to convert this to a flexbox as well so dmd on medium queries flex because I want to justify the content in the middle when we above this media query I'll show you in a second so justify dash content and then this is going to be md center so basically don't want it one is small I don't want it to be justified center that's all and now let's add the image so this is going to be image source and this is going to be image slash and the first one is going to be the coffee flavor one we're gonna have to add an old tag of coffee coffee flavor something like this don't forget to add your width which is 533 I believe is a 533 or 553 553 I believe let's have luck so it's 553 and then the height is going to be 746 746 like so and close we can make this as loading lazy of course so when we open the website until we scroll this won't be loaded which means that website is gonna load fast and then when we scroll down this is gonna load immediately which is good and we can actually close this so if I save this let's have a look at what we get we get the image in here obviously I'm gonna add some paddings in a second but that's looking good it's taking it's kind of like in the middle and if I go down it's at the top and it's all looking good so we'll figure out the rest in sec so let's add the second column so this is going to be very similar actually so we can have a div with the class name of call 12 then when we go up I want it to be called small six so they're kind of like two columns you'll see side by side and then I want to let me close this so it doesn't look bad and then I want to align this self to center and I want to justify content md center is this gonna work probably think about it I don't know if I needed the md flexing here we'll have a look in second but that's all working good and now let's add some of the content and what I'm gonna do I'm actually gonna add one more div so I can kind of like constrain the width of this so I'm gonna do a div with the class name of steps underscore underscore content width like so let's close it and inside here I can add I don't know whether this to be I mean I can add in a paragraph I guess or I can add in a div maybe let's let's just leave this paragraph I mean technically speaking it's not really a paragraph so I wonder if it's just better to add a div or something or a span you know let's add a span I think that'll do span span here we go and then h1 for this h1 we're gonna have a class of h2 because I wanted to make it slightly smaller than the h1 tag but I still want it to be h1 because this is a section so you can have its own h1 then inside here I'm gonna push everything below so what margin bottom with full and let's say amazing coffee flavor then after this we're gonna put a paragraph and this is gonna have a class name of margin margin bottom of four again and I'm gonna put some lorem ipson in here just like so and last but not least let's create a link and this link is gonna be empty just because we don't have anything to link it to and let's say read more and I'm gonna add a an icon here so this icon is gonna be i class of bi bi arrow right I think that's it okay save this and let's have a look at how this looks that's all looking pretty good if we go down is still looking pretty good obviously we're gonna need some spacing here but that's not too bad let me fix that super quickly if I can so on the image itself on the image itself I think I forgot to make it responsive so what I can do is add a class to it and let's say image fluid and padding bottom can be full and maybe I can give it a custom class just because or mobile the image is huge I mean this is huge from above so maybe I can give it a class so I can kind of like still keep it nice but cut off some of it so let's do that I think that's a good idea so pvfull and steps underscore underscore section maybe hit them now okay I think that's gonna work padding bottom of added yep that's looking good and now I can start styling let's style this image first of all actually no let's start from the section and give it a little bit of padding so steps that's gonna be somewhat bottom so let's do it here let's say let me copy comment did I not see a comment hero that's absolutely fine let's tidy it up okay so this is gonna be steps section like so so what I'm gonna do is I'm going to give it a padding of top maybe 40 pixels and you know what let's give it a padding of top and bottom 40 pixels from above so so zero and let's have a look how this looks like yeah that's a little bit better we do need a container potentially did I add one I don't think that's okay the this is actually not gonna be a good idea so this is actually gonna break the container padding so if you see there is no padding now so what I'm gonna have to do instead is I'm gonna do padding dash top of 40 pixels and I'm gonna do padding dash bottom of 40 pixels like so hopefully that okay that fixes pretty much everything now but I'm gonna do another media query for desktop or bigger screens where we have a little bit more space in here because that's just not enough so what I'm gonna do let's say we do a media query inside here I'm gonna do at media and this is gonna be min with minimum weight of five four four pixels and then inside here what I'm gonna do is grab this and just change the values to maybe I think 80 might be a good one okay let's have a look yep that's much much better if I scroll if I go down to mobile as you can see it's smaller if you go up it's a lot bigger I think I like that so the next problem that we're having is this image so we can style this super quickly as well we have this container here which is good and I also gave this image a class name of steps underscore underscore section thumbnail so what I'm gonna do is grab this and I'm gonna modify it with css a little bit for mobile so I'm gonna put in here and I'm gonna say height I want it to be around 140 pixels and I want the object to be fit and to cover not contain cover okay so now as you can see this is this is shrinking down the image but the aspect ratio is still good the image is kind of like covering everything which is good so it's not like squished if you know what I mean this is perfect now there are similar options but cover is probably the best one in this scenario I think so I'm gonna leave it as it is but obviously now we're gonna have a problem because on desktop still look the same so I'm gonna have to reset it I'm gonna grab let's just grab this media career and in fact we could just use it so I'm gonna grab this and put it in here and I'm gonna reset the height to be also like so and I can move this media career at the bottom actually oops and we're done okay that's working if we go down it's squished and so on so that's almost done the only thing that I don't like now is that this is actually taking the full width of the column which is fine but I feel like it's gonna look a lot better if we actually cut it around here so that's why I gave it a class name or where is it steps oops steps content width so I'm gonna copy this I'm gonna paste it in here with and this could be this could be maybe max width around 456 pixels and I can say that the margin is zero auto so we can have it every time in the middle okay much much better much much cleaner a lot of white space now okay I'm starting to think that this isn't doing much and it might be because of the image so what I could do is potentially give this image a margin zero to center it let's have a look whether this is gonna work so the image is called step thumbnail and if I do margin zero auto hopefully that yeah that has it in the middle that's a little bit better I think go down yeah that's working well now okay small issue there I'm not so sure whether we actually need the flex do we let's have a look yeah no maybe we can do yeah I have a feeling that this doesn't seem to be doing anything I don't know why I added it okay that's already looking good so what I'm gonna do now is duplicate this section give it a different background color and just swap them around let's have a look at how we can do that so I'm gonna oops so I'm gonna copy the whole section from here let me actually comment it first of all section one and I'm gonna copy the entire section paste in here and I want to swap the places of this column and this column here so what we can do is on the column here I can just say order order dash sm1 save this and hopefully they will be flipped yep as you can see they're flipped obviously I need to change the content the image and so on so what I'm gonna do is do that so I'm gonna do that super quickly too this is gonna be I'm gonna copy some text here surprising how benefits I'm gonna leave everything else as it is and this jpeg needs to be changed to to have benefits like so save it I can change the old text as well by the way all the images are the same size when I was exporting them and make sure that they're the same size so don't worry about that and we are good now only one thing that I'm gonna do in here is I'm gonna create a little modifier so I can change the background to this so let's say we want to give this a custom background I'm gonna say steps dash dash maybe I don't background I think that would do and then let's go to steps do it in here and we can do dash dash background and we can give it a background color so I'm not so sure which background color to give it I'm thinking maybe something like this but a little bit coffee like so let's do background color and then I'm gonna change it so maybe maybe a little bit yellowy like that I think that would be nice save it save this let's have a look this is not good let's change it to this one let's have a look how it looks uh I'm not sure if I like it that much all right the color is gonna be fef8f9 it's kind of like a coffee white creamy color so that's why I'm gonna do it and if I go back here it is but this is looking a little bit odd and I know why this is happening this is happening because I actually put the container custom on the actual section so basically this is now constrained to the size of this container custom and instead what I need to do is put wrap everything inside this so like so but that didn't work so I'm gonna have to type I guess and that's it and I'm gonna wrap everything inside this container custom here indent a little bit indent it and hopefully that should solve all problem yeah as you can see now we have it full width and this is looking a lot better it's also using the same styles as the one above because we copied it and it's looking pretty good so it's fully responsive now the next one I'm gonna do is copy this one here again and do the next section so I'm gonna copy this section here and paste in here so I'm not gonna do much with this one what we need to change is this to free and I just need to change some of the content so I'm gonna say essential nutrients in here lower epsilon is fine what else do I need the image needs to be changed so that's gonna be free free essential yep oh no this is the small one I need the free essential nutrients that's it change this as well so I'm we're good to go let's have a look at what happens okay we have we have three sections so if I click on this this goes down one two three perfect the last thing that I'm gonna do I'm gonna do one more section with three columns and then I'm gonna finish off with the photo so the next section we're gonna create in here I didn't properly design this one I kind of like throw some containers around but I'm gonna attempt to make it a little bit better than the design and I'm gonna do slightly different photo as well so let's have a look I don't know what to call this section but let's call it let's give it a common festival so section weight free course columns painting that'll be fine and then let's start building it so I'm gonna have a section this section is gonna have a class name of bg dark this is the background dark color and then I want the text inside to be obviously white so we can read it and then I want py which is padding top and bottom to be four so that's all looking good the inside here I'm gonna add my custom container so custom container like so and inside here and in fact I'm gonna give this a margin y of four so we have a little bit more space around and then inside here I'm gonna be creating the row with the column so row and then inside the row let's create the columns so we're gonna have column one which is gonna take 12 on mobile and then when we go up we're gonna have co small of four with margin bottom of four that's it inside here I'm gonna add a smaller image so I'm gonna do an image and then this is gonna be source image and then this is gonna be the first image but small of course we're gonna have an old tag which is coffee flavor we're gonna have width of 441 for this one and a height of 258 and I'm gonna have it as loading lazy like so and also let's add some classes to it so I'm gonna add a class and this is gonna have a class of margin bottom four margin bottom four and then image fluid so that's it so let's add a h3 in here so I'm gonna say amazing coffee flavor so then I'm gonna put a paragraph with some loram ipsum and that's it if I save this and go down let's see what we get okay something is wrong but most of it's working so let's have a look at what we've done custom now okay this is what's wrong so container needs to be first container custom yeah that's that's working now I need to remove this scroll to the bottom yep that's fine now I can create two more and that should work really well so let me copy this and paste it twice and I can change the images super quickly so this is gonna be two small one the old text needs to change to have benefits I guess so I'm gonna change this to have benefits as well something like this that's absolutely fine and then for the last one what do we have we have picture number three which is the small one here and we can change the old text to be essential nutrients so and I can actually copy this paste it inside here and I can leave the rest I think that's gonna be all right so this is looking pretty if I go down you will see works on mobile and then it breaks up the last thing that I'm gonna do is the footer so that's gonna be super simple I think for the footer let's first of all comment this as well and let's paste in here so end and for the footer I'm gonna do this is obvious but why not I'm gonna add the footer here with an HTML5 footer tag and then I'm gonna add a class to it with which I'm gonna call footer and then I'm gonna give it a background color of dark and text white just like above so that's absolutely fine inside here I'm gonna create my trusty container so container custom I'm gonna oops that needed to be a div so div with the class name of container custom and and then inside here I'm gonna do the flex the display flex justify content between because you'll see the content some of the content is gonna be on the left side and the other is gonna be on the right side just like the header I guess and then I'm gonna align all the items to be kind of like in the middle in the center you'll see in sec align items center and then padding top and bottom let's say free and then border highlight to the top okay I think I might need to do that manually the border highlighting I'm gonna do the border highlight manually in a second now I'm gonna create kind of like two columns so the first one is gonna be co-md4 sorry deflex and then dot align dash items dash center and that's gonna add all of the classes for me like so I should have done that on all of them to be honest and then I can do a href and then put that so this is gonna be linked to the home page like so so this is gonna have a class name of margin end and this is gonna be set to two and then this is gonna be text muted which is gonna be kind of like it's gonna look better I think and then we can add an icon here I'm gonna add kind of like a cup icon so I class bush drop icons bush drop icons cup I think that's gonna look pretty cool and I can close this and then we can just say in a span we can create maybe let's say class text on I've already got the text muted so that's fine so let's say in a span we can do ampersand copy for the copyright symbol and 2021 or shall we put it 22 just because we are almost there now and gorilla coffee like so um save this and then the other one that I'm gonna do instead of a column I'm gonna use a URL and to be honest I think I kind of copied one of the example photos but I modified it quite a lot so if you go to examples in bush drop oops now examples here you will see that they have a lot of examples that you can use and I think I kind of I'm not sure now I think I copied this one maybe and I modified it but yeah you can copy the the ones from here and modify them yourself so let me just finish this super quickly so this is gonna have a class of nav call margin uh sorry call medium for and I'm gonna justify content to the end and then list I want it to be unstyled and I'm gonna convert this to a flex box with the text of white like so inside here of course we're gonna create a few lists so let's create a the first one with the class name of margin start of three and then inside here we can create a link a href and then oops that doesn't look good okay a href uh this can be empty and I'm gonna put a class name for it so class this is gonna be text muted and then whatever we need and there may be an icon so I'm gonna put an icon in here I'm gonna copy this one and I'm gonna change this bush drop icon to bush drop Twitter and we get let me have a look at what we get okay that's that's almost there I mean this doesn't need to be underlined and this needs to change the text of white we'll have like so text white is here it's fine text muted it's fine okay let's let's just copy this two more times and we'll figure out so this is gonna be Instagram and this is gonna be Facebook so I don't want this to be underlined I wonder if I give it text muted whether this is gonna work let's have a look potentially on this let's just copy input text decoration oops text decoration none I think that's gonna fix it and do we have the problem in the other ones no they're fine and and let's just have a look at how we can fix the icon super query so there are links text white that should usually fix it I'm not sure what I'm doing wrong do I need to put it here oh you know what it is it's basically I've missed bad text muted okay so let me replace everywhere that's why it wasn't working and we probably don't need this I can just put text muted and that's it let's have a look now yeah okay well I do need the decoration this one then so text decoration none hopefully that will fix my issue now all right that's fixing the issue it's all good let's test this super quickly on mobile if we go down it's working I think yeah that's pretty good one more thing I forgot the line here which I put as border highlight so I'm gonna copy this and let's create a further one so and then and then what I'm gonna do is put dot border highlight and copy this type of things up so this is gonna be further like so and for this one here I'm gonna say border top you can't do this with bush trap by the way pixel solid and I'm just gonna do va dash dash and then primary color highlight which we created earlier in this tutorial and that should be the end here we go it's looking nice and that's pretty much everything from this tutorial I hope that you like the I hope that you find it useful if you did smash the like button please comment below and don't forget to subscribe thank you very much for watching I will see you in the next tutorial


When most Americans think about Ethiopia, they think of an endless charity case. A country steeped in famine. A place that's been as poor for as long as anyone can remember and will always be so. But Ethiopia has a secret. It's the grain teff. It's been grown in Ethiopia for thousands of years. It's considered the country's national treasure. It goes into the country's local bread in Jira. And there's going to be massive demand for this super food because it's healthy, packed with protein, high in fiber, gluten free, and tastes great. It tastes way better than quinoa. So why haven't you heard of this super grain? Well, it's grown exclusively in Ethiopia and the country's previous military regime had isolated the country from the rest of the world. But that's all changing. The current government is opening up to the world and investment is pouring in. The country is growing faster than it's ever grown before. Teff production is on the rise. And more importantly, for the first time in 10 years, Ethiopia will export teff flour in 2016. So why do I care about teff? Well, I really care about what we can do with teff. And that's social change. I've been around social change my whole life, from my mother, who was a Head Start teacher, to my father, who worked at the World Bank. He'd tell me stories about how his team had helped deploy loans to developing countries and how they ignited growth in corners of the world by helping spark new businesses. I was fascinated by these stories and wanted to investigate grassroots social change myself firsthand. So I went to Bangladesh to work for a microfinance institution. And there I got to hear borrowers' stories with my own ears. In rural Bangladesh, in a village 10 hours from the capital, I heard a story from a woman named Reka. Reka got married at a young age, never held a job, and had tons of kids. She had no confidence, no hope, and no opportunity. But one day she joined a village lending organization. And there she got a small loan to buy a couple chickens, and then she sold those eggs at the local farmer's market. And soon her business was growing and growing. She got a bigger loan and then became a chicken farmer.  All the women started looking up to her in her neighborhood and she got elected to the city council. It was amazing. It was the first time I heard a story of grassroots social change really impacting individuals in a powerful and meaningful way. I was hooked. So I went to Kenya. I was so curious about East Africa because three generations of my mother's family had lived in Tanzania and Kenya. So I moved to rural Western Kenya to work on drinking water safety projects. And I absolutely loved the culture in East Africa. I loved getting to know people in the community. And as I did, I learned about the people who were my neighbors and they were farmers. And I realized that to really improve the lives of my neighbors, I had to learn something about agriculture. So from there, I joined the Ethiopian Agricultural Transformation Agency. In Ethiopia, I got to meet some of the country's 6 million teff farmers, one of whom was a woman named Tigist. In the local language, Amharic, her name means patience. But she's been waiting for change for too long. She lives in a small village in the southern Ethiopian Rift Valley near a town called Shashmeni. Her husband passed away years ago because her family couldn't afford medical treatment for him. She's got a few kids who are school age. Her family has been farming teff for generations. But she has never been able to put food on the table year-round. At harvest, she tends to sell her grain to middlemen who offer her cash immediately but unfair prices. When she runs out of food, she often borrows food from her neighbors or from family members. But there are days when her family goes hungry. All of that changed on one project I worked on in Ethiopia. The very first thing we did was line up a buyer for Tigist grain. It was a bread manufacturer in the Addis, the capital. This buyer offered Tigist fair prices for her grain, which were 25% higher than the prices she was getting from middlemen. And because she had a buyer, we were able to invest in Tigist's on-farm production. So that meant seeds, fertilizer, and planting practices. We helped her get access to better seeds that were higher yielding rather than reusing old seeds that were less productive. Then we got our access to fertilizers, which she couldn't afford before. And finally, we helped her change the way she planted. So most farmers in Ethiopia grab a handful of teff grain and broadcast the seed across the field. But that leads to a concentration of the seeds in certain patches. And as a result, there's more competition among the seeds that the plants actually grow. But by helping her plant and rose with fewer seeds, there was less competition and her harvest doubled. So this combination of a 25% higher price plus a doubling of her harvest tripled Tigist's profits. With this extra money, she was able to feed her family around, pay for medicines when her children fell sick, and send her kids to school, something she had no chance to do. And that's when the light bulb went off. I realized I was going to start Love Grain, a food company to improve the lives of millions of farmers just like Tigist. We decided on the name Love Grain because teff is from a family of plants called Love Grasses. To learn how to launch a business, I came back to the U.S. and started an MBA program. During my business school program, I met some classmates who were gluten-free, one of whom was a woman named Shareen. Shareen is a high-powered, very busy, successful woman who really has time to search out for new gluten-free options. One day she ate a product of gluten in it without realizing, and it made her sick. She ended up at the hospital. So Shareen explained to me that eating gluten-free is like eating empty calories. Most days she's eating protein bars with more sugar than protein. This is when I had realized I had found a customer who would pay a premium for Tigist's grain. So with that insight in mind, I pulled together a few business school classmates and we wrote a business plan. Our advisors didn't believe we could actually sell teff to Americans. So with that challenge in mind, we decided to make a teff-based pancake mix because two doesn't love brunch. The product did phenomenal. We were selling online and in stores in Boston, and soon we were selling out because retailers like Whole Foods and Price Chopper were clamoring to get their hands on the product. Today we're sold out, but we're working on creating a healthy teff chip to bring teff into people's daily lives. By taking teff into the mainstream, we can help create a global market for Ethiopia's 6 million teff farmers. Together, we can satisfy the huge demand for gluten-free and health foods and improve the lives of millions of farmers just like Tigist.


Hey guys, it's Nathan Cashin, the host of Exploring Chiropractic, and I wanted to do a screencast here to show you a new tool that I just learned about that allows you to access research articles for free. You can get past the paywall, and it is called Unpaywall, and it's a browser plugin. I heard about it through TechCrunch. There have been a few of these, so you might have heard of SciHub. SciHub allows you to bypass the paywall by some behind-the-scenes hacking it may. In fact, it probably is not legal. There have been some issues. The websites have been shut down. They've had to pop up mirrors. Unpaywall is a little bit different. Unpaywall is potentially legal, and as I show you this, I do not condone piracy. I pay for all my music, most of my TV shows, but I also am not a fan of paying $30 to $40 per paper when I download probably three or four research articles per day, so this one shouldn't be legal. What it does is it scours the web for free versions of the paper, whether that's on the author's website, research gate, and different resources like that. It only works in Chrome, and it is a browser plugin. So all you have to do is go to unpaywall.org and click this button to add the extension. Now, if you're in Safari, which I am, you won't have this option. It will tell you you have to open it in Chrome or Firefox. Just click add the extension. It'll bring it up here. Click on add to Chrome. Confirm that you want to add the extension, and the extension will be installed. And it will tell you that this means this little green unlocked button means that the article is available for free. So let me show you an example of that. If I come to this website, this is a nature article, and I can come down, click here for View Full Access Options. Again, it takes me to a paywall that says I have to subscribe for $200 a year or pay $32 for this one paper. Well, now with the extension installed, let me just refresh. It'll just take a moment and over to the right of my screen, you'll now see this green unlock button. I can click on that. It'll take me to a PDF version of this article, and now I'm able to download it. So let's look at a few more examples. Say I'm browsing PubMed, come across a paper that I want to read. I click the full text link, and it takes me to, of course, Elsevier, one of the biggest publishers. If I were to click here, I would hit the paywall. Unfortunately, for this example, this one is not available. I come over here to the button, and it is gray and it is locked. This tells me that even on paywall has not been able to find access to this paper. Another example is Open Access. So I'm just going to go into my extension settings. And this is an option that you do have to enable on the extension. So if I click options for on paywall, I can color code it for green and gold. And what this means is that any open access or open license paper, the button will be turned gold.  And if I click on the full text link, I already know that it's free, but on paywall now will confirm it to me if I come over here and I can see that that's a gold unlock button. So I know that this is a open access article. So that is on paywall. I hope that's helpful. It's a very simple extension to use in your browser if you're running Chrome. Now, usually my browser choice is Safari because I'm often on a Mac and I like to switch back and forth between my iPad and my iPhone. Sometimes I'll be browsing Facebook, a research article will pop up, I open it to Safari. I can easily send that to Safari on my Mac. It's just one extra step to copy that link into Chrome and to be able to access it through on paywall. It's free, it allows you to access research articles hopefully, hopefully legally. So give it a whirl. Hope you enjoyed this video.