Question

In: Computer Science

You are to create a page that has four images that are links to other schools...

You are to create a page that has four images that are links to other schools in the New England area. Each image is to be controlled in size by a CSS responsive design. The page is to appear balanced by an appropriate, complimentary, background color. White is not an option as a background color. Look up how to make image links on W3Schools.There is to be a small repeated background image that appears on the right side of the page but not at the edge of the page. There is to be a header banner in a header section (look up "header" tag on W3Schools).The link images are to run vertically down the screen but they may not cover any part of the background image or the header banner.All images are to be in good taste and should represent the site to which they connect. The image does not have to be an exact image of that school but it has to be related.You can't use a fish image to represent a University.

Add an ordered list to your page that will list the current standings of the top eight teams in the National Football League. The list must be styled with CSS and can not use any of the default colors, fonts, or sizes. The first letter of each team's name must be a different color.No content may be against any of the screen edges.Make sure that your submission includes all folders required in your site structure.

Solutions

Expert Solution

index.html

<html>
<head>
<title>Welcome to my website</title>
<style>
body{
background-color: pink;
}

div{
background-image: url("https://images.pexels.com/photos/1020315/pexels-photo-1020315.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
background-repeat: repeat;
}

ul {
list-style-type: none;
margin: 15 15;
padding: 10 10;
overflow: hidden;
}

li:after{
content: "\A";
white-space: pre;
}

h1{
text-align: center;
font-family: "Comic Sans MS", cursive, sans-serif;
}

ol li{
list-style-type: none;
font-family: "Comic Sans MS", cursive, sans-serif;
}

div.repeat{
width: 300px;
height: 300px;
float: right;
background-color: #eee;
background-image: url("https://images.pexels.com/photos/1020315/pexels-photo-1020315.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
background-repeat: repeat;
resize: both;
overflow: hidden;
}

li::first-letter{
font-sie: 200%;
color: #8A2BE2;
}
</style>
</head>
<body>
<header>
<h1> Welcome to all the Universities </h1>
</header>
<div class="repeat">
</div>
<ul>
<li><a href="#"><img border="0" src="https://i.pinimg.com/originals/d7/e1/af/d7e1af0d4edd9deca23d3447cc09c123.jpg" width="100" height="100"/></a></li>
<li><a href="#"><img border="0" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2fLp0aHIgXkbELm8fVjh44T5MTzeCU2bVDavqq8GGMSakfrIk" width="100" height="100"/></a></li>
<li><a href="#"><img border="0" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-8nhNHwJK8H6LuxaDE49N2J07oki8dac9E7O_Qqzyvh4IY6ff" width="100" height="100"/></a></li>
<li><a href="#"><img border="0" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBFD6naH0BAz9XrOw5ro5n2fTrkdLtsxCZySWbwHwmsBTwUysIdA" width="100" height="100"/></a></li>
</ul>
<center>
<ol>
<li>First Team</li>
<li>Second Team</li>
<li>Third Team</li>
<li>Fourth Team</li>
<li>Fifth Team</li>
<li>Sixth Team</li>
<li>Seventh Team</li>
<li>Eightth Team</li>
</ol>
</center>
</body>
</html>

Output:


Related Solutions

* (create grid of images any images) apply a CSS3 grid, so that several columns and...
* (create grid of images any images) apply a CSS3 grid, so that several columns and rows of images now appear. Apply a color to the background and font to each grid box. * In each box, add two buttons via JQuery or createElement(). One button will read 'make favorite' and the other will read 'unfavorite.' * If the 'make favorite' button in any box is clicked, in the grid page, save the image's url or filename to a cookie....
1 to 2 page paper on - Has Technology and Covid-19 changed the Norm for Schools...
1 to 2 page paper on - Has Technology and Covid-19 changed the Norm for Schools and Education?
Which of the four schools of thought do you think is correct in their understanding and...
Which of the four schools of thought do you think is correct in their understanding and analysis of the economy? Explain.
After having described the functioning of the walrasian economy (links with the various schools ,hypotheses ,conclusions)...
After having described the functioning of the walrasian economy (links with the various schools ,hypotheses ,conclusions) you will discuss its contributions of its limits.
Pick an online source, a textbook, and two other sources and create a works cited page...
Pick an online source, a textbook, and two other sources and create a works cited page in MLA format. Thank you.
More images for certain company produces and sells frozen pizzas to public schools throughout the eastern...
More images for certain company produces and sells frozen pizzas to public schools throughout the eastern United States. Using a very aggressive marketing strategy, they have been able to increase their annual revenue by approximately $10 million over the past 10 years. But increased competition has slowed their growth rate in the past few years. The annual revenue, in millions of dollars, for the previous 10 years is shown. Year Revenue 1. 8.43 2. 10.94 3. 13.08 4. 14.11 5....
Create a HTML webpage for the film Avatar (2009). You can use the content (text, images)...
Create a HTML webpage for the film Avatar (2009). You can use the content (text, images) from this Wikipedia page: https://en.wikipedia.org/wiki/Avatar_(2009_film) Besides the basic HTML document elements, the html document should have the following components or meet the requirements: Use <header><section><nav><article><div><footer> to arrange the layout of the page h1, h2 At least 1 table At least1 image At least 2 links, one link opens the target page with a new window Several paragraphs with formatted text (use at least 3...
Marx has been a very influential thinker in Economics and other social sciences. Many schools of...
Marx has been a very influential thinker in Economics and other social sciences. Many schools of thought or branches of Marxism have emerged as a result of his writings. One of these branches is Marxist Humanism. ​ It is a Marxism that primarily focuses on the early writings of Marx, especially the​ ​Economic and Philosophical Manuscripts of 1844​ in which Marx espoused his theory of alienation, as opposed to his later works, which are considered to be concerned more with...
Marx has been a very influential thinker in Economics and other social sciences. Many schools of...
Marx has been a very influential thinker in Economics and other social sciences. Many schools of thought or branches of Marxism have emerged as a result of his writings.   One of these branches is Marxist Humanism. ​ It is a Marxism that primarily focuses on the early writings of Marx, especially the​ ​Economic and Philosophical Manuscripts of 1844​ in which Marx espoused his theory of alienation, as opposed to his later works, which are considered to be concerned more with...
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...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT