Showing posts with label Html and CSS Proejct. Show all posts
Showing posts with label Html and CSS Proejct. Show all posts

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>

Saturday, February 23, 2013

Business Firm Financial Web Project: State bank of India

, , No comments
This is dummy home page of any commercial website

HTML Source Code:

<html>
<head>
<title>Main Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<h1>State Bank of India</h1>
<ul>
<a hre="#"><li>Admin</li></a>
<a hre="#"><li>Client</li></a>
<a hre="#"><li>service.html"><li>Service</li></a>
<a hre="#"><li>Contact</li></a>
</ul>
<p>dd</p>
</section>
</body>
</html>

CSS Source CODE:


body{
background: #e3e3e3;
width: 90%;
margin: auto;
}

section{
width: 80%;
margin:auto;
box-shadow: 0 0 5px rgba(0,0,0,.6);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.6);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.6);
text-align: center;
padding-top: 5px;
padding-right: 50px;
padding-bottom: 100px;
border-radius: 5px;

}

h1{
font-size: 60px;
color: #0099FF;
font-family: sans-serif;
text-shadow: 0 0 2px rgba(0,0,0,0.4);
}
ul li{
display: inline-block;;
background: white;
width: 40%;
background:#0099FF;
height: 150px;
box-shadow: 0 0 5px rgba(0,0,0,.5);
margin-top: 6px;
margin-left: 2px;
line-height: 150px;
font-size: 40px;
font-weight: bold;
color: white;
font-family: sans-serif;
text-shadow: 0 0 2px rgba(0,0,0,0.4);
/*padding: 10px;*/
}

li:hover{
background: white;
color: #0099FF;
text-shadow: 0 0 2px rgba(0,0,0,0.4);
}


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