Skip to content

Instantly share code, notes, and snippets.

@shonendumm

shonendumm/index.html

Created April 25, 2017 05:08
Show Gist options
  • Save shonendumm/6d0d5077d26bd5098d64f5c6134371c9 to your computer and use it in GitHub Desktop.
Save shonendumm/6d0d5077d26bd5098d64f5c6134371c9 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/wezawo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://fonts.googleapis.com/css?family=Roboto|UnifrakturCook:700" rel="stylesheet">
<style id="jsbin-css">
html {
background: orange;
}
body {
position: relative;
width: 80%;
min-width: 40%;
height: 100%;
background-color: white;
margin: 0 auto;
border: 0px solid black;
font-family: 'Roboto', cursive;
}
header {
width: 100%;
height: 50px;
background-color: lightblue;
margin-bottom: 0.5em;
border: 0;
font-family: 'UnifrakturCook', cursive;
}
h1 {
margin-right: 0.8em;
text-align: right;
border: 0;
}
nav {
width: 100%;
height: 30px;
background-color: LightGreen;
margin-bottom: .5em;
border: 0;
}
ul {
text-align: center;
font-weight: bold;
margin-bottom: 1em;
/*border: 1px solid black;*/
}
li {
/*border: 1px solid black;*/
padding-top: 5px;
margin: 0 25px;
display: inline-block; /*Notice how the parent element behaves inline while the elements inside behave like blocks. Try resizing the window*/
}
aside {
float: left;
width: 30%;
height: 90%;
background-color: Pink;
padding: 10px;
text-align: justify;
padding: 5px;
box-sizing:border-box;
border: 0;
}
article {
font-family: 'Roboto', sans-serif;
float: right;
width: 60%;
background-color: LightBlue;
text-align: justify;
padding: 5px;
box-sizing:border-box;
border: 0;
}
footer div {
clear: both;
width: 100%;
height: 50px;
background-color: LightGreen;
border: 0px;
margin-top: 5px;
}
</style>
</head>
<body>
<header><h1>Generic Header</h1></header>
<nav><ul><li>ONE</li><li>TWO</li><li>THREE</li></nav>
<aside><p>just some generic content here which nobody reads. okay settled.</p></aside>
<article><p>here is some main content for people to read.dsad sad sdsads asdadsdsa dsa dasd dasd as dasdsa dasdas dasdas dasdas dasd dasd dasd das f ger g grg efwe fwe f g fgdf gdfg gdf dfgdf gdf gdf gdf gdf gdf gdf gd gdf gdf gdf g gdfg df gdf gdf g gd fg dfgd fgdfg gfd gd gdf g dfg dfg dfg dfg</p></article>
<footer><div></div></footer>
<script id="jsbin-source-css" type="text/css">html {
background: orange;
}
body {
position: relative;
width: 80%;
min-width: 40%;
height: 100%;
background-color: white;
margin: 0 auto;
border: 0px solid black;
font-family: 'Roboto', cursive;
}
header {
width: 100%;
height: 50px;
background-color: lightblue;
margin-bottom: 0.5em;
border: 0;
font-family: 'UnifrakturCook', cursive;
}
h1 {
margin-right: 0.8em;
text-align: right;
border: 0;
}
nav {
width: 100%;
height: 30px;
background-color: LightGreen;
margin-bottom: .5em;
border: 0;
}
ul {
text-align: center;
font-weight: bold;
margin-bottom: 1em;
/*border: 1px solid black;*/
}
li {
/*border: 1px solid black;*/
padding-top: 5px;
margin: 0 25px;
display: inline-block; /*Notice how the parent element behaves inline while the elements inside behave like blocks. Try resizing the window*/
}
aside {
float: left;
width: 30%;
height: 90%;
background-color: Pink;
padding: 10px;
text-align: justify;
padding: 5px;
box-sizing:border-box;
border: 0;
}
article {
font-family: 'Roboto', sans-serif;
float: right;
width: 60%;
background-color: LightBlue;
text-align: justify;
padding: 5px;
box-sizing:border-box;
border: 0;
}
footer div {
clear: both;
width: 100%;
height: 50px;
background-color: LightGreen;
border: 0px;
margin-top: 5px;
}
</script>
</body>
</html>
Raw
jsbin.wezawo.css
html {
background: orange;
}
body {
position: relative;
width: 80%;
min-width: 40%;
height: 100%;
background-color: white;
margin: 0 auto;
border: 0px solid black;
font-family: 'Roboto', cursive;
}
header {
width: 100%;
height: 50px;
background-color: lightblue;
margin-bottom: 0.5em;
border: 0;
font-family: 'UnifrakturCook', cursive;
}
h1 {
margin-right: 0.8em;
text-align: right;
border: 0;
}
nav {
width: 100%;
height: 30px;
background-color: LightGreen;
margin-bottom: .5em;
border: 0;
}
ul {
text-align: center;
font-weight: bold;
margin-bottom: 1em;
/*border: 1px solid black;*/
}
li {
/*border: 1px solid black;*/
padding-top: 5px;
margin: 0 25px;
display: inline-block; /*Notice how the parent element behaves inline while the elements inside behave like blocks. Try resizing the window*/
}
aside {
float: left;
width: 30%;
height: 90%;
background-color: Pink;
padding: 10px;
text-align: justify;
padding: 5px;
box-sizing:border-box;
border: 0;
}
article {
font-family: 'Roboto', sans-serif;
float: right;
width: 60%;
background-color: LightBlue;
text-align: justify;
padding: 5px;
box-sizing:border-box;
border: 0;
}
footer div {
clear: both;
width: 100%;
height: 50px;
background-color: LightGreen;
border: 0px;
margin-top: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment