#142 Trial Section, Footer & Congratulations
Articles Blog

#142 Trial Section, Footer & Congratulations

December 5, 2019


Just one point before we continue you would have noticed does ID change the signing of the background image of the final sites. So if I increase the width of the screen you’ll see that the image will adjust to the dimensions of the Jumbotron at all times. From the very beginning even with a very small width unlike our image that will start adjusting the width only when we go beyond the original width of the picture and then we can see that the with is going to start stretching and the height is going to stretch as well to keep the original aspect ratio of our picture. But if you look at the final Web site with the teeny does I applied both the height and width adjusts at all times in all device screens but we will lose the aspect ratio. So if you want to do like this all you need to do is go back to the styling of the Jumbotron get rid of the sense a sense of values as we are about okay and change the background size to 100 percent vertical horizontally and 100 percent vertically. So this means thats the background image is going to adjust both horizontally and vertically to our Jumbotron all the time. OK so if we try this we can get something like that. OK. So you can keep it like this if you want. Otherwise you can go back to the cover value. OK I’m going to keep it like this for now. OK . And let’s move to the trial section. So we’re going to add a header and a couple of pictures. OK so this goes to our index of HMO file. So following our Jumbotron we’re going to create another day. OK. We’re going to give it a glass trial and we’re going to create a container inside the Stiv. So it’s a div of glass container. OK so we’re going to place our head. So let’s copy this text right now. And also we’re going to add a couple of pictures. OK. Let’s go to the media Web sites and look for these two pictures. So coming up with the first one I’m going to type available on the Opsahl and go with the first link. OK let’s look on the license. So it says here that this image doesn’t meet the threshold of or is non-U.S. for the copyright protection so you can use it for free. So let’s copy the URL from there and basically. OK. And let’s look for the other one gets it’s on the or on Google Play. OK. Let’s go for the first one. And again if you look on the licensing. Same thing this image is most eligible for copyrights. So if you go to the it just go back and Aykroyd’s copy image Jarrell and then pases in the source space. Now if we refresh we can see our two pictures there will need to style them so that we can resize them. OK. We’re going to go to our siestas file and play some styling just before the media queries. OK just there. So first of all we want to censor the elements inside the trial section and also we’re going to be adding somebody. OK. So we’re going to access this section using the trial class. OK . So two sensor elements will use the text align property as we said to Senza. And we’re going to be adding some budding there. OK so starting with the top but putting. We’re going to go for 20 pixels the right unless pilings we’re going to go for zero. And the bottom one we’re going to go for 40 pixels . OK. And text color is going to be black. So he said the color property to black. OK. Now everything is censored. All we need to resize these pictures so we can access the pictures using the class and then the image tag. OK so we’ll set the width of the pictures to 200 pixels OK. And the height to 70. OK. Also we’ll create some margin to create the space between the pictures. We’re going to go for a margin of 20 big cells and it’s going to add space between the pictures and also on the top and bottom as well. OK. OK. Now if we look at devices under 400 A.C. pixels will notice does the couple of images. They get small. OK. So we’re going to go back to the media queries all the vices and the pixels. We will access the images inside the elements of glass trial. It will change both the width to half of the window it used before and height to half of the first sight as well. OK. Well said the margin. Two of the first mine as well. OK. And that’s what we get . We should probably change this picture. OK. It’s not the same quality as the one we want. So let’s go back to Wikimedia and look again for all available on the up. So this one could be the real and pasted in a slide image in the index file. OK. This looks better. All right finally let’s add a footer for our web sites. So following the trial section going to create a photo. So we’ll create a div of class photo. OK. So inside the div we’re going to create a container or div of class container. OK. Inside this div will displace a paragraph. So let’s write some checks there. We need a sample and see therefore the copyrights. So there’s going to be ampersand. Copy. OK. And McQuillan. And then you can write or text develop. Wait. OK. Now let’s style our water. We’re going to go to the file just before the media queries. We can do the footer smiling smile with a gain access thief would say using the photo glass and we’ll set the background color to this nice gray color. OK. And we said the font size to 15 pixels. OK. And let’s add some padding. So soapland what I’m going to go for 10 pixels gay and zero for the left and right so it’s OK. Let’s check. Everything is fine. Sizing from large screens is decrease the width of the screen . OK. Everything looks fine. And our Web site is now complete. Congratulations. You have just created a very nice landing page using ASML CSSA and bootstrap. You have a chance to review and proxies many of the skills you have learned in those chapters. The websites you have built is completely responsive and will adjust to any device size. If you change the design or if you make it something completely different then I would be very interested in seeing what you have done so please share with me and other students. I look forward to seeing you finishing other projects and becoming a highly skilled and professional web developer .

Leave a Reply

Your email address will not be published. Required fields are marked *