Dark code

 HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JAVA JQUERY   

Image Text
Tutorials  References  Exercises  Videos Pro Get Certified Free Website Log in
Image Text Blocks
Transparent Image Text
Full Page Image
Form on Image
Hero Image
Blur Background Image NEW
Change Bg on Scroll

How TO - "Meet The Team" Page

Side-by-Side Images We just launched
W3Schools videos
Rounded Images
Avatar Images
Responsive Images ❮ Previous Next ❯
Center Images
Thumbnails
Border Around Image Learn how to create responsive "Meet The Team" page with CSS.
Meet the Team Explore now
Sticky Image
"Meet the team" pages/sections are often used to list the employers in a firm, with specified contact
Flip an Image
information:
Shake an Image COLOR PICKER
Portfolio Gallery
Portfolio with Filtering Meet The Team
Image Zoom
Image Magnifier Glass
Image Comparison Slider


Get certified
by completing
a course today!
Jane Doe Mike Ross John Doe
school
w3 s

CEO & Founder Art Director Designer

2
CE

02
Phasellus eget enim eu Phasellus eget enim eu Phasellus eget enim eu TI 2

R
FI .
ED

lectus faucibus vestibulum. lectus faucibus vestibulum. lectus faucibus vestibulum.

[email protected] [email protected] [email protected]

Get started

Contact Contact Contact

CODE GAME

Try it Yourself »

How To Create Meet The Team Pages

Step 1) Add HTML:

Example
<div class="row">
Play Game
<div class="column">
<div class="card">
<img src="img1.jpg" alt="Jane" style="width:100%">
<div class="container">
<h2>Jane Doe</h2>
<p class="title">CEO &amp; Founder</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>[email protected]</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>

<div class="column">
<div class="card">
<img src="img2.jpg" alt="Mike" style="width:100%">
<div class="container">
<h2>Mike Ross</h2>
<p class="title">Art Director</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>[email protected]</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>

<div class="column">
<div class="card">
<img src="img3.jpg" alt="John" style="width:100%">
<div class="container">
<h2>John Doe</h2>
<p class="title">Designer</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>[email protected]</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</div>

Step 2) Add CSS:

Example
/* Three columns side by side */
.column {
float: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens */
@media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}

/* Add some shadows to create a card effect */

.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Some left and right padding inside the container */

.container {
padding: 0 16px;
}

/* Clear floats */
.container::after, .row::after {
content: "";
clear: both;
display: table;
}

.title {
color: grey;
}

.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}

.button:hover {
background-color: #555;
}

Try it Yourself »

❮ Previous Next ❯

Report Error Spaces Pro Buy Certificate

Top Tutorials Top References Top Examples Get Certified

HTML Tutorial HTML Reference HTML Examples HTML Certificate
CSS Tutorial CSS Reference CSS Examples CSS Certificate
JavaScript Tutorial JavaScript Reference JavaScript Examples JavaScript Certificate
How To Tutorial SQL Reference How To Examples Front End Certificate
SQL Tutorial Python Reference SQL Examples SQL Certificate
Python Tutorial W3.CSS Reference Python Examples Python Certificate
W3.CSS Tutorial Bootstrap Reference W3.CSS Examples PHP Certificate
Bootstrap Tutorial PHP Reference Bootstrap Examples jQuery Certificate
PHP Tutorial HTML Colors PHP Examples Java Certificate
Java Tutorial Java Reference Java Examples C++ Certificate
C++ Tutorial Angular Reference XML Examples C# Certificate
jQuery Tutorial jQuery Reference jQuery Examples XML Certificate

FORUM | ABOUT

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly
reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie
and privacy policy.

Copyright 1999-2022 by Refsnes Data. All Rights Reserved.

W3Schools is Powered by W3.CSS.