Web Designs

This page is all about mattmorz's web designs all through out his journey as an IT Student. Intended for compilation.

1. Gold Panicles Website Project


  • Pure CSS/CSS3 code and a little bit of JavaScript
  • Download the File here.
    • Contains the following: 
      • 9 webpages namely: about, feature, index, literary, staff, editorial, gallery, komiks, news.
      • 1 folder containing images and stylegp.css
Contact me if you want the password for the .rar file.

2. Evolve Your Design
This is a single page created using Photoshop and some short CSS codes.
See it live here
Download it here

Contains:

  • 1 psd file
  • images folder
  • 1 html file
I'll update this page as soon as I recover my old projects.

Popular posts from this blog

Auto-calculate your Splinterlands Assets/Income

Post a Comment
Image
  Keep track of your Splinterlands assets or income by using this tool: http://kagkaghair.herokuapp.com/spl/calculate All you have to do is key in your username in Splinterlands.  The values are rough estimates only, exchange rates are fetch from coingecko and your DEC, CREDITS and CARDS are from Splinterlands API. The values are in PHP and computed using the following method: DEC value is computed by multiplying your DEC to its rate in peso. CARDS value is calculated by adding all your cards using the last price from the market (which is in dollar) then it is multiplied to dollar to peso exchange rate. SPS value is computed by multiplying your SPS to its rate in peso. CREDITS is computed by dividing it in 1000 and multiplying to dollar to peso exchange rate.
Read more

Creating a Simple Button for Demo

Post a Comment
This is the result: Live Demo And the code for this is: For CSS Mark-Up, Paste is before  ]]></b:skin> a.demo{   background:skyblue;   padding:5px 20px 5px 20px;   text-align:center;   font-family: Arial;   font-size:18px;   border:#e1e1e1 1px solid;   -webkit-box-shadow: 0 8px 6px -6px black;   -moz-box-shadow: 0 8px 6px -6px black;   box-shadow: 0 8px 6px -6px black;   color:#e1e1e1; } a:link.demo,a:visited.demo{   text-decoration:none;   } a:active.demo {text-decoration: none;color:gray;padding:4px 20px 4px 20px;} a:hover.demo {text-decoration: none;box-shadow:none; } and this is how we use it. For HTML Mark-Up  <a class="demo" href=" LINK OF THE PAGE HERE " title="see it live">Live Demo</a> Every time we use this button just define the link by putting " class="demo" " just like the above example. You can customize the background, font and color ...
Read more

Load MySQL Data using JQuery

Image
Of course, you won't be redirected to another page to see the result. That's the best thing about JQuery , although AJAX can also do it. Anyway, here's the code snippet for the user's side.. <input id="datepicker" maxlength="20" type="text" /> <div id="refresh_img">Select Date to Load images..</div> <script type="text/javascript"> $(document).ready(function(){ $('#datepicker').change(function(){ var variable = document.getElementById('datepicker').value; $('#refresh_img').load('query/getprojimg.php',{"variable": variable}).fadeIn("slow"); }); }); </script> And for the server side.
Read more