Skip to content

Commit

Permalink
initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Bjarke B Rubeksen committed Nov 4, 2014
0 parents commit 1cf6175
Show file tree
Hide file tree
Showing 5 changed files with 194 additions and 0 deletions.
1 change: 1 addition & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
style.css
51 changes: 51 additions & 0 deletions fixed-layout.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fixed layouts</title>
<style>
*{ margin: 0;padding: 0; }

.wrapper{
width: 750px;
position: absolute;
margin-left: auto;
margin-right: auto;
padding: 0;
border: solid 1px black;
}

#extra{
position: absolute;
top: 0;
left: 0;
width: 200px;
background-color: orange;
}

#content{
margin-left: 225px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="extra">
<h2>Extra</h2>
<p>Bacon ipsum dolor amet landjaeger commodo tenderloin jowl, culpa anim quis capicola enim corned beef ut sunt. Salami short loin ham hock, kevin fatback tail officia dolor veniam ullamco velit pork loin enim. Fugiat biltong bresaola in voluptate brisket jowl kevin. Minim short ribs irure tenderloin venison quis id fatback sausage tongue nisi beef ribs cupidatat. Tongue adipisicing nostrud voluptate short ribs. Commodo salami t-bone id boudin ground round porchetta landjaeger minim lorem.</p>
</div>
<div id="content">
<h1>Main content</h1>
<p>Enim in spare ribs ullamco sirloin ex. Cow rump veniam short loin id aute. Cillum pariatur sausage dolore, aliquip laborum chuck. Ullamco eiusmod ad spare ribs tempor consequat. Mollit ex bacon magna, meatloaf anim fatback duis ham minim culpa. Pariatur short loin pork chop sint.

Prosciutto dolore pork chuck, incididunt adipisicing t-bone boudin short loin. Velit anim consectetur shoulder in nulla in minim shankle ham hock jowl jerky pork chop chuck proident. Nisi sausage incididunt deserunt. Hamburger dolor ground round mollit pastrami, non enim capicola biltong eiusmod occaecat bresaola drumstick consectetur tenderloin. Ut ground round in flank jerky. Consectetur porchetta ball tip exercitation labore proident pancetta quis cupidatat sunt nostrud. Tongue exercitation frankfurter enim ut anim id velit laborum.

Ham deserunt kielbasa, laboris in boudin ribeye mollit short ribs nostrud. Corned beef venison ham aliquip ad, cupidatat spare ribs velit swine flank filet mignon chicken. Consequat pancetta biltong short loin jowl boudin duis voluptate ex turducken pork loin. Flank spare ribs mollit strip steak aliquip shank porchetta sirloin tenderloin chicken. Beef venison in nostrud hamburger tri-tip ribeye filet mignon dolor veniam dolore aute sausage. Elit incididunt brisket jowl qui mollit quis nulla shankle ground round capicola occaecat velit.

Meatloaf meatball ham hock fugiat velit enim, strip steak quis tenderloin. Excepteur sausage turkey prosciutto. Cillum elit ham reprehenderit dolor. Tail ham esse incididunt occaecat in tempor ullamco commodo tri-tip ut pork chop. Eiusmod incididunt fugiat, fatback bresaola biltong irure ut ribeye chuck ad pork loin in ham. Tempor capicola brisket id filet mignon lorem eu sirloin short loin beef ut ex minim. Officia eu ball tip sunt brisket shankle dolor deserunt veniam laborum quis kielbasa id.</p>
</div>
</div>
</body>
</html>
43 changes: 43 additions & 0 deletions fluid-layout.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Fluid layouts</title>
<style>
*{ margin: 0;padding: 0; }

#extra{
width: 25%;
float: left;
background-color: orange;
}

#content{
width: 70%;
margin-right: 5%;
float: left;
background-color: yellow;
}
</style>
</head>
<body>

<div id="content">
<h1>Main content</h1>
<p>Enim in spare ribs ullamco sirloin ex. Cow rump veniam short loin id aute. Cillum pariatur sausage dolore, aliquip laborum chuck. Ullamco eiusmod ad spare ribs tempor consequat. Mollit ex bacon magna, meatloaf anim fatback duis ham minim culpa. Pariatur short loin pork chop sint.

Prosciutto dolore pork chuck, incididunt adipisicing t-bone boudin short loin. Velit anim consectetur shoulder in nulla in minim shankle ham hock jowl jerky pork chop chuck proident. Nisi sausage incididunt deserunt. Hamburger dolor ground round mollit pastrami, non enim capicola biltong eiusmod occaecat bresaola drumstick consectetur tenderloin. Ut ground round in flank jerky. Consectetur porchetta ball tip exercitation labore proident pancetta quis cupidatat sunt nostrud. Tongue exercitation frankfurter enim ut anim id velit laborum.

Ham deserunt kielbasa, laboris in boudin ribeye mollit short ribs nostrud. Corned beef venison ham aliquip ad, cupidatat spare ribs velit swine flank filet mignon chicken. Consequat pancetta biltong short loin jowl boudin duis voluptate ex turducken pork loin. Flank spare ribs mollit strip steak aliquip shank porchetta sirloin tenderloin chicken. Beef venison in nostrud hamburger tri-tip ribeye filet mignon dolor veniam dolore aute sausage. Elit incididunt brisket jowl qui mollit quis nulla shankle ground round capicola occaecat velit.

