Please help me with this. I am not understanding what to do
C- Create thumbnails of all proposed webpages and place them on one single
paper/page. Connect all your thumbnails with arrows. All designs must have
at least one arrow pointing to them, and at least one arrow pointing from
them. This is intended to illustrate how you will move around the website.
The arrows must start from the EDGE of the ‘element’ that one clicks to
navigate from a given page and the arrows must end at the EDGE of the
webpage or sidebar or popup that opens as a result.
Let me tell you some back story about what I am instructed to do. for a application I am creating (Document editor)
So I have to illustrate a totoal of 3-10 webpages using wireframes that should be Lo-Fi (no colour, and as concise as possible). Noting that I might have popup boxes, or dropdown menus/sidebars. You should draw these as their own small boxes/rectangles/etc. Do not drawn any images top of your webpage designs as this will clutter stuff. And I also need to title all webpages and popup boxes/sidebars/whatever else. Refrain from unnecessary detail (e.g. specific text and images.
to generate a solution
a solution
- How to do this exercise? Halloween 15 Add a transition and an animation In this exercise, you’ll add a transition and an animation to the product page that you created in exercise 11. When you’re done, the page should look similar to this: Specifications • Add a transition for the widths of the images in the right sidebar of the cat.html file in the products folder that will last for three seconds and use the linear speed curve. The transition should increase the width of an image to 125 pixels when the mouse hovers over an image. Be sure to provide for all browsers. • Add an animation for the image in the section that will cause the image to move up and down when the page is loaded. The animation should last for half a second, use the ease-in-out speed curve, repeat six times, and alternate directions on each repetitionarrow_forwardUse media queries to create a responsive design for the menu shown in Figure 5–57. You will need to create three menu layouts: one for screen widths 500 pixels or less, another for screen widths of 501 pixels to 710 pixels, and a third for screen widths greater than 710 pixels. 1. Add a viewport meta tag to the document head to set the width of the layout viewport equal to the width of the device and set the initial scale of the viewport to 1.0. 2. Open code5-1_media.css file and create a media query for devices with a maximum width of 500 pixels. Within the query do the following: Set the display of the img element within the article element to none. Center the text contained within the ul element belonging to the submenu class. 3. Create a media query for devices with a minimum width of 501 pixels. Within the query do the following: Float the nav element on the left page margin. Set the width of the nav element to 130 pixels and the height to 400 pixels. Set the…arrow_forwardMapping is essential for UI design.Can the UI be simplified?arrow_forward
- Need help with JavaScript Animation making it Move the HTML button that moves the Tinkerbell image gently by gliding it to the right and not stopping unless you click a stop button. This Assignment needs to be done in JavaScript. Below is the Image/Link that I must be used for this assignment. It must move to the right and glide across the page forever unless I push the stop button. Here is a link to the Tinkerbell image below. Please help me with this Assignment. Thanks https://th.bing.com/th/id/OIP.27MXQh0DkiWqwOCJiS80jQAAAA?w=190&h=327&c=7&r=0&o=5&dpr=1.5&pid=1.7arrow_forwardTitle: Transformers Beast Characters Webpage Creation Objective: The objective of this activity is to develop a web page dedicated to Transformer beast characters using HTML, CSS, and Flexbox layout. The activity aims to reinforce the understanding and practical implementation of various web development concepts, including flexbox, navigation, hover effects, flex-direction, nth-child, tables, transitions, and image display. Step 1: Set Up the Project Open your preferred text editor. Create a new folder for the activity and name it "TransformersBeastCharacters." Inside the project folder, create the following files: html (main page) html (character information page) html (image gallery page) css (CSS file) Step 2: Create the Basic Structure Open the index.html file in your text editor. Set up the basic structure of an HTML document by adding the HTML, head, and body tags. Inside the head tag, add a title for the…arrow_forwardPlease help me with this. I am not understanding what to do. Please show what it saying using the image below C- Create thumbnails of all proposed webpages and place them on one singlepaper/page. Connect all your thumbnails with arrows. All designs must haveat least one arrow pointing to them, and at least one arrow pointing fromthem. This is intended to illustrate how you will move around the website.The arrows must start from the EDGE of the ‘element’ that one clicks tonavigate from a given page and the arrows must end at the EDGE of thewebpage or sidebar or popup that opens as a result. Let me tell you some back story about what I am instructed to do. for a application I am creating (Document editor) So I have to illustrate a totoal of 3-10 webpages using wireframes that should be Lo-Fi (no colour, and as concise as possible). Noting that I might have popup boxes, or dropdown menus/sidebars. You should draw these as their own small boxes/rectangles/etc. Do not drawn any images…arrow_forward
- Create a page article. Can be any topic of your choice as long as you will apply some of the elements in Styles, Text Formatting, Quotations, Commenting and Coloring. Make sure to make it concise and informative.arrow_forwardShow that you understand how cascading style sheets (CSS) work by providing an example.arrow_forwardComplete the following webpage assignment. Assignment Instructions: Design a webpage to simulate a Blog. The website must have a banner image and a featured image with multiple resolutions to be active at different resolution breakpoints just as discussed in this lesson. Include a jQuery script in your project to further enhance the user experience. Use one of the CDN libraries. The script is up to your discretion though you must be able to justify its use. The blog page must be aesthetically pleasing and follow a traditional blog structure. It may help to look at the many WordPress templates available on the net.arrow_forward
- The action Practice vertical and slowMove Vertical tactics first. Use the moveHorizontal command to move the circle in your document 70 pixels to the left of where it is right now.arrow_forwardwhat’s with these double-underlined links in the middle of the page that pop out ads when you mouse over them? Where have you seen these? What are your feelings about this type of design?arrow_forwardAside from the given pic below, make a presentable and informative web page. Please don't forget to screenshot the web pagearrow_forward
- Database System ConceptsComputer ScienceISBN:9780078022159Author:Abraham Silberschatz Professor, Henry F. Korth, S. SudarshanPublisher:McGraw-Hill EducationStarting Out with Python (4th Edition)Computer ScienceISBN:9780134444321Author:Tony GaddisPublisher:PEARSONDigital Fundamentals (11th Edition)Computer ScienceISBN:9780132737968Author:Thomas L. FloydPublisher:PEARSON
- C How to Program (8th Edition)Computer ScienceISBN:9780133976892Author:Paul J. Deitel, Harvey DeitelPublisher:PEARSONDatabase Systems: Design, Implementation, & Manag...Computer ScienceISBN:9781337627900Author:Carlos Coronel, Steven MorrisPublisher:Cengage LearningProgrammable Logic ControllersComputer ScienceISBN:9780073373843Author:Frank D. PetruzellaPublisher:McGraw-Hill Education