Thursday, February 27, 2020

Table in HTML with CSS

CODE:

<!DOCTYPE html>
<html>
    <head>
        <title>Simple table</title>
        <style>
            .table1{
            outline-width: 2px; outline-style: double;
            outline-color:rgb(255, 47, 161);}
            th{padding: 15px; background-color: gray;}
            td{padding: 10px;}
            .table1, th, td{border: 1px solid red;
                border-collapse: collapse;}
            tr :hover{background-color: yellow;
            border: 2px solid green;font-size: 20px;
            color: red;border-radius: 10px 20px;}   
        </style>
    </head>
    <body>
        <table class="table1">
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <th>Mobile No</th>
                <th>Course</th>
            </tr>
            <tr>
                <td>001</td>
                <td>John</td>
                <td>john@yahoo.com</td>
                <td>424323</td>
                <td>Java</td>
            </tr>
            <tr>
                <td>002</td>
                <td>Rohan</td>
                <td>rohann@yahoo.com</td>
                <td>15966</td>
                <td>Android</td>
            </tr>
            <tr>
                <td>003</td>
                <td>Sandy</td>
                <td>sandy@yahoo.com</td>
                <td>424323</td>
                <td>Webside Developer</td>
            </tr>
            <tr>
                <td>004</td>
                <td>Shawn</td>
                <td>shawn@gmail.com</td>
                <td>424323</td>
                <td>iOS</td>
            </tr>
        </table>
    </body>
</html>

OUTPUT:

Simple Tooltip use

CODE:

<!DOCTYPE html>
<html>
    <head>
        <title>Simple tooltip task</title>
        <style>
            div{border-bottom: 1px dotted red;
            width: 230px; height: 50px;padding: 20px;
            display: inline-block; position: absolute;}

            div span{ visibility: hidden; width: 120;
            background-color: red;color: white;
            text-align: center; z-index: 1;}

            div:hover span{visibility: visible;}
        </style>
    </head>
    <body>
        <div>Hover over me.<br/>
            <span>This is simple division tag in html.</span>
        </div>
    </body>

</html>

OUTPUT:

Wednesday, February 26, 2020

SQL Certificate SoloLearn


Stylish button in CSS

