Skip to content

Instantly share code, notes, and snippets.

@johncrisostomo

johncrisostomo/layout.css

Created April 29, 2011 05:58
Show Gist options
  • Save johncrisostomo/947914 to your computer and use it in GitHub Desktop.
Save johncrisostomo/947914 to your computer and use it in GitHub Desktop.
Download ZIP
ITWD103 Case Study
Raw
layout.css
body { font-family: Helvetica; }
#nav { background-color: black; color: white; width: 100%; padding: 3px; font: 15px Arial; }
#left { position: absolute; left: 640px; }
#header { margin-top: 20px; border: 3px grey; border-style: none none solid none; }
#sidepane { border: 3px grey; border-style: none solid solid none; position: absolute; left: 10px;
padding: 10px; }
.pane_header { background-color: red; color: white; border: 2px black solid; padding: 5px; font-family: Tahoma; font-size: 15px;
font-weight: bold;}
.desclink { border: 2px black solid; padding: 10px 10px 30px 10px; text-align: center; }
.desclink a:hover img { border: 1px red solid; padding: 5px; padding: 3px;}
#viewpane { text-align: center; padding: 50px; }
#featured { background-color: black; color: white; padding: 5px; border: 2px red solid font-weight: bold; float:right;}
.content { padding-left: 265px; }
Raw
main.html
<html>
<head>
<title>Bookay-Ukay Libruhan</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
<div id="nav">
<img src="images/twitter.png" />&nbsp;&nbsp;<img src="images/fb.png" /><span id="left"><!-- <a href="main.html">Home</a>&nbsp;&nbsp;|&nbsp;&nbsp;--> <a href="order.html">Orders</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="map.html">Map</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="about.html">About Us</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="shitness.html">About the Designers</a></span>
</div>
<div id="header">
<a href="main.html"><img src="images/boo.jpg" width="695" height="117"></img></a>
</div>
<div id="sidepane">
<span class="pane_header">Book Recommendations for Today:</span><br /><br />
<p class="desclink">
<a href="kerouac.html"><img src="images/ontheroad.jpg" /></a><br \><br />
<b>Title:</b> On The Road<br />
<b>Author:</b> Jack Kerouac<br />
<b>Price:</b> Php 200.00<br />
</p>
<p class="desclink">
<a href="timemachine.html"><img src="images/thetimemachine.jpg" height="248" width="203" /></a><br \><br />
<b>Title:</b> The Time Machine<br />
<b>Author:</b> H.G. Wells<br />
<b>Price:</b> Php 180.00<br />
</p>
<p class="desclink">
<a href="rework.html"><img src="images/rework.jpg" /></a><br \><br />
<b>Title:</b> Rework<br />
<b>Author:</b> 37signals<br />
<b>Price:</b> Php 450.00<br />
</p>
</div>
<div id="viewpane">
<div id="content">
<span id="featured">Featured</span><br /><br />
<img src="images/gerilya1.jpg" /><br /> <br />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et lacus sit amet tellus hendrerit tristique eget a nulla. Nulla condimentum pharetra ligula et iaculis. Nam congue eleifend nulla ac dictum. In ligula enim, luctus quis rhoncus et, elementum ac dolor. Aenean sit amet massa id leo imperdiet adipiscing vehicula eu sapien. Pellentesque rutrum egestas dolor quis venenatis. Proin tempor venenatis congue. Pellentesque nec pulvinar nunc. Aenean in mauris enim. Vestibulum libero purus, sagittis a pulvinar ac, scelerisque vitae lorem. Aliquam sed dictum nisi. Vestibulum aliquet, metus eu interdum dignissim, sem elit semper urna, at facilisis nunc quam a sem. Nulla facilisi. Praesent condimentum augue eu nisi iaculis nec scelerisque libero lacinia. Cras sit amet nisl dolor. Curabitur at magna urna, non gravida erat. Ut leo justo, sollicitudin ac ornare gravida, porttitor ac tellus. Maecenas vitae purus velit. Maecenas laoreet viverra mi in congue. Donec eget sapien convallis quam bibendum mollis.
</p>
<img src="images/gerilya2.jpg" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="images/norman.jpg" />
<p>
In eu sem metus, viverra aliquam nisl. Aenean consectetur egestas elementum. Mauris faucibus sapien nec nulla lacinia fringilla. Aliquam convallis feugiat gravida. Mauris euismod mattis ullamcorper. Quisque eget diam sit amet mi molestie sodales. Praesent porta convallis purus ut ultricies. Curabitur facilisis condimentum est vel fermentum. Aliquam vestibulum scelerisque nibh at malesuada. Proin sollicitudin, nibh sit amet mollis feugiat, augue nibh lobortis lectus, at lacinia quam ligula eget tellus. In ante nibh, placerat eget malesuada non, malesuada sed turpis. Ut dapibus fringilla risus, in pellentesque odio aliquet eu. Suspendisse accumsan leo in metus tincidunt posuere. Sed pharetra tellus vitae quam dignissim eget tristique urna ornare. Maecenas eleifend mi ut odio consequat vestibulum. Nulla vulputate lacinia tellus at egestas. Sed sollicitudin sollicitudin erat, in commodo est sollicitudin sed.
</p>
<p>
Phasellus auctor massa condimentum purus consequat tempus. Proin ultricies dictum neque id porttitor. Nulla aliquam bibendum diam eget hendrerit. Aliquam volutpat vehicula laoreet. Vestibulum dignissim varius nunc, venenatis dapibus quam euismod nec. Phasellus tempus viverra lacus sed viverra. Donec dignissim tortor euismod arcu eleifend at tristique mi ullamcorper. Integer tempus urna vel sapien rhoncus tempor. Vivamus placerat sem eu lectus volutpat vitae sodales mauris vulputate. Nulla at luctus turpis. Donec varius lectus sed leo tincidunt mollis. Phasellus non massa velit. Sed ac nulla quis turpis pulvinar condimentum tempor et turpis.
</p>
</div>
</div>
<div class="footer">
book<span id="red">ay</span>ukay is the property of Dan Gaffud and John Robert Luna aka j.luna | Site design by John Crisostomo and Joanel Divinagracia
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment