Language
by Mateusz
HTML
<body>
<h1>Nazwa</h1>
<div>
<h2>Choose your language!</h2>
<div id="English">
<a href="aEnglish/index.html">
<img src="http://i.imgur.com/zBM9uFU.png.png" alt="English" width="130" height="130"></a>
<p>English</p>
</div>
<div id="Polish">
<a href="aPolish/index.html">
<img src="http://i.imgur.com/EMypHq4.png" alt="Polish" width="130" height="130"></a>
<p>Polish</p>
</div>
<div id="Swedish">
<a href="aSwedish/index.html">
<img src="http://i.imgur.com/SilNBW4.png" alt="Swedish" width="130" height="130"></a>
<p>Swedish</p>
</div>
</div>
</body>
CSS
body {
font-size: 1.8em;
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
}
h1 {
font-size: 2em;
font-family: 'Tangerine', cursive;
color: white;
text-shadow: 2px 2px 2px #000000;
}
div {
width: 50%;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
position: relative;
color: white;
display:block
}
div #English {
float: left;
width: 33%;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
position: relative;
text-shadow:5px 5px 5px #000000;
display:block
}
div #Polish {
float: right;
width: 33%;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
position: relative;
text-shadow:5px 5px 5px #000000;
display:block
}
div #Swedish {
width: 33%;
border-radius: 10px;
margin-left: 33.5%;
margin-right: 45%;
position: relative;
text-shadow:5px 5px 5px #000000;
display:block
}
JavaScript
WebFontConfig = {
google: { families: [ 'Tangerine::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();