Skip to main content

Posts

Showing posts from April, 2021

Exercise 8: CSS Side Bar Navigation

CODE FOR HTML; <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS Sidebar Navigation Exercise</title> <link rel="stylesheet" href="Exercise008webProgram2ChangeBut.css"> </head> <body> <section id="home"></section> <div class="header"> <div class="header-text"> <h1 style="font-family: Consolas; font-size: 75px;"> My Artworks </h1> </div> </div> <div class="sidenav"> <a href="#home">HOME</a> <a href="#about">About</a> <a href="#description">Desciption</a> <a href="#contact">Contact</a> </div> <div class="main"> <section id="about"></section> <p> <b> About </b> </p> <p style=...
Post a Comment
Read more

Execise 8: : Change Button Properties Onchange Event (Interactive)

  CODE FOR HTML; <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Change Button Properties</title> <link rel="stylesheet" href="Exercise8ChangeButton.css"> </head> <body> <fieldset> <h1> Change Button Properties Onchange Event </h1> <h3> Enter Color: </h3> <input type="text" id="input1"/> <br> <h3> Enter number: </h3> <input type="number" id="input2" onchange="onchangeevent()"/> <br> <br> <br> <input class="btn" type="button" id="display1"> <input class="btn" type="button" id="display2"> <input class="btn" type="button" id="display3"> <input class="btn" type="button" id="display...
Post a Comment
Read more

Exercise 7: Select Box Price List (Interactive Media)

Code for HTML; <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Exercise 007: JavaScript Selected Value</title> <link rel="stylesheet" href="Exercise007SelectedValueinte2.css"> </head> <body> <h1 class="font1"> Products & 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> <button class="btn" id="btnAdd" size=12> <b> Add Product ...
Post a Comment
Read more

Exercise 007: CSS Layout and Web Page Concept (Web Programming)

CODE FOR HTML; <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> CSS 3 Rows 3 Columns </title> <link rel="stylesheet" href="Exercise007CSSLayoutandWebpageConcept.css"> </head> <body> <div class="header"> <div class="header-text"> <h1 style="font-family: Consolas;"> Digital Artworks </h1> <h4 style="font-family: Consolas; margin-top: 30px;"> <i> Created by: Jillian Marren Dela Cruz </i> </h4> </div> </div> <div class="navbar"> <a href="#home"> HOME </a> <div class="subnav"> <a href="#blameless"> Blameless </a> </div> <div class="subnav"> <a href="#depression_section"> Depression </a> </div> <div class="subnav...
Post a Comment
Read more

Exercise 006: Order List Html (Interactive Media)

<!DOCTYPE html> <html> <head> <style>     h1 {     margin-left: 280px; font-family: "Consolas"; } h4 {     margin-left: 285px; font-family: Consolas; } p {     margin-left:40px; } label {     display: inline-block; width: 150px; height: 20px; padding: 10px; margin-left: 30px; font-family: "Consolas"; } fieldset {     margin-left: 280px;         margin-right: 280px;         background: #cbc6dc;         padding: 5px         font-family: "Consolas";     }     #demo {     position: relative;         margin-left: 280px;         margin-right: 280px;     }     #runthis {         margin-left: 105px;         margin-top:25px; } </style> </head...
Post a Comment
Read more

Exercise 6: External CSS Style of Color Values (Web Programming)

HTML CODE: <!DOCTYPE html> <html> <head> <meta name"viewport" content="width=device-width, initial-scale=1"> <title> CSS of Color Values</title> <link rel="stylesheet" href="Exercise006divs.css"> </head> <style>   *  {       box-sizing: border-box;       }   body  {       margin-top: 15px;       margin-left:100px;       margin-right: 100px;         }   column {       float: left;       width: 33.33%;   padding: 10px;   height: 300px;   }      row:after  {       content: "";   display: table;   clear: both;   }    </style> </head> <body> <h1> Color Values </h1> <div class="row">   <div class="column">        <div class="green1"...
Post a Comment
Read more