meet the team html css template

Solutions on MaxInterview for meet the team html css template by the best coders in the world

showing results for - "meet the team html css template"
17 May 2018
1<!--
2It's a very long answer I know :)
3Source-W3 Schools
4-->
5<!DOCTYPE html>
6<html>
7  <head>
8    <style>
9      /* Three columns side by side */
10.column {
11  float: left;
12  width: 33.3%;
13  margin-bottom: 16px;
14  padding: 0 8px;
15}
16
17/* Display the columns below each other instead of side by side on small screens */
18@media screen and (max-width: 650px) {
19  .column {
20    width: 100%;
21    display: block;
22  }
23}
24
25/* Add some shadows to create a card effect */
26.card {
27  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
28}
29
30/* Some left and right padding inside the container */
31.container {
32  padding: 0 16px;
33}
34
35/* Clear floats */
36.container::after, .row::after {
37  content: "";
38  clear: both;
39  display: table;
40}
41
42.title {
43  color: grey;
44}
45
46.button {
47  border: none;
48  outline: 0;
49  display: inline-block;
50  padding: 8px;
51  color: white;
52  background-color: #000;
53  text-align: center;
54  cursor: pointer;
55  width: 100%;
56}
57
58.button:hover {
59  background-color: #555;
60}
61    </style>
62  </head>
63  <body>
64    <div class="row">
65  <div class="column">
66    <div class="card">
67      <img src="img1.jpg" alt="Jane" style="width:100%">
68      <div class="container">
69        <h2>Jane Doe</h2>
70        <p class="title">CEO &amp; Founder</p>
71        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
72        <p>example@example.com</p>
73        <p><button class="button">Contact</button></p>
74      </div>
75    </div>
76  </div>
77
78  <div class="column">
79    <div class="card">
80      <img src="img2.jpg" alt="Mike" style="width:100%">
81      <div class="container">
82        <h2>Mike Ross</h2>
83        <p class="title">Art Director</p>
84        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
85        <p>example@example.com</p>
86        <p><button class="button">Contact</button></p>
87      </div>
88    </div>
89  </div>
90
91  <div class="column">
92    <div class="card">
93      <img src="img3.jpg" alt="John" style="width:100%">
94      <div class="container">
95        <h2>John Doe</h2>
96        <p class="title">Designer</p>
97        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
98        <p>example@example.com</p>
99        <p><button class="button">Contact</button></p>
100      </div>
101    </div>
102  </div>
103</div>
104  </body>
105</html>