Create a Simple Business Website using HTML, CSS & Javascript
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ Have Basic Knowledge of HTML, CSS & JS Structure
+ We will be using Visual Studio Code & run on Microsoft Edge Browser
+ We gonna create a new text file & rename it to business.html
Website Content
-----------------
-Business Name
-Slogan
-Logo/Art
-Vision
-About Business
-Services
-Action(Buy/Book/Order/Reserve) // Display Form & Output
-Thanks for Visiting // [Contact]
-Footer
VSCode Quick Shortcut:
=====================
# Tab is used to autocomplete code.
# Ctrl C - Copy
# Ctrl V - Paste
# Ctrl S - Save
$ Ctrl X - Cut Text / Line
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ICT-Digital-Learning
ICT Coding Projects - https://github.com/Digital-101/ICT-Digital-Learning
Youtube Channel - https://www.youtube.com/@DigitalOne101
Find full guide on #CodeJika - https://www.codejika.com/downloads/201903%20PROJECT%203%20-%20CodeJIKA.com%20DT%20v1.pdf
Download vscode - https://code.visualstudio.com/download
View Completed Project: https://coffeeshop77.neocities.org
.png)
______________________________________________________________________________
+ HTML TAGS
+ CSS TAGS
+ CSS selectors, class, id
+ HTML FORM
+ FOOTER
+ SCRIPTS TAGS
+ JAVASCRIPT CODE
_______________________________________________________________________________
Full Simple Business Website Code (business.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="ctg-2.png" type="image/x-icon"> <title>Coffee Shop</title> <style> body { font-family: tahoma; text-align: center; background-color: rgb(196, 154, 236); } header { letter-spacing: 6px; color: white; background: royalblue; padding: 20px; } h2 { font-size: 2em; width: 100%; } section { padding: 30px; margin-bottom: 40px; } .container { display: flex; justify-content: center; flex-wrap: wrap; } .card { border: 1px solid #ccc; background-color: ivory; margin: 25px; padding: 25px; box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.3); } h1 { font-size: 5em; } button, .button { background: royalblue; border: 0; color: white; padding: 10px; width: 100%; margin-bottom: 10px; } .blue { background: teal; } .button, .container { margin: 10px; } .circle { color: white; font-size: 2.5em; display: inline-block; height: 40px; width: 40px; margin: 15px; border-radius: 50%; background: rgb(97, 55, 78); padding: 5px 10px 15px 10px; font-family: helvetica; } .footer { padding: 30px; background: gray; } .icons { font-size: 8em; padding: 25px; } td { padding: 10px; } table { margin: auto; } #my-order { background-color: #aab4ce; padding: 25px; display: blo; } @media screen and (min-width: 50em) { .card { flex-basis: 325px; } } </style> </head> <body> <h1> Coffee Shop </h1> <h4> Freshly Served for Good People </h4> <center> <img src="god.jpg" alt="" width="200" height="300"> </center> <section class="container"> <h2>Welcome</h2> <span style="background-color: rgb(102, 196, 102);"> <p>VISION: To spread love and recharge your body energy levels.</p> </span> <br> <br> <p>ABOUT US: Founded in 2022, by Digital One. We've served over 70 clients and delivered over 101 fresh treats.</p> <h2> OUR SERVICES:// </h2> <article class="card"> <div class="icons">☕</div> <h3>Sub-title</h3> <p> ... text. </p> <button>Learn More</button> </article> <article class="card"> <div class="icons">☆</div> <h3>Sub-title</h3> <p> ... text. </p> <button>Learn More</button> </article> </section> <section> <h2> MY ORDER FORM: </h2> <form id="my-form"> <table> <tr> <td> Name: </td> <td><input type="text" size="25" name="my-name"> </td> </tr> <tr> <td> Address: </td> <td> <input type="text" size="25" name="my-address"></td> </tr> <tr> <td> Favourite drink: </td> <td> <select name="my-drink"> <option> Milk </option> <option> Coffee </option> <option> Tea </option> </select> </td> </tr> <tr> <td> Quantity: </td> <td> <input type="number" name="my-qty" value="1" min="1" max="5"> <small>(max 5)</small> </td> </tr> <tr> <br> </tr> <tr> <td colspan="2"> <input class="button" type="button" value="Process Order" onclick="placeOrder();"> <input class="button" type="reset" value="Clear" onclick="document.getElementById('my-order').style.display = 'none'" ;> </td> </tr> </table> <br> <div id="my-order"> </div> </form> </section> <section class="blue container"> <h2>OUR TEAM://</h2> <article class="card"> <div class="icons">😎</div> <h3>Digital One</h3> <p>Jnr. Web Developer - Creates beautiful websites for businesses in Durban.</p> <button> Contact </button> </article> <article class="card"> <div class="icons"> ❤ </div> <h3>David Mukhura</h3> <p>Jnr. Web Developer - Creates simple, beautiful websites for businesses in Soweto.</p> <button> Contact </button> </article> </section> <br> <div class="footer"> <h3>Thanks for Visiting.</h3> <div class="container"> <article class="card"> <h3>Get in Touch.</h3> <p>Probably the best place to buy coffee around Durban.</p> </article> <article class="card"> <h3>Contact Us:</h3> <p>We would like to hear from you. <br>Call or email us.<br>Tel: 031 509 5247 <br>Email: coffee77@gmail.com</p> </article> </div> </div> <hr> <center> <div class="circle">F</div> <div class="circle">T</div> <div class="circle">I</div> <br> © Copyright Coffee Shop 2023 </center> <script> function placeOrder() { var orderForm = document.getElementById("my-form"); results = "<h3>Success!</h3> Here is your order number: #321 <br>"; results += "<br>Name: " + orderForm.elements["my-name"].value; results += "<br>Address: " + orderForm.elements["my-address"].value; results += "<br>I like to order: " + orderForm.elements["my-drink"].value; results += "<br>Quantity: " + orderForm.elements["my-qty"].value; var orderResults = document.getElementById("my-order"); orderResults.style.display = "block"; orderResults.innerHTML = results; } </script> </body> </html> | |
Comments
Post a Comment