web design it404
College of Computing and Informatics Project Deadline: Sunday 12/05/2024 @ 23:59 [Total Mark is 14] Student Details: CRN: Name: Name: Name: ID: ID: ID: Instructions: • You must submit two separate copies (one Word file and one PDF file) using the Assignment Template on Blackboard via the allocated folder. These files must not be in compressed format. • It is your responsibility to check and make sure that you have uploaded both the correct files. • Zero mark will be given if you try to bypass the SafeAssign (e.g. misspell words, remove spaces between words, hide characters, use different character sets, convert text into image or languages other than English or any kind of manipulation). • Email submission will not be accepted. • You are advised to make your work clear and well-presented. This includes filling your information on the cover page. • You must use this template, failing which will result in zero mark. • You MUST show all your work, and text must not be converted into an image, unless specified otherwise by the question. • Late submission will result in ZERO mark. • The work should be your own, copying from students or other resources will result in ZERO mark. • Use Times New Roman font for all your answers. Description and Instructions Learning Outcome(s): Description and Instructions The aims of this project are to understand the role of the web designer, become familiar CLO1: Identify most HTML tags and CSS properties and use a text editor to construct the basic HTML and CSS structure for a webpage. with the web design environment, and learn about the tools and programming languages that are required to create a web page. ➢ Project Instructions • The project is a Group work with a minimum of 3 People and a maximum of 4 People. • Each group must submit three files: 1. Word document of project report. 2. PDF file of the project report 3. Presentation in PPT/PPTX format. CLO3: Evaluate • the effectiveness Only one of the group members (group leader) should submit all the files on the blackboard. of a web design in • Your project MUST be original work. respect to its • The project will be checked using a plagiarism tool. context. • Any matching with an online project or another/previous student project will be given ZERO. • CLO4: Develop websites that Make sure everyone in the group understands the progress of the project. Marks will be deducted if there is an indication of laziness, cheating/plagiarism. • Project Total Marks = 14, divided as follow: present 1- Report and implementation = 10 marks information, 2- Presentation = 4 marks graphics and hypertext using CSS and JavaScript. • Due date: Sunday 12th May 2024 @11:59 PM Description and Instructions ➢ Project Description You are a web designer capable of creating a business portfolio for any organization. You are requested to select an organization and create a website that serves as a portfolio that briefly showcases the mission, vision, goals, services, products, and other relevant information of the selected organization. ➢ Project Requirements The website must cover all aspects of the course (HTML, CSS, JavaScript). The following table shows the required tasks along with marking criteria. Task Requirements Description Mark Create HTML including elements (Paragraph, Headings, Header, Footer, Navigation, Lists, Links, Tables and Form) HTML • • • • CSS JavaScript Report document The main page on the website should be index.html. The website must have at least five pages (excluding the main page). The website should contain a navigation bar and it should be consistent across the website and all links are functional. 4 Design: The website follows design principles such as consistent alignment, proximity, repetition, and contrast, etc. Responsiveness: The website should look good and work properly on all devices (desktop, laptop, tablet, mobile) 3 • The website should contain Form validation, and Popup windows. 2 • The report should be completed and well-organized. 1 • Description and Instructions Presentation • It should include an overview of the selected organization and the source code (copy the code and paste it in the specified place, DO NOT take a screenshot of the code! The code must be editable) • The oral presentation made by all the team members is excellent and reflects the effort made. You are required to open your website and navigate through its pages during the presentation. • Total 4 14 Overview about organization Overview about organization This project is a website for an Indian sandwich and food restaurant called (Tikka Sandwiches). It started from a food cart with Saudi hands until it expanded and became a restaurant with many branches in many regions. To develop this website, we used the Visual Studio Code program to write the codes for the project, in addition to the XAMPP control panel program, for it to be a virtual environment within which the website runs in the browser. HTML HTML 4 Marks 1. Index.html page: Tikka Sandwich Home Home Menu About Us Contact Find us Social Media Tikka Sandwich HTML Welcome to Tikka Sandwich, where we serve delicious sandwiches with a Saudi touch with young hands! © 2024 Tikka Sandwiches HTML 2. menu.html page: Menu – Tikka Sandwich Menu Home Menu About Us Contact Find us Social Media HTML Image Name Price 65 Sandwitch 13 SR Butter Sandwitch 11 SR Tikka Sandwitch 13 SR Indian Sammousa 12 SR Tikka Frise 18.50 SR HTML © 2024 Tikka Sandwiches HTML 3. about.html page: About Us – Tikka Sandwich About Us Home Menu About Us Contact Find us Social Media Our Story “We are a passionate group of young individuals united by our love for the rich and diverse flavors of Indian cuisine. Starting out together on a food truck journey, we have now expanded to multiple branches across different regions, driven by our desire to share our delicious dishes with everyone. Our mission is to make the HTML authentic taste of Indian cuisine accessible to all, spreading joy and culinary delight wherever we go.” © 2024 Tikka Sandwiches HTML 4. contact.html page: Contact – Tikka Sandwich window.onload = function() { document.getElementById(‘contactForm’).onsubmit = function(event) { event.preventDefault(); // يمنع تسليم الفورم فاضي او غير متمل البيانات var name = document.getElementById(‘name’).value.trim(); var email = document.getElementById(’email’).value.trim(); var message = document.getElementById(‘message’).value.trim(); if (name === ” || email === ” || message === ”) { alert(‘Please fill out all fields.’); return false; // يمنع تسليم الفورم فاضي } // رساله البوب في حال كان الفورم فاضي وانضغط زر التسليم مارح يتسلم وتظهر الرسالة var popupMessage = “Thank you for your message, ” + name + “!nWe will get back to you soon.”; alert(popupMessage); // Optionally, you can submit the form here using AJAX if needed // Example: submitForm(name, email, message); }; }; HTML Contact Home Menu About Us Contact Find us Social Media Contact Us Name: Email: Message: HTML © 2024 Tikka Sandwiches HTML 5. find_us.html page: Where To Find Us Find Us Home Menu About Us Contact Find us Social Media Where To Find Us Our Locations: HTML Location Google Maps Link Al Marwa-Jeddah Open in Google Maps Al Naseem -Jeddah Open in Google Maps Batha Quraish – Mecca Open in Google Maps © 2024 Tikka Sandwiches HTML HTML 6. social_media.html page: Where To Find Us Find Us Home Menu About Us Contact Find us Social Media Our Social Media HTML tikka_sandwich1 @tikka_sandwich1 © 2024 Tikka Sandwiches CSS CSS 3 Marks styles.css page: /** صفحة اضافة تنسيقات الموقع/ body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; background-color: rgb(251, 234, 214); min-height: 100vh; /* Set the minimum height of the body to 100% of the viewport height */ } header { background-color:white; /* Add a semi-transparent white background */ color: #c84209; padding: 20px; display: flex; justify-content: space-between; /* Align items horizontally */ align-items: center; /* Align items vertically */ } .logo img { max-height: 50px; /* Adjust the height of the logo as needed */ } .background{ background-image: url(‘../Tikka_Sandwich/assets/background.jpeg’); background-size: cover; /* Cover the entire viewport */ background-position: center; /* Center the background image */ border: 2px solid black; } .welcome{ CSS background-image: url(‘../Tikka_Sandwich/assets/background.jpeg’); background-size: cover; /* Cover the entire viewport */ background-position: center; /* Center the background image */ border: 2px solid black; } .div.transbox-social{ margin: 50px; background-color: #ffffff; border: 1px solid black; opacity: 0.9; } div.transbox-social p { margin: 5%; font-weight: bold; color: #000000; text-align: center; } div.transbox-social h2 { margin: 5%; font-weight: bold; color: #000000; text-align: center; } div.transbox { margin: 100px; background-color: #ffffff; border: 1px solid black; opacity: 0.9; } div.transbox p { margin: 5%; font-weight: bold; color: #000000; text-align: center; } div.transbox h2 { CSS margin: 5%; font-weight: bold; color: #000000; text-align: center; } .image-container { display: flex; justify-content:space-around; /* Adjust as needed */ } .image-container img { width: 200px; /* Fixed width for all images */ height: 200px; /* Fixed height for all images */ margin-top: 50px; object-fit: cover; /* Ensure images maintain aspect ratio */ } nav ul { list-style-type: none; margin: 0; padding: 0; text-align: center; /* Align the list items in the center */ color: white; } nav ul li { display: inline; margin-right: 20px; } section { flex: 1; /* Allow the section to grow to fill the remaining space */ padding: 20px; } .about p{ text-align: center; CSS } footer { background-color: #c84209; color: #fff; text-align: center; padding: 10px; margin-top: auto; /* Push the footer to the bottom */ } .card { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add shadow effect */ opacity: 0.9; } form { display: flex; flex-direction: column; align-items: center; /* Center the form horizontally */ } form label, form input, form textarea, form button { margin-bottom: 10px; } form textarea { height: 100px; /* Set a fixed height for the textarea */ resize: vertical; /* Allow vertical resizing */ } form button { padding: 10px 20px; background-color: #333; color: #fff; border: none; CSS cursor: pointer; } form button:hover { background-color: #555; } .menu { padding: 20px; text-align: center; } table { width: 100%; border-collapse: collapse; text-align: center; } th, td { padding: 10px; text-align: center; } th { background-color: black; color: white; } td img { max-width: 100px; border-radius: 5px; } JavaScript JavaScript 2 Marks JavaScript code are impeded in the contact.html page for Form validation, and Popup windows by this code: window.onload = function() { document.getElementById(‘contactForm’).onsubmit = function(event) { event.preventDefault(); // يمنع تسليم الفورم فاضي او غير متمل البيانات var name = document.getElementById(‘name’).value.trim(); var email = document.getElementById(’email’).value.trim(); var message = document.getElementById(‘message’).value.trim(); if (name === ” || email === ” || message === ”) { alert(‘Please fill out all fields.’); return false; // يمنع تسليم الفورم فاضي } // رساله البوب في حال كان الفورم فاضي وانضغط زر التسليم مارح يتسلم وتظهر الرسالة var popupMessage = “Thank you for your message, ” + name + “!nWe will get back to you soon.”; alert(popupMessage); // Optionally, you can submit the form here using AJAX if needed // Example: submitForm(name, email, message); }; }; JavaScript – Form validation: – Popup window: JavaScript – Popup window after submitting:
Collepals.com Plagiarism Free Papers
Are you looking for custom essay writing service or even dissertation writing services? Just request for our write my paper service, and we'll match you with the best essay writer in your subject! With an exceptional team of professional academic experts in a wide range of subjects, we can guarantee you an unrivaled quality of custom-written papers.
Get ZERO PLAGIARISM, HUMAN WRITTEN ESSAYS
Why Hire Collepals.com writers to do your paper?
Quality- We are experienced and have access to ample research materials.
We write plagiarism Free Content
Confidential- We never share or sell your personal information to third parties.
Support-Chat with us today! We are always waiting to answer all your questions.
