In this example code you will learn how to create a responsive blog layout with CSS To create responsive blog layout with CSS, the code is as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } nav { font-size: 20px; background-color: rgb(136, 22, 182); color: #cccccc; height: 75px; } ul { position: fixed; right:10px; } ul li { display: inline; padding-right: 30px; font-weight: 500; color: rgb(251, 255, 0); } .logo { width: 75%; margin-left: auto; margin-right: auto; color: white; float: left; font-size: 30px; padding-left: 20px; padding-top: 20px; } .blog { margin-top: 20px; width: 75%; margin-left: auto; margin-right: auto; height: 400px; } .post { margin-top: 20px; float: left; } .blogHeader { font-size: 36px; margin-bottom: 20px; } .links { float: right; } .links li { color: black; } footer { color: white; position: fixed; width: 100%; bottom: 0; margin-left: auto; margin-right: auto; font-size: 30px; height: 100px; padding: 20px; background-color: rgb(9, 141, 101); text-align: center; } </style> </head> <body> <nav> <div class="logo"> ↷ LOGO ↶ </div> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav> <div class="blog"> <div class="post"> <div class="blogHeader"> <h1>Blog Heading</h1> </div> <div class="blog-body"> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt non neque eos eaque veritatis praesentium. </p> </div> </div> <div class="links"> <ul> <li>BLOG 2</li> <li>BLOG 3</li> </ul> </div> </div> <footer> Copyright © </footer> </body> </html> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.