Lösungen zur Sitzung „Fullscreen-Designs und Google Fonts“

Ein Quokka-FullScreen-Design (Bildquelle: https://de.wikipedia.org/wiki/Quokka)
Ein Quokka-FullScreen-Design (Bildquelle: https://de.wikipedia.org/wiki/Quokka)

Index.htm

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Endlich Montag!</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div id="heading">
			Quokkas - Die freundlichsten Tiere wo geben tut!
		</div>
	</body>
</html>

Style.css

@import url(https://fonts.googleapis.com/css?family=Amatic+SC);

html, body {
	
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body {
	background-image: url("../img/bgr.jpg");
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover; /* CSS 3 */
}

#heading {
	
	font-family: 'Amatic SC', cursive;
	font-size: 55px;
	color: #fff;
	font-weight: bold;
	position: absolute;
	left: 100px;
	bottom: 100px;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 25px;
}

Download: 2015-11-09_quokka-fullscreen-design

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.