Posts

HTML , CSS Code : Column Count , Audio , Video

Image
  <!DOCTYPE html> <html> <head> <style>  video {   margin:20px;   width: 80%;   height: auto; } .header{  width:100%; } .intro {  font-family:Corbel;  font-size:30px;   column-count:1;  column-width:100px;  column-gap:30px; } .lesson {  float:left;  font-family:Corbel;  font-size:30px;   column-count:2;  column-width:100px;  column-gap:30px; } .pics{   float:left;   height:100;    width:30%;    margin:2px;   padding:10px;     }  img{ width:90%; height:90%;} </style> </head> <body> <div class="header"> <img src="computergraphics.png"> </div> <h1> The Clone Stamp Tool </h1> <br> <div class="intro"> <p>Adobe Photoshop is an excellent tool for editing bitmap images. It offers an expansive feature set, which can seem daunting to anyone opening the applicat...
Post a Comment
Read more

Form Samples

Image
<!DOCTYPE html> <html>   <head>     <title>Title of the document</title>     <style>       label {         display: inline-block;         width: 20%;       }       fieldset {         background: #AFB8C1;        }       legend {         padding: 10px 0;         font-size: 30px;       }                </style>        </head>               <body>      <fieldset>    <h1>Registration Form: </h1>    </fieldset> <br>       <form action="/form/submit" method="get">      <fieldset>         <...
Post a Comment
Read more

First HTML Program

First Web page in Web Programming Get to know me More My Hobbies and Interes are the following :. Photography Web Programming Content Creation My Life Principles :. obey God and follow his commandments and teachings Learning depends on Learners willingness and Capability to learn more Everyday is a chance to grow and Learn More so Improve yourself and Level up your skills Visit My Social Media and Portfolio Portfolio/Blog Facebook Youtube
Post a Comment
Read more

HTML /CSS Code : GRID Layout

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * {   box-sizing: border-box; } .row::after {   content: "";   clear: both;   display: table; } [class*="col-"] {   float: left;   padding: 15px; } .col-1 {width: 8.33%;background-Color:gray;} .col-2 {width: 16.66%;background-color:teal;} .col-3 {width: 25%; background:#013827;} .col-4 {width: 33.33%;background-Color:gray;} .col-5 {width: 41.66%;background-color:orange;} .col-6 {width: 50%;background:green} .col-7 {width: 58.33%;background-Color:blue;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;background-Color:lightgray;} .col-12 {width: 100%; background-color:teal;} html {   font-family: "Lucida Sans", sans-serif; } .header {   background-color: #9933cc;   color: #ffffff;   padding: 15px; } .menu ul {   list-style-type: none;   margin...
Post a Comment
Read more

HTML/CSS Code : Creating Respnsive Web Design Example

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * {   box-sizing: border-box; } .row::after {   content: "";   clear: both;   display: table; } [class*="col-"] {   float: left;   padding: 15px; } html {   font-family: "Lucida Sans", sans-serif; } .header {   background-color: teal;   color: #ffffff;   padding: 15px; } .menu ul {   list-style-type: none;   margin: 0;   padding: 0; } .menu li {   padding: 8px;   margin-bottom: 7px;   background-color: teal;   color: #ffffff;   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover {   background-color: #005266;   color:yellow; } .aside {   background-color: teal;   padding: 15px;   color: #ffffff;   text-align: center;   font-size: 14px;   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2...
Post a Comment
Read more

Creating Forms Dynamically

<!DOCTYPE html> <html>     <head>         <title>             Create a Form Dynamically with  the JavaScript         </title>     </head>     <body style="text-align: center;">         <h1 style="color: green;">             Create a Form Dynamically with the JavaScript         </h1>         <p>           Click on the button to create           a form dynamically         </p>         <button onClick="CreateForm()">             click here         </button>         <p id="GFG_DOWN"></p>  <script>     var down = document.getElementBy...
Post a Comment
Read more

Creating Elements Dynamically in Javascript

How to dynamically create new elements in JavaScript? Adding Elements in a Page Add Element Type Add Element Value Add List Item 1
Post a Comment
Read more