CODE:
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image on image</title>
    <style>
        *{padding:0;margin:0;}
        .main{text-align: center; margin-top: 330px; }
       

        button {border: 1px solid teal; background: none; padding: 10px 20px;font-size: 20px; font-family: 'monospace';
        cursor: pointer;margin: 10px; transition: 0.8s; position: relative; overflow: hidden;}

        .btn1,.btn2{color: teal;}

        .btn3,.btn4{color:#fff}

        .btn1:hover,.btn2:hover{color: #fff;}

        .btn3:hover,.btn4:hover{color: teal;}

        button::before{content: ""; position: absolute; left: 0; width: 100%; height: 0%; background: turquoise;
        z-index: -1;transition: 0.8s;}

        .btn1::before,.btn3::before {top: 0; border-radius: 0 0 50% 50%;}

        .btn2::before,.btn4::before {top: 0; border-radius: 50% 50% 0 0;}

        .btn3::before,.btn4::before {height: 180%;}

        .btn1:hover::before,.btn2:hover::before{height: 180%;}

        .btn3:hover::before,.btn4:hover::before{height: 0%;}
    </style>
</head>
<body>
    <div class="main">
        <div>
            <!-- <input type="button" name="submit" type="button" value="Submit" /> -->
            <button class="btn1">Hover Me</button>
            <button class="btn2">Click Me</button><br /><br />
            <button class="btn3">Click Me</button>
            <button class="btn4">Hover Me</button>
        </div>
    </div>
</body>
</html>

OUTPUT:

Example of Switch Case

CODE:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Switch case</title>
    <script type="text/javascript">
        var day=7;
        switch(day){
            case 1: document.write("<h1>Sunday</h1>");
                break;
            case 2: document.write("<h1>Monday</h1>");
                break;
            case 3: document.write("<h1>Tuesday</h1>");
                break;
            case 4: document.write("<h1>Wednesday</h1>");
                break;
            case 5: document.write("<h1>Thursday</h1>");
                break;
            case 6: document.write("<h1>Friday</h1>");
                break;
            case 7: document.write("<h1>Saturday</h1>");
                break;
            default: document.write("<h1>Invalid day</h1>");
                break;
        }     
    </script>
</head>
<body>
   
</body>
</html>

OUTPUT:


Print first 5 odd numbers using while loop

CODE:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>While Loop</title>
    <script type="text/javascript">
        var n=1;
        while(n<10){
            document.write("<h1>"+n+"</h1>");
            n+=2;
        }
    </script>
</head>
<body>
 
</body>
</html>

OUTPUT:




Tuesday, February 25, 2020

Running car Animation in CSS

HTML Code: 

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Animation</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="back">
            <div class="highway"></div>
                <div class="city"></div>
                    <div class="car">
                        <img src="car.png">
                    </div>
                <div class="wheel">
                    <img src="wheel.png" class="back-wheel">
                    <img src="wheel.png" class="front-wheel">
                </div>
           
        </div>
    </body>
</html>

CSS Code:

*{
    padding: 0px;
    margin: 0px;
}

.back{
    width: 100%;
    height: 100vh;
    background: url(sky.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow-x: hidden;
}
.highway{
    background-image: url(road.jpg);
    width: 500%;
    height: 200px;
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    z-index: 1;
    background-repeat: repeat-x;
    animation: highway 5s linear infinite;
}
@keyframes highway{
    100%{
        transform: translateX(-3400px);
    }
}
.city{
    background-image: url(city.png);
    width: 500%;
    height: 250px;
    position: absolute;
    bottom: 200px;
    left: auto;
    right: 0;
    display: block;
    z-index: 2;
    background-repeat: repeat-x;
    animation: city 20s linear infinite;
}
@keyframes city{
    100%{
        transform: translateX(-1400px);
    }
}
.car{
    width: 400px;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    position: absolute;
    z-index: 2;
}
.car img{
    width: 100%;
    animation: car 1s linear infinite;
}
@keyframes car{
    100%{
        transform: translateY(-1px);
    }
}
@keyframes car{
    50%{
        transform: translateY(1px);
    }
}
@keyframes car{
    0%{
        transform: translateY(-1px);
    }
}
.wheel{
    left: 50%;
    bottom: 178px;
    transform: translateX(-50%);
    position: absolute;
    z-index: 2;
}
.wheel img{
    width: 72px;
    height: 72px;
    animation: wheel 1s linear infinite;
}
.back-wheel{
    left: -165px;
    position: absolute;
}
.front-wheel{
    left: 80px;
    position: absolute;
}

@keyframes wheel{
    100%{
        transform: rotate(360deg);
    }
}

Output:

Friday, February 21, 2020

iframe tag example

HTML Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Simple iframe example</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>This is simple example to understand the use of iframe </h1><br />
         <iframe src="task2.html"></iframe>
    </body>

</html> 

CSS Code:
*{padding: 10px; margin: 0px;}

h1{color: brown; background-color: burlywood; width: 60%; line-height: 30px;}


iframe{width: 30%; height: 300px; background-color: coral; border: none;}

Output:


Thursday, February 20, 2020

Simple task with CSS

HTML Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Simple task with CSS</title>
        <link rel="stylesheet" href="task1style.css">
    </head>
    <body>
        <table>
            <tr>
                <td id="td1">Home</td>
            </tr>
            <tr>   
                <td id="td2">Tutorials</td>
            </tr>
            <tr>
                <td id="td3">About</td id="td1">
            </tr>
            <tr>                 
                <td id="td4">Newsletter</td>
            </tr>
            <tr>   
                <td id="td5">Contact</td>
            </tr>
        </table>
    </body>

</html>

CSS Code:

*{padding: 0px; margin: 0px;}

#td1{border-bottom: 2px solid blueviolet; color: grey; font-size: 20px; padding-left: 10px;}

#td2{border-bottom: 2px solid brown; color: grey; font-size: 20px; padding-left: 10px;}

#td3{border-bottom: 2px solid lightseagreen; color: grey; font-size: 20px; padding-left: 10px;}

#td4{border-bottom: 2px solid orange; font-size: 20px; color: grey; padding-left: 10px;}


#td5{border-bottom: 2px solid green; font-size: 20px; color: grey; padding-left: 10px;}

Output:

Wednesday, February 19, 2020

Input Form in HTML and CSS

Program: HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Simple input form in HTML</title>
        <link rel="stylesheet" href="task2style.css">
    </head>
    <body>
        <form id="inputform">
            <h2>Personal Details</h2><br />
                <table>
                    <tr>
                        <td>Name : </td>
                        <td><input class="demo1" type="text" name="name" placeholder="Enter name" required="required"/></td>
                    </tr>
                    <tr>
                        <td>Password :</td>
                        <td><input type="password" name="password" placeholder="Enter password" required /></td>
                    </tr>
                    <tr>
                        <td>Email-ID :</td>
                        <td><input type="email" name="email" placeholder="Enter email" required /></td>
                    </tr>
                    <tr>
                        <td>Gender :</td>
                        <td><input type="radio" name="male" value="male"/>Male <input type="radio" name="Female" value="female"/>Female</td>
                    </tr>
                    <tr>
                        <td>Contact :</td>
                        <td><input type="text" maxlength="10" required /></td>
                    </tr>
                </table>  <br />
                <h2>Educational Qualification</h2> <br />
                <table>
                   
                    <tr>
                        <td>Degree :</td>
                        <td><input list="degrees" placeholder="--Select Degree--" required /></td>
                            <datalist id="degrees">
                                <option value="BSC" />
                                <option value="BCS" />
                                <option value="BCA" />
                                <option value="BE" />
                                <option value="BCom" />
                            </datalist>
                    </tr>
                    <tr>
                        <td>Engineering :</td>
                        <td><input list="engineering" placeholder="--Select Engineering--" required /></td>
                            <datalist id="engineering">
                                <option value="Machanical" />
                                <option value="Computer" />
                                <option value="IT" />
                                <option value="Civil" />
                                <option value="ENTC" />
                            </datalist>
                    </tr>
                    <tr>
                        <td>Hobbies :</td>
                        <td><input type="checkbox" name="coding" />Coding <input type="checkbox" name="playing" />Playing <input type="checkbox" name="reading" />Reading</td>
                    </tr>
                </table><br />
                <h2>Address</h2> <br />
                <table>
                    <textarea name="address" rows="10" cols="30" placeholder="Enter detail address" required></textarea><br />
                    Attach Resume: <input type="file" name="file" /> <br /><br>
                   
                        <input id="button" type="submit" name="submit"  />
                   
                </table>
        </form>
    </body>

</html>


CSS Program:

*{padding: 0px; margin: 0px;}
h2{color: red;}

form{text-align: center;}
#inputform{width: 400px; height: 600px; background-color: greenyellow; border-top: 1px solid red; border-bottom: 1px solid red;border-left: 5px solid black; border-right: 5px solid black;}


#button{color: white; background-color: orange; width: 100px; height: 30px; text-transform: uppercase; font-weight: bold;border-radius: 20px; box-align: center;}


Output:

Tuesday, February 18, 2020

Simple task using by HTML5

HTML Program:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 5 new tags </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!-- Start of section part -->
        <section id="sec1">
            <h1>This is simple side created by html5</h1>
        </section>
        <!-- End of section -->
        <!-- start of navigation -->
        <nav class="navi1">
            <a href="task1.html" target="_blank">Home</a>
            <a href="https://www.w3schools.com/html/default.asp">HTML</a>
            <a href="https://www.w3schools.com/css/default.asp">CSS3</a>
            <a href="https://www.w3schools.com/js/default.asp">JavaScript</a>
            <a href="https://www.w3schools.com/bootstrap4/default.asp">Bootstrap-4</a>
        </nav><hr />
        <!-- End of navigation -->
        <!--start of images section-->
        <section class="sec2">
            <img class="image1"; src="nature.jpg" width="40%" height="400px" />
            <img class="image2"; src="java.jpg" width="30%" height="400px" />
            <img class="image3"; src="pic1.png" width="30%" height="400px" />
        </section>
        <hr />
        <!--end of image section-->
        <section class="paragraph">
            <p class="p1">The nature of content is an important consideration when designing the training solution. Ideally,
                 you should analyze your content thoroughly before deciding on the medium used to deliver the content</p>
            <p class="p2">Core Java" is Sun's term, used to refer to Java SE, the standard edition and a set of related technologies,
                 like the Java VM, CORBA, et cetera. ... Core Java" is Oracle's </p>
            <p class="p3">A computer programmer figures out the process of designing, writing, testing, debugging/troubleshooting
                 and maintaining the source code of computer programs.</p>
        </section>
       
        <footer><strong>This is &reals; written by Pramod</strong></footer>
    </body>
</html>

CSS Program:

*{padding: 0px; margin: 0px;box-sizing: border-box;}
body{background-color: gray;}
#sec1{background-color: cadetblue; width: 100%; height: 30px; color: rebeccapurple; text-align: center;}
.navi1{background-color: chartreuse;width: 100%; line-height: 30px;}
/* a{width: inherit; height: 30px;} */
nav a{display: inline; padding-top: 15px; margin: 15px;}

.sec2{padding: 0px;margin: 0px;}

section .image1{float: left; border-radius: 20px;}
section .image2{float: left; border-radius: 20px;}
section .image3{float: left; border-radius: 20px;}

.p1{width: 40%; line-height: 30px;  padding: 10px;overflow: auto;float: left; }
.p2{width: 30%; line-height: 30px;  padding: 10px;overflow: auto;float: left;}
.p3{width: 30%; line-height: 30px;  padding: 10px;overflow: auto;float: left;}
section p{color: red; background-color: khaki ; border-right: 2px solid pink}

footer{background-color: black; clear: both;;color: white; width: 100%; line-height: 20px; padding: 10px; text-align: center;}


Output:


Sunday, February 16, 2020

Positions in CSS

Program:
<!DOCTYPE html>
<html>
    <head>
        <title>Simple positions web</title>
        <style>
            *{padding: 0px;margin: 0px;}
            .div1{background-color: blue; width: 500px; height: 400px; position: relative;}
            .div2{background-color: yellow; width: 200px; height: 150px; position: absolute;left: 0;}
            .div3{background-color: green; width: 200px; height: 150px; position: absolute; right: 0;}
            .div4{background-color: red; width: 200px; height: 150px; position: absolute; bottom: 0;}
            .div5{background-color: gray; width: 200px; height: 150px; position: absolute;bottom: 0;right: 0;}
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">Hello</div>
            <div class="div3">Welcome</div>
            <div class="div4">CSS</div>
            <div class="div5">World</div>   
        </div>
    </body>
</html>


Output:

Wednesday, February 12, 2020

Web with DIV

Output:

Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Webside with DIV tag</title>
        <style>
            *{box-sizing: border-box;}
            #div1{ background-color: blue; width: 100%; height: 30px; padding: 6px; }
            ul{list-style-type: none; margin: 0px; padding: 0px;}

            ul li{ float: left; text-align: center; text-decoration: none;}

            ul li a{text-align: center; display: block; color: black; width: 100px; background-color: white; text-decoration: none;}
            #div2{ background-color: gold; width: 30%; height: 400px; float: left; }
            #div3{ background-color: gray; width: 40%; height: 400px; float: left;}
            #div4{ background-color: green; width: 30%; height: 400px; float: left;}
            #div5{ background-color: black;  width: 100%; height: 30px;clear: both;}
            footer{color: white; text-align: center; padding: 3px;}
        </style>
    </head>
    <body>
        <div id="div1">
            <ul>
                <li><a href="#" target="_blank">Home</a></li>
                <li><a href="about.html">About-US</a></li>
                <li><a href="career.html">Career</a></li>
            </ul>
        </div>

        <div id="div2">
            <h1>This is home page</h1>
        </div>

        <div id="div3">
           
        </div>

        <div id="div4">
           
        </div>
       
        <div id="div5">
            <footer>Copyright &copy; W3School.com</footer>
        </div>
       
    </body>
</html>

Tuesday, February 11, 2020

Circle in HTML

Program:

<!DOCTYPE html>
<html>
    <head>
        <title>Circle in HTML</title>
    </head>
    <body>
        <svg width="2000" height="2000">
            <circle cx="80" cy="80" r="50" fill="orange" />
        </svg>
    </body>
</html>

Output:

Unordered List

Program:

<!DOCTYPE html>
<html>
    <head>
        <title>Unordered List in HTML</title>
        <style>
            .list{
               
                margin: 30px; 
                width: 200px;
                height: 200px;
                border: 2px solid black;
            }

            div{
                padding: 25px;
            }
        </style>
    </head>

    <body>
       
            <ul class="list">
                <div>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>Android</li>
                    <li>PHP</li>
                    <li>Java</li>
                </div>   
            </ul>
       
    </body>
</html>

Output:

Friday, February 7, 2020

Survey Form

HTML Code :

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Page in CSS and HTML</title>
        <link rel="Stylesheet" href="SampleTask.css">
    </head>
    <body class="bg">
        <h1>Survey Form</h1>
        <div class="textbox">
            <p id="para"><b>Let us know how we can improve html Code</b></p>
            <label aria-required=""><b> Name :</b> </label><input type="text" placeholder="Enter your name" /><br /><br />
            <label><b>Email :</b> </label><input type="text" placeholder="Enter your email" /> <br /><br />
            <label><b>Age :</b></label><input type="number" placeholder="Enter your age" /><br /><br />

            <label>Which Option discribe your current role :</label>
            <select>
                <option value="blank" aria-placeholder="choose anyone"></option>
                <option value="student">Student</option>
                <option value="service">Service</option>
                <option value="business">Business</option>
            </select><br /><br />
            <label>How likely is that you recommend Felix-IT's to your Friend?</label>
            <form>
                <input id="ip1" type="radio">Definetly</input>
                <input id="ip1" type="radio">May Be</input>
                <input id="ip1" type="radio">Not Sure</input>
            </form><br />
            <label>What do you like most in Technologies : </label>
            <select>
                <option value="java">Java Developer</option>
                <option value="web">Web Developer</option>
                <option value="ui/ux">UI/UX Developer</option>
                <option value="java">Python Developer</option>
                <option value="java">iOS Developer</option>
            </select><br /><br />

            <button>Submit</button>
        </div>
    </body>
</html>

CSS Code:

.bg{
    background-color: pink;
 }

h1{
    text-align: center;
}

.textbox{
   width: 80%;
    height: 500px;
    background-color: gray;
    margin: auto;
    text-align: center;
}

#para{
    text-align: center; 
}

Output:

Porfolio

HTML Program:

<!DOCTYPE html> <html> <head> <title>My Portfolio</title> <link rel="stylesheet" type="text/css" href="webstyle.css"> </head> <body> <header> <section class="main"> <div class="logo"> <h1><blockquote>Company Logo</blockquote></h1> </div> <nav> <a href="webside.html" target='_blank'>Home</a> <a href="about.html">About Us</a> <a href="career.html">Contact Us</a> </nav> </section> <main> <div class="infon"> <h2>Hello</h2> <h1 id="header1">This is Pramod</h1> <h3>Web Developer</h3> <a href="#" class="btn1" target="_blank">Hire Me</a> <a href="#" class="btn2" target="_blank">Contact</a> </div> <div class="image"> <img src="Web_Developement.png" alt="Web_Developement" title="Web_Development"> </div> </main> <footer>This is &copy Copyright by Pramod;</footer> </header> </body> </html>

CSS Program:

*{ margin: 0; padding: 0; } header{ width: 100%; height: 600px; background-image: linear-gradient(to left, white 83%, pink 20%)} .main{ width: 100%; height: 20vh; background-color: lightblue; display: flex; justify-content: space-between; align-items: center; background-image: linear-gradient(to top, white 70%, pink 30%) } .logo{ width: 40%; color: red; text-shadow: 1px 2px pink; background-image: linear-gradient(#8d98e3 40%, #854fee 60%); box-sizing: border-box; } .logo h1{ text-transform: uppercase; animation: justanimate 2s linear infinite; animation-direction: alternate; } @keyframes justanimate{ from{ padding-left: 40px; } to{ padding-right: 40px; } } nav{ width: 60%; /*background-color: yellow;*/ display: flex; justify-content: space-around; } nav a{ text-decoration: none; text-transform: uppercase; color: black; font-weight: 900; font-size: 17px; position: relative; } nav a:first-child{ color: #4458dc; } nav a:before{ content: " "; position: absolute; top: 110%; left: 0; width: 0; height: 2px; border-bottom: 2px solid #4458dc; transition: all 0.4s linear; } nav a:hover:before{ width: 100%; } main{ height: 80vh; display: flex; justify-content: space-around; align-items: center; } .image{ border-radius: 100% 0% 100% 0% / 100% 0% 100% 1% ; background-color: pink; background: pink; } .image img{ max-width: 500px; height: auto; } .infon{ text-transform: uppercase; } .infon h2{ font-size: 40px; margin-bottom: 20px; position: relative; } .infon h2:after{ content: ""; width: 43px; height: 3px; position: absolute; top: 45% left: 25%; background-color: #000; } .infon h1{ margin-top: 20px; font-size: 70px; margin-bottom: 25px; } .infon h2{ margin-bottom: 35px; font-weight: 500; word-spacing: 5px; } .infon .btn1{ text-decoration: none; font-weight: 900; font-size: 15px; text-align: center; padding: 12px 25px; cursor: pointer; text-transform: uppercase; border-radius: 5px; display: inline-block; margin-right: 50px; color: pink; background-image: linear-gradient(to right, #4458dc 0%, #854fee 100%); border: double; box-shadow: 0 10px 30px rgba(118, 85, 225, .3); } .infon .btn2{ text-decoration: none; font-weight: 900; font-size: 15px; text-align: center; padding: 12px 25px; cursor: pointer; text-transform: uppercase; border-radius: 5px; display: inline-block; margin-right: 50px; color: pink; background-image: linear-gradient(to right, #4458dc 0%, #854fee 100%); border: double; box-shadow: 0 10px 30px rgba(118, 85, 225, .3); }

Output:


Wednesday, February 5, 2020

HTML Basic Tags

Program:

<!DOCTYPE html>
<html>
    <head>
        <title>All Tags in HTML</title>
    </head>
    <body>
        <hr />
        <h3 style=" background-color: red; color: blueviolet;"><blockquote><small>HTML Programming</small></blockquote></h3>
        <hr />

        <h3 style=" background-color: orange; color: blueviolet;"><blockquote><small>CSS Programming</small></blockquote></h3>
        <hr />

        <h3 style=" background-color: green; color: blueviolet;"><blockquote><small>PHP Programming</small></blockquote></h3>
        <hr />

        <h3 style=" background-color: blue; color: blueviolet;"><blockquote><small>Android Programming</small></blockquote></h2
            >
        <hr style="color: red;"/>
    </body>
</html>


Output:

Simple Example of div tag in html with css

HTML and CSS Code : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <m...