Hallo,
wie im Titel schon steht habe ich mit HTML, CSS & co. noch nicht viel am Hut gehabt. Ich habe angefangen eine kleine Website für unser Dorf zu machen. (http://www.daenkritz.info)
Das ganze hat keine Eile, darum möchte ich das ganze auch nicht mit einem Homepage Builder oder so machen, ich möchte HTML, CSS & co Anfangen zu lernen.
Meine Frage ist, wie kann ich eine einfache Bildgalerie auf die Startseite packen, also das die Bilder so alle 5 Sekunden weiter gehen. Ich habe mir schon mehrere Tutorials auf YouTube angeschaut, aber keins konnte mir so wirklich weiter helfen.
den Aktuellen Code habe ich mehr oder weniger auch aus einem Tutorial, aber wenn ich jetzt die Bilder Galerie noch hinzufügen wollte, ging es nicht.
Lg Felix
HTML: index.html
<html>
<head>
<title>Dänkritz</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
<p>Willkommen in Dänkritz</p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Bilder</a>
<ul>
<li><a href="html/pictures/2019.html">2019</a></li>
<li><a href="html/pictures/2018.html">2018</a></li>
<li><a href="html/pictures/2017.html">2017</a></li>
<li><a href="html/pictures/2016.html">2016</a></li>
<li><a href="html/pictures/2015.html">2015</a></li>
<li><a href="html/pictures/2014.html">2014</a></li>
<li><a href="html/pictures/2013.html">2013</a></li>
<li><a href="html/pictures/2012.html">2012</a></li>
</ul>
</li>
<li><a href="html/events.html">Events</a></li>
<li><a href="html/fire_department.html">Feuerwehr</a></li>
<li><a href="html/history.html">Geschichte</a></li>
</ul>
<ol>
<li><a href="html/imprint.html">Impressum</a></li>
</ol>
</nav>
</body>
</html>
Alles anzeigen
CSS: style.css
*{
margin: 0;
padding: 0;
}
body {
background-image: url(../assets/pictures/background.jpg);
background-size: cover;
}
nav {
width: 100%;
height: 60px;
background-color: #fff;
}
nav p {
font-family: Arial, Helvetica, sans-serif;
color: #222;
font-size: 32px;
line-height: 55px;
float: left;
padding: 0px 20px;
}
nav ul {
float: left;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: Arial, Helvetica, sans-serif;
color: #222;
font-size: 18px;
padding: 22px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #fff;
padding: 10px;
border-radius: 0px 0px 4px 4px
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li a {
padding: 8px 12px;
}
nav ul li ul li {
width: 60px;
border-radius: 4px
}
nav ul li ul li a:hover {
background-color: #f3f3f3;
}
nav ol {
float: right;
}
nav ol li {
float: right;
list-style: none;
position: relative;
}
nav ol li a {
display: block;
font-family: Arial, Helvetica, sans-serif;
color: #222;
font-size: 18px;
padding: 22px 14px;
text-decoration: none;
}
Alles anzeigen