Meatloaf meatball ham hock fugiat velit enim, strip steak quis tenderloin. Excepteur sausage turkey prosciutto. Cillum elit ham reprehenderit dolor. Tail ham esse incididunt occaecat in tempor ullamco commodo tri-tip ut pork chop. Eiusmod incididunt fugiat, fatback bresaola biltong irure ut ribeye chuck ad pork loin in ham. Tempor capicola brisket id filet mignon lorem eu sirloin short loin beef ut ex minim. Officia eu ball tip sunt brisket shankle dolor deserunt veniam laborum quis kielbasa id.</p>
</div>

<div id="extra">
<h2>Extra</h2>
<p>Bacon ipsum dolor amet landjaeger commodo tenderloin jowl, culpa anim quis capicola enim corned beef ut sunt. Salami short loin ham hock, kevin fatback tail officia dolor veniam ullamco velit pork loin enim. Fugiat biltong bresaola in voluptate brisket jowl kevin. Minim short ribs irure tenderloin venison quis id fatback sausage tongue nisi beef ribs cupidatat. Tongue adipisicing nostrud voluptate short ribs. Commodo salami t-bone id boudin ground round porchetta landjaeger minim lorem.</p>
</div>

</body>
</html>
46 changes: 46 additions & 0 deletions hybrid-layout.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hybrid layouts</title>
<style>
*{ margin: 0;padding: 0; }

#extra{
width: 200px;
position: absolute;
top: 0;
left: 0;
background-color: orange;
}

#content{
width: auto;
position: absolute;
top: 0;
left: 225px;
background-color: yellow;
}
</style>
</head>
<body>

<div id="content">
<h1>Main content</h1>
<p>Enim in spare ribs ullamco sirloin ex. Cow rump veniam short loin id aute. Cillum pariatur sausage dolore, aliquip laborum chuck. Ullamco eiusmod ad spare ribs tempor consequat. Mollit ex bacon magna, meatloaf anim fatback duis ham minim culpa. Pariatur short loin pork chop sint.

Prosciutto dolore pork chuck, incididunt adipisicing t-bone boudin short loin. Velit anim consectetur shoulder in nulla in minim shankle ham hock jowl jerky pork chop chuck proident. Nisi sausage incididunt deserunt. Hamburger dolor ground round mollit pastrami, non enim capicola biltong eiusmod occaecat bresaola drumstick consectetur tenderloin. Ut ground round in flank jerky. Consectetur porchetta ball tip exercitation labore proident pancetta quis cupidatat sunt nostrud. Tongue exercitation frankfurter enim ut anim id velit laborum.

Ham deserunt kielbasa, laboris in boudin ribeye mollit short ribs nostrud. Corned beef venison ham aliquip ad, cupidatat spare ribs velit swine flank filet mignon chicken. Consequat pancetta biltong short loin jowl boudin duis voluptate ex turducken pork loin. Flank spare ribs mollit strip steak aliquip shank porchetta sirloin tenderloin chicken. Beef venison in nostrud hamburger tri-tip ribeye filet mignon dolor veniam dolore aute sausage. Elit incididunt brisket jowl qui mollit quis nulla shankle ground round capicola occaecat velit.

Meatloaf meatball ham hock fugiat velit enim, strip steak quis tenderloin. Excepteur sausage turkey prosciutto. Cillum elit ham reprehenderit dolor. Tail ham esse incididunt occaecat in tempor ullamco commodo tri-tip ut pork chop. Eiusmod incididunt fugiat, fatback bresaola biltong irure ut ribeye chuck ad pork loin in ham. Tempor capicola brisket id filet mignon lorem eu sirloin short loin beef ut ex minim. Officia eu ball tip sunt brisket shankle dolor deserunt veniam laborum quis kielbasa id.</p>
</div>

<div id="extra">
<h2>Extra</h2>
<p>Bacon ipsum dolor amet landjaeger commodo tenderloin jowl, culpa anim quis capicola enim corned beef ut sunt. Salami short loin ham hock, kevin fatback tail officia dolor veniam ullamco velit pork loin enim. Fugiat biltong bresaola in voluptate brisket jowl kevin. Minim short ribs irure tenderloin venison quis id fatback sausage tongue nisi beef ribs cupidatat. Tongue adipisicing nostrud voluptate short ribs. Commodo salami t-bone id boudin ground round porchetta landjaeger minim lorem.</p>
</div>

</body>
</html>
53 changes: 53 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS Layouts</title>
<style>
*{padding: 0;margin: 0;}
body{
font-family: Verdana, Geneva, sans-serif;
}
h1,h2{
color:#444;
text-shadow: 0 1px 0px #fff;
}
.box{
margin:20px auto 0 auto;
height: 50%;
width: 50%;
background: #f1f1f1;
border: solid 1px #f1f1f1;
border-radius: 5px;
padding: 15px;
box-shadow: 0 3px 5px #999;
}
</style>
</head>
<body>

<div class="box">
<h2>1# <a href="fixed-layout.html">Fixed Layout</a></h2>
<h2>2# <a href="fluid-layout.html">Fluid Layout</a></h2>
<h2>3# <a href="hybrid-layout.html">Hybrid Layout</a></h2>
</div>

<div class="box">
<h1>Vælg en eller flere</h1>
<h2>Let og simpelt: </h2>
<a href="http://www.w3schools.com/cssref/css3_pr_columns.asp">CSS Collums</a>

<h2>Et mellem avanceret trick: </h2>
<a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox</a>

<h2>Stort og avanceret : </h2>
<a href="http://getbootstrap.com">Gridsystem</a> eller <a href="http://foundation.zurb.com">Foundation</a>

<h2>Når du er klar til det hele </h2>
<a href="http://www.initializr.com">Initializr</a>

</div>

</body>
</html>

0 comments on commit 1cf6175

Please sign in to comment.