<div class="MainContainer">
<div class="MainContainer">
<div id="wrapper" class="OneColumn BorderNormal">
<div class="MainContent_ctl00_class">
<div class="HeaderMain">
<h1>Headline</h1>
<h2>hier ist Platz für die Subline</h2>
<div class="HeaderLogo"><a href="#"><img src="http://placehold.it/69.png/e40613/ffffff/&text=Logo"></a>
</div>
</div>
<div class="HeaderLogoSmall"><a href="#" class="exitlink"><img src="http://placehold.it/30.png/e40613/ffffff/&text=<"> back </a>
</div>
</div>
<hr /><div id="desktop">1</div>
<a href="#tablet" class="zentriert"><img src="http://placehold.it/30.png/0c85fd/ffffff/&text=>"></a>
<h3>Für den Computer</h3>
<div class="ThirtyThirtyThirty">
<div class="Left33"><img src="http://placehold.it/200x150/BEBEBE/ffffff/&text=Apple"></div>
<div class="Middle33"><img src="http://placehold.it/300x250/ACACAC/ffffff&text=WinXP"></div>
<div class="Right33"><img src="http://placehold.it/200x150/CFCFCF/ffffff/&text=Win7"></div>
<div class="clear"></div>
</div>
<div class="FortySixty">
<div class="Left40"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><div class="btn gruen">Button</div></div>
<div class="Right60"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="btn gelb">Button</div></div>
<div class="clear"></div>
</div>
<hr /><div id="tablet">2</div>
<a href="#smartphone" class="zentriert"><img src="http://placehold.it/30.png/0c85fd/ffffff/&text=>"></a>
<h3>Für das Tablet</h3>
<div class="FiftyFifty">
<div class="Left50"><img src="http://placehold.it/200x150/CFCFCF/ffffff/&text=iPad"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div class="Right50"><img src="http://placehold.it/200x150/CFCFCF/ffffff/&text=Win8"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div class="clear"></div>
</div>
<hr /><div id="smartphone">3</div>
<a href="#desktop" class="zentriert"><img src="http://placehold.it/30.png/0c85fd/ffffff/&text=>"></a>
<h3>Für das Smartphone</h3>
<div class="ThirtyThirtyThirty">
<div class="Left33"><img src="http://placehold.it/200x350/CFCFCF/ffffff/&text=iPhone"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div class="Middle33"><img src="http://placehold.it/200x350/CFCFCF/ffffff/&text=WinPhone"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div class="Right33"><img src="http://placehold.it/200x350/CFCFCF/ffffff/&text=Android"><h4>Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div class="clear"></div>
</div>
<hr />
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
html, body {color: #444444; font-family: Verdana,sans- serif;font- size: 13px;
html, body {color: #444444; font-family: Verdana,sans-serif;font-size: 13px;
background-color:#AAA;
}
* { margin: 0; padding: 0; }
.clear, .Clear {clear: both; font-size: 0;}
.Left40 {float: left; overflow: hidden; width: 40%; }
.Right60 {float: left;overflow: hidden; width: 60%; }
.Left50 {float: left; overflow: hidden; width: 50%; }
.Right50 {float: left;overflow: hidden; width: 50%; }
.Left33, .Middle33, .Right33 {float: left; overflow: hidden; width: 33%;}
/*.Left33, .Middle33, .Right33, .Left40, .Right60, .Left50, .Right50 { border:1px solid red; }*/
.MainContainer { margin: 0 auto 30px; position: relative; width: 950px;
}
#wrapper { position: relative; z-index: 50;
background-color:#EEE;
height:2500px;
padding-top:100px;
}
/* Fixed Header Header == MainContent_ctl00_class */
.MainContent_ctl00_class {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #FFF;
color:#fff;
z-index: 10;
height: 100px;
overflow: hidden;
transition: height 0.03s;
transition: height 0.03s;
transition: height 0.03s;
text-align:center;
}
.MainContent_ctl00_class.shrink {
height: 50px;
opacity: 0.8;
}
.MainContent_ctl00_class .HeaderMain {
transition: all 0.3s;
transition: all 0.3s;
transition: all 0.3s;
}
.MainContent_ctl00_class.shrink .HeaderMain{
opacity: 0; display:none;
}
.MainContent_ctl00_class .HeaderLogoSmall{
opacity: 0; display:none;
}
.MainContent_ctl00_class.shrink .HeaderLogoSmall{
opacity: 1; display:block;
}
/* END Fixed Header */
.HeaderLogoSmall {
position: relative;
height: 30px;
width: 950px;
margin:10px auto;
display: table;
z-index:12;
text-align:left;
}
.HeaderLogoSmall a {
margin: 0px;
padding-left:10px;
display: table-cell;
vertical-align:middle;
}
.HeaderLogo {
position: absolute;
height: auto;
width: auto;
left: 0px;
top: 0px;
z-index:11;
}
.HeaderMain {
margin: 0 auto;
position: relative;
top: 20px;
width: 900px;
z-index: 10;
}
.FortySixty, .FiftyFifty, .ThirtyThirtyThirty {
margin: 0;
padding: 10px;
}
h1 {
color: #E60A1E;
font-weight: bold;
}
h1, h3 {
font-family: "Trebuchet MS",Arial,sans-serif;
font-size: 28px;
line-height: 30px;
margin-bottom: 12px;
text-align: center;
}
h2 {
color: #444444;
font-size: 18px;
font-weight: normal;
text-align: center;
}
h3 {
color: #FFF;
font-weight: bold;
text-shadow: 1px 2px rgba(0, 0, 0, 0.3);
}
h4 {
color: #444444;
font-size: 18px;
font-weight: normal;
}
.zentriert {margin:10px 440px; display:block; text-align:center;}
hr {color:white; height:1px; margin:30px;}
/* Button styles */
.btn {
margin: 10px;
padding: 14px 26px;
font-size: 14px;
line-height: 100%;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
color: #fff;
width: 50px;
height: 10px;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-weight: bold;
transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
transition: background 0.1s ease-in-out;
text-shadow: 0 2px rgba(0, 0, 0, 0.3);
color: #fff;
border-radius: 40px;
border-radius: 40px;
border-radius: 40px;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.btn:active {
padding-top: 15px;
}
.btn, .btn:hover, .btn:active {
outline: 0 none;
text-decoration: none;
color: #fff;
}
.gelb {
background-color: #fdc058;
box-shadow: 0px 3px 0px 0px #e29003;
}
.gelb:hover {
background-color: #fdb53a;
}
.gelb:active {
box-shadow: 0px 1px 0px 0px #e29003;
}
.purpur {
background-color: #aa65c7;
box-shadow: 0px 3px 0px 0px #883da7;
}
.purpur:hover {
background-color: #9e4fbf;
}
.purpur:active {
box-shadow: 0px 1px 0px 0px #883da7;
}
.gruen {
background-color: #2ecc71;
box-shadow: 0px 3px 0px 0px #239a55;
}
.gruen:hover {
background-color: #28b363;
}
.gruen:active {
box-shadow: 0px 1px 0px 0px #239a55;
}
$(function(){
$(function(){
//FixedHeader mit CSS-Shrink
var shrinkHeader = 49;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('.MainContent_ctl00_class').addClass('shrink');
}
else {
$('.MainContent_ctl00_class').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
//SmoothScroll
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");
if ($.browser.opera) {
var target = 'html';
}else{
var target = 'html,body';
}
$(target).animate({
scrollTop: $(ziel).offset().top - 50
}, 800 );
// }, 800 , function (){location.hash = ziel;});
});
return false;
});