You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.2 KiB
92 lines
2.2 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Document</title> |
|
|
|
<style> |
|
html, |
|
body { |
|
height: 100%; |
|
} |
|
body { |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin: 0; |
|
} |
|
.header-menu, |
|
footer { |
|
display: flex; |
|
align-items: center; |
|
width: 100%; |
|
} |
|
.header-menu { |
|
justify-content: flex-end; |
|
height: 60px; |
|
background: #1c87c9; |
|
color: #fff; |
|
} |
|
h2 { |
|
margin: 0 0 8px; |
|
} |
|
ul li { |
|
display: inline-block; |
|
padding: 0 10px; |
|
list-style: none; |
|
} |
|
aside { |
|
flex: 0.4; |
|
height: 165px; |
|
padding-left: 15px; |
|
border-left: 1px solid #666; |
|
} |
|
section { |
|
flex: 1; |
|
padding-right: 15px; |
|
} |
|
footer { |
|
padding: 0 10px; |
|
background: #ccc; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<header class="header-menu"> |
|
<nav> |
|
<ul> |
|
<li>Menu item</li> |
|
<li>Menu item</li> |
|
<li>Menu item</li> |
|
</ul> |
|
</nav> |
|
</header> |
|
<section> |
|
<article> |
|
<header> |
|
<h2>Learn HTML</h2> |
|
<small>Hyper Text Markup Language</small> |
|
</header> |
|
<p>Our free HTML tutorial for beginners will teach you HTML and how to create your website from the scratch. HTML isn't difficult, so hoping you will enjoy learning.</p> |
|
</article> |
|
<article> |
|
<header> |
|
<h2>Start Quiz "HTML Basic"</h2> |
|
<small>You can test your HTML skills with W3docs' Quiz.</small> |
|
</header> |
|
<p>You will get 5% for each correct answer for single choice questions. In multiple choice question it might be up to 5%. At the end of the Quiz, your total score will be displayed. Maximum score is 100%.</p> |
|
</article> |
|
</section> |
|
<aside> |
|
<h2>Our Books</h2> |
|
<p>HTML</p> |
|
<p>CSS</p> |
|
<p>JavaScript</p> |
|
<p>PHP</p> |
|
</aside> |
|
<footer> |
|
<small>© <?php echo date('Y'); ?> KS</small> |
|
</footer> |
|
</body> |
|
</html>
|