Web Page Using HTML5 And CSS This Assignment Shows How You C
Web Page Using Html5 And Cssthis Assignment Shows How You Can Develo
Web Page (using HTML5 and CSS) This assignment shows how you can develop a simple web page with just HTML and CSS. Create a HTML Page for yourself with the following conditions: 1) Should use only HTML and CSS for this page. 2) Title should say “FirstName LastName Web page” 3) There should be a picture on the page. It can be your picture or a picture of your pet or any picture you would like. 4) In a tabular form it should give details of all courses you are taking this semester. Table should have headers. 5) The page should contain the favorite links of webpages which you visit frequently like news links or other links. 6) Please use style sheet to create a background image with z index = 1 and a foreground image with z index = 2. 7) Footer of the page should say “Created by your name and include your nova email link for comments”. 8) In an unordered list you should give your three favorite food items. When hovering over the item it should display the picture of the food item. 9) Use a CSS box model with content, padding, border and margin. Content could be your favorite hobby or sport or favorite book etc. 10) Show how you can use a special class for creating your own style for the page and apply the style. 11) Make sure that the webpage includes an audio file. Make sure that the audio is appropriate for the audience. Please cite the source of the audio file.
Paper For Above instruction
/ CSS styles for background and foreground images with z-index /
body {
position: relative;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/ Background image with z-index 1 /
.background-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('background.jpg');
background-size: cover;
background-position: center;
z-index: 1;
}
/ Foreground image with z-index 2 /
.foreground-image {
position: relative;
z-index: 2;
display: inline-block;
margin: 20px;
}
/ Style for the table /
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #000;
padding: 8px 12px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
/ Style for footer /
footer {
text-align: center;
margin-top: 40px;
font-size: 1em;
color: #333;
}
/ Style for favorite food list items with hover images /
ul#favorite-foods {
list-style-type: none;
padding: 0;
width: 200px;
margin: 20px auto;
}
ul#favorite-foods li {
position: relative;
padding: 10px;
background-color: #eef;
margin-bottom: 10px;
cursor: pointer;
}
ul#favorite-foods li:hover::after {
content: "";
position: absolute;
top: 0;
right: -150px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
background-size: contain;
background-image: url('food1.jpg');
}
/ Example of a special class for custom styles /
.highlight {
background-color: yellow;
font-weight: bold;
}
/ Box model container for hobby or interest /
.box {
box-sizing: border-box;
width: 400px;
margin: 20px auto;
padding: 20px;
border: 2px solid #555;
background-color: #fafafa;
}
FirstName LastName Web page
My Courses This Semester
| Course Code | Course Name | Instructor | Schedule |
|---|---|---|---|
| CS101 | Introduction to Computer Science | Prof. Smith | Mon/Wed 9-10:30 |
| ENG201 | English Literature | Dr. Johnson | Tue/Thu 11-12:30 |
| MATH301 | Calculus III | Dr. Lee | Mon/Wed 1-2:30 |
Frequently Visited Webpages
My Favorite Foods
- Pizza
- Burger
- Sushi
My Favorite Hobby
I enjoy playing basketball, which helps me stay active and teamwork skills.
My Special Style
This paragraph has a custom style applied using a special class.
Listen to This Audio
Enjoy this appropriate audio clip:
Your browser does not support the audio element.
Source: Example Audio Source
Created by FirstName LastName and yournovaemail@nova.edu for comments
document.querySelectorAll('#favorite-foods li').forEach(function(item){
item.addEventListener('mouseenter', function(){
var imgUrl = this.getAttribute('data-img');
this.style.backgroundImage = 'url(' + imgUrl + ')';
});
item.addEventListener('mouseleave', function(){
this.style.backgroundImage = '';
});
});