Sovereignty height: 100% Leave it alone. htmlfor the remaining elements substitute min-height: 100%♪ Block ...landskape, completely sympathize. Aah! html Please. overflow: hidden; - It's the closing. html causing this effect. And for our content to be hidden, body We'. overflow: auto;♪* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:before,
*:after {
content: '';
display: block;
position: absolute;
box-sizing: border-box;
}
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
background: #593c1e;
overflow: auto;
}
.wrapper {
position: relative;
width: 100%;
min-height: 100%;
}
/*
BACKGROUND STYLE
=================================
*/
.background {
min-height: 100%;
position: fixed;
width: 100%;
overflow: hidden;
left:0;top:0;
}
.landscape {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #db9;
overflow: hidden;
}
.landscape div {
position: absolute;
}
.sun {
left: 50%;
bottom: 200px;
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(to bottom, #ff8 50%, rgba(208, 73, 73, 0) 100%);
box-shadow: 0px -20px 200px #FFFF8C;
}
.land {
left: 50%;
width: 2000px;
height: 2000px;
border-radius: 50%;
}
.l1 {bottom: -1850px;margin-left: -1100px;background: #d0a273}
.l2 {bottom: -1700px;margin-left: -300px;background: #c4884d}
.l3 {bottom: -1900px;margin-left: -800px;background: #a66f37}
.l4 {bottom: -1800px;margin-left: -1700px;background: #80552b}
.windmill {width: 2px;}
.windmill .turbine {
top: -5px;
left: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
-webkit-animation: 7s rotate infinite linear;
animation: 7s rotate infinite linear;
}
.windmill .t {
left: 2px;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
-webkit-transform-origin: bottom;
transform-origin: bottom
}
.windmill.s1 {width: 2px;height: 15px}
.windmill.s1 .t {top: -2px;left: 4px;width: 2px;height: 7px;border-width: 0}
.windmill.s2 {height: 20px;
-webkit-transform: rotateY(120deg);
-ms-transform: rotateY(120deg);
transform: rotateY(120deg)}
.windmill.s2 .t {top: -10px;border-bottom-width: 12px}
.windmill.s3 {height: 35px}
.windmill.s3 .t {top: -18px;border-bottom-width: 20px}
.windmill.s4 {height: 50px}
.windmill.s4 .t {top: -28px;border-bottom-width: 30px}
.l1 .s1 {background: #d0a273}
.l1 .s1 .t {background: #d0a273}
.l2 .s2 {background: #c4884d}
.l2 .s2 .t {border-bottom-color: #c4884d}
.l3 .s3 {background: #a66f37}
.l3 .s3 .t {border-bottom-color: #a66f37}
.l4 .s4 {background: #80552b}
.l4 .s4 .t {border-bottom-color: #80552b}
.s1:nth-child(1) {top: -5px;left: 870px}
.s1:nth-child(2) {top: -12px;left: 970px}
.s1:nth-child(3) {top: -9px;left: 1070px}
.s2:nth-child(1) {top: 125px;left: 485px}
.s2:nth-child(2) {top: 85px;left: 555px}
.s2:nth-child(3) {top: 50px;left: 635px}
.s3:nth-child(1) {top: -10px;left: 780px}
.s3:nth-child(2) {top: -30px;left: 940px}
.s3:nth-child(3) {top: -25px;left: 1120px}
.s4:nth-child(1) {top: -25px;left: 1200px}
.s4:nth-child(2) {top: 28px;left: 1380px}
.s4:nth-child(3) {top: 125px;left: 1560px}
.t1 {-webkit-transform: rotate(0deg);
transform: rotate(0deg)}
.t2 {-webkit-transform: rotate(120deg);
transform: rotate(120deg)}
.t3 {-webkit-transform: rotate(240deg);
transform: rotate(240deg)}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*
MENU STYLE
=================================
*/
.menu {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
max-width: 900px;
border: 2px solid #fff;
}
.menu * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 2.5%;
min-height: 34px;
border: 2px solid #fff;
}
.menu .main {border: 0;padding: 0;}
.menu .main:before {color: #468;}
.menu .content:before {color: #fff;}
.header {padding-bottom: 8%;}
.header:before {content: "<header>";}
.main {}
.main:before {content: "<main>";}
.content {}
.content:before {content: "<article>";}
.footer {padding-bottom: 8%;}
.footer:before {content: "<footer>";}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Windmill Landscape</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link rel="stylesheet" href="css/style.css">
<style>
</style>
<script type="text/javascript">
/* =============================
This script generates sample text for the body content.
You can remove this script and any reference to it.
============================= */
var bodyText=["The smaller your reality, the more convinced you are that you know everything.", "If the facts don't fit the theory, change the facts.", "The past has no power over the present moment.", "This, too, will pass.", "</p><p>You will not be punished for your anger, you will be punished by your anger.", "Peace comes from within. Do not seek it without.", "<h3>Heading</h3><p>The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now."]
function generateText(sentenceCount){
for (var i=0; i<sentenceCount; i++)
document.write(bodyText[Math.floor(Math.random()*7)]+" ")
}
</script>
</head>
<body>
<div class='wrapper'><!--
BACKGROUND
===============================-->
<div class='background'>
<div class='landscape'>
<div class='sun'></div>
<div class='land l1'>
<div class='windmill s1'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s1'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s1'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
</div>
<div class='land l2'>
<div class='windmill s2'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s2'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s2'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
</div>
<div class='land l3'>
<div class='windmill s3'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s3'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s3'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
</div>
<div class='land l4'>
<div class='windmill s4'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s4'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
<div class='windmill s4'>
<div class='turbine'>
<div class='t t1'></div>
<div class='t t2'></div>
<div class='t t3'></div>
</div>
</div>
</div>
</div><!--landscape-->
</div><!--background
=================================
MENU
===============================-->
<div class="menu">
<header class="header"></header>
<main class="main">
<article class="content">
<!--<script>generateText(20)</script>--><h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, mei doming graecis at, sint debitis expetendis nam ex, quo ad graeci hendrerit theophrastus. Regione tibique assueverit mea ea, sed eu quas latine epicurei. Consul nominavi rationibus qui ex, eu illum eirmod vidisse sit. Ex summo dissentiunt mea. Quot quaeque at eum. In docendi apeirian mel.
<br><br>
Erant sanctus mea eu. Choro exerci gubergren vix an, eum ne enim complectitur, ei dicam singulis disputationi vis. Sed agam referrentur an, ad eum simul ridens. Ne essent assueverit signiferumque eam, ad vel ferri mentitum. Case commodo interpretaris pro id, ad eos graeci blandit, an epicuri suavitate instructior per. Audiam iudicabit sea no, qui ut nihil veritus. Eu aliquam albucius mea.
<br><br>
Atomorum splendide mei te, minim aliquam inciderint et vis. Mei iusto consul facilis cu. Ea justo habemus mei. No ignota constituto usu, qui impedit quaestio definiebas ex.
<br><br>
Aeque ubique te eam, putent voluptatibus mel eu, quodsi efficiantur in has. Minim volutpat sit eu, mutat vidisse ei vel. Quando fabellas vix te. Eu dicam quaestio vim.
<br><br>
Harum nostro eum an, at timeam equidem qui. Cu usu imperdiet voluptatum intellegebat, qui an quot tantas. Eu pro oratio torquatos, summo omnium quaeque eu eum, usu accusamus comprehensam ne. Vidit omnes labitur in ius.
<br><br>
Dicat laudem senserit no eos, vel ex mazim viris. Nec ea omnium lobortis quaerendum, liber adipisci qualisque vis id. Sit quot tibique corrumpit te, qui ferri eirmod fuisset cu. Te alia mazim mollis his, expetenda intellegebat usu at. Oratio oporteat gloriatur his ad. Ea inani erroribus cum.
<br><br>
Atqui mundi adipiscing cu qui. Sit cu paulo nihil, iusto nostrum adolescens ad vim, ei patrioque dissentiet comprehensam nec. Nonumy molestie conceptam cu vel, qui eu eius adipisci vituperatoribus. Eum labores debitis platonem te. Graeco mnesarchum at usu, qui ea viderer deseruisse adipiscing, verterem argumentum vis ne. His id ludus dicam, te vidit zril prompta mea. Eu iriure intellegebat reprehendunt sed, principes theophrastus ea mei.
<br><br>
Mei tollit consequuntur et. His fugit causae in, eu his facer mazim. Latine vituperatoribus cu qui, per ad possim aliquip suavitate, wisi ignota iudicabit cum eu. Pri posse equidem phaedrum ut, usu at iuvaret accusam pertinax. Mel duis ullamcorper ex, ne nam vide novum latine. Ne hinc inimicus delicatissimi sea, quodsi minimum contentiones ei cum.
<br><br>
An quando fabellas scripserit vel, in quidam democritum usu. Augue possim melius id mea, vel cu phaedrum laboramus. Illud graeco discere mea ad, commune tacimates cu mea, an vis accusam tacimates. In ocurreret honestatis nam, quot autem epicurei est et. Et vis congue equidem docendi, duo ut autem similique. Eam percipitur neglegentur comprehensam ex.
<br><br>
Mel harum invidunt elaboraret ut, mea probo idque ex, lorem zril definitiones ea cum. Moderatius intellegam his cu. Per quando equidem et, dicta latine sadipscing pro ne. Vero vidit insolens sed ne. At velit atomorum cum, dicta eleifend vel eu.</p>
</article>
</main>
<footer class="footer"></footer><!--footer-->
</div><!--menu-->
</div><!--wrapper-->
</body>
</html>
