Beispiel:CSS-mehrspaltige Layouts-7.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Seitenansprache - links positioniert</title> <style> body { font: 1em/1.4 Source Sans Pro, Calibri, sans-serif; background:black; color:white; }

.info { max-width: 40em; margin: 2em auto; }

.info img { 

 float: right;
 width: 15em;
 margin-left: 0em;

}

@media (min-width: 40em){ .info { max-width: 60em; padding-inline: 2em; display: grid; grid-template-columns: [info-header-start] 3fr [info-header-end info-body-start] 5fr [info-body-end]; grid-template-rows: auto auto; gap: 0 2em; } }


.info header{ grid-column: info-header; grid-row: 1 / -1; font-family: Futura; text-transform: uppercase;

}

.info h2 { font-size: 1em; font-weight: normal; color: hsl(0, 0%, 60%) }

.info header p{ font-size: 1.62em; line-height: 1.2; color: hsl(0, 0%, 40%); margin: 1em 0; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: none; }

.info > *{ grid-column: info-body; }

.info h2, .info p{ margin: 0 0 0.7em; }

h1 { 

 text-align: center;

}


</style> <script>

</script>

</head>

<body>

Seitenansprache - links positioniert

<section class="info"> <header>

Der Greenscreen

Faszinieren Sie Ihre Gäste mit Foto­montagen der besonderen Art

</header>

<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Fotomontage.jpg">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Sie sind an einer Fotobox für Ihre Veranstaltung interesiert?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</section>

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-mehrspaltige_Layouts-7.html&oldid=99656“