Landing Page in Bulma CSS Frame work | Website in Bulma | Bulma CSS Landing Page | Bulma Website

hey there everyone this is iram here and i hope that you all are doing well today we are going to create a landing page using burma and in the past two videos we have learned a lot of things from the documentation burma is a new framework it's not new it's another framework like bootstrap and as i've told you earlier before in the previous videos that we will we will create a landing page or a project using the knowledge we have gained from vermont documentation and here is the landing page and this link this landing page is completely made in burma we haven't used any kind of css it is responsive also and in future we will use burma extensions to create another landing page so this is just a simple landing page using burma to the knowledge we have gained from the tutorial uh i just want to put it in some shape and here is the landing page so here is the logo the navigation bar the search option and then this is a hero section about us then services and team section contact with embedded map and a footer okay so let's start working with this one i'm using vs code editor so whatever code editor you have go ahead with that already i have i already created a folder um by my tutorial and within this folder i do have images the images i have used here i've got these images from pexelspexus.com and let me close it now then i would like to go back to my editor and here i do have the images folder then now i would like to create an index.html page we don't need any other page we just want to work within the with this page first of all i would like to get the starter template so for that i'm here at burma dot io the website of power here in the documentation i would like to go uh let's go and start overview start and it has different options we can use the as i've told you in the beginning in the tutorial we can use cdn you we can install it by npm uh get github repository rtl version but what i'm going to do now i just want to get this starter template okay let me copy this one and let me paste it here here is the starter template and let me save it and let's use my live server so open it live server and here is perma page starter template like the title of this starter template template is hello burma hello world my first website with burma uh sorry i forgot to show you the responsiveness of this one so the project so let me show you that and then we will continue working with that here is the the menu the responsive menu with that search option the hero section about us and images you can see everything stacked nicely on top of each other so it's mean that it it works and it's it's wonderful when thomas burma is worthy if you would like to work with this i want to create something by using burma go ahead and it increases your um it's an additional framework it's going gonna include it's gonna include in your uh include your skills value so you can add it in your portfolio too okay so the puma uh what i'm gonna do i just wanna remove this title and here let's see for more tutorial sorry okay and here i just want to remove this section okay let me save it i would like to add font awesome icons because i have used the font awesome icons here in the footer section so for that for you just go to google fon awesome on awesome.com and from here you guys just fulfill the requirements whatever they need and they are now it is um let's go to the start or start for free so mention your email address follow the instructions and you will get the code i have already saved mine i don't want to repeat this process so i just i want to copy my code i've got from them before and here is the font awesome icon link the cdn of this i do have if you want to download you can download it let me close it too then the google fonts so the font i would like to add is open sense and here i just want to go with 400 regular and let's go with the bold 600 okay i'm gonna do from here i just i wanna get the link okay let me copy this if you want to download it you can download it too i'm not downloading it here and only for this purpose i need css sorry and css rules to specify okay let me copy this and here i am even i can import but i don't want to do that it says okay and it shouldn't be like this you know it has to be in the body save it and here save it but you know what let me add this css also so it's gonna be [Music] link related to style sheet and hr is gonna be main dot css save it okay now if we go back let me close this one and here is the i'm sorry here is this this is this is the one uh tab we are going to fill it with all these things okay so let's start working with this first of all we would like to go with a nav bar so let's have in there and i have explained each and everything so i don't think that i need to if i think there is anything to explain in detail i will otherwise i have to explain each and everything in the tutorial if you haven't watched the tutorial yet go back and search in the content in in on this channel and you guys will get that bulma tutorial okay so the class is going to be nav bar and has background the way of defining classes in burma is we have to use some prefixes slice has is okay so here we are using has background and background should be link light this is a color i'm using it then the role is gonna be navigation navigation okay and aria label aria level is going to be main navigation okay then let's create a div inside it assign it a class this class is going to be container and let's create another div i'm sending it a class this is going to be the bar brand for logo or title of the webpage link each ref and let's index.html and let's have a class the class is gonna be in the bar item here again the prefix is and size is gonna be three then we should say company name let's add a button here the hamburger so for button let's use the class class is gonna be button nav bar burger and let's see data target data target and the data target is gonna be nav menu okay let's use some spam elements here and only some blank spans to create those three lines or that hamburger menu so copy this here and here save it so after having these spam elements on this pan blank we don't need to add anything here then we have to create another div this there is gonna have a class of nav bar menu assign it an id id is gonna be nav menu and let's create a div signing in a class class is gonna be in the bar start link href and i'm not adding any link here so it's in a bar item it's gonna be home and i just want to copy and paste it for several times to get my other links and here i would like to add about then services team contact save it let's move on to the browser okay so you can see here it's the nav bar is done uh it's not finished yet we need to work and you can see the hamburger menu but when i click on it we cannot see anything we need um as i've told you before in the tutorial that it it doesn't comes with the burma doesn't come with the extensions with javascript sorry not with extension with javascript so we have to add uh some other external code of javascript into this okay there isn't any built-in code within burma so we have to add some external code we will do that then after this what we have to do we need to create another div with a class of navbar end and let's create another div class is gonna be nav bar start and within this sorry not never start sorry it should be never item shouldn't be start my apologies number item and then within this let's create a form and this is for the search um search bar so for this let's have an another div assigning it to class it's gonna be field and the field has as i've told you we don't need to use these add-ons live class control is expanded and let's use input type is gonna be search and let's use name here the name is also going to be search let's use it class class is gonna be input id is gonna be search and let's use a place holder so i'm not sure it shouldn't be oops hold on please folder and the placeholder is gonna be search again let's use aria label and it it's also going to be search let's close it and move on to another div this there is going to be class control and then we do need a button so the button type is gonna be submit and class should be button number two button is info the color and let's use the search here okay save it move on to the browser and here is the search form we have so let's go and yeah again it's not we cannot see this otherwise i want to show you we i i will add it don't worry about it i'll show you how to write that javascript function then after let's go and make this hero section so for the hero section again what i'm gonna do i just want to add here i should see end of the nav bar and let's say hero start and hero and okay so let's create a section here section element and again uh section element let's create a class to this section class is gonna be hero and i'm using the medium hero we let me show you that we do have a different kind of heroes here he was in the layout here in the layout we have hiro and you can see that he wrote title this is a this is the code we can define the heroes i have used the medium hero so these are the colors and these are the sizes i've used the medium one and we have the large one half height zero and full height hero sorry not zero half white hero and full height hero so here we are going to use the medium one hero is medium i need to add is prefix and is the color is gonna be is info we can add the image also here the div has a class class is gonna be hero body and let's add a p element assigning a tech class and this class is going to be title size and the title size is gonna be you know title and is size okay um again i'm just thinking about bootstrap and not using the prefixes here so let's say your title here and let's create another p element assigning it a class this is gonna be subtitle and is size three and let's see check line here okay save it move on to the browser here is the not this one sorry this one so here is a navbar and a hero medium hero with the title and with the tagline the next thing we have to cover is this about us let's move on and start working with this about us so here we are after this let's say it's easy right it's not difficult burma is a nice framework and end of about us you guys just give it a try it's a good one element and let's have a class and let's say section then let's add a div here the div is uh div contains um container and then after we do need to use a heading two heading two should have a class the class is gonna be title and is one let's say has text centered and the text is gonna be about us save it moving on to the browser and the text is is centered okay go back what we have to do next is let's create another div and this div have a class of content okay and let's provide the content the content we are going to create is lorem ipsum let's do 25 words okay and let's create another p element or another paragraph again i would like to go with lorem let's go with 30 words and that's it save it move on to the browser and here is the content i would like to add some more content and this one so let me copy this thing from here right here save it okay arch looking cool after this what we have to do we do need to add these two images with some details and these with the buttons okay so what we have to do here is to create columns okay so for the columns i would like to create another div assigning it a class the class is going to be columns and within this here in burma as i've told you if you guys haven't watched that videos uh let me tell you that columns we use uh as we use raws in um bootstrap we use columns here in burma okay and within these columns we use column okay here this is the plural one and now we are going to use a singular one so here the next is gonna be column okay then after i choose another div assigning it a class and this class is gonna be columns is desktop okay and then we do need to add another div assigning attack class and it's gonna be column okay and let's use the figure element to add the image and let's say class class is gonna be image and is um one by one i have defined all these things there i'm gonna give the link of the tutorial in in the i card so you guys must check if you can't understand anything or if anything is strange for you i have to find each and every uh element of this normal documentation or the code over there in those video tutorials so let's add an image here and the image is gonna be source it's images and it should have i do have an image my image i have used here is image two and let's close it so save it and let me show you what's what's going on here okay so such a big image i have here okay what i'm gonna going to do next is i have made a mistake because the image is too big so it is image the class name is image i am g i m a g e not img and okay okay now let's let's do something else um did something else is let's create another div and class and it's gonna be column content so it will fix our image also give it a proper shape like with the proper style not the shape heading two and it has a class title and it's gonna be what we [Music] do and then let's use a p element with some learning epson texture of 40 words okay now let's create a button here after this let's create a [Music] button and the type of this button is kind of the button and class we have to use is again button and there is a color so is info the info color we have used say read more save it okay looking cool let's create another one another image and some other text so for that i'm going to do here let's create another div assigning it a class and this class is going to be column within this column i would like to create another div it's going to be class of columns is desktop and then we do need a div assigning it a class this class is going to be column and let's use a figure here class is gonna be image and again the image is gonna be is one by one and then after we do need to create an image here add an image not it not to create just add an image in this image is gonna be image three and then after this let's use another div assigning it a class and column column content then what we do need to do next is heading to the class of title and who we are let's use a p element here and again i've used 40 words over there so let me use the same and let's add a button here again type is going to be button class is going to be button and we do need to add the color is info and then we have to use read more save it move on to the browser okay so it's looking cool and nice let's go to the responsiveness of this section so it is responsive you can see at the hero section and about us and what we do with the image button and this section is also looking cool let's move on to the next one where we have to add this services section and these two images with some details okay so here again would like to add what should it be it is services start and let me say services and it is services okay so let's have a section element first and within this section element we do have a class of section i'm going to choose a div signing into class this class is going to be container let's use heading two class is gonna be title and is one title is gonna be his one and has of course text centered and let's use services we provide okay then after this let's have another do assigning a class this class is going to be columns another dave assigning it a class and this is gonna be column okay if you don't understand these columns let me explain you again that in bootstrap we use raws okay so just think at these columns as a raw and within this row we are defining the column okay then we do need uh this is how perma works okay and here is figure let's add a figure and figure should have an image then image and source images and is gonna image one then let's use some you guys can add the alternate uh alternative of this thing whatever you want then we need to add some figure caption and p element with some lorem ipsum and this could be [Music] let's use 35 or 30 words okay then after let's you have another div and this tab has a class of column and then after let's have a figure again with a class of image then we do need another image source of this image is gonna be images and image four and then i do need to add some context so okay what we need next is figure caption so figure caption free caption and within this let's have a p element text of 30 or 35 which i don't remember i think i have used 35 words there it's okay that's you guys got the idea let's save it move on to the browser here is the one we are working with okay so here we are so the services we provided services our service we provide so let's fix this thing only let's see services and okay so we have done with this one the next we have to do is uh we have to add this team section so let's go back and let's add the team section team section and end off team section okay so let's start creating this one should have a section section assign it to class the class is gonna be section then after we need a div assigning it a class the class is gonna be container then we need an uh heading two assigning a class this class is going to be title is one and has text centered is spaced and it should be our team let me bring it down create another div this div should have a class of columns and is multi-line let's have another div assigning it a class and this is gonna be column is have tablet and is one third desktop and is is quarter it is one quarter white screen okay and we should say has has text centered let's close this div let's create another div assigning it a class and we have to use cards here show the and it should have another class this is going to be called image i am g e then we need a figure and within this let's have another class it's gonna be image is four by three and within this let's use image source and it's gonna be images images have a team jpg alt text it's gonna be nothing for the moment and let's close this okay then after this let's have a div a sign attack class and this class is gonna be called content okay and after this card content let's have another div assigning it a class this class is going to be media content p element and it is going to be title is for you should go with john smith let's have another p element with another class and it's gonna be subtitle is six and john smith okay what we have to do next is to create another div signing in a class this class is also going to be content and let's add some laura maybe some of five words okay we have done with this one let's move on to the browser and see what what is it okay so we do have a card with a title image and some content okay what i'm gonna do next is to copy and paste the same thing so just for my convenience i should add a kind of a separator here okay and from here i want to copy this [Music] not that div i just need to just copy this and here i'm pasting it save it let's see okay let's save another one cool let's have another one too and this is the last one so what we have to do next is let me show you okay okay so we have done with our team section now let's change the images so just just for the completeness of this project i just wanna save these images see i just want to add the different images here and three and two and it looks different and looks good so here we are and and and so you guys can see that we do have nice images uh nice team section now the next thing we need to create is this contact section and the footer so let's go ahead and start working with the contact one here we are and [Music] yes so let's start creating the contact section let's create a section element here and assign it to class the class is going to be section then after let's have a div assigning it a class and this class is going to be container and we do need heading 2 assigning it a class this is going to be title is one and has text has text centered then what we have to do next is to add a text and it's not sorry it is gonna be contact after writing this let's have a div and this div should have a class this class is gonna be columns and is tablet not okay it's tablet and then what we do next is another div assigning in a class and this class is going to be column then after this we do need heading 4 heading 4 should have a class and the class is going to be title and then after let's add address let me bring it here okay then we need a address tag and within this address let's say strong company and after this let's go and have some break here and then after let's use the stretch name again let's give it a blind break and zip code and city again break and let's use a follow us michael class here so if a s f a phone and let's add a sorry let's add a link here and there should be a number so okay and then after let's use the number again so my country code and your number is gonna be okay then after this let's have a another class and this class is gonna be f e s f e envelope and what i'm gonna do here is to close it and a link so you can add anything whatever you guys want just seem like that and me then whatever let me add email and here we should go that unfold test.com okay and then the next thing is gonna be nothing let's go back to the browser and let's see okay so address company name street zip code city phone and email okay the next thing we need is another div and this div should be here let's add a class this class is gonna be column and let's use heading four i have a class of title and opening of opening hours should have a column here and let's use the p element monday to friday monday to friday and [Music] it should be and i mean am to seven pm and let's say we had some break and we should say that um hold on this should be friday and [Music] we should say that saturday okay saturday is off and [Music] then let's add sunday um so it should be afternoon p.m two four p.m okay [Music] that's the action language too okay let's save it move on to the browser and see okay so we do have we do have the opening hours and address and what what's next let's use this form and the map so for this what i'm gonna do i just want to add another div this div should have a class of columns that's another and add another div with the class of [Music] column heading 4 class and it's going to be title message and then after this let's add a form class is going to be [Music] columns another div class is gonna be column let's add another div class is gonna be field label and label should have a class of label for name and i'll share a name here then the next thing we need is another dive and this div should have a class this class is going to be control and has icons left now let's use the input and type is gonna be text then let's choose id id is gonna be named and class is gonna be input let's use a place holder and this place holder should have a first name and first name and then we should say required okay first name required and then after this let's use the span element spam finding the class and this class is gonna be icon is small and is left then let's use by class my friends have a user save it move on to the browser let's have um another name and this div is gonna be column div class is gonna be column another div and this class is gonna be field let's use label class is gonna be [Music] label for email and email and then after let's use a div here class is gonna be control and has icons left let's use input and input should have a type it should be a type and the type is gonna be email then after let's use a id id is also gonna be email you choose a class the class is going to be input and we do need to add it please holder in the placeholder is gonna be example at email.com and um let's see make it required okay let's add a spell element again here and this is found out i mentioned heavy class this class is gonna be icon is small and is left then we need a clef this class is going to be f is f and envelope okay let me bring it here easy to see save it let's move on to the browser and see that how does it look okay so we do have email also now what we have to do next is let's add another div with a class of columns and after this let's add another dev with a clash a column then div and class is gonna be filled let's add label class is gonna be label and for telephone now we can see what's up but let's go with just right telephone and [Music] then let's add a div here the class is gonna be control has icons left input and type is gonna be what would be the type it should be phone and id id is gonna be [Music] and telephone and then you need a class this uh this should be input and we need a placeholder and the placeholder is gonna be again okay one two three four five six sorry nine okay so this could be the place holder and then after let's have a span element here again spam pen should have the class of icon is small and is left fvsfp phone save it move on to the browser okay the next we need is another div with a class this class is going to be column div class this should be field and let's add a label here and it's gonna be label for select and department and then after this let's add another div assigning requests this class is gonna be control has icons left is has icons left okay and we need div assigning it a class it's gonna be select then again select id is gonna be select and arya are you described are you described by and i should say [Music] select help block this is for what let me show you here this one so the department and this is what we are going to we are doing now okay so it should say that select um help block and [Music] we must add a required field here required and then after let's add the options okay so option value is gonna be i'm doing value and here right we should say select here okay select here and let's add another option here actually it's going to be value and this should be business and let me copy this one paste it for a couple of times okay so this is gonna be seal and this is gonna be support okay so let's change these into capital letters okay fail and support and then after let's have a span element assign it a class this class is gonna be icon is small is left class f e is f a home and let's use this small id is gonna be flat help block and the class is gonna be from form text and we should say please select the recipient okay then after this let's have another div assigned the class and this should be field and label class is going to be label for text area message and here we need to create a message box and then after this let's create a message box here so for this that's how we do assigning it a class this class is gonna be controlled let's go with the text area text area and id is gonna be text area let's use a class again text area so we're all uh raw is gonna be five and placeholder place holder and gonna be write your message here and then we should say required okay then after this let's have another um another day let's have a button here button and the type of this button is gonna be submit and we have to assign a class this class is going to be button 2 and is info let's submit and okay so let's have another button and this button is gonna be type and this type is gonna be reset the type of the button is gonna be reset and it is also a button where we should see reset save it and let's add the location okay the map here so for adding a map what i'm gonna do is to add div assigning it a class and this class is going to be column and let's say heading 4 and should have a class this class is going to be title i should say where to find us and then after let's have a figure and class and the class is gonna be image issued is four by three okay save it and first of all let me show you what we are doing here and what we have to do so here is the form we have created and we have been different options and the message buttons have met reset and we have to find us here we have to please though or we have to add this map here okay so for adding the map what do i need i've explained this thing in the previous tutorial but if you are new to this one let me tell you go to google maps and add your address here is mine what i'm going to do go to share embed a map copy this html code go to this um back to your code write it here it is in with iframe okay i don't need to do anything here everything is fine yes i need to add some css to uh now it is here it is below the form i want it to beside the form so let's go to the css and start styling this one it doesn't need much styling so here is the main.css what i'm gonna do here i do have a class of select and uh what i'm doing here select and then hold on let's say just a minute select and this is a select class and then after let's have a width uh the width of this is going to be 100 and let's use the iframe it's not a class sorry iframe and position is gonna be absolute and let's use the top top is gonna be zero right should be zero bottom is also zero and left is also zero then we need width and the width is gonna be 100 let's use height and height is also going to be 100 percent save it move on to the browser okay no need to refresh so you can see that it is it looking cool nice it is beside the form okay now what next this footer so let me close this one and let's go to the footer here we are and for the footer just let's say end of contact and let's go to the footer element assigning it a class this class is gonna be footer has background link light okay add a div signing in a class class is gonna be continue and let's set a div and a class and this should be columns is mobile and is multi-line let's use another div it's gonna be a class connor is half mobile and is one quarter desktop not offset okay is one quarter desktop then we need heading six and a class and it's gonna be tighter is five let's see quick links move down and here let's use an ordered list and some sorry list items so let's add a link here and okay hold on link and link is gonna be home i just wanna copy and paste it for several times what's going on so so i don't need these where they come from okay so home and then after home we need what do we need about here it should be services and let me copy this one again and this is going to be team and it should be contact save it and let's move on to the browser okay we do have the links here now we need another div so what we need to do is to create another div assigning it a class and it's going to be column is half mobile then is one quarter desktop is one quarter and let's go to heading six so we should say that you should have a class the class is gonna be title is five and follow um title is going to be five and it it should be information information better charge from unordered list here and the list item each ref and and and what it should be it should be some legal info and let me copy and paste it and this and this you know let's add something which is lauren ipsum okay and then therefore let's add another div here and this div should have a class and this class is going to be column is half bubble and is one quarter desktop let's use heading six here with a class of title is five follow us okay and what we need to do next is to add another unordered list so list item and href then some facebook link so i class f a b f [Music] sorry facebook and yes let's add a facebook here let me copy and paste it and here in face of facebook let's change it to instagram and this one should be twitter okay save it go on to the browser okay so we do have the links information and then now we need this location so move on and [Music] let's have another div here assigning in a class and this is this should be column is have it have mobile and is one quarter desktop and then heading six class is gonna be [Music] title is five our location and let's go with the address strong company name address uh company name and then we have to use a break here then after this let's use the we have done this before but let's show that again and it should be street name and again break let's add zip code and city break okay and then after this let's add some fun awesome icons and fbsf a phone and we should say that let's add a link here i'm not going to do anything here and now i would like to add my own country code and one two three four five six seven eight nine and then after let's have another photos michael and there it should be fast [Music] and we do need a link here show let's see test at info.com and it's almost done now we need to add some copyright and for that copyright text so p element assigning it a class the class is going to be as text centered and ampersand let's add ampersand copy and we should go with semicolon colon i think that's my column yeah i forgot about it and then 2021 company name and oh right and that's all save it move on to the browser okay so there must be some mistake here this shouldn't be here this should be in the next line i'm sure yep it should be in the next line let's see where is the mistake so we have done yeah we need a line break here so for this let's do this save it and yes now it's looking good so we have done with our burma project it's a nice simple landing page there is another thing the last thing we have to do is just to make it functional this hamburger menu so to making it functional let's go back to the documentation and here in the documentation go to the component and the component here is a nav bar okay click on the nav bar and after clicking on the nav bar you can see the different codes of the nav bar so here is the javascript code just copy this code from here go to the page and here after this footer add a script tag and the type is gonna be text javascript and within this script tag let's copy paste that code save it move on to the browser the page is refreshing and when i click on it you know it gives a nice animation and the hamburger menu is working now okay so it's not difficult uh yeah bootstrap gave us this facility built in javascript but here it is also it's not difficult you just get the code from the documentation even you can if you want to write your own code go ahead do that if don't lazy like me then copy the code from here paste it here paste it and then it works you guys can see that it is working let's see the responsiveness of this one so it is responsive it's looking nice service section and this team section contact opening hours the message map and the footer so this is what we have done today using the knowledge from the documentation we have learned from the the documentation of whatever we have learned from the documentation of burma we have used it in this project and it's a simple nice project in not in the very next but in future we will use the burma extensions and the burma extensions gave us accordions uh the sliders the hero sliders each and everything okay so here are the bomb extensions we will use these we will create a page or a landing page again by using all these verma extensions okay so i hope that you guys like this tutorial you like this project and it will help you to um learn something new or to create something new i'm sure about it so if you like this video don't forget to give a thumbs up and i'll see you in the next one hasta la vista ciao

Channel: Code with Erum

Views: 206

Keywords: HTML 5, CSS 3, Restaurant website, construction website, coffee shop website, webdesign, how to design a website, how to develop a website, how to create restaurant website, ngo website, e-commerce website, how to create e-commerce website, bootstrap navigation, responsive website, responsive webdesign, Bulma website, bulma css tutorial, bulma css framework, bulma css framework tutorial, Landing page, landing page tutorial, landing page design, bulma css landing page

Id: wQpXaObvdUE

Length: 87min 39sec (5259 seconds)

Published: Thu Nov 18 2021