enzobonggio/Python-Challenge.markdown

## index.html
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>the python challenge reworked</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="slide_style.css">
</head>

<body>
    <header><h1 id="h">Python Challenge</h1></header>
	<nav id="menu">
		<ul>
			<li><a href="#">About</a></li>
			<li><a href="#">Faq</a></li>
			<li><a href="#">Forum</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Book</a></li>
		</ul>
	</nav>

       <div id="slideshow-wrap">
        <input type="radio" id="button-1" name="controls" checked="checked"/>
        <label for="button-1"></label>
        <input type="radio" id="button-2" name="controls"/>
        <label for="button-2"></label>
        <input type="radio" id="button-3" name="controls"/>
        <label for="button-3"></label>
        <input type="radio" id="button-4" name="controls"/>
        <label for="button-4"></label>
        <input type="radio" id="button-5" name="controls"/>
        <label for="button-5"></label>
        <div id="slideshow-inner">
            <ul>
                <li id="slide1">
        <h2>What is the Python Challenge?</h2>
            <p>The Python Challenge is a set of riddles that require a little bit of Python programming to be solved. The solutions are entered by changing the address of the page (URL). You get  used to the idea pretty fast after solving the first few levels.
    </p>
                </li>
                <li id="slide2">
                    <h2>What's the purpose of the Python Challenge?</h2>
            <p>I've written the challenge in hope that it will provide an entertaining way to explore the Python Programming Language. It is a way to demonstrate the great power of Python's batteries.</p>
                </li>
                <li id="slide3">

       <h2>Where did you get the idea from?</h2>
            <p>I was inspired while I was playing notpron. It just occured to me that the same style of riddles can serve as a way to discover Python.</p>
                </li>
                <li id="slide4">
                    <h2>What is the Python programming language?</h2>
            <p>From Python website: "Python is an interpreted, interactive, object-oriented programming language. It is often compared to Tcl, Perl, Scheme or Java. Python combines remarkable power with very clear syntax. It has modules, classes, exceptions, very high level dynamic data types, and dynamic typing."</p>
                </li>
                <li id="slide5">
                 <h2>What level of Python knowledge is required for solving the riddles?</h2>
            <p>The riddles are designed to be solvable by Python newcomers and yet challenging even for Python experts. If you don't know how to do a certain thing in Python or you are referenced to an unfamiliar module - treat it as an opportunity to learn it. Google is your friend.</p>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

## Python-Challenge.markdown

      
    Raw
  

              Python-Challenge.markdown
            
          
    Python Challenge

http://www.pythonchallenge.com/faq.php
-- this is the original page
A Pen by enzo bonggio on CodePen.
License.

  
## style.css
/*css file*/
/*template from http://codepen.io/CNamor/*/
/*http://www.pythonchallenge.com/faq.php  -- this is the original page*/

@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);

* {margin-top: 0em;}
h1 {
    font-family: 'Pacifico', sans-serif;
    height: 100%;
    text-align: center;
    width: 100%;
    font-size: 5em;
    color: #003857;
    text-shadow: 1px 1px 2px #db7474;


}

h2 {
    font-family: Gloria Hallelujah;
    font-size: 1.5em;
    text-align: center;
    padding: 1.5em;
    margin-right: 2em
}
p{
    font-family: Gloria Hallelujah;

}

html {
  background-color: #ddf3ff;
}

#menu{
    margin-top: 0em;
    text-align: center
}

#menu li {
    display:inline;
    border-radius: 50px 100px 100px 0;
    background: #ff8282;
    border-style:groove;
    border-width:medium;
    border-color: #be0000;
    width: 3em;
    height: 2em;
    font-family: Shadows Into Light;
    font-size: 3em;


}

#menu ul {
    padding: 1em;
}

#menu a {
	display:inline;
	padding: 15px 20px;
	color: #000;
	text-decoration: none;
}
#menu li:hover {
	background-color: #000;
}
#menu a:hover
{
    color: #fffefe;

}

h2 { color: #ddf3ff }
p {color: #ddf3ff;
padding: 3em}

#slideshow-wrap {
    margin-left: auto;
    margin-right: auto;
    border-radius:50px ;
    height: 25em;
    width: 48em;
    background-color: #060636;
}

#slideshow-inner>ul {
    list-style: none;
    height: 100%;
    width: 500%;
    position: relative;
    left: 0px;
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

#slideshow-inner>ul>li {
    width: 20%;
    height: 320px;
    float:right;
    position: relative;
}

#slideshow-wrap input[type=radio] {
    position: relative;
    left: 50%;
    bottom: 15px;
    visibility: hidden;

}

/*properties of the buttons*/

#slideshow-wrap label {
    position: absolute;
    margin-top: 26em;
    left: 50%;
    z-index: 100;
    width: 15px;
    height: 15px;
    border-width: medium;
    border-radius: 50%;
    cursor:pointer;
    box-shadow: 0px 0px 5px;
    transition: background-color .2s;
}
/*here is the background of the buttons*/

#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: grey }

#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: grey }

#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: grey }

#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: grey }

#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: grey }


#slideshow-wrap label[for=button-1] { margin-left: -36px }

#slideshow-wrap label[for=button-2] { margin-left: -18px }

#slideshow-wrap label[for=button-3] { margin-left: 0px }

#slideshow-wrap label[for=button-4] { margin-left: 18px }

#slideshow-wrap label[for=button-5] { margin-left: 36px }


/* here is the text moving to one size*/
#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }

#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }

#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }

#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }
	<html lang="">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>the python challenge reworked</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="slide_style.css">
	</head>

	<body>
	<header><h1 id="h">Python Challenge</h1></header>
	<nav id="menu">
	<ul>
	<li><a href="#">About</a></li>
	<li><a href="#">Faq</a></li>
	<li><a href="#">Forum</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Book</a></li>
	</ul>
	</nav>

	<div id="slideshow-wrap">
	<input type="radio" id="button-1" name="controls" checked="checked"/>
	<label for="button-1"></label>
	<input type="radio" id="button-2" name="controls"/>
	<label for="button-2"></label>
	<input type="radio" id="button-3" name="controls"/>
	<label for="button-3"></label>
	<input type="radio" id="button-4" name="controls"/>
	<label for="button-4"></label>
	<input type="radio" id="button-5" name="controls"/>
	<label for="button-5"></label>
	<div id="slideshow-inner">
	<ul>
	<li id="slide1">
	<h2>What is the Python Challenge?</h2>
	<p>The Python Challenge is a set of riddles that require a little bit of Python programming to be solved. The solutions are entered by changing the address of the page (URL). You get used to the idea pretty fast after solving the first few levels.
	</p>
	</li>
	<li id="slide2">
	<h2>What's the purpose of the Python Challenge?</h2>
	<p>I've written the challenge in hope that it will provide an entertaining way to explore the Python Programming Language. It is a way to demonstrate the great power of Python's batteries.</p>
	</li>
	<li id="slide3">

	<h2>Where did you get the idea from?</h2>
	<p>I was inspired while I was playing notpron. It just occured to me that the same style of riddles can serve as a way to discover Python.</p>
	</li>
	<li id="slide4">
	<h2>What is the Python programming language?</h2>
	<p>From Python website: "Python is an interpreted, interactive, object-oriented programming language. It is often compared to Tcl, Perl, Scheme or Java. Python combines remarkable power with very clear syntax. It has modules, classes, exceptions, very high level dynamic data types, and dynamic typing."</p>
	</li>
	<li id="slide5">
	<h2>What level of Python knowledge is required for solving the riddles?</h2>
	<p>The riddles are designed to be solvable by Python newcomers and yet challenging even for Python experts. If you don't know how to do a certain thing in Python or you are referenced to an unfamiliar module - treat it as an opportunity to learn it. Google is your friend.</p>
	</li>
	</ul>
	</div>
	</div>
	</body>
	</html>
	/css file/
	/template from http://codepen.io/CNamor//
	/http://www.pythonchallenge.com/faq.php -- this is the original page/

	@import url(http://fonts.googleapis.com/css?family=Pacifico);
	@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);
	@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);

	* {margin-top: 0em;}
	h1 {
	font-family: 'Pacifico', sans-serif;
	height: 100%;
	text-align: center;
	width: 100%;
	font-size: 5em;
	color: #003857;
	text-shadow: 1px 1px 2px #db7474;


	}

	h2 {
	font-family: Gloria Hallelujah;
	font-size: 1.5em;
	text-align: center;
	padding: 1.5em;
	margin-right: 2em
	}
	p{
	font-family: Gloria Hallelujah;

	}

	html {
	background-color: #ddf3ff;
	}

	#menu{
	margin-top: 0em;
	text-align: center
	}

	#menu li {
	display:inline;
	border-radius: 50px 100px 100px 0;
	background: #ff8282;
	border-style:groove;
	border-width:medium;
	border-color: #be0000;
	width: 3em;
	height: 2em;
	font-family: Shadows Into Light;
	font-size: 3em;


	}

	#menu ul {
	padding: 1em;
	}

	#menu a {
	display:inline;
	padding: 15px 20px;
	color: #000;
	text-decoration: none;
	}
	#menu li:hover {
	background-color: #000;
	}
	#menu a:hover
	{
	color: #fffefe;

	}

	h2 { color: #ddf3ff }
	p {color: #ddf3ff;
	padding: 3em}

	#slideshow-wrap {
	margin-left: auto;
	margin-right: auto;
	border-radius:50px ;
	height: 25em;
	width: 48em;
	background-color: #060636;
	}

	#slideshow-inner>ul {
	list-style: none;
	height: 100%;
	width: 500%;
	position: relative;
	left: 0px;
	transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
	}

	#slideshow-inner>ul>li {
	width: 20%;
	height: 320px;
	float:right;
	position: relative;
	}

	#slideshow-wrap input[type=radio] {
	position: relative;
	left: 50%;
	bottom: 15px;
	visibility: hidden;

	}

	/properties of the buttons/

	#slideshow-wrap label {
	position: absolute;
	margin-top: 26em;
	left: 50%;
	z-index: 100;
	width: 15px;
	height: 15px;
	border-width: medium;
	border-radius: 50%;
	cursor:pointer;
	box-shadow: 0px 0px 5px;
	transition: background-color .2s;
	}
	/here is the background of the buttons/

	#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: grey }

	#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: grey }

	#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: grey }

	#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: grey }

	#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: grey }




	#slideshow-wrap label[for=button-1] { margin-left: -36px }

	#slideshow-wrap label[for=button-2] { margin-left: -18px }

	#slideshow-wrap label[for=button-3] { margin-left: 0px }

	#slideshow-wrap label[for=button-4] { margin-left: 18px }

	#slideshow-wrap label[for=button-5] { margin-left: 36px }


	/* here is the text moving to one size*/
	#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

	#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }

	#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }

	#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }

	#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }