Skip to content

Instantly share code, notes, and snippets.

@bmackenty

bmackenty/css_simple_page.html Secret

Last active August 29, 2022 11:30
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 bmackenty/3b614cc178da7702da1c9627a891d707 to your computer and use it in GitHub Desktop.
Save bmackenty/3b614cc178da7702da1c9627a891d707 to your computer and use it in GitHub Desktop.
Download ZIP
a simple css model
Raw
css_simple_page.html
<html>
<head>
<title>Hi there</title>
<style>
.container {
border: 1px solid black;
padding: 2px;
margin: 5px;
background-color: lightslategray;
height: 600px;
}
.header {
float:top;
border: 1px solid green;
margin: 2px;
background-color: lightgreen;
padding: 2px;
}
.left {
float:left;
border: 1px solid red;
margin: 2px;
background-color: lightpink;
padding: 2px;
}
.footer {
float:bottom;
border: 1px solid blue;
margin-top: 15px;
background-color: lightblue;
padding: 2px;
border-radius: 25px;
}
.content {
border: 1px solid orange;
margin: 2px;
background-color: lightcoral;
padding: 2px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<p>This is the header</p>
</div>
<div class="left">
<p>This is the left side</p>
<p>This is the left side</p>
<p>This is the left side</p>
<p>This is the left side</p>
</div>
<div class="content">
<p>
This is the content. This is the content.This is the content.
This is the content.This is the content.This is the content.
This is the content.This is the content.This is the content.
This is the content.This is the content.This is the content.
This is the content.This is the content.This is the content.
This is the content.This is the content.This is the content.
This is the content.
</p>
<p>This is the content</p>
<p>This is the content</p>
<p>This is the content</p>
</div>
<div class="footer">
<p>This is the footer</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment