lektion1.de: Das Template

➊ Layout

Die CSS Anweisungen für das Layout formatieren die wichtigsten Elemente im HTML Grundgerüst.

Die Datei layout.css

@font-face { font-family: standard; font-style: normal; font-weight: 400; src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); } html {scroll-behavior: smooth;} body { margin: 0; padding: 0; font-size: 18px; height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } #logo { background: linear-gradient(to bottom right,dodgerblue,navajowhite,white,navajowhite,white,limegreen); background-size: cover; text-align: center; font-family: "standard" } #logo:hover { margin: -0.3em; padding: 0.3em; background: limegreen; transition-duration: 1.5s } #logo h1 { margin: 0; padding: 0; } #logo a { display: block; padding: 1em; color: orangered; text-decoration: none } #logo a span { display: block; font-size: 1.5em; text-shadow: 1px 2px 0px slategrey } #logo a:hover, #logo a:hover span {color: white} nav { margin: 0; padding: 2em 0; text-align: center; font-family: "standard" } nav a { display: inline-block; padding: 6px 9px; border: 3px ridge dodgerblue; text-decoration: none; font-size: 1.2em; color: white; background: orangered } nav a:nth-child(1n-1) {transform: rotate(30deg)} nav a:nth-child(2n-1) {transform: rotate(350deg)} nav a:nth-child(3n-1) {transform: rotate(10deg)} main { margin: 0; padding: 1em; border: 1px solid navajowhite; box-shadow:0 6px 12px 0 slategrey; background: white } aside { margin: 0em; padding: 1em; background: navajowhite; opacity: 0.9 } #feedback { text-align: center; font-family: "standard" } #status { margin: 0 auto; padding: 1em; max-width: 25em; border: dashed medium orangered; border-radius: 8px } #note { border: dashed medium limegreen; border-radius: 8px; padding: 1em } #footer { text-align: center; font-family: "standard"; } #footer div, #footer a.tip { display: inline-block; vertical-align: top; border: 3px ridge navajowhite; border-radius: 8px; padding: 1em; } #footer a.tip { border-color: dodgerblue; color: white; background: orangered; text-decoration: none; opacity: 0.9 } #footer a.tip:hover {background: limegreen;} #footer a.tip span { display: block; margin-bottom: 12px; border-bottom: thin solid white; font-size:4em } #footer h2, #footer h3, #footer p, #footer ul { margin:0; padding:0; } #footer h2 {border-bottom: 1px solid navajowhite} pre {white-space:pre-wrap; word-break:break-all;}

Lektion1.deDas Template

➊ Layout

Kommentare