Ken Schaefer
2 years ago
2 changed files with 92 additions and 0 deletions
@ -0,0 +1,92 @@
|
||||
<!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> |
Loading…
Reference in new issue