Mahbubur Rahman - jQuery, PHP, JavaScript, Codeigniter, CSS » design http://www.mahbubblog.com PHP, JQUERY, JAVASCRIPT fun Thu, 02 Jun 2011 09:28:55 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 A CSS3 404 Error Page for your Codeigniter Application http://www.mahbubblog.com/codeigniter/a-css3-404-error-page-for-your-codeigniter-application/ http://www.mahbubblog.com/codeigniter/a-css3-404-error-page-for-your-codeigniter-application/#comments Thu, 02 Jun 2011 08:11:55 +0000 Mahbub http://www.mahbubblog.com/?p=318 How would this look ?

CSS3 404 Error Page for Codeigniter

Instead of the boring

Boring Codeigniter Error Page

Want the Code ? There you go ! Just paste the  code in your application/errors/error404.php.

< ?php header("HTTP/1.1 404 Not Found"); ?>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>404 Not Found</title>
<style type="text/css" media="screen">
body
{
color: white;
background-color: #AAA;
margin: 0px;
font-family:"Droid Sans",Arial;
}

#horizon
{
color: white;
background-color: #37AEB6;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 0px;
overflow: visible;
visibility: visible;
display: block
}

#content
{
margin-left: -205px;
position: absolute;
top: -34px;
left: 50%;
width: 380px;
height: 60px;
padding:10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow: 0 0 15px rgba(255,255,255,.9);
-webkit-box-shadow: 0 0 15px rgba(255,255,255,.9);
text-shadow: 0px 0px 1px #000;
visibility: visible;
background: rgb(155,0,0);
background:-webkit-gradient( linear, left bottom, left top, color-stop(0.24, rgb(250,0,0)), color-stop(0.89, rgb(128,20,20)) );
background:-moz-linear-gradient( center bottom, rgb(250,0,2) 24%, rgb(128,20,20) 89%);
}

.bodytext
{
font-weight:bold;
font-size: 13px;
text-transform:uppercase;
}

.headline
{
font-weight: normal;
font-size: 30px;
text-shadow: 0px 0px 4px #000;
line-height:38px;
}

a:link, a:visited
{
color: #06f;
text-decoration: none
}

a:hover
{
color: red;
text-decoration: none
}

.captions
{
color: white;
font-size: 10px;
line-height: 14px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: left
}
</style>
</meta></head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
<span class="headline">404</span><br />
Sorry, the page you're looking for is not found</div>
</div>
</div>
<div id="footer">

</div>

</body></html>

 

There’s CSS3 Drop Shadow, Text Shadow and Gradient. Nowadays people are using latest browsers and it’s likely that people will see the page like the image for most of the popular browsers .

Of course you can use it for any 404 page for any PHP app OR if you like it you can even replace your apache 404 page (hosting specific) with this one [Just remove the php codes from top]

]]> http://www.mahbubblog.com/codeigniter/a-css3-404-error-page-for-your-codeigniter-application/feed/ 0 Designing a prescription pad for my friend http://www.mahbubblog.com/design/designing-a-prescription-pad-for-my-friend/ http://www.mahbubblog.com/design/designing-a-prescription-pad-for-my-friend/#comments Sun, 21 Feb 2010 00:47:12 +0000 Mahbub http://www.mahbubblog.com/?p=219 It’s been quite a long time since i designed for some print materials. One of my best friends from elementary & high school (& still is) requested me to design his prescription pad for him because his current one looks horrible. He’s a general physician and a very good orthopaedic surgeon.  So i thought i’d give a try for my friend’s prescription and this came up after a 2 hr effort.

prescription pad

I used two of my favorite fonts called “Square 721 BT” and Titillium. Google it if you want to download them. And it’s the first composition with Adobe Illustrator CS4 after doing anything with CS2.

Leave me a comment if you want the source AI or EPS file.

]]> http://www.mahbubblog.com/design/designing-a-prescription-pad-for-my-friend/feed/ 6