This blog will share another simple bootstrap snippet based on creating an Our team section layout design in bootstrap. I have created this snippet with a 3d perspective animation on hover. I have shared a couple of bootstrap snippets before, and if you are interested, you can visit those.
Meet the team section or page is an essential part of any website design, and it plays a vital role in the company's progress. As we know, human contact is an integral part of any company because it creates a personal touch to the company and lends trust to the consumers. The team section or page is ubiquitous in web design and firms, but other industries are also using this section nowadays. This particular section builds the credibility of a company and helps to stands out from other companies.
Let's talk about the HTML markup of this snippet. First of all, I have taken the bootstrap 'container' class. It will help to provide a default margin padding to the project we are making. After that, I have provided an h1 tag, which will act as the section header. After that, I took another bootstrap class named 'row,' which will help to hold the columns inside it. Now it's time to take the bootstrap column grid, and for three images, I have taken the 'col-md-4' column grid. Inside each column grid, I have taken another custom class named 'single-team' and created two separate div named 'team-img' and 'team-text.' the first div will hold the image, and the second div will hold the text related to that image. I have added an individual class to each 'team-img' div because I will add a separate background image for every box. For the 'team-text' div, I have provided one h2 tag for a person's name, one h4 title for designation, and a p tag and added some dummy text for simple bio. That's all for the HTML markup, and now we will move to the CSS. If you want to have a clear idea about this project, I will highly recommend you follow the video below from start to finish.
I hope you have watched the entire video and got some idea about the code I used here. Let's discuss the CSS styling is used here. First of all, I provided a background color to the body and have taken 'Poppins' as the primary font for the snippet. You can use any google font you want. Then I styled the section header with some basic CSS styling. The snippet initially there will be no padding from the top for the project.
For this reason, I have given a padding-top value to the bootstrap 'container' class. With the padding, the snippet remains in the middle of the webpage. Later I have given position relative and perspective value to the 'single-team' class because I will create an excellent 3d perspective hover effect on each of the boxes. After some basic styling, I have given each team box an individual background image. Then I have given the 'team-text' div an absolute position value, transform-style, and transform value so that whenever we hover over the picture, it creates a 3d perspective animation, and the text shows up. The rest of the code is relatively self-explanatory. Without further explanation, I am providing the codes so that you can have a look at it by yourself.
You may also like:
Our team section layout design in bootstrap (source code)
To create this project, you have to add bootstrap CSS to your project. I have taken bootstrap three versions and linked the CDN version of it. You can download the bootstrap from their official website and link it to your project. First, you have to create an HTML and CSS file and attach the CSS file to your HTML file. Later, please copy the code below and paste it into a separate file.
ADD HTML
ADD CSS
Post a Comment
Please Do not Enter any spam link in the comment box