In: Computer Science
create a website that describes a city of your choice. The website must include the following pages: Home Page Arts & Culture News & Events Recreation
Requirements
Write from scratch the HTML and CSS files and show your creativity, aesthetics and imagination.
Begin by creating a wireframe diagram that indicates the structure of the web page
. Use grammatically correct sentences that provide reasonable flow through each web page. Include the following:
Structural elements (header, nav, main, div and footer)
Headings (h1, h2, etc.), paragraphs, blockquote and span
At least five different phrasing elements in your website that fit the flow of the page
Unordered list and description list
Three special characters (entity characters)
CSS properties (configure color, background, text, padding, border, margin, box-shadow, opacity)
CSS Id, class and descendant selectors Images with captions (use figcaption)
Favicon
At least one background image that configures a linear or a radial gradient
Heirarchy of folder:
images used in project:
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/1.jpg" type="image" sizes="20x20">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
.nav-bar {
overflow: hidden;
background-color: rgb(46, 45, 45);
}
.nav-bar a {
float: left;
display: block;
color: #e0d2d2;
text-align: center;
padding: 15px 18px;
text-decoration: none;
}
.footer {
padding: 5px;
text-align: center;
background: rgb(146, 136, 136);
margin-top: 5px;
}
#bg-grad {
height: 200px;
background-color: yellow; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, rgb(224, 131, 131) , rgb(223, 223, 136));
}
@media screen and (max-width: 400px) {
.nav-bar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="header">
<h1>LONDON</h1>
<h2>My favourite city.</h2>
<nav>
<div class="nav-bar">
<a href="#">Home</a>
<a href="#">Arts & Culture</a>
<a href="#">News & Events</a>
<a href="#">Recreation</a>
</div>
</nav>
</div>
</header>
<main>
<section>
<div id="bg-grad"></div>
<div>
<h3>Explore London</h3>
<p>London is the capital and largest city of England and the United Kingdom.[8][9] The city stands on the River Thames in the south-east of England, at the head of its 50-mile (80 km) estuary leading to the North Sea. London has been a major settlement for two millennia. Londinium was founded by the Romans.[10] The City of London, London's ancient core and financial centre − an area of just 1.12 square miles (2.9 km2) and colloquially known as the Square Mile − retains boundaries that closely follow its medieval limits.[11][12][13][14][15][note 1] The adjacent City of Westminster is an Inner London borough and has for centuries been the location of much of the national government. Thirty one additional boroughs north and south of the river also comprise modern London. London is governed by the mayor of London and the London Assembly</p>
</div>
<div>
<h6>Places to visit in London | where history happens</h6>
<ul>
<li>London bridge</li>
<li>Abbe</li>
<li>Efiel Tower</li>
</ul>
</div>
</section>
</main>
<footer>
<div class="footer">
<h2> © All rights reserved!</h2>
</div>
</footer>
</body>
</html>