Complete Tutorial | Create Responsive Website using HTML5 and CSS3 Only | Example 6

[Music] hey guys and welcome back today we are going to create this cool responsive website using only html and css we are not going to use bootstrap jquery or any other framework so it is going to be just html and css and you can see the website first this is the landing page with some banner text then we have this text area and then we have this parallax scrolling effect scroll down more and we have this image grid with a cool image hovering effect then we have this sort of panels and here we have a different kind of hovering effect some more text and images and then we have these three panels with some tags hovering effect over the panels as well so we are going to have two different types of hovering effect over the images all right then we have this footer with different sections all right now let's see the responsiveness of the website [Music] and you can see parts of the footer gets hidden when we reduce the size of the screen width [Music] keep reducing more and some more parts will disappear all right so we are left with only two parts that is the contact and about as we go on increasing the screen width size all those parts will start becoming visible again you can see that we have these three panels in large screen width and as we reduce the size of the screen width we get one panel in one row same goes for this image grid in large screen we have three images in one row and when we reduce the size of the screen the images start to stack up one in a row so the website is pretty much responsive and without any further ado let's get into the coding so [Music] you can download the folder from the description of this video which contains all of the images that we are going to need it has all of the images that we are going to use then create a new text file give it any name with dot html extension all right then open it in any text editor that you have then create a html tag and hit enter a basic html file will be created by the text editor fill in the title then we need to write a meta tag for ensuring proper rendering and touch zooming in touch screen devices [Music] before getting into the code we need to write a link to the font awesome icons because we are going to use those font awesome icons for social links such as the twitter youtube facebook and all that so quickly open a new tab in your browser search for font awesome cdn and open this first result that is the font awesome bootstrap cdn by stack path and here we have the cdn link copy it then get back to the text editor create a link tag and in the link part paste the cdn link that we have copied in the browser [Music] and before getting inside the body tag let's give id attribute to the body tag my page so that we can access the top of the body from the bottom of the page by using this id anyway get inside the body tag let's start with the landing page part that is the part of the website which will open up first when we open the website so create a section tag because we are going to define a new section that is the landing page and let's add the class attribute and the class as wrapper and id as parallax iphone 1 and we are going to use this id to add the parallax effect to this landing page part all right then get inside and create another div tag and write the class as overlay and we will use this class overlay to add a slight gray color effect to the landing page image anyway then get inside and create a header tag [Music] and write class as d hyphen flex iphone r so we are using this class to change the display property of this element to flex and the flex direction to row i mean we have not yet defined this class in the css but we are going to define it later and these are the properties that we are going to use with this class that is we want the display as flex and the flex direction as row so that whatever we define under this element they all get stacked next to each other in the same row space clear and justify hyphen content hyphen space hyphen between and we will use this class to change the justify content property to space hyphen between so that the elements inside this flex they are justified in a way that they have space in between them all right then get inside and let's define the logo which has to be on the top left corner for that we are going to create our div and use class as my hyphen one and we are using this my hyphen one class to add margin top and margin bottom as one rem or one rem these are some of the helpful classes that we are going to define in css and then use them throughout the website because they are going to help a lot in setting up margin and padding right from the html without getting in the css anyway then ids logo then get inside and create uh a tag that is the link all right then get inside and create the image tag that is the img tag and write the source as the img forward slash logo.png all right then get below and let's start with the navigation bar create a nav tag and write the class as fl underscore right and we will use this class to change the float property to right then font hyphen xs this is to get extra small font size text hyphen uppercase to transform the text to uppercase characters then id as main hyphen navbar don't worry about these classes we are going to define them once we are finished with this landing page part so we are going to define these classes most probably in the next video all right then get down and create a ul tag that is the unordered list tag and class as clear clear will change the display to block for this ul tag then create a li tag that is the list item and class as active because we want the first link to be active all right then create an a tag that is the link and then write the text as home then get below and create another ally tag get inside and create a a tag write the text as hotels then get inside the ally tag and create another ul tag because we are going to create a level 2 menu for this so that when we hover over this hotels link the link that we are going to define next will be displayed so create a li tag get inside and create a e tag then write some text and copy it and paste it few times to create some links all right so these are the level two links then get outside this ul tag and the ally tag and create a new ally tag that is the level one link get inside and create a e tag and write the class as a drop because we are going to have level three links in this all right then get inside and create a ul tag then get inside again and create a li tag then create a link write level 2 then again create a li tag create a a tag and write the class as drop because this is also a drop down menu and then write level 2 plus drop and this will open up the level 3 so get inside and create a ul tag then get inside again and create a li tag and create a a tag write the text as level 3 all right then create some more links so the first link that is the packages was the level one link then these are the level two links and these three are the level three links so get outside this ally tag containing the packages and create a new ally tag which is going to be the level one link and create some links in this manner and these are going to be the level one link all right with this we have completed the navigation link open the file in the browser so we can track the progress all right and now let's define the banner text so create a div tag for that and write the id as banner hyphen text class as d hyphen flex hyphen c so this class is going to change the display property of this element to flex and the flex direction as column so that all the items or all the elements that we are going to define within this div tags get stacked up in one column but in different rows all right then create a article tag then get inside and create a paragraph text that is the p tag and class as my hyphen one as i have already told you my hyphen one is going to add margin top and margin bottom to one rem or one rem then font xs is going to get small size font then write the text and if you want to transform the text to uppercase character just add this class text hyphen uppercase all right then create a heading tag uh h1 tag light class as heading and we will use this heading class to add a different font style for the headings then text and left to left align the text then text hyphen uppercase to transform the text to uppercase characters then text hyphen bold to change the point weight to bold then point x 3 to get large font size then my hyphen 1 to add margin top and bottom as 1 ram then write the text or the heading for the website then get below and create a p tag add some margin so write m y hyphen 3 to add margin top and margin bottom 3 ram or 3 rem and font access all right let me copy the text [Music] add a break tag to change the line then create a footer and this is going to be the footer for this article don't get confused this is not the footer for the entire body get inside and create a button tag and write the class as btn we will define this btn class in css so that we can use this btn class throughout our website then write the text so this completes the landing page part of the website in html now let's move to the css [Music] so open the starter files folder again which contains the images and where we have created this html file and create a new text file write the name as style dot css we need to have this css extension all right then open it in the text editor and before we start with the styling we need to add a link to that style dot css file in our html file get inside the head tag and create a link tag and in the link part write style dot css so these two files are linked now and we can start with the styling so first of all we need to import the font family or the google fonts [Music] then let's define the point sizes first point access then point x one then point x x2 and point x3 all right you can see that we have used these classes all right before personalizing the style of the website we are going to create some of the helpful classes which we are going to use throughout in our html file [Music] then let's define the heading then let's define all of the margin classes m hyphen one is going to add one ram of margin all around similarly m hyphen 2 is going to add 2 rem or 2 ram of margin all around then my hyphen 1 is going to add margin top and margin bottom as one rem same goes for my hyphen 2 and my hyphen 3 m y hyphen four similarly we are going to have mx hyphen one for adding margin left and margin right let me define them and for padding we are going to have p hyphen 1 to get padding of 1 rem all around p hyphen 2 alright then let's style the html tags article figure section display as block margin as 0 and padding is 0 then refer to the img tag width as auto maximum width as 100 percent height as auto margin 0 padding 0 border none then html tag overflow along x axis hidden and overflow along y-axis scroll then html and body color as hash triple f this is to have that white font font size as 13 pixels margin and padding 0 line height 1.6 this is the font for the rest of the body then h1 letter spacing as 5 pixels to space out the headings that we have defined with h1 tag now let's add some transition effect to all of the elements this star selector selects all of the elements a tag no outline text hyphen decoration as none is going to remove the underline from the links then color as hash triple three this is dark gray color cursor is pointer then hovering effect alright the text is white colored now then let's define the flex properties d hyphen flex hyphen c display as flex and this exclamation mark important rule is used to override any other value defined for this display property margin as 0 space auto and flex direction as column flex wrap as wrap then copy this entire block and change it to d hyphen flex hyphen r and flex direction to row all right then justify hyphen content hyphen center all right now let's define some more general classes that we are going to use throughout the html part then display as block width as 100 percent no margin and no padding left align the text word wrap as break word all right then let's add some padding to the container let's define two background colors bg hyphen gray and bg hyphen green this is a kind of c green color then let's define the buttons dot btn display has inline hyphen block to keep it in line with other elements padding has 8 pixels top bottom and 18 pixels left right text transformation to uppercase and border is one pixel solid cursor to pointer and we are going to use a separate class that is inverse with the btn class whenever we want to reverse the properties of this btn class for example using btn space inverse as the class for any button is going to make that button transparent and the font color will be in white and if we remove that inverse class and just write btn with the button then the color of the button will get reversed that is the color of the button will be c green and when we hover over the button it will become transparent so you can observe that hovering effect over the btn class and the combination of btn and inverse class are both same and even if you don't understand what i am trying to explain here don't worry you will understand it later when we start using these classes in the html then let's define the clear class all right then let me define some text classes to format the text [Music] then let's define the float class and we need to add one more class for making sure that we don't get any margin or padding for that we are going to use this no space class and it will be better if we keep this class near where we have defined all of the margin and padding classes [Music] all right and you can see the button now this is a simple button with class btn so when we hover over it the background of the button changes to transparent if we have used btn space inverse class with the button tag then the button would have been transparent at the beginning and when we hover over it it would have turned green we have defined all of the helpful css classes now let's start personalizing the website according to our design [Music] then let's start with the parallax scrolling effect reference the section containing this parallax by using the id of that section that is hash parallax hyphen one and let's change the background first url img forward slash bg hyphen one dot jpg this image is in the image folder or the img folder inside the starter files folder that you might have downloaded already then space fixed space no hyphen repeat and keeping background attachment as fixed is going to get that parallax scrolling effect which means the image will stay put where it is and if we scroll down it will create a parallax scrolling effect and then no repeat is going to make sure the image is not repeated if the size of the screen is very big and image size is small then minimum height as 720 pixels [Music] alright then background position as center this is the id of the section tag and now let's style this overlay class to add a color effect so reference that and minimum height 720 pixels all right then dot overlay and position as relative z index s1 background color rgba 0 comma 0 comma 0 comma 0.3 and exclamation mark important so i have defined this ola class separately so that you can use this class later if you want to use it with other part of the website also all right let's increase it all right then let's start with the navigation bar and first let's resize the logo all right then the unordered list and the ordered list tag inside the navigation bar margin 0 padding 0 and list style as none this is going to remove the bullet symbol then let's start with the navigation bar mean hyphen navbar line height as normal then the list item inside the navigation bar display as inline block so that they can be stacked in one row and the position is relative and margin as 0 space 15 pixels space 0 space 0 so we are adding margin only to the right then padding as zero all right then hash mean hyphen nav bar space ally colon last hyphen child margin hyphen right to 0 so that we can get rid of the margin on the right most link all right then let's style the a tags inside the navigation bar display as block padding is 25 pixels top bottom and 0 pixels left right and color as inherit all right then hash mean iphone navbar space li space ally width as 100 percent and margin is 0 this is going to style the level 2 list items all right then hash main hyphen nav bar space ally space li colon hover greater than sign and e this is going to reference the a tags which are the direct child of the ally tag of the level 2 then color is hash triple f background color as 57 adc 4 then hash main hyphen navbar space dot drop and we have used this drop class for getting that drop down menu effect then padding left as 15 pixels then main hyphen navbar space ul space ul this is going to style the level 2 unordered list tag and then z index as 9999 then position as absolute width as 180 pixels text hyphen transform none visibility as hidden opacity as 0 because we want the level 2 and level 3 items to be hidden until we start scrolling over the level one link items then hash main hyphen navbar space ally space ally space e so this is going to style the level 2 links as well as the links of the level 3 by using this drop class so display as block margin as 0 padding is 10 pixels and 15 pixels then hash main hyphen navbar space ul space li colon hover greater than sign ul visibility as visible and opacity as one so this is going to make the links visible when we hover over the link of the level one you can see that and even the level three links are visible now but we want them to open up on the right side all right then hash main hyphen navbar space li space ally dot drop colon colon after top s15 left as 5 pixels then hash main hyphen nav bar drop colon colon after comma hash mean hyphen navbar space li space li dot drop colon colon after and the content as backslash f0d7 semicolon and this is going to add a small arrow symbol then position as absolute and font family as point awesome is capital then font size as 10 pixels and line height as 10 pixels and you can see that small arrow symbol which represents that it is a drop down menu all right then hash main hyphen navbar space dot active space a then hash main hyphen navbar space a coolant hover comma main hyphen nav bar space ally colon hover greater than sine e this is going to style the active link as well as the hovering effect over the links color as hash triple f font size as 1.1 ram font weight as 600 background color as inherit all right main hyphen navbar space dot drop colon colon after top 30 pixels left 5 pixels all right hash main hyphen navbar ul space ul space ul this is going to reference the third level link or the level 3 link [Music] so now the level three links are opening up to the right of the level two links so now let's just align this navigation links inside the header class we have used this justify hyphen content hyphen space hyphen between class so let's define that class where we have defined the rest of the flex properties all right the navigation bar is complete and now let's position the banner text so right hash banner hyphen text and position as relative top as 150 pixels margin left as 100 pixels [Music] border left three pixels space solid space white padding left 50 pixels all right if you want you can keep it this way or if you want you can add this background color to the text this see green color background to the text so write hash banner hyphen text space p comma hash banner hyphen text space h1 define the background color all right let's limit the width of h1 and p tags so maximum width as max content all right now that depends entirely upon you whether you want to keep it like this or without the background color that is totally up to you and to make it look even better we should change the hovering color of the navigation bar to the c green color that we have used with the buttons so scroll to this part hash main navbar space ally space li colon hover greater than a and change the background color to 2 e 8 b 5 7 this will change the hovering color to c green this is the same color that we have used with the rest of the elements anyway with this we have completed the landing page the navigation bar as well as the banner text and before moving to the next part get inside the navigation bar again and within the ally tag which has defined the packages link let me just add one more level 2 link copy it and paste it after the closing of the level 3 links [Music] all right then let's start with the text section that is going to be beneath the cover image and let's first create the section tag and let's call it wrapper then text dark to get dark colored font then bg gray to get a slight gray background then get inside and create a div tag and let's call it d hyphen flex hyphen c this will change the display property to flex and the flex direction to column because the elements that we are going to define within this div tag have to be stacked one in a row then space container to add some padding around it all right then get inside and let's first create the title for this section create a div element and let's call it text center to keep the text center aligned then get inside and create a h6 tag that is the heading tag and write the class as heading to change the font style space text hyphen uppercase to change the characters to uppercase characters then my hyphen 1 to add one ram of padding top and below it space font hyphen x2 and we have already defined these classes before if you want you can refer to the style.css and see what are the properties that we have defined within these classes and then write any text for the heading all right then get down and create a paragraph text or a p tag and write the class as my hyphen three to add 3 ram of margin top and below it let me just copy the text from the website all right paste it and you can write any other text that you want all right then let's define the rest of the text create a div tag get inside and create another div tag and write class as one underscore half and id as extra text then get inside and create a unordered list tag that is the ul tag and write class as mx hyphen 2 this is going to add 2 ram of margin left and right then get inside and create a li tag and write class 1 underscore half space my hyphen 1 then get inside and create a article tag and then within that we are going to create the heading tag or the h6 tag and write class as heading space font hyphen x1 then get inside and create a link and write the text as any text that you want let me just copy that text from the website all right paste it and this is the html code for adding three dots all right let's add class as no space space text hyphen justify to the paragraph text or the p tag all right then we need to create one more paragraph of text so we can just copy this li tag you can see where this li tag is closing and copy this entire block and just paste it below three times this is going to create four paragraph text you can see where this div tag is closing after the closing of ul tag and get outside it create a new div tag and write class as 1 underscore half space my hyphen 1 and id as main hyphen text we are giving this id because we are going to hide the element referred by id extra text in small screens and we will retain this element which has this main text id then get inside and create a paragraph text and write class as font access this will create very small font size and my hyphen 1 then write the text in the same way create a heading tag and write any heading then create a paragraph text write class as text hyphen justify so we have created these two headings and let me copy the text here paste it here all right and let me copy this entire p tag and paste it once all right then add one class to this p tag the bottom one my hyphen one to add some margin top and below it all right then create a footer this is not the footer for the entire body this is the footer for this div tag and we are going to create a button inside it create a button tag and write class as btn we have already defined this btn class then write that text within it all right so now let's define the one underscore half class get inside the style dot css and refer to that class by using dot then display as inline block float as left list style as none because we do not want the bullet symbol width as 48 so the one half class is going to divide its container into half and we are giving it 48 percent of the width because we want some space for margin and padding as well so 48 is fine all right we need to add some margin to the left of the text all right then remove this margin of one ram top and bottom from the third and the fourth ally tag that is remove the my hyphen one from the class of the third and the fourth ally tag we need to add some margin to the left of the text add some margin using the id [Music] all right this is the extra text and this is the article tag that is going to be referred and these are the articles all right and now we need to create this parallax image section okay then let's start with the parallax scrolling effect on the second image that is going to be beneath the text section so create a section tag and let's call it wrapper and id as parallax ipin2 then create a article tag and write class sd hyphen flex hyphen c this will change the display property of this article element to flex and the flex direction as column container to add some padding then text hyphen center to center align the text then get inside and create a div element and write class as my hyphen 2 to add 2 ram of margin top and bottom then get inside and create the heading tag or the h6 tag and write the class as heading space font hyphen x2 then write the heading inside it then create a p tag and you can write any text that you want all right then get outside the div tag and create a button tag within the article tag and write class as btn space inverse because of this inverse class we are going to get a transparent button which will turn c green when we hover over it then write the text inside it you can see that we have the button but it is transparent so get inside the style dot css let's reference to the parallax id parallax hyphen 2 id then write the background s url img forward slash bg hyphen 2 dot jpg space fixed space no hyphen repeat and i have already explained how we get this parallax effect using background attachment as fixed all right let's enclose this button tag inside paragraph text or the p tags all right [Music] so now let's start with the image grid all right get in the html file and create a section tag and let's write the class as wrapper space text hyphen dark to make the font color dark then bg hyphen gray to add a slight gray background to this section and then let's have the id as destinations so that we can use this id later in the css to apply some styling to this section all right then get inside and create a div tag and let's write the class as container this will add some padding around it then d hyphen flex hyphen c this will change the display property to flex and the flex direction to column so that the elements which we are going to define inside this div are stacked vertically one in a row as we have already seen all right then get inside again and let's start with the title for this section this is going to be the main heading for the section so let's create a div tag and let's write the class as text hyphen center this will align the text in the center of the screen or the center of that div tag all right then get inside and create a heading tag uh h6 tag and let's write the class as heading space my hyphen 1 to add margin of 1 ram top and bottom then font x2 all right then write the text then get inside and create a paragraph text or a p tag and let's write the class as my hyphen one all right then let me just copy the text from the website if you want you can write any other thing that you want all right refresh maybe we can increase the margin top and bottom all right so we have defined the title and now let's define the images we are going to define the images in a row so there will be three images in one row then we will define the rest of the two rows in the same way so it will be easy if we can just refine the first row and copy it and paste it twice and then adjust the names as well as the source files for the images to get the different images and the different text that we want with them so it will be very easy so now let's just define the first row create a ul tag or a unordered list tag and let's write the class as d hyphen flex hyphen r because we want the display property as flex and the flex direction as rho so that the elements which we are going to define inside this will be stacked next to each other in one row no space to remove any space around it so that the images or the elements inside it are next to each other without any margin or padding around it all right then get inside and create a ally tag and let's write the class as hover one because we are going to define two different types of image hovering effect and this is going to be the first one so let's write it hover one for now then get inside and create a img tag and this is where we are going to define the image so write the source as img forward slash india.jpg if you have already downloaded the starter files then you might be having this img folder as well as the images inside it so you need not worry about these things and just write whatever source i am writing here then get inside and create a div tag and write the class as overlay now whatever text we are going to define under this div tag will be displayed when we hover over the image so it will be displayed as a kind of image hovering effect so let's create a h2 tag and write india then create a link that is the e tag and let's write the class as info because we are going to use this class later in the css so make sure you use these classes all right if you want you can open the img folder and you can see the images that we are going to refer all right so you can see that this ally tag completely defines one image so we can copy this entire ally tag and then paste it twice to get three images in one row all right now we just need to change the names of the images so that we get different images so we can see the image now so in this way we have created one row of three images now we can just copy this entire ul tag and paste it twice so that we can create two more rows in the same way and if you want you can leave a small comment here so that you know where the second row is starting [Music] and then we will adjust the names of the images and the text let's say it's friends or you can follow any order of the image that you want it is irrelevant it is not important i am just randomly writing the names of the images all right then leave a comment for the third row again paste it all right then let me just adjust the names of the image again and let me just change the headings as well according to the image all right so you can see that we have all the images all the nine images now as well as we have that text below the image you can see that so this completes the html part for this section now let's move to the style.css and let's start by writing a comment destinations and if you remember we have given a id destinations to the section containing this entire part so let's refer to that write hash symbol and then the name for the id space ul because ul tag is a child of the section tag then space li because li tag is the child of the ul and both of these are html tags so we don't have to write a hash or a dot before them then get inside and write maximum width or max width as 300 pixels so this will limit the width of the image to 300 pixels all right but we don't have any covering effect as of now and before moving any further let me just make a small change to the place where we have defined the flex properties so there we have defined a justify content center class we can just get rid of it and add one more property to the d hyphen flex hyphen r class that is add justify hyphen content to center because we are going to use this property every time we use this display as flex and the flex direction as column so it is better to change the property here in the class itself instead of using a separate class for this purpose and the images are now center aligned and we need to now just add the hovering effect which we are going to do in the next video so now let's start with the image hovering effect and this is done entirely using the css so just get inside the style.css and let's start with the hover one class because we are going to define two different types of hovering effect and if you remember we have used hover one class while defining the image grid so let's just refer to that then width as hundred percent height as hundred percent float to left then overflow hidden position as relative and text align as center and the cursor to default all right so you can see that we have the hover one class then inside it we have this overlay class so let's start with that write dot hover one space dot overlay so this is going to refer to all of the overlay classes which are inside the hover one class then bit as hundred percent height as hundred percent position is absolute because we want the content which are inside this overlay class to be in a fixed position overflow as hidden then top as 0 left as 0 opacity as 0 because we want it to be transparent by default and then get visible only when we hover over the respective image then background color rgb is zero comma zero comma zero comma zero point five this will give it kind of a gray background color transition all 0.4 seconds space cubic b e z i e r open brackets 0.88 minus 0.99 0. 1.81 and this transition property is a shorthand property for four different types of properties first is the transition property second is the transition duration third of the transition timing function and fourth is the transition delay so all here means that all the properties will get a transition effect then 0.4 seconds is the duration of the transition then the third part is the transition timing function and this transition timing function property specifies the speed curve of the transition effect and there are several transition timing functions from which we can use for example the default one is the ease which is used to specify a transition effect with a slow start then it increases the speed and then again ends very slowly then we have linear which specifies our transition effect with the same speed from the starting to the end so it has the same speed throughout the transition so similarly there are various other and the one that we are using is a cubic bezier function in which we can define our own values so even if you don't understand this just leave it out you just need to understand one thing that this css transition is used to change property values very smoothly from one value to the another for a given duration let's refresh so you can see that the text is hidden now it is actually there starting from the top left corner but because of the opacity set to 0 it is not visible then let's style the image display as block then position as relative and let me just copy this entire transition and paste it here also then let's style the h2 inside the hover one class text transform to upper case this is just to make it look better then color as hash triple f text align as center position as relative font size to 17 pixels background rgba 0 comma 0 comma zero comma zero point six zero point six is the alpha value which defines the opacity for the color and the three zeros in the beginning define a black color then transform translate y in brackets minus 100 pixels then paste the transition property once again padding is 10 pixels this is the s2 tag that we are referencing and now let's reference this info class dot hover one space a dot info because this info class is the sibling of the e tag that is why we are not leaving any space in between so try to understand this this info class is not a child of the a tag instead this info class is a sibling of the a tag that is why we are not leaving any space between a and dot info this is just how we use css selectors then text decoration as none this will remove the underline from the link then display as inline block text transform upper uppercase then color as hash triple f then border one pixels space solid space hash triple f this will add one pixel wide white colored border all around it then background color as transparent opacity as zero transition all 0.4 seconds ease so because of this ease the transition will start very slowly then pick up the pace and turn a little bit fast then it will again become slow at the end then margin 50 pixels space 0 space 0 padding 7 pixel top bottom 14 pixels left right now let's define the hovering effect over this info class box shadow as 0 0 5 pixels triple f then let's define the hovering effect over the hover one class then like dot hover one colon hover space image then transform to scale in bracket 1.2 [Music] so this will increase the size of the image when we hover over the hover one class all right now we need to display the text so write dot hover one colon hover dot overlay opacity that's one so this will just change the opacity from zero to one which in turn will make the overlay class visible now we need to make the text visible also so write dot hover one colon hover space h2 comma dot hover one colon hover space a dot info and opacity to 1 then transform translate y in brackets zero all right [Music] then write dot hover one colon hover space a dot info transition hyphen delay to 0.2 seconds so we have the desired image hovering effect the first image hovering effect is complete let's start with the other issues section this section is going to have some panels so let's start with the section tag and let's write the class as wrapper text hyphen dark to get the dark color font then id as other hyphen issues we are going to use this id later in the media query part where we will use this id to change the direction of the flex so that we get the panels one in a row because of the screen width limitation in small screen device and in large screen we are going to have all the four panels in one row so then get inside and create a div tag and let's write the class as d hyphen flex hyphen c to change the display property to flex and the flex direction to column and then space container then quickly get inside and create the title [Music] create a div tag write the class as text hyphen center space my hyphen 2 and let me just copy the text from here just to save some time all right then create a b tag and let me copy the text once again all right let's refresh so we have it get inside the h6 tag write the class as heading this will change the font style then write font hyphen x2 to change the font size all right let's start with the panels create a div tag and let's write the class as d hyphen flex hyphen r because we want all the four panels to be in one row then create a article tag and write the class as hover one and we don't have to define the hover one class in the css because if you remember we have defined the hover one class and all the respective classes which we are going to need for the image hovering effect so we just have to follow the same structure that is the outermost class has to be hover one then the overlay has to be inside it and similarly the info class has to be inside overlay so we just need to follow the same structure mx hyphen 2 to add some margin on the left and the right side then get inside and create a a tag get inside it and create a figure tag then again get inside it and create a img tag and then write the source of the image the image is already in the img folder so you don't have to worry about that as long as you are keeping this web page inside the same folder the starter file folder you don't have to worry about the source file name or the file name of the image and the source and you can see that the image hover effect is already working because we have already defined the hover one class so let me just copy the text from here all right then get outside the e tag create a h3 tag and write class as heading space font hyphen x1 then write any heading [Music] then get inside and create a p tag and let me just paste the text alright so in this way we have created one panel we just have to copy this entire block of article tag all right then paste it three more times let me just change the name of the images the images are in the starter file folder so don't worry about it and change the name of the headings as well notice that we are not using any overlay class or the info class inside it because we don't want any text to be displayed when we hover over the panel or when we hover over the image so we have not used them let's just make one more correction get inside the style dot css and scroll to the part where we have defined the flex properties then under the first one d hyphen flex hyphen c remove this flex hyphen wrap similarly under d hyphen flex hyphen r remove the flex hyphen wrap all right so we are using a different kind of hover than the one in the example page so i just use the same class to show you so if you like this hovering effect you can keep it or else i am going to define a new hovering effect just like the one we have in our example page so for that let us just change the name of the class from hover one to hover two if you want you can keep the same class it's totally up to you i have to show two different types of hovering effect that is why i have to define this one also but it depends upon you which one you like then inside the figure tag you can just add one class my hyphen one to add some margin on the top and bottom looks quite better now similarly in the p tag write class as text hyphen justify and we have already defined text hyphen justify class in the css so we just have to use the name of the class and add this class to all the p tags so the text becomes justified all right it looks much better now and now we just need to have the hovering effect and we will do that in the next video so get inside the css file again and let's start with the comment that this is going to be the second image hovering effect all right then write dot hover 2 because this is the class that we have used then space figure space img so this will refer the img tag which is inside the figure tag which is inside this hover 2 class then transform rotate in bracket 15 degrees space scale in bracket 1.4 so this will transform the image by increasing its size and rotating it to 15 degrees then transition 0.3 seconds ease hyphen in hyphen out all right refresh and you can see that the image is rotated by 15 degrees even the size of the image is increased now dot hover 2 space figure colon hover space img transform rotate in brackets 0 space scale in brackets 1 so this means that when we hover over the figure tag or the area covered by the figure tag the image is going to get back to its original rotation that is 0 as well as the size of the image will be back to normal you can see that in the website now when we hover over it the image goes back to its original position and its original size now let's limit the size of this figure tag [Music] overflow as hidden so this completes the second image hovering effect this was quite easy [Music] so let's start with the customize section and in this section we are going to have image on one side of the screen and on the second side we are going to have some text and a button beneath it [Music] let's start with a comment and let's create a section tag then let's write the class as wrapper and let's have the id as customize package we are going to use this id later in the css part for some customization or styling then get inside and create a div tag and let's write the class as d hyphen flex hyphen r because the section or the contents that we are going to define under this needs to be stacked next to each other in one row because on one side we are going to have the text and on the second side we are going to have the image and both of them have to be in the same row all right then get inside and create a div tag and let's write the class as one underscore half so this div tag will take the half width of the screen and under this we are going to define the text similarly create one more div tag and write the class as one underscore half so that half and half makes a full okay then let's add some more class text hyphen dark to change the font color of the text then text hyphen right to right align the text and we have already defined all of these classes if you remember then get inside and create another div tag and let's write the class as border hyphen right because we are going to have a red colored border right next to the text and we will define this class later get inside and create a h6 tag and write any text that you want and let me just copy the text from the website and paste it inside p tag all right so we have the bare structure let's write some class to h6 tag font extrude to increase the size of the font heading to change the font style and increase the line height then get inside the second div tag which contains this class 1 underscore half and let's write id as fixed hyphen 1 because in this part we are going to define our image it will not have the parallax scrolling effect it will stay fixed as we scroll through it so get inside the style dot css and let's start with the styling then write hash customize hyphen package because that is the id of the entire section then space dot border hyphen right we have used this class with the div tag which has defined the text so let's define border border right 10 pixel space solid space hash 2e8b57 all right hash customize hyphen package space hash fixed hyphen one this is the id that we have used for the dip that has to contain the image so background the url open bracket img forward slash bg hyphen one dot jpg close bracket no hyphen repeat then let's declare the height for this image 650 pixels and background position as center all right let's change the height now it is looking similar to our example web page [Music] now let us add some margin to the div tag which contains the text because the margin is for the entire div so it will increase the distance between the image and the div tag now let's add some padding so that we get some space between the border and the text now let's add some more margin on the left and the right side of the div which has this one underscore half class all right now we just need to add the button so get inside the div containing one half class and below this div let's create a p tag and inside it let's create a button tag write the class as space inverse because we want the button to be transparent in the beginning and get green colored when we hover over it then write the text for the button all right let's add some margin all around it all right let's start with our blog section in this section we are going to have some panels then create a section tag and let's write the class as wrapper space text hyphen dark and let's have the id as our hyphen blog then get inside and create a div tag and let's have the class as d hyphen flex hyphen c so that all the elements which we are going to define under this gets stacked up in one column then space container then let's get inside and start with the title for this section create a div tag and let's have the class as text hyphen center space my hyphen 2 this is going to add some margin on the top and the then create a h6 tag and let's write the heading then create a paragraph text or a p tag and write any text that you want all right let's add class heading to the h6 tag then font x2 to increase the font size then text hyphen uppercase to change the characters to uppercase all right then let's define the panels so we are going to define one panel and then we are going to copy the codes for that panel and then change the rest of them according to our design so let's define our div tag and let's write the class as the d hyphen flex hyphen r because we want all the panels in one row then get inside and let's start with the first panel create a article tag and let's write the class as hover 2. because we are going to use the second type of image hovering effect that we have defined already then create a figure tag get inside and create a e tag which is an anchor tag then get inside and create a img tag or the image tag and let's write the source as img forward slash portfolio hyphen 1 dot jpg all right then create a h3 tag and write class as m hyphen 2 to add 2 ram of margin all around it then text hyphen center heading font x1 then write the text as blog heading or any heading that you want all right get below it and create a ul tag then get inside and create a li tag get inside this ally tag and create a i tag and let's write the class as fa space fa hyphen user this is the class that we have to use if you want to use font awesome icons and we have different class for different icons then get outside i tag and create a e tag and let's write the text as admin and let me just quickly copy this entire li tag so that we can paste it few more times and then just change the type of the font awesome icon and the respective text all right then get outside the ul tag and create a p tag then write the class as text hyphen justifier to justify the text that we are going to define under the panels then let me just quickly copy the text from the website and paste it in the p tag you can write any other text that you want then get outside the p tag and create a footer tag get inside it then create a button tag and write the class as btn then write the text for the button all right so we have the button as well let's write class as text hyphen center to the footer this will center line the button and if you want to know we have to follow the same structure of the tags that is we need to have the article tag outside then figure tag inside it so that we can have the hovering effect because the way we have defined the css selectors that we have used while defining the hovering effect has to be followed in the html part as well and that is why we have used this article tag and then inside it the figure tag and then the img tag inside it anyway then let's just copy this entire article tag and we can paste it to create the second panel and in the same way we can paste it again to create the third panel all right we have all the three panels the hovering effect is there now we just need to style them maybe add some margin around them so get inside the first panel and in the article tag just add one class m hyphen 2 this is going to add 2 gram of margin all around it add the same class to second panel as well as the third panel all right then let's change the name of the images to have different images on different panels all right then let's change the letters in the heading to uppercase characters just add the class text hyphen upper case in the h3 tag add it to all of the panels all right then get inside the p tag and add m hyphen 2 to add 2 ram of margin all around the p tag this looks much better now so let's add the same class m hyphen 2 to the footer as well now let's add this m hyphen 2 class to the p tag of the second panel as well as the footer of the second panel then the p tag of the third panel as well as the footer of the third panel now get inside the ul tag and add the class meta space m hyphen one we are going to define this meta class in the css and m hyphen one is going to add one ram of margin all around it and just copy it and paste it inside the rest of the ul tags of the second and the third panels all right so get inside the style dot css then write r hyphen block background url img forward slash bg hyphen world dot png these images are already in the img folder that you might have downloaded already so you don't have to worry about all these things all right then hash r hyphen blog space dot meta space ally then display inline block font hyphen size 0.8 rem this will remove the bullet symbol next to the font awesome icons all right hash our blog space dot meta space li colon colon after margin hyphen left 5 pixels content pipe symbol it is generally above the entire key you need to press the shift key as well as the key which is just above the enter key now we need to get rid of the last pipe so write hash our hyphen block space dot meta space ally colon last iphone child colon colon after margin left 0 content empty string that is don't write anything within the double inverted commas or within double quotes all right hash our hyphen blog space article colon node then open bracket colon first type in child close bracket open curly brackets margin hyphen left four percent all right hash our blog space article border one pixel space solid space hash triple d this will add a grey color border hash r block space article colon hover box hyphen shadow zero space 20 pixels space 80 pixels space 0 space rgba 0 comma 0 comma zero comma zero point five all right so the panels are complete and let's move to the next part of this website [Music] okay now let's start with the last section of this website that is going to be the footer so get outside the section tag that was used to define our block section and let's start with the footer so let's create a div tag and let's write the class as wrapper then bg hyphen green to have that green color background for the footer this div deck is just a wrapper for the footer we are going to define the footer inside this so get inside and create a footer tag and let's write the class as d hyphen flex hyphen r because we want the elements which we are going to define next to be stacked in one row next to each other space clear space container space text hyphen white then get inside and create another div tag and let's have the class as mx hyphen 2 to have 2 ram of margin left and right then get inside and create a h6 tag and have the class as heading to change the font style then font x1 space my hyphen one to have one ram of margin top and bottom then write the text drop down and create a ul tag and let's have the class as no space to remove all the space and padding space linked list we are going to use this class to add some margin on the bottom of the list space contact and we will use this class to format or style this section or this part then get inside and create a li tag then get inside again and create a i tag let's have the class sfa space fa hyphen map hyphen marker this is the syntax if we want to use any font awesome icons and this class is going to get a map marker icon so we want this icon next to the address that we are going to write then get inside and create a address tag then you can write any address that you want all right get outside it and create another ally tag and in the same way let's create a i tag and define a phone icon using the font awesome icons and then write any number that you want you can see the icon next to the number all right then get down and create another ally tag and in the same way let's create a i tag and have the class as fa space fa hyphen envelope hyphen o envelope hyphen o signifies that we want uh opened envelope and we are going to place it next to our email id so just write the email id outside the i tag get down and create another ally tag and create a i tag and have the class as fa space fa hyphen youtube this will get a small youtube icon all right just like the one we have in our example webpage and since we want this icon to be a link let's keep it inside anchor tag or the e tag so that when we click on this icon we are redirected to your youtube page or youtube channel and let's write class as text hyphen white and then you can specify the link for your youtube channel and then target attribute as underscore blank because when we click on this link we want it to be open in a new tab so that we don't leave or so that we don't browse away from the current webpage that we are browsing through then get outside the i tag and write the text as the name of your channel all right then get outside the div tag and let's create another div tag and have the class as mx hyphen 2 then get inside it and let's create a heading and write the class as heading space my hyphen 1 space font hyphen x1 then create a ul tag and write the class as no space so that we get rid of all the padding and the margin space linked list because we are going to define a kind of a list below it then get inside and create a li tag then create a a tag and you can write any link that you want then copy this entire li tag paste it again and just change the name of the links and if you have the url for these links you can also place them in place of that hash symbol since i don't have any url for these pages that's why i'm just leaving a hash symbol all right then copy this entire div tag and then let's just change the heading from about to company then appropriately change the name of the links as well all right then let's paste the div tag that we have copied again then just change the name of the heading and then get rid of this entire ul tag and all the ali tags that are within it we don't need it because under subscribe subheading we are going to have some uh input boxes where the user can enter his email id and press on the submit button create a p tag and let's have the class as my hyphen 1 to add 1 ram of margin top and bottom of this p tag and then write some text get below it and create a form tag let's have the method as post and action we can leave out you don't have to write anything just leave a hash symbol then get inside and create a field set tag and under this let's create input tag write the type attribute as text class attribute as my hyphen 1 then place holder attribute as name whatever we write under this placeholder attribute is displayed in the input box on the page by default so that the user gets an idea what values has to be entered in that input box then get outside it and create another input tag let's have the type as email then get down and create button tag and let's have the class as btn because we have already defined the btn class for the buttons so we just have to use the same class and then write the text for the button all right then get outside this div tag and let's create a new div tag write the class as mx hyphen 2 and id as insta feed we are going to use this id in the css later to refer to this div tag and make the appropriate stylings so anyways get inside and create a h6 tag and write the class as heading my hyphen 1 and font x1 and then we can write the heading as insta feed then get below and create a div tag and let's write the class as d hyphen flex hyphen r and create a anchor tag or the e tag and inside it create a img tag and write the source as img forward slash india.jpg you can use any other image that you want i'm just using some random images and in the anchor tag instead of having a hash symbol you can write the url of the appropriate insta post if you have that copy this entire a tag and paste it and then let's just change the name of the images so this will create two image in one row let's copy this entire div tag paste it again and then change the name of the images in this way we are going to get two rows of images similarly paste it once again this will be the third row of two images change the name of the images let's see in the browser alright so we have three rows of two images each let's add some margins get in the div tag which is defining the first row and add my hyphen one let's add this to all the three div tags defining the images all right now let's add one class to the img tag mx hyphen one to add some margin on the right and the left and let me just add this clasp to all the first images of three rows all right now get outside this footer tag and create a new div tag and let's write the class as d hyphen flex hyphen r so that whatever we define under this get stacked up next to each other in one row then space clear space justify hyphen content hyphen space hyphen between i think we have already defined this class before in the css even if we don't have defined this we will define it later this justify hyphen content hyphen space type in between class will make the elements inside this justified in a way that they have space in between them then id as copyright then get inside and create a p tag and let's have the class as d hyphen flex hyphen r then write the text ampersand copy semicolon this is the code for getting that copyright symbol then create a e tag and then write your domain name [Music] get outside the p tag create a e tag and in the link part right hash my page if you remember we have used this text as the id of the body you can see it here so whenever when we click on this link we will be scrolled up to the top of the body of our page then let's write the id press back to top and get inside and create an i tag let's have the class as fa space fa hyphen c h e v r o n hyphen up this will create a up angle sign then get outside the e tag and create a p tag and write the class as d hyphen flex hyphen r and write the text as template by create a e tag write any link that you want all right so the html part is complete we now need to move to the css part add one id to our footer so that we can use it to refer to the footer save it then let's refer to the footer using that id hash min hyphen footer since it is an id we need to use a hash symbol before the name of the id to refer to it border bottom one pixel solid white all right then hash main hyphen footer space dot linked list space ally margin bottom 5 pixels this will add some margin on the bottom of the link list that we have defined then hash main hyphen footer space dot linked list space ally colon last hyphen child this will remove the margin from the last child that is the last link or the last ally tag inside the linked list class and also the border as none and the padding is zero all right then refer to the footer again main hyphen footer space dot contact dot linked list space ally make sure you don't leave space in between the contact and dot link list since these two are siblings because these two classes have been used with the same element so they are kind of sibling if you leave a space in between that means you are trying to tell the computer that okay this contact is the parent of linked list but it is not like that they both are sibling so don't leave space there then comma main hyphen footer space dot contact dot linked list ally colon last hyphen child and you can see where we have used this linked list class along with the contact class position as relative padding left as 40 pixels all right then hash main hyphen footer space dot contact space ally space i display as block position as absolute top 0 left 0 this will align the eye tag starting from the top left corner width as 30 pixels and the font size as 16 pixels then text hyphen align center all right then again hash main hyphen footer space input comma main hype and footer space button this will style the input tag as well as the button that we have defined under the subheading subscribe then border 1 pixel space solid space white alright hash main hyphen footer space input width as 100 padding as 8 color as hash triple f that is the white color then background hyphen color hash triple five kind of gray color all right hash main hyphen footer space dot linked list space ally border color rgba 255 comma 255 comma 255 comma 0.2 all right hash main hyphen footer space ul space li space a color as hash triple f this will style all the links which are inside the footer alright then hash main hyphen footer space input colon focus border color hash 57 adc 4 this will change the border color of the input box when it is focused or when it is clicked all right then hash main hyphen footer greater than sign hash insta feed space img height as 2.5 ram all right then address since it is a tag we don't have to write a dot or a hash selector before it display as block margin 0 padding 0 font style normal and font weight as normal form comma field set margin 0 padding 0 this will remove all the margin and the padding then border none all right input comma button display block resize none outline none and color as inherit then font size inherit font family inherit then vertical align in the middle then let's define the part where we have used the copyright then hash copyright since it is an id then padding 20 pixels space 0 20 is for the top bottom 0 is for the left right then hash copyright space a that is all the anchor tags within this id color as white this will select all the elements within this id then margin as 0 padding as zero all right then let's dial the small back to top button hash back to top since it is the id that we have defined color hash triple f background color hash 57 adc4 z index 999 display inline hyphen block position fixed bottom 20 pixels right 20 pixels so this button will be placed starting from the bottom right corner width as 36 pixels height as 36 pixels line height 36 pixels font size one ram text align center opacity 0.3 you can see the back to top id here all right hash back to top space i display block width 100 height 100 line height inherit all right then hash back to top colon hover opacity one now we have the hovering effect as well so [Music] let's start with the media queries we are going to write media queries to add the responsiveness to the website so start with add media space screen space and space open bracket max width 1050 pixels so now whatever stylings we define under this will be visible or will be applicable when the size of the screen is below 1050 pixels hash insta feed display none we are trying to hide the insta feed section when the size of the screen falls below 1050 pixel because when the size of the screen falls below 1050 pixel you can see that all the section gets congested so it is better to get rid of one of the section alright when the size of the screen is greater than 1050 pixel the insta feed is displayed again [Music] hash main hyphen navbar space dot active space e this will select the active link in the main navigation bar then hash main hyphen navbar space a colon hover this will style the hovering effect of the links in the navigation bar hash main hyphen navbar space ally colon hover greater than sign a this will select the li tags which are inside the main navigation bar and will style the hovering effect over the li tag so when we hover over the li tag the effect will be on the link which is the direct child of the ally tag font size 1 ram let's copy all of these font definitions so that we can reduce the font size of all of them [Music] 0.9 one 1.2 2 4 dot container padding 5 ram exclamation mark important this will reduce the padding around the container you can see the size of the point reduces when the size of the screen falls below 1050 pixels [Music] add media space screen space and space open bracket max width 900 pixels so now whatever stylings we define under this will be applicable when the size of the screen is below 900 pixels so from 900 to 1050 pixels the above stylings will be applicable and below 900 this will be applicable let's copy all of these starting from the main navigation bar so that we can just remove the font size of them and let's reduce the margin around the logo so hash header space hash logo margin zero now let's reduce the font size 0.9 0.8 1.1 [Music] 1.8 3.2 all right so you can see the effects now let's take care of this text section because the first two columns are getting very congested so it is better to get rid of them and we have to make the images one in a row so let's start at media space screen space and space open bracket max width 750 pixels so from 750 to 900 pixels this above stylings will be applicable and from 900 to 1050 the first one will be applicable and below 750 whatever we are going to define will be applicable dot container padding 3 ram exclamation mark important this will overwrite any other padding definitions for this container class now let's change the flex properties so that we get one image in one row below 750 pixels so hash destinations space dot d hyphen flex hyphen r comma hash others hyphen issues space dot d hyphen flex hyphen r comma hash customize hyphen package space d hyphen flex hyphen r comma hash r hyphen block space d hyphen flex hyphen r so we have referenced all of the d hyphen flex hyphen r class which we have used in different sections now let's change the flex direction to column earlier the flex direction was row for this class and let's make it column so that the images or the elements are aligned or the images or the elements are displayed one in a row then maximum width as max content so that the width of its container elements becomes the maximum of the content align self center refresh so they are appearing one in a row but still the customize package section needs to get the full width of the screen they are displayed in half of the screen dot one underscore half bit 85 vw all right hash extra type and text display none so we are getting rid of the extra text in the text section so that the text is better looking now this looks pretty neat now hash main hyphen footer space hash company display none so this will hide the company section of the footer this is the company section now let's add the id company because we have used this id in the css all right let's copy this font definitions and reduce the font sizes as well 0.7 0.9 1.5 3 now add media space screen space end space open bracket max width [Music] 650 pixels [Music] dot container adding 2 rim this will reduce the padding further dot font hyphen x2 font size 1.6 ram hash main hyphen footer space hash subscribe display none so these styling will be applicable when the size of the screen is below 650 pixels let me just add the id subscribe here in the part where we have defined the subscribe button and the input boxes for it all right so you can see as we go on increase the size of the screen more and more parts of the footer becomes visible and when we reduce the size of the screen the parts of the footer gets hidden one by one i think everything is pretty much complete so if you like the video please hit like button and subscribe to the channel and also let me know in the comment section if you like this series or if there's anything that you didn't like about the series let me know in the comments so that i could work on it in my subsequent video series thanks for watching you

Channel: tanzTalks.tech

Views: 109

Keywords: tanzTalks, tanzTalks.tech, HTML Website Design, Responsive Website Design, Responsive Web Design, Web Design Tutorials, Web Design, HTML And CSS, How to make html and css website, how to make website using html and css, computer science, how to make responsive website, responsive website css, create responsive website, create website, build a responsive scrolling website with animations html5 and css 3, html css and bootstrap tour and travel websites, travel site html css

Id: QeakWL1D8dY

Length: 162min 12sec (9732 seconds)

Published: Fri Oct 15 2021