Showing posts with label html tutorial. Show all posts
Showing posts with label html tutorial. Show all posts

Tuesday 11 July 2023

Marksheet Template HTML | CSS

 


Educational Markheet template created using HTML and CSS. You can use this template for college results. This code is tested and you can create PDF while printing .

Source  Code

<html> <head> <title> Markesheet </title> <style> body{background-image:url('bg.jpg');background-size:cover;} .container { padding-right: 15%; padding-left: 15%; margin-right: auto; margin-left: auto; } @media(max-width:700px) { .container { padding-right: 5%; padding-left: 5%; } } .border{border:solid 1px black;} .imglogo{display:block;margin:auto} @media(max-width:700px) { .imglogo { width: 80%; } } .bold{font-weight:bolder;} .border-top{border-top:solid 1px black;} .border-left{border-left:solid 1px black;} .border-right { border-right: solid 1px black; } .padl{padding-left:5px;} .padr { padding-right: 5px; } </style>

Saturday 12 November 2022

Select A Table all rows by checkbox using jquery

Select/Unselect  Table all row by clicking the checkbox using jquery. You can do this by class selector. Make a class and apply it on all checkbox and select or unselect using class name by just one line of code.

Name City
Ram Vns
Syam Alld
Gita LKO
Anita Vns

Code

<html>

<head>

    <title>Table Select</title>

    <style>

        .chk {

        }

    </style>

Thursday 23 June 2022

Celebrating 10 Years Anniversary SVG Animation

 Celebrating 10 Years Anniversary SVG Animation




Step to create and animate SVG File

SVG is numeric formate of graphic representation. You can create SVG files easily using Coral Draw. Create a graphic in the coral draw and export it in SVG format. One's SVG file was extracted. You will get the code of the entire file in SVG format.

Apply CSS animation code as you apply in HTML file

HTML File Code : 

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <style>

     

    </style>

    <object data="akt.svg" width="500" height="500"> </object>

    <p class="rotate">Lorem</p>

</body>

</html>

Wednesday 6 October 2021

Show Date after Date gap in Date picker HTML

 This post help you to show date in date picker HTML form control from a given date gap. For example show date two date further from current date using HTML and JavaScript. 


Tuesday 22 June 2021

Coming Soon HTML Cloud Animated Page

 Coming Soon HTML5 Cloud Animated Page.




Source Code

<!DOCTYPE html>

<html>

<head>