---
# System prepended metadata

title: 'RESPONSIVE WEBSITE --- mobil / desktop:'

---

# RESPONSIVE WEBSITE --- mobil / desktop:


### ausgelagerter css code
```htmlmixed=

/* mobi	l css style informationen zuerst geladen*/

.main {
	padding: 5px;
	width: 100%;
	height: 85vh;
	border: solid;
	text-align: center;
	background-color: red;
	flex-direction: column;
	flex-wrap: nowrap;
}
	
.sub {
	padding: 0px;
	margin: 0px;
	height: 7.5%;
	width : 98%;
	border: ridge;
	text-align: middle, center;
	display: inline-block;
	background-color: lightgreen;
	overflow: visible;
}

.body {
	height: 52.5%;
	width : 98%;
	border: ridge;
	text-align: left;
	background-color: lightyellow;
}

.foot {
	height: 9.5%;
	width: 98%;
	text-align: middle, center;
	display: inline-block;
	background-color: orange;
	border: groove ;
}

.responsive {
	width: 100%;
	height: 100%;
	max-width:200px 
	
}

.eingabefeld {
	display: inline-block;
}
 
/*die media query ist eine abfrage eines Merkmals hier ist es die auflösung des Browserfensters*/
@media only screen and (max-width: 1000px) {
	
			.sub {
				height: 10%;
				width : 30%;
				border: ridge;
				text-align: middle, center;
				display: inline-block;
				background-color: lightgreen;
			}

			.foot {
				height: 15.2%;
				width: 45%;
				text-align: middle, center;
				background-color: orange;
				border: groove ;
			}

			.body {
				padding: 5px;
				height: 70%;
				width : 90%;
				border: ridge;
				display: inline-block;
				background-color: lightyellow;
			}
	

}
```

---
### HTML CODE

```htmlmixed=
<html>

<head>
	<link rel="stylesheet" href="mobil_style.css">
<!--	<link rel="stylesheet" href="desktop_style.css"> -->
</head>

<body>
	<div class="main">
		<div class="sub"> <img src="1ALogo.JPG" class="responsive"> </div>
		<div class="sub"> SUB </div>
		<div class="sub"> SUB </div>
		
		<div class="body"><img src="CCC.png" class="responsive"> </div>
		
		<div class="foot">FOOT 1</div>
		<div class="foot">FOOT 2</div>
	</div>
	
</body>

</html>
```