Solved

Making a one-page site like komra.de

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

Accepted Solution

by:
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<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";
	</style>

	<!-- 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">
		google.load("mootools","1.2.4");
	</script>
	<script type="text/javascript" src="js/mootools-1.2.4.4-more.js"></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']);
	  _gaq.push(['_trackPageview']);
	
	  (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);
	  })();

	</script>
</head>
<body>
<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>
					</div>
				</div>

				<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>

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

				<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>

				<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" />
						</a>
						<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>
										<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" />
						</a>
						<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>
										<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" />
						</a>
						<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>

										<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" />
						</a>
						<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>
										<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" />
						</a>
						<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>
					</div>
									</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">
						<fieldset>
							<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>
						</fieldset>
					</form>
				</div>

				<!-- 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>
					</div>
					
					<!-- 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>
						<h3>
							<a href="http://www.joomla.org" target="_blank">joomla.org</a> + <a href="http://getk2.org" target="_blank">getk2.org</a>

						</h3>
					</div>

					<!-- People -->
					<div class="root people absolute">
						<p>Meet the development team</p>
						<ul class="peopleList">
														<li>
								<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" />
							</li>
														<li>
								<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" />
							</li>
														<li>
								<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" />
							</li>

														<li>
								<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" />
							</li>
														<li>
								<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" />
							</li>
														<li>
								<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" />

							</li>
													</ul>
					</div>

				</div>

				<!-- 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>
				</div>

				<!-- Fixed position menu -->
				<div id="menu">
					<ul>
						<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>

					</ul>
				</div>
				
	</div>
</div>

<!-- Start Quantcast tag -->
<script type="text/javascript">
_qoptions={
qacct:"p-80NeZJ3Etw2UM"
};
</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
<noscript>
<img src="http://pixel.quantserve.com/pixel/p-80NeZJ3Etw2UM.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/>
</noscript>
<!-- End Quantcast tag -->
</body>

</html>

Open in new window

0
 
LVL 29

Expert Comment

by:fibo
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
0
 

Author Comment

by:kessaris
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.
0
 
LVL 108

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
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:kessaris
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?
0
 
LVL 29

Assisted Solution

by:fibo
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.
0
 

Author Closing Comment

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

Expert Comment

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

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now