So schauts zurzeit aus.
http://imgur.com/XZpS3FO
So SOLLTE es aussehen am Ende:
http://i.imgur.com/b2iLB7x.jpg
___________________________________
HTML Code:
CSS:
http://imgur.com/XZpS3FO
So SOLLTE es aussehen am Ende:
http://i.imgur.com/b2iLB7x.jpg
___________________________________
HTML Code:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>INFORMA® Medienagentur</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Portfolio</h1>
<figure>
<img src="Informa Logo.png" alt="Informa Logo">
<figcaption>
<span style="color:grey">Informa</span>
<span>®</span>
<br>
<span>Medienagentur</span>
</figcaption>
</figure>
</header>
<div class="content">
<nav>
<ul>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Team.html">Team</a></li>
<li><a href="KARED.html">KARED</a></li>
<li><a href="Wir denken voraus.html">Wir denken voraus</a></li>
</ul>
</nav>
</div>
<main>
<a href="">Grafik & Gestaltung</a>
<a href="">Internet</a>
<a href="">Druck</a>
<a href="">Fotografie</a>
</main>
</body>
</html>CSS:
Code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
border-top: 0.4rem solid #FFA500;
height: 400px;
width: 100%;
background-color: #f5f5f5;
background-image: url(tasse.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
h1 {
font-size: 60px;
font-family: Calibri;
color: #282828;
font-weight: lighter;
padding: 9rem 10%;
}
figure {
padding: -3rem;
bottom: 30px;
left: -80px;
position: relative;
}
header figcaption {
text-align:
}
.content {
width: 100%;
height: 900px;
background-color: #f5f5f5;
position: relative;
}
nav {
background-color: #282828;
overflow: auto;
display: inline-block;
transform: rotate(90deg);
position: absolute;
top: 170px;
left: -175px;
box-shadow: 0px -5px 5px -2px #999;
}
nav ul {
list-style: none;
}
nav ul li {
padding: 9px;
background-color: #282828;
float: left;
margin-left: 9px;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
text-decoration: none;
}
a:active{
color: white;
background-color: none;
}
