उदाहरण
अबाउट पेज बनाने के लिए, निम्न कोड का उपयोग करें:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> html { box-sizing: border-box; } body { font-family: monospace, serif, sans-serif; margin: 0px; padding: 0px; } h1 { text-align: center; background-color: rgb(108, 18, 131); color: white; padding-top: 40px; padding-bottom: 40px; margin-top: 0px; } .teamContainer { margin-left: 10%; } img { width: 100%; height: 200px; } *, *:before, *:after { box-sizing: inherit; } .teamColumn { display: inline-block; width: 300px; height: 400px; margin-bottom: 16px; padding: 0 8px; } @media screen and (max-width: 650px) { .teamColumn { display: block; } } .teamCard { background-color: rgb(162, 162, 255); text-align: center; font-size: 20px; } .personContainer { padding: 0 16px; } .personContainer::after, .teamContainer::after { content: ""; clear: both; display: table; } .Designation { color: rgb(15, 0, 100); font-weight: bolder; font-size: 20px; } .contact { border: none; outline: 0; display: inline-block; padding: 12px; color: white; font-weight: bolder; background-color: rgb(78, 0, 102); text-align: center; cursor: pointer; width: 100%; } .contact:hover { background-color: #555; } </style> </head> <body> <h1>About Us</h1> <div class="teamContainer"> <div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/839011/pexels-photo839011.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <div class="personContainer"> <h3>Jane Doe</h3> <p class="Designation">CTO</p> <p><button class="contact">Contact</button></p> </div> </div> </div> <div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/614810/pexels-photo614810.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <div class="personContainer"> <h3>Mike Ross</h3> <p class="Designation">Front End Developer</p> <p><button class="contact">Contact</button></p> </div> </div> </div> <div class="teamColumn"> <div class="teamCard"> <img src="https://images.pexels.com/photos/736716/pexels-photo736716.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/> <div class="personContainer"> <h3>John Doe</h3> <p class="Designation">FullStack Developer</p> <p><button class="contact">Contact</button></p> </div> </div> </div> </div> </body> </html>
आउटपुट
उपरोक्त कोड निम्न आउटपुट बनाएगा:
