Web design Bangla tutorial # 13 (Portfolio#1 )

Web design Bangla tutorial # 13 (Portfolio#1 )


Welcome again in website design tutorial. In previous tutorial we have seen smooth scrolling. When I click on navigation , it is smooth scrolling. In this tutorial we will see how to create portfolio. For create portfolio it may take 2 or three tutorial. In this tutorial we will show how to create basic portfolio In next tutorial we will apply jquery. In here I already downloaded some images All images I have downloaded from avada theme. This images I have downloaded from avada theme. If you search in google by keyword “Avada theme” we will get it. From avada theme there has portfolio section I have downloaded all images from this section. Because all images are looking good. If you use Beautiful images it will make your website Beautiful. Let start portfolio section above on contact us section I am creating a div like we have created for about us section I am taking a div with class container-fluid After that In div we are going to use content-padding class which we have made before. I want to use another class portfolio here Then I am going to use row class In row I am going to take a h2 tag and going to give name Portfolio then going to take another row below In this row going to take a div with class col-sm-4 That means we will divide 12 grid into 3 pieces and we will set one image in 4 grids. that means in one row we will get 3 images. In here I am going to use bootstrap class thumbnail In thumbnail I going to take img tag going add image for image we have to write directory/image name of my image is a.jpg After save If we see output we are seeing an image after that .. Before go next step let me say about image all image size are equal here size of image here 940*600 then…. Now I am going to copy this div and past it in row several times 2,3,4,5, 6 going to change image name replace of a going to give name b then c,d , then e then f after save let see output There has one extra div let remove it after save not lets see output we will see all six images In all images you are seeing radius we will remove radius from thumbnail in thumbnail class I am going to add border-radius : 0 after save let see again Border radius has removed Now we will add some style for portfolio class I am going to add background here background : #333 text color #fff After save if we see output We are seeing portfolio section like this Now we will set a space below portfolio I am going to take a class with row name of class is section heading We will use it in every section heading For section heading I am going to type some style going to type text-transform : uppercase Then going to add a margin-bottom : 5% after save let see output we are showing space below portfolio No we don’t need portfolio uppercase , because we have class here for uppercase After save if we see output now, you are seeing our portfolio That was today’s tutorial

Comments

  1. Post
    Author

Leave a Reply

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