Übung HTML Personendaten und Kursziele
Personendaten
Unsere Main Site index.html soll Ihre Personendaten und Kursziele zeigen. Minimal sollte im linken Bereich Personendaten Ihr Vorname und Name sowie ein kleiner Text mit Infos zu Ihnen angezeigt werden. Im rechten Bereich wäre ein Foto von Ihnen oder auch ein Phantombild anzuzeigen. Das Bild sollte im Unterverzeichnis images abgelegt werden.
Kursziele
Im Bereich Kursziele sollen mindestens 4 Ziele für diesen Kurs anhand einer Liste angezeigt werden. Der folgende Screenshot zeigt eine mögliche Lösung auf.
Styles
Verfeinern Sie Ihre index.html Datei mit ein wenig CSS Styles. Hierzu erstellen wir die Datei mian.css im Unterverzeichnis css.
Die Datei muss in der Datei index.html via link-Tag referenziert werden.
Das folgende Listing zeigt einen möglichen Ansatz. Fügen Sie neue Styles hinzu oder passen Sie solche an und spielen Sie damit.
* {
margin: auto;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background: silver;
margin: 1em;
font-size: 20px;
}
h1 {
background: white;
text-align: center;
font-size: 28px;
}
ul {
padding-left: 1em;
}
div {
display: inline-block;
margin: 1em 0 1em 0;
}
.scale-100 {
width:100%;
}
.left {
float: left;
}
.right {
float: right;
}
img {
width: 100px;
}