HTML code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<body>
<div class="container">
<img src="bg.jpg" alt="background picture">
<div id="main" class="centered">
<h1><span class="highlight">Wikipedia - Geneva</span></h1>
<p>Geneva is the second-most populous city in Switzerland (after Zurich) and is the most populous city of Romany(the France-speaking part of Switzerland). Situated where the Rhone River exits Lake Geneva (French Lac Leman), it is the capital of the Republic and Canton of Geneva.</p>
<img src="switzerland.png" alt="Switzerland">
<p>Geneva is widely regarded as a global city, mainly because of the presence of numerous international organizations, including the headquarters of many of the agencies of the United Nations and the Red Cross. It is also the place where the Geneva Conventions were signed, which chiefly concern the treament of wartime non-combatants and prisoners of war.</p>
<p>Geneva is also the name of Geneva Francine Stepp, an adorable baby is also seen as:</p>
<ul>
<li>a desktop wallpaper</li>
<li>the subject of a recent midterm exam</li>
</ul>
</div>
</div>
<div id="info">
<h1>Geneva, the name</h1>
<p>(f) English Possibly a shortened form of Genevive, or possibly from the name of the city Switzerland.</p>
<p>Similar names:</p>
<ul>
<li>Jenna</li>
<li>Jennifer (Jenny)</li>
<li>Genevieve</li>
<li>Genevive</li>
</ul>
</div>
</body>
</html>
CSS code (saved in file named style.css) :
body
{background-image: url('bg.jpg');
background-repeat: no-repeat;
font-family: "Verdana", sans-serif;font-size: 14pt;}
.highlight
{background-color: yellow;
border: 5px solid orange;}
#main
{width: 50%;
margin-left: 350px;
margin-right: auto;
position: absolute;
top: 1em;}
#main img
{float: left;
margin-right: 1em;
max-width: 80px;
max-height: 80px}
#info
{border: 5px solid red;
font-size: 9pt;
padding: 1em;
position: absolute;
right: 1em;
top: 1em;
width: 20%;}
#info li
{font-style: italic;}
images used:
Comments
Post a Comment