How do I replicate his pen from codepen to my PC?

Hackzzila · April 16, 2015

I'm trying to replicate this pen to my PC this is what it says when opened in chrome:

.container .sidebar a.menu__link.fa.fa-home.menu__link__active(data-page="home") li.menu__item a.menu__link.fa.fa-codepen(data-page="codepen") li.menu__item a.menu__link.fa.fa-github(data-page="github") li.menu__item a.menu__link.fa.fa-facebook-official(data-page="facebook") li.menu__item a.menu__link.fa.fa-twitter(data-page="twitter") .content .content__page#codepen h2 Codepen p The best online JavaScript IDE .content__page#home h2 Home p A home is a dwelling-place used as a permanent or semi-permanent residence for an individual, family, household or several families in a tribe. It is often house, apartment, or other building, or alternatively a mobile home, houseboat, yurt or any other portable shelter. Larger groups may live in a nursing home, children's home, convent or any similar institution. A homestead also includes agricultural land and facilities for domesticated animals. Where more secure dwellings are not available, people may live in the informal and sometimes illegal shacks found in slums and shanty towns. More generally, "home" may be considered to be a geographic area, such as a town, village, suburb, city, or country. .content__page#facebook h2 Facebook p Facebook (formerly Thefacebook) is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his college roommates and fellow Harvard University students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes. The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students. Since 2006, anyone who is at least 13 years old is allowed to become a registered user of the website, though the age requirement may be higher depending on applicable local laws.[8] Its name comes from a colloquialism for the directory given to it by American universities students. .content__page#twitter h2 Twitter p Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".Registered users can read and post tweets, but unregistered users can only read them. Users access Twitter through the website interface, SMS, or mobile device app. Twitter Inc. is based in San Francisco and has more than 25 offices around the world. Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone and Noah Glass and launched by July 2006. p The service rapidly gained worldwide popularity, with more than 100 million users who in 2012 posted 340 million tweets per day. The service also handled 1.6 billion search queries per day. In 2013 Twitter was one of the ten most-visited websites, and has been described as "the SMS of the Internet." As of December 2014, Twitter has more than 500 million users, out of which more than 284 million are active users .content__page#github h2 Github p GitHub is a web-based Git repository hosting service, which offers all of the distributed revision control and source code management (SCM) functionality of Git as well as adding its own features. Unlike Git, which is strictly a command-line tool, GitHub provides a web-based graphical interface and desktop as well as mobile integration. It also provides access control and several collaboration features such as wikis, task management, and bug tracking and feature requests for every project. .footer p Source: wikipedia.com

I have added <html> and <body> and linked the css and JS files like this:

<head>  <link rel="stylesheet" href="main.css">  <script src="main.js"></script></head>

How do I do this?

prolemur · April 16, 2015

Well these are actually done in html, css and javascript that are formatted differently.

It appears they use line breaks instead of closing tags or braces. Because of this a converter from Jade to HTML, CSS to Stylus and JavaScript to CoffeeScript are available and vice versa.

~~Installing Jade and using the command jade myfile.jade -P~~

~~Install Coffee Script and use the command coffee myfile.coffee -p~~

Derpy derp, you can press the toggle compiled view on codepen that looks like an eye.