Friday, May 3, 2013

Create a Attractive Form using HTML and CSS

, , No comments

Screen Shot




HTML Source Code




<!doctype html>
<html>
<head>

    <meta charset="utf-8">
    <title>Contact</title>
    <link rel="stylesheet" type="text/css" href="contact.css">
</head>
    <body>

        <form>
                <h1>Contact</h1>
                <hr>
                First Name<br>
                <input type="text"><br>
                Last Name<br>
                <input type="text"><br>
                Email<br>
                <input type="email"><br>
                Subject<br>
                <input type="text"><br>
                Message<br>
                <textarea></textarea><br>
                <button>Submit</button>
        </form>
        
    </body>
</html>

CSS Source Code

body
    {
        background: #666;
    }
form
{
    width: 62%;
    padding: 2% 4%;
    font-family: "Tw Cen MT";
    background: rgba(255,255,255,0.2);
    position: absolute;
    left: 15%;

    /*align: center;*/
    height: 680px;
    /*margin: auto;*/
    color:rgba(0,30,60,1);
    font-size: 24px; 
    padding: 2% 4%;
    font-family: "Tw Cen MT";
    background-color: rgba(255,255,255,0.2);
    box-shadow: 0 0 1px rgba(0,0,0,.5);
    overflow: hidden;
}

form h1
{
    font-size: 34px;
    color: rgba(0,30,60,1); 
}

input 
{
    width: 35%;
    outline: none;
    font-size: 20px;
    font-family: "TW Cen MT";
    padding: 4px 8px;
    background: rgba(255,255,255,.4); 
    border-radius: 2px;
    border: none;
    box-shadow: 0 0 6px rgba(0,0,0,.2);
    transition:ease-out .1s;
}

button
{
    padding: 2px 8px;
    font-family: "TW Cen MT";
    font-size: 24px;
    border: none;
    margin-top: 10px;
    box-shadow: 0 0 6px rgba(0,0,0,.2);
    background: rgba(255,255,255,.4);
    transition: ease-out .1s;
    border-radius: 2px;
}

button:hover
{
    box-shadow: 0 0 10px rgba(255,255,255,1); 
    background: rgba(0,30,60,.3);
    color: white;
    cursor: pointer;
}


input:focus
{
    background: rgba(0,30,60,.3);
    color: white;
    box-shadow: 0 0 10px rgba(255,255,255,1); 
}

textarea
{
    width: 60%;
    height: 200px;
    border: none;
    font-family: "Tw Cen MT";
    font-size: 18px;
    box-shadow: 0 0 6px rgba(0,0,0,.2);
    background: rgba(255,255,255,.4); 
    padding: 2px 2px;
}

textarea:focus
{
    box-shadow: 0 0 10px rgba(255,255,255,1); 
    background: rgba(0,30,60,.3);
    outline: transparent;
    color: white;   
}

Thursday, May 2, 2013

Create a weekly timetable using CSS and HTML

, , No comments

Screenshot of Output


Source Code

<!doctype html>
<html>
<head>
    <title>Timetable</title>
    <style type="text/css">
    body
    {
        font-family: arial;
    }

    th,td
    {
        margin: 0;
        text-align: center;
        border-collapse: collapse;
        outline: 1px solid #e3e3e3;
    }

    td
    {
        padding: 5px 10px;
    }

    th
    {
        background: #666;
        color: white;
        padding: 5px 10px;
    }

    td:hover
    {
        cursor: pointer;
        background: #666;
        color: white;
    }
    </style>

</head>
<body>
    <table width="80%" align="center" >
    <div id="head_nav">
    <tr>
        <th>Time</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thrusday</th>
        <th>Friday</th>
        <th>Saturday</th>
    </tr>
</div>  

    <tr>
        <th>10:00 - 11:00</th>
        
            <td>Physics-1</td>
            <td>English</td>
            <td title="No Class" class="Holiday"></td>
            <td>Chemestry-1</td>
            <td>Alzebra</td>
            <td>Physical</td>
        </div>
    </tr>

    <tr>
        <th>11:00 - 12:00</td>
        
            <td>Math-2</td>
            <td>Chemestry-2</td>
            <td>Physics-1</td>
            <td>Hindi</td>
            <td>English</td>
            <td>Soft Skill</td>
        </div>
    </tr>

    <tr>
        <th>12:00 - 01:00</td>
        
            <td>Hindi</td>
            <td>English</td>
            <td>Math-1</td>
            <td>Chemistry</td>
            <td>Physics</td>
            <td>Chem.Lab</td>

        </div>
    </tr>

    <tr>
        <th>01:00 - 02:00</td>
        
            <td>Cumm. Skill</td>
            <td>Sports</td>
            <td>English</td>
            <td>Computer Lab</td>
            <td>Header</td>
            <td>Header</td>

        </div>
    </tr>

    <tr>
        <th>02:00 - 03:00</td>
        
            <td>Header</td>
            <td>Header</td>
            <td>Header</td>
            <td>Header</td>
            <td>Header</td>
            <td>Header</td>
        </div>
    </tr>
</table>
<small><a href="http://www.lovelycoding.org" rel="Dofollow" style="text-align:center;font-size:7px;">Wedget by LovelyCoding.Org</a></small> 
</body>
</html>

Wednesday, May 1, 2013

C++ Class Example Type -1

No comments

Source Code

#include "iostream"
using namespace std;
class simple
{
    int a;
    public:
    void set_a();
    void get_a();   
}m1,m2,m3;
void simple::set_a()
    {
        a=4;
    }
void simple::get_a()
    {
        cout<<"\n a is "<<a;
    }   

int main()
{
    m2.get_a();
    m2.set_a();
    m2.get_a();
    
    return 0;
}
Entries RSS Comments RSS

Sample Text

Pages

Copyright © Lovely Codes
Powered by Blogger
Distributed By Free Blogger Templates | Design by N.Design Studio
Blogger Theme by Lasantha - PremiumBloggerTemplates.com