Ja wiem jak to zrobić z użyciem jQuery ale niestety muszę to zrobić z użyciem html i CSS takie mam zadanie.
Proszę wykonać stronę internetową.
Uzyskany efekt powinien być analogiczny do przedstawionego w projekcie graficznym wizualizacji(umieszczonego powyżej)
Nasunięcie kursora myszki na miniaturkę powinno wyświetlać zdjęcie w dużym wymiarze, zgodnie z widokiem przedstawionym powyżej.
Galerię należy wykonać wyłącznie w oparciu o język HTML i CSS.
Taki mam kod ale to jeszcze nie jest to co mam być
<!DOCTYPE html>
<html>
<head>
<meta name="Keywords" content="Jasne Błonia">
<meta name="Description"
content="Jasne Błonia w Szczecinie - parę zdjeć">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Jasne Błonia w Szczecinie</title>
<script>
document.createElement("article");
document.createElement("footer");
document.createElement
("header");
document.createElement("nav");
</script>
</head>
<body>
<!-- HEADER -->
<header><img src="foto/jasneblonia.jpg"
alt="Jasne Błonia - widok w kierunku Parku Kasprowicza" /><h1>Jasne Błonia - listopad 2013 </h1>
</header>
<!-- ARTICLE --><article>
<h2>Plac Jasne Błonia im. Jana Pawła II</h2>
<p>Piękny obszar zielony ograniczony ulicami Ogińskiego, Szymanowskiego
i Moniuszki, na północ od gmachu szczecińskiego Urzędu Miejskiego. Od
północnego zachodu przechodzi w Park Kasprowicza, który z kolei
sąsiaduje z Lasem Arkońskim.<br>
Ulubione tereny spacerowe mieszkańców miasta.</p>
<p>Jasne Błonia powstały w latach 1925-27 na gruntach należących do
rodziny Quistorpów, od razu z rzędami platanów klonolistnych po bokach
rozległego trawnika z kompozycjami kwiatowymi. <br />
Aleje platanowe stanowią dziś największe w Polsce skupisko tych drzew,
których rośnie tu ponad 200! <br/>
Jasne Błonia - żyją cały rok - jest to teren zarówno spacerów
rodzinnych, wypoczynku, jak i miejsce licznych imprez, wystaw,
festynów. </p>
<div class="galeria">
<a ="_blank" href="foto/JB1.jpg"><img src="miniatury/JB1min.jpg" alt="Tekst alternatywny" border="0"></a>
<a target="_blank" href="foto/JB2.jpg"><img src="miniatury/JB2min.jpg" alt="Tekst alternatywny" border="0"></a>
<a target="_blank" href="foto/JB3.jpg"><img src="miniatury/JB3min.jpg" alt="Tekst alternatywny" border="0"></a>
<a target="_blank" href="foto/JB4.jpg"><img src="miniatury/JB4min.jpg" alt="Tekst alternatywny" border="0"></a>
<a target="_blank" href="foto/JB5.jpg"><img src="miniatury/JB5min.jpg" alt="Tekst alternatywny" border="0"></a>
<a target="_blank" href="foto/JB6.jpg"><img src="miniatury/JB6min.jpg" alt="Tekst alternatywny" border="0"></a>
</div>
</article>
<!-- FOOTER --><footer>
<p class="stopka">kontakt: telefon itp ; informacja o prawach
autorskich></p>
<p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img
style="border: 0pt none ; width: 88px; height: 31px;"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Poprawny CSS!"> </a></p></footer>
</body>
</html>
CSS
html, body {
background-color:#E8E5DC;
font-family:verdana,arial,sans-serif;
font-style:normal;
font-weight:normal;
font-size:10pt;
color:#174074;
width:900px;
margin:0 auto;
}
header, article, aside, footer
{
display:block;
}
header {
margin:0 0 0 0;
width:900px;
background-color:#ffffff;
overflow: hidden;
}
article {
float:left;
margin: 0 0 0 0;
width:900px;
background-color:#ffffff;
}
footer {
width:892px;
background:#174074;
color: #ffffff;
text-align:center;
padding: 4px 4px 4px 4px;
font-weight:bold;
clear:both;
}
p {
margin-right: 20px;
margin-left: 20px;
text-align:left;
}
h1 {
text-align:center;
color:#174074;
font-weight:bold;
font-size:24px;
background-color:#ffffff;
}
h2 {
text-align:center;
font-weight:bold;
margin-left:18px;
margin-right:4px;
color: #009966;
}
}
.stopka {
text-align:center;
font-weight:normal;
margin:10px 20px 10px 20px;
color:#ffffff;
}
.galeria
{
display: block;
margin-top: 50px;
margin-left: 30px;
}
