Making a one-page site like

Posted on 2010-09-02
Last Modified: 2012-05-10
What, if any, CMS would you use to do this?  It's gotta be super simple and flexible.
Question by:kessaris
  • 3
  • 3
  • 2
LVL 109

Accepted Solution

Ray Paseur earned 333 total points
ID: 33587758
Here is the HTML source for the page.  I do not know of a super simple and flexible CMS that would build this.  It seems to be integrated with facebook, Alexa, Mootools, etc.  The slide-down function might be doable in jQuery, too.

You might want to contact the agency and ask them if they used a CMS.  My guess is that you're looking at 100% custom code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Komrade | Web design and development agency in Athens, Greece</title>
	<meta name="author" content="Komrade" />
	<meta name="description" content="Komrade is a web development agency based in Athens, Greece. We create cutting-edge websites and web applications that balance usable, effective content presentation with strong visual style." />
	<meta name="keywords" content="komrade, web, design, development, agency, athens, greece" />
	<meta name="robots" content="index, follow" />
	<meta name="verify-v1" content="mMUOUuJ11gxU+SRTXo1iIDdeVvqZ5Dm8Gyhu2uf9lsg=" />

	<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
	<style type="text/css" media="all">
		@import "css/style.php";

	<!-- Facebook stuff -->	
	<link rel="image_src" href="images/facebook_preview_130x110.png" />
	<meta name="medium" content="medium_type" />
	<!-- Alexa -->
	<meta name="alexaVerifyID" content="eb-C-RRJlKV8SO5_1G0onshRNX4" />

	<!-- Mootools -->

	<script type="text/javascript" src=""></script>
	<script type="text/javascript">
	<script type="text/javascript" src="js/mootools-"></script>
	<!-- Phatfusion -->
	<script type="text/javascript" src="js/overlay.js"></script>
	<script type="text/javascript" src="js/Assets.js"></script>

	<script type="text/javascript" src="js/multibox.js"></script>
	<!-- Komrade JS -->
	<script type="text/javascript" src="js/komrade.js" ></script>
	<!-- Google Analytics -->
	<script type="text/javascript">
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-16375363-3']);
	  _gaq.push(['_setDomainName', '']);
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

