Posts

Adding A Youtube Link Embed

 <!DOCTYPE html> <html> <head> Animation   <style>  div {   width: 2000px;   height: 100px;   background-color: pink;   animation-name: example;   animation-duration: 10s; } @keyframes example {   from {background-color: red;}   to {background-color: blue;} } </style> </head> <body> <div><h1><center> Welcome!</center></h1></div> Cryptocurrencies such as ether and dogecoin have surged to highs that few investors would have predicted a year ago. The furious run has even the most optimistic traders asking: Can it last? The forces underpinning the crypto mania mirror those that saw GameStop Corp. shares tear higher earlier this year. Excess money from stimulus checks aimed at helping the most vulnerable make rent has also found its way to brokerage accounts that offer free trading. Meanwhile, people globally have spent more time at home and in front of screens...
Post a Comment
Read more

Exercise 10 Counting Red Squares

  Video Output <!DOCTYPE html> <html> <head> Big Head Count  </head> <body> <h1>Time to Count The Shapes</h1> <p> Count the Red squares on the screen </p> <fieldset>     <canvas id="myCanvas" width="1200" height="300" style="border:none;">     </canvas>     <label> How many shapes do you see? </label>     <input type="number" id="answer"> </input>     <!-- <button id="colors" onclick="colors()" > Colors </button> -->     <button id="eraser" onclick="eraser()" > Next </button>     <button id="compare" onclick="compare();eraser()" > Answer </button>     <p> <b>    Score: </b> </p> <div id="myScore"> 0 </div>     <p id="demo"> </p> </fieldset> </body> <s...
Post a Comment
Read more

Animation Transition Activity

<!DOCTYPE html> <html> <head> Animation   <style>  div {   width: 2000px;   height: 100px;   background-color: pink;   animation-name: example;   animation-duration: 10s; } } </style> </head> <body> <div><h1><center> Welcome!</center></h1></div> Cryptocurrencies such as ether and dogecoin have surged to highs that few investors would have predicted a year ago. The furious run has even the most optimistic traders asking: Can it last? The forces underpinning the crypto mania mirror those that saw GameStop Corp. shares tear higher earlier this year. Excess money from stimulus checks aimed at helping the most vulnerable make rent has also found its way to brokerage accounts that offer free trading. Meanwhile, people globally have spent more time at home and in front of screens as the pandemic shut businesses.Cryptocurrencies such as ether and dogecoin have surged to highs th...
Post a Comment
Read more

Add and Remove Products HTML Activity

Image
  <!DOCTYPE html> <html> <head> Add and Remove <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1 class="font1"> Products and Price Select box</h1> <div id="container"> <form> <fieldset> <label for="name"> * add products: </label> <input type="text" id="name" placeholder="Enter Product" autocomplete="off"> <br> <br> <label for="price"> * add price: </label> <input type="number" id="price" placeholder="Enter Price" autocomplete="off"> <br> <br> <br> <button class="btn" id="btnAdd" size=10> <b> Add Product </b> </button> <br> ...
Post a Comment
Read more

Order List HTML coding

Image
 Output the code <!DOCTYPE html> <html> <head> Order List </head> <body> <h1> Enter your details below </h1> <fieldset> <label for="name">Enter your name: </label> <input type="text" placeholder="Enter name" onfocus="this.placeholder=' ' " name="Name" value=" " required> <br> <label for="number"> Enter your order code: </label> <input type="number" placeholder="enter order code" onfocus="this.placeholder=' '" name="code" value=" " required> <br> <label style="margin-top: -22px;"> <i> Type "1" for Package 1 <br> Type "2" for Package 2 <br> Type "3" for Package 3 </i> </label> <br> <label for="number"...
1 comment
Read more

HTML Layout Activity

Image
 The header of the Page The Body and the Footer the code used to make it <!DOCTYPE html> <html> <head> <style> .item1 { grid-area: header; } .item2 { grid-area: menu; } .item3 { grid-area: main; } .item4 { grid-area: right; } .item5 { grid-area: footer; } .grid-container {   display: grid;   grid-template-areas:     'header header header header header header'     'menu main main main main right'     'menu footer footer footer footer footer'     'menu footer footer footer footer footer';   grid-gap: 4px;   background-color: #9c3c00;   padding: 2px; } .grid-container > div {   background-color: rgba(255, 255, 255, 0.9);   text-align: center;   padding: 100px 0;   font-size: 30px; } </style> </head> <body> <div class="grid-container">   <div class="item1"> <h1>Puppy Town</h1> <br>   <img src="https://www.cesarsway....
Post a Comment
Read more

CSS Color Palette

Image
  up here is a sample of what the code does below <!DOCTYPE html> <html> <style> div {height:50px;width:100%;} </style> <body> <h1>Color Palette</h1> <center> <div style="background-color:rgb(71,255,229)"> <h2> Cyan </h2> </div> <div style="background-color:rgb(255,0,196)"> <h2> Magenta </h2> </div> <div style="background-color:rgb(160,228,255)"> <h2> Light Cyan </h2> </div> <div style="background-color:rgb(252,171,255)"> <h2> light magenta </h2> </div> <div style="background-color:rgb(255,250,99)"> <h2> Yellow </h2> </div> </center> </body> </html>
Post a Comment
Read more