Pinterest-Style Column Layout In Pure CSS


<div id="wrapper">
    <div id="columns">
    
        <figure>
        <img src="demo.jpg" alt>
        <figcaption>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</figcaption>
        </figure> 

        <figure>
        <img src="demo_2.jpg" alt>
        <figcaption>caption goes here...</figcaption>
        </figure> 

        <figure>
        <img src="demo_3.jpg" alt>
        <figcaption>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</figcaption>
        </figure> 
..................
        
    </div>
</div>  

<------------ CSS ------------>  
#wrapper {
        max-width:80%;
        margin: 0 auto;
    }
    #columns {
        column-gap: 15px;
        column-width: 220px;
        -moz-column-gap: 15px;
        -moz-column-width: 220px;
        -webkit-column-gap: 15px;
        -webkit-column-width: 220px;
        background: rgba(0, 0, 0, 0);
        font-family: Arial,sans-serif;
        padding: 15px;
        width: 100%;
    }    

    div#columns figure {
        background: none repeat scroll 0 0 #fefefe;
        border: 2px solid #fcfcfc;
        box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
        display: inline-block;
        margin: 0 2px 15px;
        padding: 15px 15px 10px;
        transition: all 0.4s ease-in-out 0s;
        text-align: center;
    }

    div#columns figure img {
        width: 100%; 
        height: auto;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
        margin-bottom: 5px;
    }
    #columns figure figcaption {
        color: #444;
        font-size: 0.9rem;
        line-height: 1.5;
        margin: 0;
        text-align: left;
    }

Equal height columns using only CSS


<div class="page-container"> 
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.  
    Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit,  
    lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non,  
    dictum vitae mi. Donec sed bibendum ante. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.  
    Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit,  
    lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non,  
    dictum vitae mi. Donec sed bibendum ante.
    </div> 
   
    <div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.
    </div> 
</div> 

.page-container { 
    display: table; 
} 
 
.content { 
    width: 450px;
    padding: 20px;
    float: none;
    display: table-cell;
    vertical-align: top;
    background-color: #CCC; 
} 
 
.sidebar {
    width: 250px;
    padding: 20px;
    float: none;
    display: table-cell;
    vertical-align: top;
    background-color: #999; 
} 

Base Path for Link Tag


Base Path for Links:
It is not required to give a complete URL for every link. You can get rid of it if you will use
<base> tag in your header. This tag is used to give a base path for all the links. So your
browser will concatenate given relative path to this base path and will make a complete URL.
For example we have used following base tag in all the pages at domain.com:
<head>
</head>
So now if you will use
<a href=”/test/index.htm”>
then it will be considered as <a href=”http://www.domain.com//test/index.htm”&gt;

Page Refresh and Redirect Using HTML meta Tag


Document Refreshing:
You can specify a duration after which your web page will keep refreshing. If you want your
page keep refreshing after every 10 seconds then use the following
syntax.
<head>
<meta http-equiv=”refresh” content=”10″ />
</head>
Page Redirection:
You can specify a page redirection using Meta Tag. Following is an example of redirecting
current page to another page. You can specify a duration after which page will b
e redirected.
<head>
<meta http-equiv=”refresh” content=”10; url=http://www.tutorialspoint.com” />
</head>

Email message in a html table format


—————–html form ———————————————-

<form action=”””” method=””post””>
<label>Name:*</label>
<input id=””name”” name=””name”” type=””text”” />
<label>Business Name (if any)</label>
<input name=””businessname”” type=””text”” />
<label>Phone:*</label>
<input id=””phone”” name=””phone”” type=””text”” />
<label>Email Address:*</label>
<input id=””email”” name=””email”” type=””text”” />
<label>Message</label>
<textarea style=””width: 245px;” name=””message””></textarea>

</form>

----------------- php part -------------------------------
&lt;?php
if (isset($_POST['submit'])) {

$to =  &quot;amamun_cse@yahoo.com&quot;;
$fromemail = $_POST['email'];
$name = $_POST['name'];
$bname = $_POST['businessname'];
$phone = $_POST['phone'];
$message = $_POST['message'];

$headers  = &quot;MIME-Version: 1.0\r\n&quot;;
$headers .= &quot;Content-type:text/html; charset=iso-8859-1\r\n&quot;;
$headers .= &quot;From: $name\r\n";

//$headers = $fromemail;

$subject="SIM Card subscription and purchase confirmation email";

$body = "<table width="450" cellpadding="0" cellspacing="0" border="0" style='border-collapse:collapse;'>";
$body .= "<tr><td align="left"> <strong> Dear 'Admin', </strong> </td></tr>";
$body .= "<tr><td align="left">$name </td> </tr><tr>";
$body .= "<tr><td align="left">$bname</td> </tr><tr>";
$body .= "<tr><td>$phone</td> </tr>";
$body .= "<tr><td>$message</td> </tr>";
$body .="</table>";

$sent = @mail($to,$subject,$body,$headers);

$msg = "Successfully Sent";
}

?&gt;

———– Validation ——————————–

//email validation
function echeck() {

//alert(str);

var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var email = document.getElementById("email").value;

if (name.length == ""){

alert("Name field is empty")
return false
}

if (phone.length == ""){

alert("Phone field is empty")
return false
}

var at="@"
var dot="."
var lat=email.indexOf(at)
var lemail=email.length
var ldot=email.indexOf(dot)

if (email.indexOf(at)==-1){

alert("Invalid E-mail ID")
return false
}

if (email.indexOf(at)==-1 || email.indexOf(at)==0 || email.indexOf(at)==lemail){
alert("Invalid E-mail ID")
return false
}

if (email.indexOf(dot)==-1 || email.indexOf(dot)==0 || email.indexOf(dot)==lemail){
alert("Invalid E-mail ID")
return false
}

if (email.indexOf(at,(lat+1))!=-1){
alert("Invalid E-mail ID")
return false
}

if (email.substring(lat-1,lat)==dot || email.substring(lat+1,lat+2)==dot){
alert("Invalid E-mail ID")
return false
}

if (email.indexOf(dot,(lat+2))==-1){
alert("Invalid E-mail ID")
return false
}

if (email.indexOf(" ")!=-1){
alert("Invalid E-mail ID")
return false
}

return true
}
//**********end of email validation****************************