<div class="background">
	<div id="cloudsContainer" class="cloudsContainer">

	<div class="clouds"></div></div>
		<div id="start">
				<div id="do-you-know-us" class="absolute">
					<div class="blue text">
						<h2 class="invisible">Who is Komrade?</h2>

				<a id="no-to-do-you-know-us" href="#moveToProfile" class="scroll-link absolute"><span class="invisible">No</span></a>

				<a id="yes-to-do-you-know-us" href="#moveToDo-you-know-our-work" class="scroll-link absolute"><span class="invisible">Yes</span></a>
				<a id="continue-to-Do-you-know-our-work" href="#moveToDo-you-know-our-work" class="scroll-link absolute"><span class="invisible">Continue</span></a>
				<a id="no-to-Do-you-know-our-work" href="#moveToShow-me-everything" class="scroll-link absolute"><span class="invisible">No</span></a>
				<a id="yes-to-Do-you-know-our-work" href="#moveToDo-you-where-to-find-us" class="scroll-link absolute"><span class="invisible">Yes</span></a>

				<a id="discover-the-roots" href="#moveToRoots" class="scroll-link absolute"><span class="invisible">Discover the roots</span></a>

				<a id="moveToProfile" class="absolute"></a>
				<div id="profile" class="absolute">
						<p><span class="blue">KOMRADE</span> is a web development agency based in Athens, Greece. We create cutting-edge websites and web applications that balance usable, effective content presentation with strong visual style.</p>
						<p>Our experienced team of web professionals provide design, development and consulting services to any business around the globe.</p>
						<p>Our diverse clientele includes companies from Europe, USA, Canada and Australia.</p>

				<div id="take-komrade-seeds" class="absolute">
					<div class="invisible">
						<a href="#" target="_blank">Get the Komrade seeds::Download our brochure (coming soon...)</a>

				<a id="moveToDo-you-know-our-work" class="absolute"></a>
				<a id="moveToShow-me-everything" class="absolute"></a>

				<a id="show-me-everything" href="portfolio.php" rel="width:960,height:630" class="advanced absolute"><span class="invisible">Ok! Show me everything!</span></a>
				<a id="show-me-the-best" href="#moveToPortfolio" class="scroll-link absolute"><span class="invisible">Ok! Show me the best!</span></a>
				<a id="show-me-the-contact" href="#moveToContact" class="scroll-link absolute"><span class="invisible">Contact Details</span></a>

				<!-- Featured projects -->
				<a id="moveToPortfolio" class="absolute"></a>

				<div id="portfolio-links" class="absolute">

					<a class="slide slide01 active" href="#"><span>1</span></a>
					<a class="slide slide02" href="#"><span>2</span></a>
					<a class="slide slide03" href="#"><span>3</span></a>
					<a class="slide slide04" href="#"><span>4</span></a>
					<a class="slide slide05" href="#"><span>5</span></a>

				<div id="portfolio" class="absolute">
															<div class="project active">
						<a href="" target="_blank" title="J and Beyond 2010">
							<img src="images/featured/" alt="J and Beyond 2010" class="projectImage" />
						<h3 class="projectTitle">J and Beyond 2010</h3>
						<div class="projectText">J and Beyond is the first ever Joomla! international event organized in Germany late May, 2010. With the power of Joomla! and K2 we managed to built a unique website that stands out for both form and function.</div>

										<div class="project">
						<a href="" target="_blank" title="">
							<img src="images/featured/featured_gazzetta.jpg" alt="" class="projectImage" />
						<h3 class="projectTitle"></h3>
						<div class="projectText"> is the premier sports news website in Greece and currently one of the top websites in the country. It was launched early 2008 and now it averages more than 5 million visitors per month. It is currently the highest traffic website built on the Joomla! platform worldwide (after Read more on the development and achievements of at, in the <a href="">interview Fotis Evangelou gave to Steve Burge</a>.</div>

										<div class="project">
						<a href="" target="_blank" title="TNA Wrestling">
							<img src="images/featured/featured_tna.jpg" alt="TNA Wrestling" class="projectImage" />
						<h3 class="projectTitle">TNA Wrestling</h3>
						<div class="projectText"> is the official website of Total Nonstop Action Wrestling. TNA's "iMPACT!" show (airing in USA and UK) delivers a distinct brand of high-risk, live-action athletic entertainment, featuring some of the most exciting and recognizable stars in wrestling today.</div>

										<div class="project">
						<a href="" target="_blank" title="">
							<img src="images/featured/featured_reporter.jpg" alt="" class="projectImage" />
						<h3 class="projectTitle"></h3>
						<div class="projectText"> is the the oldest financial news portal in Greece. Being a top player in this market for more than 10 years, it recently switched to the power of Joomla! and K2. The result is a 50% faster loading website (despite being "heavier" than before), with more than 150,000 articles and close to one million unique visitors per month. Thanks to performance improvements and the new stock market tools exclusively developed for pushed the website's reader base by 20% in just a few months after release.</div>
										<div class="project">

						<a href="" target="_blank" title="">
							<img src="images/featured/" alt="" class="projectImage" />
						<h3 class="projectTitle"></h3>
						<div class="projectText">The up and coming financial news portal in Greece. Counting just a few months online, has managed to increase exponentially its reader base to more than half a million per month.</div>

				<!-- Contact details -->
				<a id="contact-us" href="#moveToContact" class="scroll-link absolute"><span class="invisible">Contact Details</span></a>

				<a id="moveToDo-you-where-to-find-us" class="absolute"></a>

				<a id="cant-remember-to-where-to-find-us" href="#moveToContact" class="scroll-link absolute"><span class="invisible">Yes, but I dont remeber...</span></a>
				<a id="no-to-where-to-find-us" href="#moveToContact" class="scroll-link absolute"><span class="invisible">No</span></a>

				<!-- Contact form -->

				<a id="moveToContact" class="absolute"></a>
				<div id="contact-form-container" class="absolute">
					<form action="includes/contact.php" name="contact-form" id="contact-form">
							<input value="your name" type="text" name="name" onblur="if(this.value=='') this.value='your name';" onfocus="if(this.value=='your name') this.value='';" />
							<input value="your e-mail" type="text" name="email" onblur="if(this.value=='') this.value='your e-mail';" onfocus="if(this.value=='your e-mail') this.value='';" />
							<textarea rows="15" cols="40" name="comment" onblur="if(this.value=='') this.value='and your message here...';" onfocus="if(this.value=='and your message here...') this.value='';">and your message here...</textarea>
							<a id="contact-form-submit" href="#"></a>

							<span id="contact-form-log"></span>

				<!-- Map -->
				<a id="find-us-on-google" href="" target="_blank" class="absolute"><span class="invisible">Find us on Google maps</span></a>

				<a id="moveToRoots" class="absolute"></a>

				<!-- JoomlaWorks -->
				<div id="roots" class="absolute">
					<div class="root joomlaworks absolute">
							<p>The people behind <b>Komrade</b> specialize in <b>Open Source</b> web applications through <a href="" target="_blank">JoomlaWorks</a>.</p>

							<p>JoomlaWorks has established a solid reputation in the Joomla! community, having developed some of the most popular and innovative products since 2006, including the groundbreaking <a href="" target="_blank">K2</a> for Joomla! 1.5 and many more.</p>
							<h3><a href="" target="_blank"></a></h3>
					<!-- Joomla + K2 -->
					<div class="root joomla absolute">
						<p>Joomla! is currently the world's most popular Content Management System (CMS), powering everything from simple, personal homepages to complex corporate web applications.</p>

						<p><a href="" target="_blank">K2</a> is the powerful content component for Joomla! developed by JoomlaWorks.</p>
						<p>We use Joomla! &amp; K2 to deliver feature-rich websites that are powerful, extensible and best of all easy to manage and maintain for our clients.</p>
							<a href="" target="_blank"></a> + <a href="" target="_blank"></a>


					<!-- People -->
					<div class="root people absolute">
						<p>Meet the development team</p>
						<ul class="peopleList">
								<h3 class="peopleName">Fotis Evangelou</h3>

								<div class="peopleText">Co-founder &amp; Managing Director</div>
								<img src="" alt="Fotis Evangelou" class="projectImage" />
								<h3 class="peopleName">Chris Marinou</h3>
								<div class="peopleText">Co-founder &amp; Web Development Director</div>

								<img src="" alt="Chris Marinou" class="projectImage" />
								<h3 class="peopleName">Lefteris Kavadas</h3>
								<div class="peopleText">Web Developer &amp; Programmer</div>
								<img src="" alt="Lefteris Kavadas" class="projectImage" />

								<h3 class="peopleName">Chiara Aliotta</h3>
								<div class="peopleText">Graphic &amp; Web Designer</div>
								<img src="" alt="Chiara Aliotta" class="projectImage" />
								<h3 class="peopleName">Yiota Ziaggou</h3>

								<div class="peopleText">Web Developer</div>
								<img src="" alt="Yiota Ziaggou" class="projectImage" />
								<h3 class="peopleName">Katia Panopoulou</h3>
								<div class="peopleText">Web Developer</div>
								<img src="" alt="Katia Panopoulou" class="projectImage" />



				<!-- Footer -->
				<div id="footer" class="absolute">
					  <div class="copyrights">copyright &copy; 2008-2010 Komrade | <a href="/mail" target="_blank">Webmail Login</a></div>

					  <div class="clr"></div>

				<!-- Fixed position menu -->
				<div id="menu">
						<li class="menuNote">Quick jump to</li>
						<li><a class="scroll-link" href="#start"><span>Start</span></a></li>

						<li><a class="scroll-link" href="#moveToProfile"><span>Profile</span></a></li>
						<li><a class="scroll-link" href="#moveToPortfolio"><span>Work</span></a></li>
						<li><a class="scroll-link" href="#moveToContact"><span>Contact</span></a></li>
						<li><a class="scroll-link" href="#moveToRoots"><span>The Komrade Roots</span></a></li>
						<li><a class="scroll-link" href="" target="_blank"><span>Komrade Labs</span></a></li>
						<li><a class="scroll-link" href="" target="_blank"><span>Komrade on Facebook</span></a></li>


<!-- Start Quantcast tag -->
<script type="text/javascript">
<script type="text/javascript" src=""></script>
<img src="" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/>
<!-- End Quantcast tag -->


Open in new window

LVL 29

Expert Comment

ID: 33587820
What exactly do you want to achieve?

- The one page solution is most pobably not exactly what you call a CMS

- This page is done with lots of javascript, and some css. Part of the css is generated by a php program.

- I would bet that this precise page has been done with some Dreamweaver expertise.

There are pros and cons to put so many things in a single page... but again that depends on your objectives

Author Comment

ID: 33588221
Yes indeed.  This is obviously a custom job and I suspect it's not updated daily either.

I've got something a little more involved that will require there to be sections like a gallery that need to be client-editable.
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

LVL 109

Assisted Solution

by:Ray Paseur
Ray Paseur earned 333 total points
ID: 33590538
That sounds a little more "normal."  Your choices are Joomla and Drupal.  There are others to be sure, but these are free, open-source, and in the mainstream and have large developer communities.

best regards, ~Ray

Author Comment

ID: 33591296
In my experience, Drupal has a huge overhead that is not at all warranted on a multi-page site, let alone a one-pager.

How about Joomla?
LVL 29

Assisted Solution

fibo earned 167 total points
ID: 33594277
Joomla vs Drupal is a permanent comparison.
After using both, my PERSONAL choice for your problem would be Drupal.

But since we are discussing a site with few pages, performance is not really that large a problem IF you take care to this aspect from the beginning: limiting the NUMBER and SIZE of the javascript you will use, limiting NUMER and SIZE of css files will be your major problems.
Both Joomla and Drupal allow cacheing pages, so for a few pages both solutions may be considered as roughly equivalent in terms of perfrmance.

Author Closing Comment

ID: 33596642
Thanks everyone.  I realize I was asking a very difficult question because there is no definitive clear 'right' answer.  
LVL 29

Expert Comment

ID: 33604052
Glad we could be of some help. Thx for the points and grade.

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
PHP Soap Server returning XML but < & > as &lt; / &gt; 9 50
multiple selects 23 49
Character counter breaks after adding EmojiOne Area 4 25
IF statment In Powershell 12 19
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question