Difference between revisions of "Team:Manchester/Team"

Line 4: Line 4:
 
<html>
 
<html>
  
 +
<head>
 +
<style>
 +
html {
 +
  box-sizing: border-box;
 +
}
  
 +
*, *:before, *:after {
 +
  box-sizing: inherit;
 +
}
  
 +
.column {
 +
  float: left;
 +
  width: 33.3%;
 +
  margin-bottom: 16px;
 +
  padding: 0 8px;
 +
}
 +
 +
@media (max-width: 650px) {
 +
  .column {
 +
    width: 100%;
 +
    display: block;
 +
  }
 +
}
 +
 +
.card {
 +
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
}
 +
 +
.container {
 +
  padding: 0 16px;
 +
}
 +
 +
.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;
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
 +
<h2>Responsive "Meet The Team" Section</h2>
 +
<p>Resize the browser window to see the effect.</p>
 +
<br>
 +
 +
<div class="row">
 +
  <div class="column">
 +
    <div class="card">
 +
      <img src="/w3images/team1.jpg" alt="Jane" style="width:100%">
 +
      <div class="container">
 +
        <h2>Jane Doe</h2>
 +
        <p class="title">CEO & Founder</p>
 +
        <p>Some text that describes me lorem ipsum ipsum lorem.</p>
 +
        <p>example@example.com</p>
 +
        <p><button class="button">Contact</button></p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
 +
  <div class="column">
 +
    <div class="card">
 +
      <img src="/w3images/team2.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>example@example.com</p>
 +
        <p><button class="button">Contact</button></p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="column">
 +
    <div class="card">
 +
      <img src="/w3images/team3.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>example@example.com</p>
 +
        <p><button class="button">Contact</button></p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
</div>
 +
 +
<!--
 
<div class="column full_size" >
 
<div class="column full_size" >
  
Line 37: Line 141:
 
</div>
 
</div>
  
 +
//-->
  
−
 
+
</body>
−
</div>
+
 
</html>
 
</html>
 
{{:Team:Manchester/Templates/Footer}}
 
{{:Team:Manchester/Templates/Footer}}

Revision as of 15:20, 23 June 2017

HOME
TEAM
PROJECT
Overview
Description
Results
Demonstration
Medal Criteria
Achievement
NOTEBOOK
Protocols
Diary
Lab Book
InterLab
Measurement
PARTS
Parts
Basic Parts
Composite Parts
Improved Parts
Part Collection
HUMAN PRACTICES
Silver HP
Water Industry
Integrated and Gold
Intellectual Property
Public Engagement
Entrepreneurship
MODELLING
Overview
D. O. Experiment
Continuous Culture
PHO Operon
JUDGING FORM

Responsive "Meet The Team" Section

Resize the browser window to see the effect.


Jane

Jane Doe

CEO & Founder

Some text that describes me lorem ipsum ipsum lorem.

example@example.com

Mike

Mike Ross

Art Director

Some text that describes me lorem ipsum ipsum lorem.

example@example.com

John

John Doe

Designer

Some text that describes me lorem ipsum ipsum lorem.

example@example.com