MODX :: Fun Mondrian Home Page

14,564

How MODx Evo Works Log in to an Evo Manager username guest, password guestuser.

sottwell Reply #1, 6 years, 10 months ago

Link to this post#1

I think it's kind of neat...and has a lot of potential, if I understand the TV stuff correctly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
 xml:lang="en">
<head>
<title>[(site_name)] Â» [*pagetitle*]</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 [[GetKeywords]]
<link rel="stylesheet" type="text/css" href="assets/styles/mondrian.css" />
</head>
<body>
<div id="container" class="black">
<div id="one" class="grey"></div>
<div id="two" class="red"></div>
<div id="three" class="grey"></div>
<div id="four" class="white"></div>
<div id="five" class="black"><h1>My Site</h1></div>
<div id="six" class="yellow"></div>
<div id="seven" class="white"></div>
<div id="eight" class="blue"></div>
<div id="nine" class="grey"><h5>Copyright Â© MySite 2005</h5></div>
<div id="ten" class="blue"></div>
<div id="eleven" class="blue"></div>
<div id="twelve" class="white"></div>
</div>
</body>
</html>

And the CSS:

* { padding:0; margin:0; }
body { background:grey url(../images/mon.jpg) top left fixed no-repeat; color:#000000; }
div { position:absolute; }
#container { position:relative; width:800px; height:600px; border:15px solid #aaaaaa; margin-left:60px; }
#one { top:0; left:0; height:403px; width:109px }
#two { top:0; left:124px; width:195px; height:63px; }
#three { top:0; left:334px; width:373px; height:178px; }
#four { top:0; left:722px; width:78px; height:178px; }
#five { top:78px; left:124px; width:192px; height:100px; }
#five h1 { text-align:center; color:#ffffff; padding-top:30px; }
#six { top:418px; left:0; height:133px; width:111px; }
#seven { top:193px; left:124px; width:195px; height:208px; }
#eight { top:193px; left:334px; width:147px; height:207px; }
#nine { top:565px; left:0; height:35px; width:318px; }
#nine h5 { text-align:center; padding:10px; }
#ten { top:416px; left:334px; width:147px; height:184px; }
#eleven { top:193px; left:497px; width:303px; height:407px; }
#twelve { top:416px; left:124px; width:195px; height:134px; }    
.grey { background:#c5c8c1; }
.black { background:#01000c; }
.white { background:#dadad2; }
.blue { background:#3f4d94; }
.yellow { background:#dcbc07; }
.red { background:#ca4a2d; }