Skip to content

Commit

Permalink
Added more examples
Browse files Browse the repository at this point in the history
  • Loading branch information
Bjarke B Rubeksen committed Nov 5, 2014
1 parent 07766fe commit ad840ee
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 2 deletions.
2 changes: 0 additions & 2 deletions fixed-layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,6 @@

#extra{
position: absolute;
top: 0;
left: 0;
width: 200px;
background-color: orange;
}
Expand Down
49 changes: 49 additions & 0 deletions fluid2-layout.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!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;
}
#extra2{
width: 25%;
float: left;
background-color: orange;
}

#content{
width: 40%;
margin-right: 5%;
margin-left: 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>
59 changes: 59 additions & 0 deletions hybrid2-layout.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!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;
}
#extra2{
width: 200px;
position: absolute;
top: 0;
right: 0;
background-color: orange;
}

#content{
width: auto;
position: absolute;
top: 0;
left: 225px;
right: 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>

<div id="extra2">
<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>
9 changes: 9 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
</style>
</head>
<body>

<div class="box">
<h2>CSS Tricks & <a href="http://cssdeck.com/labs/homer-simpson-rendered-in-css3">Homer Simpson</a></h2>
</div>

<div class="box">
<h2>1# <a href="fixed-layout.html">Fixed Layout</a></h2>
Expand All @@ -50,5 +54,10 @@ <h2>Når du er klar til det hele </h2>

</div>

<div class="box">
<h2><a href="http://caniuse.com">Can I Use ????</a></h2>
<h2><a href="http://slides.html5rocks.com/#css-selectors">HTML5 & CSS3 slideshow</a></h2>
</div>

</body>
</html>

0 comments on commit ad840ee

Please sign in to comment.