<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/koniklos/pen/WxKJaP?limit=all&page=79&q=service" />
<style class="cp-pen-styles">@import 'https://fonts.googleapis.com/css?family=Montserrat';
@import 'https://fonts.googleapis.com/css?family=Monoton';
/*
=================================
Generic page styles
=================================
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
padding: 0;
margin: 0;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
color: #222;
}
h1,
h2,
h3,
h4 {
font-family: 'Monoton', cursive;
font-weight: 500;
}
h1 {
font-size: 3.5em;
font-size: 5vw;
}
h2 {
font-size: 2.4em;
font-size: 3vw;
}
p {
line-height: 1.65em;
}
/*
=================================
Hero section
=================================
*/
#hero {
width: 100%;
height: 800px;
overflow: hidden;
position: relative;
}
#hero-mobile {
display: none;
background: url('https://res.cloudinary.com/anapal/image/upload/v1469816400/battle-of-salamis-mob_zuf3ag.jpg') no-repeat center center / cover;
height: 320px;
}
.layer {
background-position: bottom center;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 800px;
position: fixed;
z-index: -1;
}
.layer-01 {
background-image: url('https://res.cloudinary.com/anapal/image/upload/v1469816297/01-1920-3_xg9iwe.jpg');
background-position: top center;
}
.layer-02 {
background-image: url('https://res.cloudinary.com/anapal/image/upload/v1469816333/02-1920-3_qnkeac.png');
}
.layer-03 {
background-image: url('https://res.cloudinary.com/anapal/image/upload/v1469816324/03-1920-3_bq9wvm.png');
}
.layer-04 {
background-image: url('https://res.cloudinary.com/anapal/image/upload/v1469816399/04-div-3a2a34-2_hxrddc.png');
background-position: bottom;
}
/*
=================================
Main section
=================================
*/
.main {
z-index: 2;
background-color: #fff;
}
.title {
background-color: #3a2a34;
padding: 20px 0;
}
.title h1 {
text-align: center;
color: #fff;
}
.text-wrapper {
max-width: 920px;
margin: 0 auto;
padding: 0 40px;
}
.container {
padding: 80px 0;
}
main .container:nth-of-type(1) {
background-color: #e8eceb;
}
main .container:nth-of-type(2) {
background-color: #fff146;
}
main .container:nth-of-type(4) {
background-color: #e8eceb;
}
main .container:nth-of-type(5) {
background-color: #fff146;
}
figure {
float: right;
width: 36%;
margin: 0 0 10px 20px;
position: relative;
}
figure img {
position: relative;
width: 100%;
z-index: 5;
}
figure:hover figcaption {
top: 0;
}
figcaption {
font-size: 14px;
text-align: center;
background-color: #f1e236;
margin-top: -4px;
padding: 5px 0;
z-index: 3;
position: relative;
top: -30px;
transition: top .3s ease;
}
.map-container {
clear: both;
padding: 40px 0 0 0;
background-color: #fff146;
}
.map-title {
text-align: center;
padding: 10px 0;
}
#map {
width: 100%;
height: 600px;
}
/* Footer section */
footer {
background-color: #262626;
color: #e1dfda;
padding: 20px;
}
footer .container:nth-of-type(1) {
padding: 0;
position: relative;
top: -20px;
}
footer .container:nth-of-type(2) {
padding: 40px 0;
}
footer .container:nth-of-type(3) {
font-size: 14px;
padding-top: 20px;
}
footer a {
color: #e4cd71;
transition: color .3s ease;
text-decoration: none;
}
footer a:hover {
color: #f18817;
}
hr {
border: 2px solid #292929;
box-shadow: 0 1px 0 0 #2f2e2e;
max-width: 920px;
margin: 0 auto;
}
blockquote {
border: 1px solid #403f3a;
border-top: none;
padding: 24px 24px 44px 24px;
box-shadow: 0 5px 0px rgba(0, 0, 0, 0.08);
background-color: #313131;
position: relative;
}
blockquote p {
width: 86%;
margin: 0 auto;
}
.quote {
position: absolute;
color: rgba(255, 255, 255, 0.5);
font-size: 5em;
}
.quote-left {
top: 30px;
left: 15px;
}
.quote-right {
bottom: 65px;
right: 15px;
}
cite {
position: absolute;
right: 20px;
bottom: 10px;
}
cite:before {
content: "- ";
}
/*
=================================
Media queries
=================================
*/
@media only screen and (max-width: 1040px) {
.layer {
background-size: 1040px;
}
}
@media only screen and (min-width: 1340px) {
/*
Fixing the position of .layer-02
Leaves the left edge on higher resolutions.
*/
.layer-02 {
background-position: bottom left;
}
}
@media all and (max-width: 640px) {
/*
On smaller screen sizes, we are hiding the
module and replacing it with a smaller static
image.
*/
#hero {
display: none;
}
#hero-mobile {
display: block;
}
figcaption {
font-size: 12px;
top: -40px;
}
}</style></head><body>
<header>
<div id='hero'>
<div class='layer-01 layer' data-depth='0.20' data-type='parallax'></div>
<div class='layer-02 layer' data-depth='0.40' data-type='parallax'></div>
<div class='layer-03 layer' data-depth='0.70' data-type='parallax'></div>
<div class='layer-04 layer' data-depth='1.00' data-type='parallax'></div>
</div>
<div id='hero-mobile'></div>
</header>
<main class="main">
<article>
<header class="title">
<h1>Themistocles</h1></header>
<div class="container">
<div class="text-wrapper">
<p>Themistocles (/θəˈmɪstəˌkliːz/; Greek: Θεμιστοκλῆς [tʰemistoklɛ̂ːs] Themistoklẽs; "Glory of the Law"; c. 524–459 BC) was an Athenian politician and general. He was one of a new breed of non-aristocratic politicians who rose to prominence in the early
years of the Athenian democracy. As a politician, Themistocles was a populist, having the support of lower class Athenians, and generally being at odds with the Athenian nobility. Elected archon in 493 BC, he convinced the polis to increase the naval
power of Athens, a recurring theme in his political career. During the first Persian invasion of Greece, he fought at the Battle of Marathon, and was possibly one of the ten Athenian strategoi (generals) in that battle.</p>
</div>
</div>
<div class="container">
<div class="text-wrapper">
<figure class="textImg">
<!-- <img src="https://res.cloudinary.com/anapal/image/upload/v1469824756/Themistocles_f2tsaw.jpg" alt="Herm of Themistocles" class="img-responsive"/>-->
<img src="https://res.cloudinary.com/anapal/image/upload/v1469923522/Themistocles_egoeb4.jpg" alt="Herm of Themistocles" class="img-responsive" />
<figcaption>Herm of Themistocless</figcaption>
</figure>
<p>In the years after Marathon, and in the run up to the second Persian invasion he became the most prominent politician in Athens. He continued to advocate a strong Athenian navy, and in 483 BC he persuaded the Athenians to build a fleet of 200 triremes;
these would prove crucial in the forthcoming conflict with Persia. During the second invasion, he was in effective command of the Greek allied navy at the battles of Artemisium and Salamis. Due to subterfuge on the part of Themistocles, the Allies
lured the Persian fleet into the Straits of Salamis, and the decisive Greek victory there was the turning point in the invasion, which ended the following year by the defeat of the Persians at the land Battle of Plataea.</p>
</div>
</div>
<div class="container map-container">
<header class="map-title">
<h2>Salamis - Piraeus - Athens</h2>
</header>
<div id="map"></div>
</div>
<div class="container">
<div class="text-wrapper">
<p>After the conflict ended, Themistocles continued to be pre-eminent among Athenian politicians. However, he aroused the hostility of Sparta by ordering Athens to be re-fortified, and his perceived arrogance began to alienate him from the Athenians.
In 472 or 471 BC, he was ostracised, and went into exile in Argos. The Spartans now saw an opportunity to destroy Themistocles, and implicated him in the treasonous plot of their own general Pausanias. Themistocles thus fled from Greece and was temporarily
given sanctuary by Alexander I of Macedon at Pydna before traveling to Asia Minor, where he entered the service of the Persian king Artaxerxes I. He was made governor of Magnesia, and lived there for the rest of his life.</p>
</div>
</div>
<div class="container">
<div class="text-wrapper">
<p>Themistocles died in 459 BC, probably of natural causes. Themistocles's reputation was posthumously rehabilitated, and he was re-established as a hero of the Athenian (and indeed Greek) cause. Themistocles can still reasonably be thought of as "the
man most instrumental in achieving the salvation of Greece" from the Persian threat, as Plutarch describes him. His naval policies would have a lasting impact on Athens as well, since maritime power became the cornerstone of the Athenian Empire and
golden age.</p>
</div>
</div>
</article>
</main>
<footer>
<div class="container">
<div class="text-wrapper">
<blockquote>
<p><span class="quote-left quote">“</span>Themistocles was a man who exhibited the most indubitable signs of genius; indeed, in this particular he has a claim on our admiration quite extraordinary and unparalleled.<span class="quote-right quote">„ </span></p>
<cite>Thucydides</cite>
</blockquote>
</div>
</div>
<div class="container">
<div class="text-wrapper">
<p>If you want to learn more about Themistocles, visit his <a href="https://en.wikipedia.org/wiki/Themistocles" target="_blank">Wikipedia</a> entry.</p>
</div>
</div>
<hr>
<div class="container">
<div class="text-wrapper">
<p>Created by Yiannis K. / <a href="https://www.freecodecamp.com/thechanchanman" target="_blank" rel="author">thechanchanman @freecodecamp.</a></p>
</div>
</div>
</footer>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
scrollwheel: false,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(37.9458903, 23.57331), // Salamis-Piraeus-Athens
mapTypeId: 'roadmap',
styles: [{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [{
"saturation": 36
}, {
"color": "#000000"
}, {
"lightness": 40
}]
}, {
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#000000"
}, {
"lightness": 16
}]
}, {
"featureType": "all",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{
"color": "#000000"
}, {
"lightness": 20
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}, {
"weight": 1.2
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 20
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 21
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#000000"
}, {
"lightness": 17
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#000000"
}, {
"lightness": 29
}, {
"weight": 0.2
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 18
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 16
}]
}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"color": "#000000"
}, {
"lightness": 19
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#3d9ac0"
}, {
"lightness": 17
}]
}]
});
}
</script>
<script src="tribute.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initialize" async defer></script>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >/*
Parallax effect tutorial by Patryk Zabielski @ medium.com
-----
https://medium.com/@PatrykZabielski/how-to-make-multi-layered-parallax-illustration-with-css-javascript-2b56883c3f27#.soyybjqtk
*/
(function() {
// adding the event listener when there's a scroll
'use strict';
window.addEventListener('scroll', function(event) {
// declaring the variables
var depth, i, layer, layers, len, movement, topDistance, translate3d;
// distance from the top of the window
topDistance = this.pageYOffset;
layers = document.querySelectorAll('[data-type="parallax"]');
for (i = 0, len = layers.length; i < len; i = i + 1) {if (window.CP.shouldStopExecution(1)){break;}
layer = layers[i];
depth = layer.getAttribute('data-depth');
movement = -(topDistance * depth);
// moving the layers based on depth modifier and distance from the top of the window
translate3d = 'translate3d(0, ' + movement + 'px, 0)';
layer.style['-webkit-transform'] = translate3d;
layer.style['-moz-transform'] = translate3d;
layer.style['-ms-transform'] = translate3d;
layer.style['-o-transform'] = translate3d;
layer.style.transform = translate3d;
}
window.CP.exitedLoop(1);
});
}.call(this)); // calling the function
//# sourceURL=pen.js
</script>
</body></html>
