Layout Design using CSS
Example:
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Arial; | |
| padding: 10px; | |
| background: #f1f1f1; | |
| } | |
| .header { | |
| padding: 30px; | |
| text-align: center; | |
| background: white; | |
| } | |
| /* Header/Blog Title */ | |
| .header img { | |
| max-width:100%; | |
| height:auto; | |
| } | |
| /* Style the top navigation bar */ | |
| .topnav { | |
| overflow: hidden; | |
| background-color: #333; | |
| } | |
| /* Style the topnav links */ | |
| .topnav a { | |
| float: left; | |
| display: block; | |
| color: #f2f2f2; | |
| text-align: center; | |
| padding: 14px 16px; | |
| text-decoration: none; | |
| } | |
| /* Change color on hover */ | |
| .topnav a:hover { | |
| background-color: #ddd; | |
| color: black; | |
| } | |
| /* Left column */ | |
| .leftcolumn { | |
| float: left; | |
| width: 75%; | |
| } | |
| /* Right column */ | |
| .rightcolumn { | |
| float: left; | |
| width: 25%; | |
| background-color: #f1f1f1; | |
| padding-left: 20px; | |
| } | |
| /* Fake image */ | |
| .fakeimg { | |
| background-color: #aaa; | |
| width: 100%; | |
| padding: 20px; | |
| } | |
| /* Add a card effect for articles */ | |
| .card { | |
| background-color: white; | |
| padding: 20px; | |
| margin-top: 20px; | |
| } | |
| /* Clear floats after the columns */ | |
| .row:after { | |
| content: ""; | |
| display: table; | |
| clear: both; | |
| } | |
| /* Footer */ | |
| .footer { | |
| padding: 20px; | |
| text-align: center; | |
| background: #ddd; | |
| margin-top: 20px; | |
| } | |
| /* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */ | |
| @media screen and (max-width: 800px) { | |
| .leftcolumn, .rightcolumn { | |
| width: 100%; | |
| padding: 0; | |
| } | |
| } | |
| /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */ | |
| @media screen and (max-width: 400px) { | |
| .topnav a { | |
| float: none; | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <img src="DKI1.JPG"> | |
| </div> | |
| <div class="topnav"> | |
| <a href="#"><img src="home.jpg" height="30" width="30"></a> | |
| <a href="#"> Home</a> | |
| <a href="#">About</a> | |
| <a href="#">Course</a> | |
| <a href="#" style="float:right">Contract</a> | |
| </div> | |
| <div class="row"> | |
| <div class="leftcolumn"> | |
| <div class="card"> | |
| <h2>TITLE HEADING</h2> | |
| <h5>Title description, Dec 7, 2017</h5> | |
| <img src="dimage.png" style="max-width:100%;height:auto;"> | |
| <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> | |
| </div> | |
| <div class="card"> | |
| <h2>TITLE HEADING</h2> | |
| <h5>Title description, Sep 2, 2017</h5> | |
| <div class="fakeimg" style="height:200px;">Image</div> | |
| <p>Some text..</p> | |
| <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> | |
| </div> | |
| </div> | |
| <div class="rightcolumn"> | |
| <div class="card"> | |
| <h2>About Us</h2> | |
| <div class="fakeimg" style="height:100px;">Image</div> | |
| <p>Some text about me in culpa qui officia deserunt mollit anim..</p> | |
| </div> | |
| <div class="card"> | |
| <h3>Popular Post</h3> | |
| <marquee direction="up" scrollamount="8"> | |
| <p><img src="dca.png"></p> | |
| <p><img src="dtp.png"></p> | |
| <p><img src="cfa.png"></p></marquee> | |
| </div> | |
| <div class="card"> | |
| <h3>Follow Me</h3> | |
| <p><img src="fb.jpg"> <img src="insta.jpg"> <img src="twit.jpg"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <h2>Footer</h2> | |
| </div> | |
| </body> | |
| </html> | |
Header Section: The header section is that particular place either at the top of the Website or just below a top navigation menu. It contains either name of the Website or the logo of the Website.
Example:
WE use following code for CSS.
| .header { | |
| padding: 30px; | |
| text-align: center; | |
| background: white; | |
| } | |
| /* Header/Blog Title */ | |
| .header img { | |
| max-width:100%; | |
| height:auto; | |
| } |
WE use following code for HTML.
| <div class="header"> | |
| <img src="DKI1.JPG"> | |
| </div> |
Navigation Menu: A Navigation Bar/Menu is basically a list of links that allows visitor to navigate through the website. It is comfortably with easy access linked pages.
Example:
WE use following code for CSS.
| /* Style the top navigation bar */ | |
| .topnav { | |
| overflow: hidden; | |
| background-color: #333; | |
| } | |
| /* Style the topnav links */ | |
| .topnav a { | |
| float: left; | |
| display: block; | |
| color: #f2f2f2; | |
| text-align: center; | |
| padding: 14px 16px; | |
| text-decoration: none; | |
| } | |
| /* Change color on hover */ | |
| .topnav a:hover { | |
| background-color: #ddd; | |
| color: black; | |
| } |
WE use following code for HTML.
| <div class="topnav"> | |
| <a href="#"><img src="home.jpg" height="30" width="30"></a> | |
| <a href="#"> Home</a> | |
| <a href="#">About</a> | |
| <a href="#">Course</a> | |
| <a href="#" style="float:right">Contract</a> | |
| </div> |
Content Section: The content section is the main body of the website. The user can divide the content section in number of columns layout.
0 Comments