<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Arial, Helvetica, sans-serif;}
/* Style the header */
header {background-color: #666;padding: 30px;text-align: center;font-size: 35px;color: white;}
/* Create two columns/boxes that floats next to each other */
nav {float: left;width: 30%;height: 300px; background: #ccc;padding: 20px;}
/* Style the list inside the menu */
nav ul {list-style-type: none;padding: 0;}
article {float: left;padding: 20px;width: 70%;background-color: #f1f1f1;height: 300px;}
/* Clear floats after the columns */
section::after {content: "";display: table;clear: both;}
/* Style the footer */
footer {background-color: #777;padding: 10px;text-align: center;color: white;}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {nav, article {width: 100%;height: auto;}
}
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>
<header>
<h4>G.S.S.S, KHOKHAR</h4>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<h1>GSSS KHOKHAR</h1>
<p align="justify">ਸਰਕਾਰੀ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ, ਖੋਖਰ ਸ੍ਰੀ ਮੁਕਤਸਰ ਸਾਹਿਬ 1964 ਈ. ਵਿਚ ਪ੍ਰਾਇਮਰੀ ਸਕੂਲ ਵੱਜੋਂ ਸਥਾਪਿਤ ਹੋਇਆ ਸੀ ਜੋ ਕਿ 2001 ਈ. ਵਿਚ ਅਪਗ੍ਰੇਡ ਕਰਕੇ ਸੀਨੀਅਰ ਸੈਕੰਡਰੀ ਸਕੂਲ ਬਣਾ ਦਿੱਤਾ ਗਿਆ. 2001 ਤੋਂ ਲੈ ਕੇ ਹੁਣ ਤਕ ਇਸ ਸਕੂਲ ਦਾ ਇਤਿਹਾਸ ਸ਼ਾਨਦਾਰ ਰਿਹਾ ਹੈ। ਅਕਾਦਮਿਕ ਖੇਤਰ ਤੋਂ ਲੈ ਕੇ ਖੇਡਾਂ, ਸਭਿਆਚਾਰਕ ਗਤੀਵਿਧੀਆਂ ਅਤੇ ਸਹਿ-ਵਿਦਿਅਕ ਗਤੀਵਿਧੀਆਂ ਵਿਚ ਇਸ ਸਕੂਲ ਨੇ ਸ਼ਾਨਦਾਰ ਪ੍ਰਾਪਤੀਆਂ ਕੀਤੀਆਂ ਹਨ.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Layout Elements
HTML has several semantic elements that define the different parts of a web page:
<header>- Defines a header for a document or a section<nav>- Defines a set of navigation links<section>- Defines a section in a document<article>- Defines an independent, self-contained content<aside>- Defines content aside from the content (like a sidebar)<footer>- Defines a footer for a document or a section<details>- Defines additional details that the user can open and close on demand<summary>- Defines a heading for the<details>element
