Posts

Showing posts from April, 2021

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

Art blog in html!

Image
  i still couldn't get how to adjust the size of the image, still need to read up more about that.
1 comment
Read more

Application HTML

Image
 i have to say, seeing the calendar was very cool!
Post a Comment
Read more

Activity Listing my Favourite songs!

Image
 
Post a Comment
Read more