Question

I want you to recreate this webpage, well at least it mechanics.

On this page, you will need to implement:
- Display in the heading your first and last name followed by your ASU number with a brief description below.
- Then apply a grid template to your website that has three columns that be set to width of 20%, 60%, and 20% with a 5px gap.
- The columns that are 20%, make them reserved for advertisement.
Apply three images in the middle grid, with a drop down hover action that make 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

Answer 1

To recreate the webpage, you need to display personal information in the heading, apply a grid template to the website, insert images with hover effects, and add buttons with hover effects.

Step-by-step explanation:

Recreating a Webpage

To recreate the webpage, you need to:

1. Display your personal information in the heading using an appropriate HTML tag, such as <h1>.
2. Apply a grid template to your website using CSS, with three columns set to width of 20%, 60%, and 20% and a 5px gap between them.
3. Reserve the 20% width columns for advertisements by using appropriate CSS styling.
4. Insert three images in the middle grid and add a drop-down hover action using CSS.
5. Under each image, add buttons with different colors on hover using CSS.