Skip to content

Instantly share code, notes, and snippets.

@don-smith

don-smith/charlottes-web-log-layout.html

Last active October 2, 2017 02:38
Show Gist options
  • Save don-smith/df66d20e9355b07392239e9ee1a6f01d to your computer and use it in GitHub Desktop.
Save don-smith/df66d20e9355b07392239e9ee1a6f01d to your computer and use it in GitHub Desktop.
Download ZIP
The beginning of a journey from static HTML to React components
Raw
charlottes-web-log-layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Charlotte's Web Log</title>
<style>
.header, .foote {
text-align: center;
}
.body.container {
display: flex;
}
.other-blogs {
flex-grow: 1;
}
.posts {
flex-grow: 6;
}
.recent-entries {
flex-grow: 1;
}
</style>
</head>
<body>
<div>
<div class="header">
<h1>Header</h1>
</div>
<div class="body container">
<div class="other-blogs">
<h2>Other blogs</h2>
<div class="other-blog">Other blog 1</div>
<div class="other-blog">Other blog 2</div>
<div class="other-blog">Other blog 3</div>
</div>
<div class="posts">
<h2>Posts</h2>
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
</div>
<div class="recent-entries">
<h2>Recent entries</h2>
<div class="recent-entry">Recent entry 1</div>
<div class="recent-entry">Recent entry 2</div>
<div class="recent-entry">Recent entry 3</div>
</div>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment