Create a sample online news page that meets the following criteria: Attach a CSS
ID: 3724269 • Letter: C
Question
Create a sample online news page that meets the following criteria:
Attach a CSS file within the tag of the webpage
CSS will control the following:
Hyperlinks (for the 5 different states of the anchor tag) in the menu
Border properties for at least 1
tag
The layout of an image and corresponding text using the float property (will look like below with the image floated to the right and text to the left or the other way around).
A div which will serve as the menu for the site. The menu will include 4 or more links such as; Sports, Business, Classifieds, etc.
The links don’t need to ‘go anywhere’ they can be dead links using the # tag.
An image and corresponding text which will look like a news story
At the end of the text insert a hyperlink that reads ‘Click to continue reading’. The link should go to a random news website, and open in a new window/tab. The link will have the following properties. Styling for the link will be different than the links in your menu:
The link will be a blue color, not underlined, displayed in bold, and in 18 pixel font.
When the mouse pointer is hovered over the link the text color will change to red and it will be underlined.
Explanation / Answer
Following is the html code:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<header>
<h1>Planet</h1>
</header>
<nav>
<ul>
<div><a class="anchor" href="#">Sports</a></div>
<div><a class="anchor" href="#">Business</a></div>
<div><a class="anchor" href="#">Classifieds</a></div>
<div><a class="anchor" href="#">Standard</a></div>
</ul>
</nav>
<article>
<h1>Moon</h1>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/338px-FullMoon2010.jpg" alt="Pineapple">The Moon is an astronomical body that orbits planet Earth, being Earth's only permanent natural satellite. It is the fifth-largest natural satellite in the Solar System, and the largest among planetary satellites relative to the size of the planet that it orbits (its primary). Following Jupiter's satellite Io, the Moon is the second-densest satellite in the Solar System among those whose densities are known.
The Moon is thought to have formed about 4.51 billion years ago, not long after Earth. The most widely accepted explanation is that the Moon formed from the debris left over after a giant impact between Earth and a Mars-sized body called Theia.
The Moon is in synchronous rotation with Earth, always showing the same face, with its near side marked by dark volcanic maria that fill the spaces between the bright ancient crustal highlands and the prominent impact craters. As seen from the Earth, it is the second-brightest regularly visible celestial object in Earth's sky, after the Sun. Its surface is actually dark, although compared to the night sky it appears very bright, with a reflectance just slightly higher than that of worn asphalt. Its gravitational influence produces the ocean tides, body tides, and the slight lengthening of the day.</p>
<a class="link" href="https://timesofindia.indiatimes.com/defaultinterstitial.cms" target="_blank"><b>Click to continue reading</b></a>
</article>
</div>
</body>
</html>
index.css
header{
color: white;
background-color: black;
text-align: center;
}
nav {
float: left;
max-width: 160px;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
img {
float: right;
border: 1px solid black;
}
.anchor {
text-decoration: none;
color: black;
}
.link {
text-decoration: none;
font-size: 18px;
}
.link:hover {
text-decoration: underline;
color: red;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.