Our team html css

Our Team Section Design using HTML and CSS

In this article you will learn how to create Our Team Section design using HTML and CSS. Even if you are a beginner, you can easily create a Our Team Section by following the tutorial. First I designed the webpage and arranged the three images along the row. Normally the images are round and all the information on the card is hidden. Watch its live demo to learn how it works.Whenever you click on these images or move your mouse over them, the images move upwards. As a result, all the information can be seen below. With this the image will take the shape of a square to a square. In the description I added names, some basic text and three social media icons. Follow the tutorial below to know step by step how I have created this Our Team Section design using HTML and CSS.

Step 1: Basic structure of Team Section

I have created the basic structure of this profile card with the help of the code below. I have basically made a round box in which the images can be seen. This box is 220px in width and height and I have used border-radius to make it round.

 class="main">  class="profile-card">   

 *  margin: 0; padding: 0; box-sizing: border-box; font-family: Exo; > .main width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #0c5db9; > .profile-card position: relative; font-family: sans-serif; width: 220px; height: 220px; background: #fff; padding: 30px; border-radius: 50%; box-shadow: 0 0 22px #3336; transition: .6s; margin: 0 25px; > 

Now I have added the hover effect on the round box with the help of CSS code. Whenever you click on that round box with the mouse, the box will be square and its height will be 260 px .

 .profile-card:hover border-radius: 10px; height: 260px; > 

Step 2: Add an image to Our Team Design

 .profile-card .img position: relative; width: 100%; height: 100%; transition: .6s; z-index: 99; > .img img width: 100%; border-radius: 50%; box-shadow: 0 0 22px #3336; transition: .6s; > 

Now with the help of this css I have added hover effect in this image. Whenever you click on this image, the image will move upwards along the y axis . With this the image will take any shape from round to four.

 .profile-card:hover .img transform: translateY(-60px); > .profile-card:hover img border-radius: 10px; > 

Step 3: Add information to the profile box

Now using this code I have added some descriptions. In the description I first added a name, then added to his work or profession. You can add some other text here if you want. I have used font-size: 21px to increase the size of the name used here.

 class="caption"> Vin Diesel Senior App Developer  

 .caption text-align: center; transform: translateY(-80px); opacity: 0; transition: .6s; > .profile-card:hover .caption opacity: 1; > .caption h3 font-size: 21px; font-family: sans-serif; > .caption p font-size: 15px; color: #0c52a1; font-family: sans-serif; margin: 2px 0 9px 0; > 

Step 4: Add social icons in our team section

Now is the time to add three icons to social media. I have added icons to social media here on Facebook, Instagram and Twitter. You can add more icons of your choice here if you want.

 class="social-links">  href="#"> class="fab fa-facebook">  href="#"> class="fab fa-instagram">  href="#"> class="fab fa-twitter">  

 .caption .social-links a color: #333; margin-right: 15px; font-size: 21px; transition: .6s; > .social-links a:hover color: #0c52a1; > 

Step 5: Create more cards to create our team template

Now I have created two more designs like the one above. I created my second profile card using below HTML. Here we have changed only the image and the basic description, the rest is as it was. You do not need to use a separate css for this.

 class="profile-card">  class="img">  src="team-2.jpg">   class="caption"> David Corner Front End Developer  class="social-links">  href="#"> class="fab fa-facebook">  href="#"> class="fab fa-instagram">  href="#"> class="fab fa-twitter">    

I created the third profile card using the following HTML. Here too I have used another image and changed the description.

 class="profile-card">  class="img">  src="team-3.jpg">   class="caption"> Tom Cruise Full Stact Developer  class="social-links">  href="#"> class="fab fa-facebook">  href="#"> class="fab fa-instagram">  href="#"> class="fab fa-twitter">    

Now I have created a css team section by combining these three profile cards together. Currently it is not Responsive. If you want to make it responsive, you can follow me on Instagram(@foolishdeveloper). I will upload this responsive version in a few days. Hopefully from this article you will learn how to create our team section design. Be sure to comment on how it looks. You can visit my blog for more tutorials like this. 😊
https://www.foolishdeveloper.com/

Источник

Our Team Section Design using HTML and CSS

In this article, you will learn how to create Our Team Section Design using HTML and CSS. Earlier I created Responsive Team Section using Bootstrap.

Currently, this type of design is used in different personal, business websites. This enhances the quality of the website as well as user satisfaction. Using this type of our team HTML CSS, you can beautifully arrange the basic information of the members of your company or group with pictures.

I have added a hover effect in this design which will catch your attention. Creative Our Team Section Design I took with the help of HTML and CSS. Below I have given a demo that will help you to know how this CSS team page works.

First I designed the webpage then placed the three images here in a circular motion at a certain distance. I have used the border radius of CSS code to make the images round.

Under normal circumstances, only images can be seen. Whenever you click on that round image, the images will go up and the rest of the information will be seen below. In addition, the image will be round to rectangular in shape. For information here I have used names, some basic descriptions, and three social media icons.

Our Team Section using HTML and CSS

Follow your full tutorial if you want to know how to create a Creative Our Team Section. HTML code helps to add basic information and images. Then with the help of CSS code, I designed it completely. However, it is not responsive. You can already see my other designs if you want to be responsive.

You need to have an idea about basic HTML and CSS to create this project. If you want the source code, use the download button at the bottom of the article.

Step 1: Create the basic structure of Team Section

Using the HTML and CSS code below I have created the basic structure of the team section in this response. First I designed the webpage a bit and created a round background of profile cards. The width and height of this background are 220px and the background color is white.

Источник

How To Create Responsive Our Team Section Using Html Css | Our Team Page Using Html Css

Hey friends, today in this blog you’ll learn How To Create Responsive Our Team Section Using Html Css | Our Team Page Using Html Css . We’ll use Html & Css to create this Our Team Section . Earlier I’ve shared a blog on Login Form Using Html Css Js | Password Show and Hide Using Javascript .

This Our Team Page ( Our Team Section ) Is Completely responsive For All Devices Like Mobile , Laptop , Tablets etc. In This Login Form Us will Show And Hide Password with the help oh javascript.

If You have any Problem so, I Also Created a full video tutorial on this Responsive Our Team Section you can see this tutorial .

Video Tutorial of ” Responsive Our Team Section “

Our Team Page Using Html Css [Source Codes]

To create this Our Team Page ( Our Team Section ) First, you need to create Twoe files, HTML File And CSS File. After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Responsive Our Team Section Using Html Css from the given download button.

# HTML CODE

First, create a Html file (index.html) and paste the given codes in your CSS file.

Our Team Page 
 
 
Steven 
CEO & Founder
 
Some text goes here that describes about team members
 
abc@gmail.com