ULTRA RESPONSIVE BUSINESS AGENCY WEBSITE USING HTML CSS & JAVASCRIPT
do you want to create a professional responsive agency website then this tutorial is must be for you hi everyone this is tech2 etc welcome back to our new tutorial hope you guys are doing well so today in this tutorial i am going to show you how we can create this amazing professional responsive business agency website using html css and javascript and this is the website which we are going to create in this tutorial and let me tell you at the beginning that i am creating this website completely from a scratch step by step and i will try to show every process from start to the end so that's why this tutorial can be a little bit longer than other tutorials but i don't have any problem with that because i'm ready to work harder for you guys also if you are a beginner and want to learn how to create a website then i will recommend you to watch this complete tutorial without skipping any part or any second of this tutorial please guys don't skip any part or any second of this tutorial because every second is important for you and only for you guys i will divide this tutorial into two different parts this is our first part i already uploaded our second part also after watching this part please check out our second part also so that you don't miss a single piece of information from this tutorial you can find out our second part of the tutorial from the top right eye bottom so now let's see what we have in this website and what we are creating in this tutorial here you can see that in the top left we have our logo and in the center we have our navigation links and in the right person we have our follow us it means we have our social media icons and here we have some awesome cover effect also and underneath this here you can see that we have a beautiful background image and on the top of that we have a beautiful background overlay and here you can see that this overlay have actually three different colors we have a mixture of three different colors and today in this tutorial i will also show you a tricks how we can create multiple colored background overlay using just one second okay using just one seconds and then here you can see that we have our heading and then we have our paragraph also and underneath that here you can see that we have our two different button here and in the left side we have a beautiful button here and this button has actually a beautiful gradient background color and this kind of button is now actually trendy and this is looking so fancy and professional and if we hover on this button here you can see that our background color is now changing and this changing effect is also looking so beautiful and it's now looking so live and in the right side here you can see that we have a normal button with a simple white background and if we hover on that button here you can see that we have actually a small box shadow around this button and this is looking so beautiful here also and the interesting thing about this home page is if we now scroll down here you can see that this background image is not moving it means it's actually in our parallax mode and any website with paradox background is awesome and if i scroll down here you can see that we have another thing to notice here you can see that whenever we scroll down our navigation bar changes its background color and is now a white background color and underneath this here you can see that we have a beautiful box shadow and this box shadow helps user to understand and find the difference between the navigation bar and the real website and if you are creating a website your focus should be in user interface also so that's why i added this effect so that it looks awesome and here you can see that we have a wave image also and this is also looking beautiful and i will also show you how we can create this in our code so now let's scroll down and here you can see that we have a beautiful section here and in this section we have a heading and then we have a paragraph and then here you can see that we have our four service here and in our service we have our icon then we have our small heading then we have our paragraph here and in the right side here you can see that we have a beautiful image here and if we scroll down here you can see that we have another section and this section is for our pricing section and this section has also a heading and then a paragraph here and then here you can see that we have three beautiful cards here and this card is looking so beautiful and so professional here you can see that and i also added some hover effect in these cards if you know over on the right card here you can see that our background color is now changing and the text color is also changed it was before black and then change it to the white color and whenever i will over here you can see that our button background color is also changing and this gradient color is looking so gorgeous and in this background color we have actually three different colors for making this background overlay and this is looking so beautiful and here you can see that this as standard card is always highlighted so that it can attract some users and if when i scroll down here you can see that we have oh my god this is looking so beautiful here you can see that we have a call to action page and in the background here you can see that we have a background image and this image is also in parallax mode and guys this is looking so beautiful and on the top of that image here you can see that we have a beautiful gradient background color and here also you can see that we have three different colors and this gradient color is looking so beautiful and then we have our heading and then paragraph and then amazing input section so that anyone can type their email and then click on that subscribe button and here you can see that we have a simple message icon then we have our email section placeholder then we have a subscribe button and then we have a background here white background this background is also looking so professional so after this one if you want to scroll down here you can see that we have a contact page and at the top here you can see that we have our heading then paragraph and then here we have our input section we have our name section email section subject phone and the message section then we have a button here also and if you now scroll down here you can see that at the last we have our footer here and this footer is also looking so premium so beautiful here you can see that on the top we have our logo and then here we have our social media links then we have our links here also here you can see that we have four column and at the last we have a subscription newsletter also and this is also looking beautiful and at the last year you can see that we have our copyright section and yes guys in this website i am using a smoothest cooling it means whenever i will click to our home section here you can see that it is taking us to the home page and this transition this scrolling is so smooth and is so beautiful and if you now click on our service section here you can see that it is taking us to our service section if we now click on our pricing section it will take us to our pricing section and if we now click on our contact section it will take us to the contact section okay and this smooth scrolling is looking so beautiful and premium and guys as i mentioned earlier this website is completely responsive so now let's see in responsive mode guys here you can see that we are now in our mobile screen device and in our mobile screen device we don't have any navigation links and any follow us section here we just have only our logo and in the right side we have our hamburger menu if we now click on this hamburger menu here you can see that our navigation bar is sliding from the right side and this sliding is looking so beautiful and if you now click on that button again here you can see that our navigation bar is now sliding to the right side and in the center we have our heading then paragraph and then button aligning in one column and if you now scroll down here you can see that we are now in our service section and in our service section here you can see that everything is now taking 100 percent width and height and everything is now in one column and in our flex start position and it is also looking beautiful and if when i scroll down here you can see that this is our pricing section and in this pricing section here you can see that everything is now in one column and this is also looking so beautiful and then we have our call to action page and in this section here you can see that we have our parallax background and then we have our gradient overlay then our heading paragraph and the email section and the subscription button also and if you now scroll down here you can see that we have our contact us section and in this contact section everything is now taking hundred percent within height and everything is looking so beautiful and if you just go down here you can see that we have our footer and now in our photo everything is now in one column and there it is also looking so beautiful so guys let's go to our ipad mode so this is our ipad so guys here you can see that we are now in our ipad mode and in our ipad mode it is also looking beautiful and if you now scroll down here you can see that everything is looking premium everything is looking so beautiful and the guys here you can see that this website is completely responsive and it looks good in any kind of device and in a few moments i will show you how we can create this responsive agency website a step by step using html css and javascript don't worry guys if you are a beginner keep watching this tutorial without escaping any part or any segment of this tutorial and i can assure you that you can create your own website using stable css and javascript and only for you guys i have a lot of web design and development tutorials in my collection and if you want to catch my latest tutorial as soon as i upload then make sure you give a like to this video subscribe this channel and don't forget to press the bell icon so that's it guys let's get started in our project file here you can see that we have a index.html file and style.css file script.jazz file and then we have a asset folder and if we now open this folder here you can see that we have images folder and we will use these images for creating our website so now let's go to our project file and here first we have to open our index.html file so here we can see that now we are in our index.html file and here we have created a
html boilerplate that we have added a title then we have linked our style sheet and if we go to our style sheet here you can see that in our star we have margin 0 pattern 0 and box sizing border box and in our body we have added a font family which is poppins and here we have added some global tags in our anchor tag here you can see that i don't want any text decoration so that's why it will be none and for our list i don't want any bullet points so that's why distance title will be also not and here we have added some s3 and h6 headings so that we don't have to define these headings and this properties again and again in our code so that's why for h3 i used font size 44 pixel line height 55 pixel color this one and the front with 600 and for our h6 our phone size will be 20 pixel line height will be 32 pixel color will be this one margin top will be 16 pixel and the front width will be normal and then here we have some comment out so that we can write our codes underneath these comments then we have a script.js file and this file is now empty now in our index file first we have to link our js file so that's why here we have to create a script tag that's it and here we have to write source and inside this source we have to write our script dot jazz file name so which will be script dot jaz that's it so now if we go to our website here you can see that first we have a logo and then we have our navigation links then we have our social media links so first thing i will do i will create a div tag and inside this div tag i will put every one then we can align this every properties in our css so let's go to our index.html file and here first we have to create a div tag that's it and the class name of this div tag will be nav then we have to create an anchor tag and then this will be hash for now and inside this anchor tag first we have to import our logo so that's why our logo is the image file so that's why it will be image and then for our source we have to put a source here and here our image file is actually inside our asset files then we have to go our image files then here we have our logo logo.png so that's why this will be our file path name then let's define a class here in our anchor text so our class will be logo that's it then underneath this here we have to create a div tag and the class name of this detect will be never talker and then we have to give a type here this will be actually a button and then i will define an id and id will be bar that's it and here inside this network toggler if you go to our website sync our website here you can see that we have a button here for our mobile version so now we have to create this button but if you want you can add a icon here from our front or some icon but i don't want to add any icon here i will create this menu bar in our html so for creating this one first we have to create a spam tag and then add a class name and our class name will be this one so i will just copy this one and then paste it three times because we have actually three line here in our bar so that's why we have to add three after this one now we have to create another detect and the class name of this div tag will be menu bar that's it and inside this menu bar we have to create an order list and let's give a class of this another list and the class name will be items that's it and inside this list we have to create our list tag and inside this list tag we have to create our anchor tag and then this will be for now hash and our first one will be home so i'll just simply copy this line from here and then paste it four times that's it and this one will be service this one will be pricing and this one will be contact that's it and after this one now you have to create another detect and this div tag will be for our social media icons so that's why class will be never social that's it and inside this never social we have to create a aspen tag and inside this aspen tag we will add our this line this follow us so that's why it will be follow us that's it and then underneath this aspen deck we have to create another list and inside this another list we have to create a list tag and then we have to create a anchor tag for now this will be hash and now for social media icons i will add social media icons from our front door some icons so for doing this first we have to link their website to our website before linking their website let's go to our google chrome and then we have to search for font awesome cdn link by max cdn that's it and now we have to open this first link from here so here you can see that we have our links and this link is for our actual css but i want the html one so this one is the html one so just copy this link from here and let's go to our html file and underneath this title i will paste this link that's it and now we have to add our class our icon class so for doing this let's go to our chrome here and then search for font or some icons that's it let's close this so now we have to click on our first link here you can see that we have our instagram first then facebook twitter and linkedin so here first we have to search instagram so this is the icon i want so now click on this icon and from here we have to copy this i tag from here and inside this anchor tag now we have to paste this tag that's it so i will simply copy this list text from here and then paste it three times that's it so first one will be instagram and second one will be facebook then the third one will be twitter then the fourth one will be linkedin that's it now save go to our website and now refresh here you can see that we have our logo our navigation links and then we have our social media icons also now we have to install things navigation because here you can see that everything is now in one column but i don't want everything to be in one column i want everything to be in one row so for doing this let's go to our code editor and then we have to go to our style sheet and underneath this nav let's do some styling so first we have to target our nav class from here so copy this nav class and then paste it here that's it so here i want everything in one row so that's why i will use flexbox and our flags direction will be row justify content will be a switch between because i want a space from between and the align items will be also centered that's it now save go to our website and now see here you can see that everything is now in one row and we have a space from the between now first i will target a one by one now i will give it width and which will be hundred percent then i have to add a padding here and from top and bottom it will be one of them and from left and right it will be 6.5 ram that's it then
i will add a background and our background will be transparent now i have to give a transition and the transition will be all 0.5 second is that's it now save go to our website and if you now refresh here you can see that we have now a space from the left side and from the right side and we have also a space from top and bottom here after our logo we have our actually button here now we have to establish this button so for installing this button i'll just simply copy this class from here and then paste it here so before this class we have to target our nav also then i'll copy this one again and then paste it here now we have to target our this class toggler icon that's it now we have to give a width here so i'll give a width so our width will be 27 pixel and then we have to give a height also and height will be three pixel and then we have to give a background color and our color will be this one then i will add a margin and imagine from top and bottom it will be five pixels from left and right it will be zero then i have to add a position and the position will be relative now i want everything to be in one side so that's why i will add display block then i will add a transition and transition will be all 0.3 second each and out and 0 second that's it now save and then go to our website and now refresh here you can see that we have our menu button and for our large screen and then in our tablet screen i don't want this menu bar i want this menu bar when we will enter in our mobile screen device not in our large screen or in our desktop screen so i will hide this button for now so for hiding this button here we have to add display and the display will be none that's it then i will add our border also and the border will be also none then outline will be also none now save go to our website and now refresh here you can see that now our menu button is gone but now we have to style our navigation links so for installing our navigation links first copy this nav from here paste it here now we have to target our menu class from here then paste it here then we have to copy our menu items class from here and then paste it here that's it and here i will also use flexbox so that's why display will be flagged then our flash direction will be row because i want everything in row and the justify content will be centered align entrance will be also centered that's it now save go to our website and if we now reflect here you can see that everything is now in one row now we have to add some space between these navigational links so for adding some space i will just simply copy this line from here and then paste it here then we have to target our list tag from here so i just copy this list tag and then write it here that's it and here i will add margin and imagine from top and bottom it will be 0 but from left and right it will be 15 pixel now save go to our website and now refresh here you can see that now we have a space between these navigation links so now i will style these fonts and adding some new colors so for doing this copy this line from here and then paste it here now we have to target our anchor tag also that's it and for our anchor tag here we have to add a color and the color will be black that's it then we have to give a font size and the font size would be 18 pixel and now we have to give a font width and the font width will be 600 save go to our website and now refresh so now here you can see that we have changed our font size and form colors now we have to add a hover color here you can see that if we hover on a navigation link the phone color is now changing so we have to add this hover effect in our website also so for doing this i'll just simply copy this line again and then paste it here and here we have to now add hover that's it i will change the color of our font so our color will be this one that's it now save go to our website and now refresh and if you know over here you can see that our phone color is now changing so after our navigation links now we have to install our social media links also so for doing this copy this line from here and then paste it here then we have to target our nav social so copy this class name from here and then paste it here so i will also use flexbox for our social media icon that's why i will just copy these lines from here then paste it here that's it and now save go to our website and if you now refresh okay nothing has changed because here you can see that we have added menu bar also we don't have to add menu bar that's it first we have to target our nav and inside this nav we have our nav social class so that's it now save put our website and now refresh here you can see that everything is now in one row but these links is still in one column now we have to fix this thing also so for fixing this just copy this line from here paste it here then we have to target our unorder list so this will be another list that's it copy this line from here and then paste it here that's it now save go to our site and now refresh here you can see that everything is now in one column now we have to add a form color and some spacing here so for doing this copy this line from here and then paste it here then we have to target our s pen because inside our s pen we have our this line follow us so this will be a spam that's it and here we have to add some font size font color and front width so for this one we have to add our font size 18 pixel and the front width will be 600 padding light will be 10 pixel because i want some padding in the right side here then we have to add a color here that's it now save go to our website and now refresh here you can see that we have changed our font size and form color then we have our spacing also so after this one now we have to install our social media links so for us telling these things just copy this line from here and then paste it here then we have to target our list tag from here then our anchor tag so this one released and anchor that's it so in our anchor tag first we have to add a color and the color will be this one then we have to add a font size and the font size will be 22 pixel that's it now save go to our website and now refresh here you can see that we have added our font color and font size but we have to still add some spacing here so that's why i copy this line from here and paste it here that's it and here i will add margin from top and bottom it will be zero but from left and right it will be seven pixel now save to our website and now refresh so here you can see that we have now spacing between these social media links so now here you can see that we have done with our navigations and after this navigation now we have to add our background image and our heading text and button here so for doing this let's go to our index.html file and underneath this div we have to create another div tag and here we have to add a class here and our class will be back because it will be a background image so that's why it will be back and then i have to add an id here and the id will be home that's it so i will simply copy this back class from here and go to our style sheet and in our form we have to type our back here that's it and here first we have to add background image so in our background image our file name will be this one in our assets folder we have images folder and inside this image folder we have our background image which is 6.jpg then we have to give a width and our width will be 100 percent and now i will give a height and the height will be 120vh that's it now save go our website and now refresh here you can see that we have our image here and this image is actually not taking perfect within height according to our screen so now we have to add our background size and it will be covered that's it now save go to our website and now refresh here you can see that now it's now center here and here you can see that actually in our website we have our navigation bar in actually fixed mode and we have to make this navigation also fixed so for doing this let's go to our style sheet and go to the top here and in our nav class we have to add our position and the position will be fixed that's it now save and go to our website and if we now refresh here you can see that our navigation link is now fixed and it's not looking good after this one here you can see that our background image is actually also in our parallax mode and this parallax mode is actually looking so fancy so i have to add this parallax mode in our this website also because actually whenever i will scroll this image will move according to the screen but i don't want to move this image so that's why here in our back class we have to add a background attachment and it will be fixed background that's it now save go to our website and if we now refresh here you can see that our background is not moving okay and here i will add position relative that's it so after this one if you go to our website here you can see that we have a background color here background overlay so for creating this overlay go to our english dot html file and inside this back we have to create a div tag okay and the class name would be overlay that's it so simply copy this overlay from here and then go to our install sheet then paste it here but first we have to add our back class that's it and guys if you go to our website here you can see that this overlay is looking so good but here i will show you a tricks how you can create this overlay in just one second so for creating this overlap we have already some websites for creating this overlay in just a few seconds so for creating this overlay just go to your google chrome and then just type css gradient generator css gradient generator that's it now enter and here you can see that we have a few options but i will choose the second one which is css gradient dot io so open this link from here and here you can see that we have our css gradient generator and from here you can actually create some awesome overlay and this is the best website i have seen for our css gradient overlay here you can see that we can create our overlays and we can change these colors from here and this one also that's it and then you can change the color here then we can add new colors from here so after you done with your css preview here you can see that we have a preview for our css gradient how it's looking and after you done with your css gradient and all of these stuff you just have to scroll down and here you can see that we have a code here we just have to copy this code from here and then paste it here that's it and then here we have to add a width and our width will be 100 and our height will be also 100 that's it now save go to our website and if you know different you can see that we have our css gradient here and this gradient is looking so awesome but here we can't see our nav bar and here we have to add that index to our network so for doing this let's go to our nav here and here we are to add a jet index and we have to add a bigger value because i want to show this on the top of our image and all of this background now refresh here you can see that we can see our navigation bar again okay so after this one in our website here you can see that we have actually a web here and we have to create this web also so for creating this web now let's go to our index.html file and here we have to create another div tag and the class name of this div tag will be hero shape that's it and inside this div tag we have to create an image tag and inside this div tag we have to give a source of our image so this will be the source of our image here we can see a wave here but this is not taking full width and height but we have to give a specific width and height of this wave so for doing this let's go to our style sheet and here copy this back from here and then paste it here then we have to target our hero shape now copy this one and then paste it here so first i will give you a position and position will be absolute and the from bottom because i want this thing in our bottom so from bottom it will be zero and then from left it will be also zero then we have to give a width and our which will be hundred percent so just simply copy this one again and then paste it here that's it now we have to target our image tag and here we have to give a width and they are which will be 100 percent that's it now save go to our website and definitely refresh here you can see that we have our web image here here you can see that we have a slightly spacing here in the bottom of this image and this is not looking good so we have to fix this one and we can fix this problem in just one lines of code so for fixing this problem just go to our image here and then here we have to add display block that's it now same go to our website and if you now refresh here you can see that we have fixed our problem and we don't have any space and turning this image so after this one now we have to add our heading and our paragraph and this to button so for doing this go to our index.html file and here we have to create another div tag and the class name of this tag will be
hero text here and then that's it and then here we have to create a h3 for our heading and for our s3 i will just simply copy this line from here then paste it here then we have to create a h6 here and for our h6 i will copy this line from here again and then paste it here so after this heading and this paragraph now we have to create this button also so for creating this button underneath this h6 we have to create another list and the class name of this another list will be header button that's it and inside this button first you have to create a list tag and then here we have to create a anchor tag and it will be hash then in our anchor it will be get in touch and in our anchor tag we have to create a class here and we have to add two class so our first class will be main button and our second class would be button one okay so i just copy this line from here and then paste it here and this will be our button two so this will be watch the video that's it now save go to our website and now refresh here you can see that we have our heading our paragraph and our two button here but these things is now actually underneath this image underneath this home so i have to center these things in our here so for doing this i will just go to our html first we have to copy this line from here and then paste it here that's it because i want everything in center so that's why we have to add position and our position will be absolute and that from top it will be 50 percent and from left it will be also 50 percent then we have to add a transform translate and this one will be minus 50 percent then minus 50 percent let's say now save go to our website and now refresh here you can see that everything is now in center and this is looking so cool so now i have to install everything to the center here so for doing this here we have to add a text a line and it will be center let's see now save go to our website and now refresh and then from here we have to style our this font colors so for doing this copy this task name from here and then paste it here then we have to target our h6 so i will give a color here and the color will be one d one d one d that's it now save go to our website and our refresh here you can see that we have changed our color now we have to install our buttons and first i will add some margin top here because we don't have any margin here so for doing this copy this line from here and then paste it here then we have to target our heading button from here so copy this button and then paste it here so i will add a margin top and this will be 22 pixel now same go to our website and now refresh there you can see that now we have added some margin top here so now we have to install these buttons we have to add some background colors and some other stuffs so for doing this go to the top here in our global section so here you can see that we have added two classes here and here you can see that we have actually same class name in both of these button so i will target the main button and then style these things in our global so that's why main button so that we don't have to write this main button every time in our code so first i will add a display and the display will be inline block then we have to add font width and this will be 700 then it will be text align center and then white space will be no red then we have to add vertical align and it will be middle now we have to add a border here and the border will be 2 pixel solid transparent now we have to add a padding and our padding will be from top and bottom it will be 0 from left and right it will be 32 pixel now we have to add a font size and it will be 16 pixel that's it now save go to our website and if we now refresh here you can see that we have changed our color here now we have to add a line height and the line height will be 48 pixel let's give a color here and color with this one and the position will be relative then we have to add a cursor and cursor will be pointed and the transition will be this one now save go to our website and if we now refresh here you can see that we have now added our spacing and then our color here so after this one let's go to our button here so copy this line from here and then paste it here then we have to target our list tag so copy this text from here and paste it here so now we have to add display and display will be inline block now we have to add a margin here and margin from top it will be 10 pixel from left it will be also 10 pixel from bottom 0 and from right also zero now save go to our left side and define our refresh here you can see that now they are in one row here so after this one now we have to add some background color for each of this button so for doing this copy this line from here then paste it here then we have to target our anchor tag so after this one now we have to add our main button so copy this main button class from here and then paste it here that's it so first i will give a border radius and the border radius and it will be 50 pixel and the overflow will be hidden and our background color will be white and the border will be zero then we have to add our line height and it will be 50 pixel now i will add a box shadow and our box shadow will be 0 then 3 pixel then 6 pixel then again 0 then i will add a rgba color and then rgb color will be 0 0 0 and 0.16 that's it now save for our website and if we now refresh here you can see that we have added our background color and then we have a small box shadow here so that we can make these buttons more live here you can see that in our button here in our second button we have a play button here we have actually play button video play button so now i have to add this play button in our this here so for adding this play button first we have to go to our index.html file and in our second button we have to add a play button so here now i will add a iteg and here we have to add a class and a class would be far far and then play now save go to our website and if we now refresh here you can see that we have a play button now we have to install this play button also so for installing this play button i'll just simply copy this line from here then paste it here and here it will be i that's it so i will add a margin left here and the margin left will be 5 pixel then i will give a color and the color will be this one that's it now save and go to our website and if you now refresh and here you can see that we have added our margin left and then we have changed our color now we have to target this button and add a background color separate background color from this one so for adding this background color we just have to copy this class name from here and then paste it here then we have to copy the class of our this one okay guys this will be actually button b t and not brn simply copy this button one from here and then paste it here that's it first i will give a color of our font color and our font color will be white then we have to add our background color so for adding our background color i will simply use a sudo element and this should be before that's it and here we have to add position and absolute and our content will be empty that's it and now from top it will be zero from left it will be also zero now i will give a width and we will be hundred percent our height will be also hundred percent and now i will add a background color here you can see that in our website we have a gradient background color so it will actually background image not background color so whenever we will write our code it will be background image here that's it and then i will add our linear gradient that's it and here we have to add two rgb value because here you can see that we have two different color and here first we have to add the direction and it will be right to right that's it and our two color will be this one and this one this one will be the first color and this one will be our second color if we now save go to our website and if we now refresh here you can see that we have our two different color but now this background color is actually on the top of our phone now i have to add a z index here so that index will be minus 1 and transition will be all 0.3 second east then i have to add a background position and it will be right center now save go to our website and if we now refresh so now here you can see that we can't see our font here but we have to see the font and our background color and now here we have to add another that index here if we go to our main button in our global section here we have to add as that index let's add a set index and it will be five now that should work now save and go to our website and now refresh so now here you can see that everything is now looking cool so after this one here you can see that we have added our background color and then our font we have done this button also now we have to add some cover effect so for adding our hover effect to our first button we just have to copy this line from here and then paste it here and here we have to add hover first that's it so whenever i hover our button i want to change the background color here now here you can see that it is too right and it will be now to left here that's it and then our background position will be also changed here and this will be left center not right center now same go to our website and if we now refresh and hover on our button here you can see that we are changing our background color on hover so after this one now we have to add a hover effect here also and i will add a simple box shadow around this button whenever i will hover on this button so for adding our hover in our button i will simply copy this line from here and then paste it here and this one actually will be button to not button one that's it and here i will add a box shadow if we go to our top here and go to our button tool here we have added a box shadow now i will just simply copy this box shadow from here and then paste it here and for our box shadow i will increase this value and it will be 25 pixel not 6 pixel now save go to our website and if we now refresh you can see that we have a bigger shadow bigger box shadow here and this is actually looking good i think and here you can see that we have created our home section and this is looking so good with this parallax smooth background image and everything is looking so cool so after this one now here you can see that we have actually another section and this will be service section and in our service section we have a adding our text here and then we have our four services and then we have an image here in the left side now we have to create this one and here you can see that from this section we have actually the same space from left and right everywhere here you can see that we have same space here in this section and in this section also and in this section also in the left and right we have the same space so i will do one thing i will create a wrapper div and inside this driver div i will put every section it means service section pricing section and contact section i will put everyone in this wrapper section and i will give a margin from left and right in our wrapper section so that we don't have to add this margin from left and right in every section separately so i will do this in one time so for doing this let's go to our index.html file and here we have to add a section and here
i will give an id and it will be wrapper and inside this wrapper we have to create all of our section it means our service section our pricing section and our contact section so now first we have to add our service section so for adding on subject section create another section and here i will add a id and id will be service then i will add a class here also and the class name will be also service that's it and inside this service here you can see that we have a heading and then we have our paragraph here so for heading and paragraph i will choose this 2 here i will add s3 for our heading and h6 for our paragraph but i will change the text inside this heading so our first one will be crafted for our heading will be crafted for so this will be crafted for and for our h6 it will be this one now if we save and go to our website and if we now refresh there you can see that we have our heading and our paragraph so after this heading and paragraph now we have to create 2d here our first div will be left diff and our second diff will be our right div and in our left drift i will put these things and in our right diff i will put out this image so first we have to create our left div so for creating our left one first we have to create a div here and the class name will be service content that's it and inside this div tag first we have to create our left div so get another div and the class name of our lab div will be box then we have to create another detect and this div tag will be for our image so i will create a class and the class name will be service image that's it guys so inside this box first we have to create our these things here you can see that we have a icon and then we have a small heading then our paragraph so i will create separate boxes for each of the services so for doing this here underneath this box create another tag so here first i have to create a class and this will be box one so here i am getting box one it means in our box one i will add these two div i will add these two service and in our box too i will add these two service okay so that we can change and align these things in our responsive mode so for in our box one let's create our first service so class will be so first i will add our icon here so class name will be service icon and here we have to create a iteg for our icon and let's give a class here and the class will be far far chart that's it and underneath the service icon here to create another detect and the class name will be service content and inside this service content we have to add a heading and our paragraph so for our heading we have created our h4 and then we have added a class which is service title and then this one will be our heading and our paragraph we have added a paragraph tag and the class will be text and then we have added our this paragraph and then we have added a break text so that we can break these lines if we now save and go to our website and if we now refresh here you can see that we have our heading our paragraph but we don't have the icon here so i think the class name is actually wrong this will be a far far and the bus here let's see now save go to our website and if we now refresh here you can see that we have our icon okay and now here you can see that we have actually one service and i will add another one in our this div so for i just simply copy this one from here and then paste it here that's it so this is where box one so let's pull up this one so in our box one i will create another one for our second no div and paste it here that's it let's call up this one also now save go to our website and if we now refresh here you can see that we have now four service okay so after this one now we have to add our image here so this image so for adding this image we have add div here which is service image now we have to add a image tag and our source will be this one now save go to our website and if we now refresh you can see that we have our service image okay now we have to install these things so for studying these things let's go to our style.css and here in our service so first thing what we have to do we have to target our wrapper so copy this wrapper and then paste it here this is actually a id so hash then wrapper name so now i will add a margin margin will be 5 from top here and the 7 ram from left 10 gram from bottom and a 7 then from right that's it now save go to our website and if we now refresh and here you can see that we have added some margin from top bottom left and right so now we have to target our service so that's why copy this service class from here and then paste it here that's it and here you can see that we have everything in the left side but i want everything in center so for doing this we have to add display and flags and the flux direction will be column justify content will be center align items will be also centered then we have to add text align and it will go to center now save go to our website and define our refresh here you can see that everything is now in center so after this one here you can see that we have this div and we have our this image and this div and our this image is now in one column but i want everything in one row so for doing this copy this service and then paste it here then we have to target our service content because in our service content we have 2d for our services and then we have our image so now copy the service content from here and then paste it here so because i want everything in row so that's why display will reflect and the flash direction will be row justify content will be a space between because i want a space from the between then we have to add align item center now save go to our website and different refresh here you can see that everything is now in one row but this image is not actually taking perfect width and height now we have to add a width and height like this image so for adding with that height copy this line from here and then paste it here then we have to target our service image class from here and then paste it here and i will give a width of this one and it will be 40 percent that's it now copy this one again and then paste it here let's target our image tag also and in our image it will be taking 100 percent now save go to our website and if we not refresh and now here you can see that it is now taking 40 percent now i will add a width also for our this div and this div will take 60 percent so for adding this div i will simply copy this line from here again and then paste it here and then we have to copy our box class from here and then paste it here and this one will be also taking 60 percent now save go to our website and define our refresh and you can see that everything is now taking 60 percent and you can see that in our website we have actually two diff one is box one and another one is also box one now i want this box one box one in one row here we have to add display and the flags flags direction will be row justify content will be a space between and then items will be centered that's it now we have to target our box one so copy this one and then paste it here then we have to target our box one class from here so copy this class and then paste it here that's it but now in our box one we have two diff let me show here you can see that this is our first div and this one is our second leaf and i want this div in one column so that's why it will be display so copy these lines from here and then paste it here and instead of row it will be column and i don't want any airline items but i will add width and there will be 100 percent now save go to our website and if we now refresh here you can see that everything is now in one row and divide this d factory in one column here but now here you can see that our icon and then our heading and then our paragraph is not aligning in one column and now i have to align everything in one column so for doing this copy this line from here and then paste it here then we have to target our service so copy the services class from here and then paste it here because i want everything in center so that's why i will add column here display column so for adding column i will just simply copy these things from here and then paste it here and justify content will be flex start then we have to add our allen items and it will be also plexus start and then i will add a margin bottom and this will be to them let's see now save go to our website and if we now refresh that's it now let's go to our style sheet again and copy this line from here then paste it here now we have to target our icon this icon we have to give a color and then font size of this icon so for adding our color and our font size our phone size will be 3 ram for this icon and margin bottom i want emerging from bottom and it will be 10 pixel and the color will be this one now save and go to our website and if we now refresh here you can see that we have changed our color and font size here now in our this div here you can see that we have a div here and inside this d we have our heading and then our paragraph but everything is now in actually one row but i want everything in one column so for doing this copy this line from here again and then paste it here then we have to target our here you can see the service content so copy the service content from here and then paste it here and here we have to add our column here so copy this line from here and then paste it here now say go to our website and now refresh there you can see that everything is now in one column and it is looking good i think and here we have to add another thing and it will be text aligned and it will be justified now save go to our website and now refresh okay everything is not looking good so now here you can see that we have successfully created our this services now we have actually different icons here for each of the services so now we have to add these different icons here also so for doing this let's go to windows.html file and here we have to change the icon names for this one it will be bell bell and then for this one it will be area chart that's it and therefore our this one this should be far far coffee now save go to our website and now refresh here we can see that we have changed our all four icons here so now after this one now we have to add some padding here underneath this h6 here so for adding this padding let's go to restart sheet now go to the top here and copy this one and then paste it here and now we have to target our h6 and now i'll give a margin bottom and it will be six ram let's see now save go to our website and now refresh here you can see that now we have added our margin from bottom and i think everything is now looking good and here you can see that this text is now taking full width but it is not looking good i think in this width so now i will break this line in our html if we go to our html and here you can see that we have our stock wasting type and money designing so i will add a break tag here let's see now save go to our website and refresh see now this is looking good so yeah i think this one is also done our service section is also done so after this service section now we have to create our this pricing section and this pricing section is looking so good and so fancy now we have to create this pricing section in our this website also so for creating this one sorry just simply close this one and then underneath this section let's create an id here and the id will be pricing that's it and after this id let's create a class also and the class will be also pricing and inside this pricing first we have to add our this h3 and h6 so copy this one close this again and then paste it here that's it so for our h3 it will be our pricing copy this line and then paste it here and for our h6 every section is now same i think here you can see the rest of wasting time and designing stop wasting time and money designing so i think every a6 is now same and if you want you can change the h6 and i hope you know how can how to change this text in our h6 so i will not change anything from here so after our h3 and our h6 here you can see that we have three card here so first i will create only one card and then i will design this card after designing this card i will copy the html code of the first card and then paste it two more time okay and by doing this we can create three cards in in a simple tricks so i will just create the first one so for creating this first one first you have to clear the div here and the class of this div tag will be table and inside this table diff i will get all of the three cards so first we have to create the first one so this will be basic first one is actually basic so in our basic you can see that first we have our heading then we have our this pricing section then we have some our features here let's create a deep tag here and the class name of this div tag will be basic heading it means head so for basic it will be h3 and it will basic that's it and underneath this div tag we have to create another detect and the class name of this div tag will be price and underneath this div detect we have to create a aspen tag and here you can see that we have our dollar sign then we have our bigger font than our smaller font and then our date here so i will create single aspen tag for each of these sign and a bigger phone and a smaller font so in our first smaller font we have to add a sign here dollar sign then we have to create a span tag again and then here we have to add 99 then we have our point 99 so create another span tag and it will be 0.99 that's it now let's get a spend day again and it will be
monday now we have to keep a class name of all of these spent and for our sign it will be signed the class name will be signed then it will be our currency then it will be our sent then we have to create a month here that's it now save go to our website and now refresh here you can see that we have our heading our text and our basic and this one so after this one now we have to create our these features and underneath this detect we have to create a another list here if we go to our website here you can see that this is our first list tag second one and third one and so on so first we have to create a icon here our check icon then we have to create a text here so for each of this line first we have to create a icon check icon then we have to create a text here and for everyone it will be the same process so i will just simply copy from my xss code and then paste it here so here is our first list tag and inside this list first we have to create our font awesome icon our check icon and then we have to create our text and for all of the list it will be the same process so that's right now save and go to our website and if we now refresh that you can see that we have added our tick our check icon and then we have our text here and everyone is the same now we have to install our first one after this one now you have to create a button here this button so for this button let's go to our html so for our button let's go to the top here and we have already created a button here i think in our home section so i will just copy this section here you can see that i will copy this another list from our hero text now copy this another list and then underneath this another list paste it here that's it and now from here i will keep this header button and i don't need the first button so that's why it hit this button and from our button i don't want this contoso icon also so that's why i delete this icon also that's it and for our text it will be see more now save and go to our website and if we now refresh here you can see that we have our see more button now we have to install this card so for restarting this card let's go to our style.css and in our pricing section first we have to copy our pricing class from here so copy this pricing class and then paste it here so first i will keep display and it will be blocked then we have to add text align and it will be center let's say now save go to our website and now refresh here you can see that everything is now in center now we have to add some margin bottom from our h6 so for adding this margin bottom copy this one and then paste it here then target our h6 and then add some margin bottom and it will be six left save go to our website and refresh okay now it's looking good so now we have to target our first card so for targeting our first card copy this pricing class from here and then paste it here and from here copy this basic and then paste it here and here first i'll give it width and it will be 355 pixel then our height will be 100 then i will give a border here and the border will be one pixel solid and we have to define a color and a color will be this one and then i will give a border radius and it will be 20 pixel now save go to our website and now refresh here you can see that we have a border radius and we have our border now we have to style the text here so for restarting this text put our style sheet so copy this line from here and then paste it here then we have to target our h3 here and it will be h3 that's it first we will add text align and it will be center then font width and f120 will be 300 then i have to add a padding here and the padding from top and bottom it will be 40 pixel from left and right it will be 0 and now i have to add a background color and a color with this one then we have to add a transition and transition will be all is 0.6 second is now save go to our website and definitely refresh here you can see that we have our background color here now you have to add some border radius on the top left and the top right here so for adding these border radius you have to add border radius top right it will be 20 pixel now copy this line from here and then paste it here and this will be top left now save go to our website and now refresh here you can see that now everything is looking perfect then here if you go to our website here you can see that this line should be actually in the at the same here but this is actually not same in the left side and in the right side so now you have to add a clip path here so for adding this click path first we have to define our clip path and here in our clip path it will be polygon and from top right it will be zero and zero and then we have to define our left it will be hundred percent and then zero and then from our bottom it will be hundred percent and then ninety percent then from our top right it will be zero and a hundred percent let's see now save and go to our website and now re
2021-03-09 23:11
