运行 ❯
获取您
自己的
网站
×
更改方向
保存代码
更改主题，深色/浅色
前往 Spaces
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .column { float: left; width: 33.3%; margin-bottom: 16px; padding: 0 8px; } @media screen and (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> </body> </html>
