Create webpage using html. implement these things: In the heading display your first and last name followed by a random number with a brief description below. Apply grid template to your website that has two columns that be set to width of 30%, 70%, and 30% with a 10px gap. The columns that are 30%, make them reserved for advertisement. Apply three images in the middle grid, with a drop down hover action that makes the picture bigger with a button link below them. Each of the images should have buttons that say, About Me!, Contact Me!, Donate Me! that should highlight different colors when hover.

Create webpage using html. implement these things: In the heading display your first and last name followed by a random number with a brief description below. Apply grid template to your website that has two columns that be set to width of 30%, 70%, and 30% with a 10px gap. The columns that are 30%, make them reserved for advertisement. Apply three images in the middle grid, with a drop down hover action that makes the picture bigger with a button link below them. Each of the images should have buttons that say, About Me!, Contact Me!, Donate Me! that should highlight different colors when hover.

New Perspectives on HTML5, CSS3, and JavaScript

6th Edition

ISBN:9781305503922

Author:Patrick M. Carey

Publisher:Patrick M. Carey

Chapter9: Getting Started With Javascript: Creating A Countdown Clock

Section: Chapter Questions

Problem 9RA

See similar textbooks

Similar questions

Open the HTML and JavaScript files provided as start up files (index.html and navigation.js). Then, run the application and notice that when you click on a link in the sidebar, the page is scrolled so the information for the speaker associated with that link is displayed. In other words, this application works even if JavaScript is disabled. In the JavaScript file, add an event handler for the ready event method. Then, within the function for that event handler, add jQuery code that hides the heading and article for all but the first speaker. Add an event handler for the click event of the <a> elements in the sidebar. Then, within the function for that event handler, add jQuery code that hides all the speaker information, gets the value of the href attribute of the link that was clicked, and then uses that value to display the heading and article for the speaker associated with that link.
In your HTML file, please do the following: Add an h1 tag with a class of text-center and add the text of "Lesson 13 Project". Create a div class of container Inside the container, create a div id of test-input Inside the test-input, add the following: input box with an id of isValidInput button with an id of isValidBtn Outside of the test-input, but inside the container, create a paragraph tag with an id of isValidMsg CSS In your stylesheet, please add the following: Set an asterisk with a property of box sizing equal to border box.Set the body with the following properties:set a property of font-family and set it equal to sans-serif.set a minimum height of 100%.set a vertical overflow of hidden.Set a class called text-center and set it to align the text to the center.Create a container class, and add the following properties:set the display property to flexjustify the content to centeralign the items to centerset the height to 100 viewport heightset the flex direction to…
Implement a Web Page with CSS stylesCreate a div element with a width and height of 500 px. Create a diagonal linear gradient using colors of the rainbow- Red, Orange, Yellow, Green, Blue, Indigo, Violet.
Imagine that the HTML file for your web page project includes a div element with the id value “cupcake” and you are writing a function to display and rearrange some images within that element. What JavaScript statement would you place in the blank to move the last image within the ccFrostingelement to the beginning of the line and shift the other images one position toward the end? let frostingFiles = ["pinkFr.jpg", "blueFr.jpg", "chocFr.jpg"] let frostingCount = frostingFiles.length; function frostCupcake() { let cupCake = document.getElementById("cupcake"); let ccFrosting = document.createElement("div"); cupCake.appendChild(ccFrosting); ccFrosting.id = "ccFrosting"; for (let i = 0; i < frostingCount; i++) { let image = document.createElement("img"); image.src = frostingFiles[i]; ccFrosting.appendChild(image); } function shuffleBack() { _____ } } a. ccFrosting.appendChild(ccFrosting.firstElementChild); b.…
Write the HTML code to output the followings. Do this task as at it given in the image with same format , style ,bold style. everything remain same as given in the image.
change below code to the example photo page. the photo is just example but the layout should be like that @extends('base') @section('main') <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg"> <div class="row"> <div class="col-sm-12"> @if(session()->get('success')) <div class="alert alert-success text-center"> {{ session()->get('success') }} </div> @endif </div> <div class="col-sm-12"> <br /> <h3 class="display-5 text-center">Room List</h3> <table class="table table-striped">…
Please write a program that interprets the BMI of a person based on a user’s weight and height. And please recreate the page. Use any javascript, css and html files necessary to replicate this. Based on the BMI level it should tell you on the FINDINGS section the following: If BMI is < 18.5 they are underweight If BMI > 18.5 but < 25 they have a normal weight If BMI > 25 but below 30 they are overweight If BMI > 30 but below 35 they are obese If BMI > 35 they are clinically obese.
Make the button timer and reset work, also make the cards to be flipped over and make them to be in random order, when you match two correct cards let them be flipped, if they are not matching flipdem back. Do this in JavaScript. html code: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="start.css"> <title></title> </head> <body> <div class="whole"> <div class="images"><img src="1.png"></div> <div class="images" ><img src="final.jpg"></div> <div class="images"><img src="2.png"></div> <div class="images"><img src="final.jpg"></div> <div class="images"><img src="final.jpg"></div> <div class="images"><img src="4.png"></div> <div class="images"><img src="final.jpg"></div> <div class="images"><img src="3.png"></div> <div…
Give me HTML code to design this interface Code and screenshot is must
Please rewrite this animation code below so that it performs the same functions in a java file instead of the files .css,.js, and .html in visual studios. You would need to import javaFX and include your images for creature.png,forestbackground.png,human.png, and human2.png. Also attach a screenshot of the running animation in java. script.js const dialogue = [ { character: 'Narrator', text: "In the dead of night, beneath a moon veiled by misty clouds, a lone figure trudged along a desolate forest path." }, { character: 'Narrator', text: "Unknown to her, she was not alone." }, { character: 'Human', text: "Who's there? Show yourself!" }, { character: 'Creature', text: "You venture into realms unknown, mortal. What brings you to these woods?" }, { character: 'Human', text: "I seek passage to the village beyond. I mean no harm." }, { character: 'Creature', text: "Harm is but a shadow in these woods, mortal." }, { character: 'Human', text: "What do you mean?…
Suppose you want to retrieve the width of the last inline image of the holidays class. Which jQuery expression should you use to do this? a. $("img.holidays").last().attr("width") b. $("img.holidays").attr("width") c. $("img.slides").last().attr("width", "500px") d. $("img.slides").attr("width", "500px")
In Javascript, Create a mouseOver event function, that will change the colour of an HTML item (i.e. a button or a list item) to green, then to black after 5 seconds