Skip to content

Instantly share code, notes, and snippets.

@aishaon

aishaon/index-html5.html

Created March 12, 2020 15:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aishaon/df59285dcbccbf64972014b3dedc7ca0 to your computer and use it in GitHub Desktop.
Save aishaon/df59285dcbccbf64972014b3dedc7ca0 to your computer and use it in GitHub Desktop.
Download ZIP
Layout by HTML5
Raw
index-html5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.layout-container{
width: 500px;
border: 1px solid #000;
margin: auto;
text-align: center;
}
</style>
</head>
<body>
<!-- // .layout-container BEGINS -->
<section id="layout-container">
<!-- // header BEGINS -->
<header>
<h1>Learning Layout Development</h1>
</header>
<!-- // header ENDED -->
<section id="main-contents">
<aside>
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis enim cupiditate accusamus officia minus, voluptatibus maiores dignissimos rem corporis pariatur iste quos esse? Blanditiis voluptas sit, eveniet aliquid veritatis, hic.</p>
</aside>
<section id="contents">
<h2>Welcome to Layout Development</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus vero quas itaque ipsam porro, maiores, eum blanditiis tenetur, minima, incidunt voluptatibus ea eos architecto necessitatibus dignissimos corporis! Molestias suscipit quaerat velit vitae autem provident doloremque at ullam nisi corrupti! Similique assumenda temporibus vero velit vitae, esse mollitia ab odit accusamus, quaerat. Neque animi quo aperiam, iste! Dolorum quae doloribus doloremque cumque animi dolorem delectus molestiae accusamus iste soluta voluptatum tempore, natus quibusdam at laboriosam magni minus consectetur vero eveniet nesciunt dolore fugiat harum. Magni, sequi laborum, odio pariatur cum doloremque quaerat distinctio incidunt, assumenda provident nesciunt. Rem esse, sunt labore?</p>
</section>
</section>
<footer>
<p>&copy; Copyright 2020</p>
</footer>
</section>
<!-- // .layout-container ENDED -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment