[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now


Making a one-page site like komra.de

Posted on 2010-09-02
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
LVL 111

Accepted Solution

Ray Paseur earned 999 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<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="http://www.google.com/jsapi"></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', '.komra.de']);
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    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="http://jandbeyond.org" target="_blank" title="J and Beyond 2010">
							<img src="images/featured/jandbeyond.org.jpg" 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="http://www.gazzetta.gr" target="_blank" title="Gazzetta.gr">
							<img src="images/featured/featured_gazzetta.jpg" alt="Gazzetta.gr" class="projectImage" />
						<h3 class="projectTitle">Gazzetta.gr</h3>
						<div class="projectText">Gazzetta.gr 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 joomla.org). Read more on the development and achievements of Gazzetta.gr at joomla.org, in the <a href="http://community.joomla.org/blogs/community/1127-gazzettagr.html">interview Fotis Evangelou gave to Steve Burge</a>.</div>

										<div class="project">
						<a href="http://www.tnawrestling.com" 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">TNAwrestling.com 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="http://www.reporter.gr" target="_blank" title="Reporter.gr">
							<img src="images/featured/featured_reporter.jpg" alt="Reporter.gr" class="projectImage" />
						<h3 class="projectTitle">Reporter.gr</h3>
						<div class="projectText">Reporter.gr 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 Reporter.gr pushed the website's reader base by 20% in just a few months after release.</div>
										<div class="project">

						<a href="http://www.bankingnews.gr" target="_blank" title="BankingNews.gr">
							<img src="images/featured/bankingnews.gr.jpg" alt="BankingNews.gr" class="projectImage" />
						<h3 class="projectTitle">BankingNews.gr</h3>
						<div class="projectText">The up and coming financial news portal in Greece. Counting just a few months online, BankingNews.gr 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="http://bit.ly/KomradeLocation" 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="http://www.joomlaworks.gr" 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="http://getk2.org/" target="_blank">K2</a> for Joomla! 1.5 and many more.</p>
							<h3><a href="http://www.joomlaworks.gr" target="_blank">joomlaworks.gr</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="http://getk2.org/" 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="http://www.joomla.org" target="_blank">joomla.org</a> + <a href="http://getk2.org" target="_blank">getk2.org</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="http://www.gravatar.com/avatar/9252ab24d7c3b03a72bfbc3e22549652?s=40" alt="Fotis Evangelou" class="projectImage" />
								<h3 class="peopleName">Chris Marinou</h3>
								<div class="peopleText">Co-founder &amp; Web Development Director</div>

								<img src="http://www.gravatar.com/avatar/34c837b3a9e43ace40f17de083f389ce?s=40" alt="Chris Marinou" class="projectImage" />
								<h3 class="peopleName">Lefteris Kavadas</h3>
								<div class="peopleText">Web Developer &amp; Programmer</div>
								<img src="http://www.gravatar.com/avatar/eb011fb251a46b74862a1880abbed024?s=40" alt="Lefteris Kavadas" class="projectImage" />

								<h3 class="peopleName">Chiara Aliotta</h3>
								<div class="peopleText">Graphic &amp; Web Designer</div>
								<img src="http://www.gravatar.com/avatar/95b87f326d19ff1d1fd6fd76b8d7f406?s=40" alt="Chiara Aliotta" class="projectImage" />
								<h3 class="peopleName">Yiota Ziaggou</h3>

								<div class="peopleText">Web Developer</div>
								<img src="http://www.gravatar.com/avatar/24becb8574466ff273eaebb6f34a11cc?s=40" alt="Yiota Ziaggou" class="projectImage" />
								<h3 class="peopleName">Katia Panopoulou</h3>
								<div class="peopleText">Web Developer</div>
								<img src="http://www.gravatar.com/avatar/3ae61414664ceb5283f440fafc9b77cb?s=40" 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="http://komra.de/labs/" target="_blank"><span>Komrade Labs</span></a></li>
						<li><a class="scroll-link" href="http://komra.de/facebook" target="_blank"><span>Komrade on Facebook</span></a></li>


<!-- Start Quantcast tag -->
<script type="text/javascript">
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
<img src="http://pixel.quantserve.com/pixel/p-80NeZJ3Etw2UM.gif" 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.
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

LVL 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 999 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 501 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

656 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