flexbox-youtube-responsive-einbinden.php
Quell Code
<!DOCTYPE HTML>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox layout</title>
<meta name="description" content="5G-freie Schweiz.ch - Informationen über 5G">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin:0;
padding:0;
}
body {
background-color: #4e535d;
display:flex;
flex-direction:column;
}
header {
width: 100%;
height: 170px;
background-color: #4e535d;
color: white;
text-align: center;
font-family: "Alien Encounters", "Arial Black", Verdana;
}
#unten img {
margin-top:16px;
height: 62px;
}
#oben img {
height: 164px;
width: 1901px;
}
nav {
list-style-type: none;
background-color:#2e3545;
width:calc(100% - 10px);
}
nav li {
display: inline-block;
margin-left: -4px;
}
nav a {
display: inline-block;
color: white;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8125em;
height:100%;
width:100%;
padding:20px 16px 20px 6px;
text-decoration:none;
}
nav >ul> li:nth-child(1){
background-color: #1e1d24;
border-right: 2px solid #4e535d;
width: 130px;
text-align:center;
margin-left: 433px;
}
nav >ul> li:nth-child(2){
background: #1e1d24;
width: 210px;
text-align: center;
}
nav >ul> li:nth-child(3){
background: #1e1d24;
border-left: 2px solid #4e535d;
border-right: 2px solid #4e535d;
width: 140px;
text-align: center;
}
nav >ul> li:nth-child(4){
background: #1e1d24;
border-right: 2px solid #4e535d;
width: 150px;
text-align: center;
}
main{
display:flex;
flex-direction:row;
}
#left,#rechts{
flex:1;
margin:110px;
padding:20px;
color: #e6e6e6;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8125em;
}
#mitte{
flex:6;
display:flex;
flex-direction:column;
margin:-15px 0 0px 0;
}
#mitte_eins,#mitte_zwei,#mitte_drei,#mitte_vier,#mitte_fünf{
min-height: 100px;
font-family: Arial, Verdana, sans-serif;
font-size: 0.77em;
height:auto;
margin-bottom:10px;
background-color: #55607e;
padding-top:80px;
padding-left:85px;
padding-bottom:105px;
padding-right:85px;
}
#mitte_eins{
color:white;
margin-top: 1.8em;
text-align: justify;
}
#mitte_eins img{
float:right;
padding:0 0 0px 10px;
}
#mitte_zwei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_zwei img{
float:right;
padding:0 0 10px 10px;
}
#mitte_drei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_drei img{
float: right;
padding:0 0 10px 10px;
}
#mitte_vier{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_vier img{
float:right;
padding:10px 0 10px 10px;
}
#mitte_fünf{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_fünf img{
float:right;
padding:10px 0 10px 10px;
}
footer{
background: #2e3545;
height: 55px;
text-align:center;
color:white;
font-family: Arial, Verdana, sans-serif;
font-size: 70%;
line-height:5.5;
margin:0 0px 0 0px;
margin-top: -3px;
}
a {text-decoration: none;
}
</style>
<body>
<header>
<div id="oben">
<img class="bildheader" src="Wolken.jpg" alt="Header">
</div>
</header>
<nav>
<ul class="nav">
<li><a href="index.html">Neuigkeiten</a></li>
<li><a href="#buecherverzeichnis">Studien & Berichte</a></li>
<li><a href="rezensionen.html">Videos</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<main>
<div id="left">
Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.<br><br> Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.
</div>
<div id="mitte">
<div style="line-height:2.2;" id="mitte_eins">
Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. <br><br>
Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. <br><br>
<a href="rezensionen.html#mitte_eins" style="color: white">Das Plocher-Energie-System - Ernstfried Prade, Roland Plocher <b> neu </b></a> <br><br>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/TAbuqoDSngU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div id="rechts">
Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.<br><br> Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.
</div>
</main>
<footer>
@ 2019 5G-freie Schweiz.ch
</footer>
</body>
</html>