In this assignment you will create a web page about your favorite sports to play or...

In this assignment you will create a web page about your favorite sports to play or teams to watch. If you don’t watch or play sports, please make up your favorite sports to play or teams to watch. You will be incorporating images into your web page, as well as other concepts learned in this unit.

Create an external style sheet using a text editor of your choosing. In the CSS file add the following style rules:
1. A background image should be applied to the entire web page
2. A background color should be applied to the entire web page as a back up
3. Set a font family of your choosing for all <p> elements, and a different family for all <h1> elements
4. Set a width of 200-300px for all <p> elements
5. Set a text color for the entire document that provides nice contrast with your chosen background image and color
6. Set a rule so that when a link is hovered over the color changes to a different color than the default link color for all <a> elements (Use a CSS pseudo-class)
7. Change the list style type for all <ol> elements to upper roman that have a class of “upperroman”
Save this style sheet as styles.css
Create a web page about your favorite sports to play or watch using the HTML 5 template as a starting point. The web page should be linked to the styles.css style sheet. The web page needs the following content.
1. A heading that briefly describes the page content, similar to a Page Title, placed in an <h1> element
2. Write a brief paragraph on why the sports or teams you chose as your favorites made your list, and place this paragraph in a <p> element
3. Beneath the paragraph create an ordered list that ranks your favorite sports to watch or play, and set its class to “upperroman”
4. Within your ordered list, make sure each of the list items links out to a Wikipedia page for the sports listed, or the team’s web site that you have in your list
5. Inset an image after your list that reflects one of the sports you chose, or a team, using the <img> element
6. At the bottom of your page include an email hyperlink to your email address
7. Somewhere in your code place an HTML comment with you name, assignment name, and date
Save this web page as sports.html

Solutions

Expert Solution

Hi,

Please find below :

sports.html

<!doctype html>
<html>
   
   <head>
       <title>Favourite Sports</title>
       <link rel="stylesheet" href="styles.css">
   </head>

   <body>
       <div class="content">
           
           <h1>Favourite Sports</h1>
           
           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
           
           <ol>
               <li><a href="#">Sport 1</a></li>
               <li><a href="#">Sport 2</a></li>
               <li><a href="#">Sport 3</a></li>
           </ol>
           
           <img src="" width="300" height="300">
       </div>
       <footer><a href="">Your email</a></footer>
   </body>
</html>

Screenshot

styles.css

body {
padding: 0;
margin: 0;
background: #05505D url("") no-repeat right top;
}
h1{
   font-family: Impact, Charcoal, sans-serif;
   font-weight: normal;
}
p{
   font-family: Arial, Helvetica, sans-serif;
   width: 300px;
}
.content{
   padding: 10px 20px;
   color: #FADBD8;
}
ol>li,ol>li>a{
   color: #FADBD8;
list-style-type: upper-roman;
padding: 5px;
text-decoration: none;
}
ol>li>a:hover{
   color: #F9F50D;
}
footer{
   position: fixed;
   bottom: 0;
   background: #FADBD8;
   width: 100%;
   padding: 10px;
   text-align: center;
}
footer a{
   text-decoration: none;
   color: #05505D;
}

Screenshot

Please like if you found it helpful.

venereology answered 1 year ago

Next > < Previous

Related Solutions

For this assignment you are required to create a web page displaying a recipe of your...

For this assignment you are required to create a web page displaying a recipe of your choosing. Your submission should appropriately use the basic head and body construction of an HTML document. Additionally you are required to appropriately use at least three different HTML element types. For example you might use an unordered list for your ingredients, an ordered list for the steps of your recipe, and an image to show the final result. If you choose to use an...

In this weeks assignment you will be sharing your favorite recipe with us via a web...

In this weeks assignment you will be sharing your favorite recipe with us via a web page. The recipe is of your choice and does not have to be a culinary creation, it can be anything! Your web page style and aesthetic should compliment your recipe, do some research for design inspiration if you cannot think of anything. Requirements: Use an external CSS & JS file, no internal or inline styles & scripts Please comment your JS to break down...

For your final project, you are to create a two-page web application of your choice. ASP.NET...

For your final project, you are to create a two-page web application of your choice. ASP.NET : C# You must include the following items: At least 5 different standard server controls At least 2 validation controls At least 1 navigation control ~ one must navigate back and forth to each page One session state element Upon completion of your two-page web application, you will provide a two page report describing the functions of the web application as well as each...

Create a Web page about a book ( The Richest Man in Babylon) that includes the...

Create a Web page about a book ( The Richest Man in Babylon) that includes the following: -page title -a meta keywords tag with at least (5) keywords -a meta description tag -a meta robots tag to allow indexing, but not permit crawling of the site Also, provide 1-2 paragraphs of content with three relevant text links.

Create a Web page about yourself containing the following: Notepad++ The page should have a light...

Create a Web page about yourself containing the following: Notepad++ The page should have a light green background and a one inch margin. The Web page should contain: At least three headings, h1 to h3. At least two paragraphs about you. A numbered list with at least three hyperlinks. The hyperlinks cannot be the ones we created in class today which were the links to Yahoo and Google. Two horizontal rules. All the h1, h2, and h3 tags should have...

n this assignment, you will need to code a Web page that will allow a user...

n this assignment, you will need to code a Web page that will allow a user to enter their first and last names and indicate how many pets they have, if any. If they have pets, the user will be able to list up to three of their names. You will code validations on some of the fields and display error messages on the page when a field does not pass the validation test. If all the data entered is...

JavaScript. Create a Web page with the following features: Three lines of text about anything. A...

JavaScript. Create a Web page with the following features: Three lines of text about anything. A link to OCC (http://www.orangecoastcollege.edu) that opens in a new browser window. An image link (graphical link). A link to the top of the page. A graphical link to your email. Formatted text throughout the page. Horizontal lines

Based on Movie package example, you will create a package about your favorite TV series and...

Based on Movie package example, you will create a package about your favorite TV series and provide the plot() Readme.txt: Explain how you apply polymorphism in your program package Movie; public class MovieTester { public static void main(String[] args) { for(int i = 1; i < 11; i++){ Movie movie = randomMovie(); System.out.println("Movie # " + i + ": " + movie.getTitle() + ", Genre: " + movie.getGenre() + '\n' +"Plot: " + movie.plot()); } } public static Movie randomMovie(){...

In this weeks assignment you will creating some character cards on a web page. These character...

In this weeks assignment you will creating some character cards on a web page. These character cards can be similar to a baseball card, Magic The Gathering Card. It is your choice and anything is fair game. Requirements: Use an external CSS & JS file, no internal or inline styles & scripts Please comment your JS to break down your understanding of what is happening. Please put your name in your code. Create at least 3 character card elements (div's...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...

Subjects