|
|
| Line 109: |
Line 109: |
| | </div> | | </div> |
| | </nav> | | </nav> |
| − |
| |
| − |
| |
| − | <style>
| |
| − | html {
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | *, *:before, *:after {
| |
| − | box-sizing: inherit;
| |
| − | }
| |
| − |
| |
| − | .column {
| |
| − | float: left;
| |
| − | width: 20.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;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | </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>
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="column">
| |
| − | <div class="card">
| |
| − | <img src="https://static.igem.org/mediawiki/2017/9/91/EastChapelHillDay4Top.png" 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>
| |
| − |
| |
| | | | |
| | | | |
