Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <meta charset="utf-8"> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <style> body { font-size: 0.9em; } #header, #footer { padding: 10px; color: white; background-color: black; text-align: center; } h2 { text-align: center } h3 { text-align: right; padding-right: 20px; } div.content { margin: 5px; padding: 20px; background-color: lightgrey; } .article { margin: 20px; padding: 10px; background-color: white; } #header-menu ul { padding: 0; } #header-menu ul li { display: inline; margin: 5px; } </style> </head> <body> <div id="header"> <h1>LaravelSoft</h1> </div> <div id="header-menu"> <ul> <li> <a href="https://www.w3docs.com/learn-html.html">Books</a> </li> <li> <a href="https://www.w3docs.com/quiz/">Quizzes</a> </li> <li> <a href="https://www.w3docs.com/snippets">Snippets</a> </li> <li> <a href="https://www.w3docs.com/tool/">Tools</a> </li> <li> <a href="https://www.w3docs.com/string-functions/">String Functions</a> </li> </ul> </div> <div class="content"> <h2>Article Section</h2> <div class="article"> <h3>Article Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at. </p> </div> <div class="article"> <h3>News Article</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p> </div> </div> <div id="footer"> <p>© 2020 All rights reserved.</p> </div> </body> </html>