First draft of mobile version
This commit is contained in:
parent
10b56c86ee
commit
e660ef295a
26
about.html
26
about.html
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="style.css" id="stylesheet">
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
|
||||
@ -17,6 +18,9 @@
|
||||
<header>
|
||||
<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
|
||||
<nav>
|
||||
<div id="hamburger">
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="flashdex.html">Flashdex</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
@ -32,11 +36,10 @@
|
||||
<li><a href="#2">What is this website made with?</a></li>
|
||||
<li><a href="#3">Can I use my keyboard to play?</a></li>
|
||||
<li><a href="#4">What is the «Infinite» option in the number of questions exactly?</a></li>
|
||||
<li><a href="#5">This website doesn't work well with mobile devices.</a></li>
|
||||
<li><a href="#6">This website doesn't work well on my browser.</a></li>
|
||||
<li><a href="#7">Can you add more languages?</a></li>
|
||||
<li><a href="#8">Can you add this feature?</a></li>
|
||||
<li><a href="#9">Copyrights</a></li>
|
||||
<li><a href="#5">This website doesn't work well on my browser.</a></li>
|
||||
<li><a href="#6">Can you add more languages?</a></li>
|
||||
<li><a href="#7">Can you add this feature?</a></li>
|
||||
<li><a href="#8">Copyrights</a></li>
|
||||
</ul>
|
||||
|
||||
<h3 id="1">Who are you?</h3>
|
||||
@ -59,27 +62,24 @@
|
||||
<p>When playing with the Infinite option, the game ends when you have 5 bad answers on all the set.</p>
|
||||
|
||||
<img src="pokemon/60RB.png" class="middle-companion" alt="poliwag" />
|
||||
|
||||
<h3 id="5">This website doesn't work well with mobile devices.</h3>
|
||||
<p>This is something I'll be working on... someday... promise!</p>
|
||||
|
||||
<h3 id="6">This website doesn't work well on my browser.</h3>
|
||||
<h3 id="5">This website doesn't work well on my browser.</h3>
|
||||
<p>Please contact me or make a pull request!</p>
|
||||
|
||||
<h3 id="7">Can you add more languages?</h3>
|
||||
<h3 id="6">Can you add more languages?</h3>
|
||||
<p>The game currently supports all of the languages available in the main games. If your language is not on the list, it probably uses the English names! I will not support other languages by myself, but you can always contribute by making a pull request!</p>
|
||||
|
||||
<h3 id="8">Can you add this feature?</h3>
|
||||
<h3 id="7">Can you add this feature?</h3>
|
||||
<p>Please contact me or make a pull request!</p>
|
||||
|
||||
<h3 id="9">Copyrights</h3>
|
||||
<h3 id="8">Copyrights</h3>
|
||||
<p>The Pokémon names, the associated artworks and the Pokémon licence is trademarked by <strong>Nintendo</strong> and <strong>The Pokémon Company</strong>, 1996 - 2022.<br />
|
||||
All the Pokémon artworks were taken from <a href="https://bulbapedia.bulbagarden.net/wiki/Main_Page">Bulbapedia</a>, that I'd like to thank for their huge work for the Pokémon community.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2012 - 2022 Pokétest 2.6</p>
|
||||
<p>© 2012 - 2022 Pokétest 2.7</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="style.css" id="stylesheet">
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
|
||||
@ -18,6 +19,9 @@
|
||||
<header>
|
||||
<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
|
||||
<nav>
|
||||
<div id="hamburger">
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="flashdex.html">Flashdex</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
@ -31,25 +35,27 @@
|
||||
|
||||
<h1>Flashdex</h1>
|
||||
|
||||
<p>meilleur texte...</p>
|
||||
|
||||
<p>Well, well, well! This is the simplest Pokédex you'll find in the web, which is useful to see your favorite creatures in good resolution. Furthermore, you can see all the new Pokémons that are announced because we are adding them really fast! This page is perfect to learn those new names, so let's get started!</p>
|
||||
|
||||
<div id="flashdex_config">
|
||||
<h2><a href="#" class="all unselected"><strong>Select all</strong></a></h2>
|
||||
<p>
|
||||
<input type="checkbox" name="1g" id="1g"><label for="1g"><strong><span class="RB1">1</span><span class="RB2">G</span></strong></label>
|
||||
<input type="checkbox" name="2g" id="2g"><label for="2g"><strong><span class="GS1">2</span><span class="GS2">G</span></strong></label>
|
||||
<input type="checkbox" name="3g" id="3g"><label for="3g"><strong><span class="RS1">3</span><span class="RS2">G</span></strong></label>
|
||||
<input type="checkbox" name="4g" id="4g"><label for="4g"><strong><span class="DP1">4</span><span class="DP2">G</span></strong></label>
|
||||
<br />
|
||||
<input type="checkbox" name="5g" id="5g"><label for="5g"><strong><span class="BW1">5</span><span class="BW2">G</span></strong></label>
|
||||
<input type="checkbox" name="6g" id="6g"><label for="6g"><strong><span class="XY1">6</span><span class="XY2">G</span></strong></label>
|
||||
<input type="checkbox" name="7g" id="7g"><label for="7g"><strong><span class="SM1">7</span><span class="SM2">G</span></strong></label>
|
||||
<input type="checkbox" name="8g" id="8g"><label for="8g"><strong><span class="SWSH1">8</span><span class="SWSH2">G</span></strong></label>
|
||||
<br />
|
||||
<span class="generation">
|
||||
<span class="gen"><input type="checkbox" name="1g" id="1g"><label for="1g"><strong><span class="RB1">1</span><span class="RB2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="2g" id="2g"><label for="2g"><strong><span class="GS1">2</span><span class="GS2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="3g" id="3g"><label for="3g"><strong><span class="RS1">3</span><span class="RS2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="4g" id="4g"><label for="4g"><strong><span class="DP1">4</span><span class="DP2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="5g" id="5g"><label for="5g"><strong><span class="BW1">5</span><span class="BW2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="6g" id="6g"><label for="6g"><strong><span class="XY1">6</span><span class="XY2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="7g" id="7g"><label for="7g"><strong><span class="SM1">7</span><span class="SM2">G</span></strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="8g" id="8g"><label for="8g"><strong><span class="SWSH1">8</span><span class="SWSH2">G</span></strong></label></span>
|
||||
</span>
|
||||
<span class="alternate_forms">Alternate forms</span>
|
||||
<input type="checkbox" name="regional" id="regional"><label for="regional"><strong>Regional</strong></label>
|
||||
<input type="checkbox" name="mega" id="mega"><label for="mega"><strong>Mega-Evolution</strong></label>
|
||||
<input type="checkbox" name="gigantamax" id="gigantamax"><label for="gigantamax"><strong>Gigantamax</strong></label>
|
||||
<span class="gen"><input type="checkbox" name="regional" id="regional"><label for="regional"><strong>Regional</strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="mega" id="mega"><label for="mega"><strong>Mega-Evolution</strong></label></span>
|
||||
<span class="gen"><input type="checkbox" name="gigantamax" id="gigantamax"><label for="gigantamax"><strong>Gigantamax</strong></label></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
@ -79,7 +85,7 @@
|
||||
</article>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2012 - 2022 Pokétest 2.6</p>
|
||||
<p>© 2012 - 2022 Pokétest 2.7</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
12
index.html
12
index.html
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="style.css" id="stylesheet">
|
||||
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
|
||||
@ -17,6 +18,9 @@
|
||||
<header>
|
||||
<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
|
||||
<nav>
|
||||
<div id="hamburger">
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="flashdex.html">Flashdex</a></li>
|
||||
<li><a href="about.html">About</a></li>
|
||||
@ -124,8 +128,8 @@
|
||||
<option name="time" id="5" value="5" selected>5</option>
|
||||
<option name="time" id="10" value="10">10</option>
|
||||
<option name="time" id="30" value="30">30</option>
|
||||
<option name="time" id="30" value="30">99</option>
|
||||
<!--<option name="time" id="10000" value="10000">10000 (debug)</option>-->
|
||||
<option name="time" id="99" value="99">99</option>
|
||||
<option name="time" id="10000" value="10000">10000 (debug)</option>
|
||||
</select> seconds
|
||||
</div>
|
||||
</div>
|
||||
@ -138,11 +142,11 @@
|
||||
</article>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© 2012 - 2022 Pokétest 2.6</p>
|
||||
<p>© 2012 - 2022 Pokétest 2.7</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
19
interface.js
19
interface.js
@ -89,4 +89,23 @@ $(document).ready(function() {
|
||||
$('#configuration input#select').click(function() {
|
||||
$('#selected_options').slideDown();
|
||||
});
|
||||
|
||||
|
||||
|
||||
// hamburger mobile
|
||||
$("#hamburger .container").click(function()
|
||||
{
|
||||
if ($("nav").hasClass("active"))
|
||||
{
|
||||
$("ul").slideUp(200, function()
|
||||
{
|
||||
$("nav").removeClass("active");
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
$("nav").addClass("active");
|
||||
$("ul").slideDown(200);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
12
poketest.js
12
poketest.js
@ -244,10 +244,10 @@ $(document).ready(function() {
|
||||
$('article #container .chrono').empty().append(chrono);
|
||||
$('article #container .whois').empty().append("Who's that Pokémon? " + (!infinite? " ("+questions+"/"+max_questions+")" : ""));
|
||||
$('article #container .pokemon').empty().append('<img src="pokemon/'+image_name+'.png" class="'+(silhouette)+'" />');
|
||||
$('article #container #answers').empty().append('<input type="submit" class="option a1" name="a1" value="'+options[0]+'">')
|
||||
$('article #container #answers').append('<input type="submit" class="option a2" name="a2" value="'+options[1]+'">')
|
||||
$('article #container #answers').append('<input type="submit" class="option a3" name="a3" value="'+options[2]+'">')
|
||||
$('article #container #answers').append('<input type="submit" class="option a4" name="a4" value="'+options[3]+'">')
|
||||
$('article #container #answers').empty().append('<span><input type="submit" class="option a1" name="a1" value="'+options[0]+'"></span>')
|
||||
$('article #container #answers').append('<span><input type="submit" class="option a2" name="a2" value="'+options[1]+'"></span>')
|
||||
$('article #container #answers').append('<span><input type="submit" class="option a3" name="a3" value="'+options[2]+'"></span>')
|
||||
$('article #container #answers').append('<span><input type="submit" class="option a4" name="a4" value="'+options[3]+'"></span>')
|
||||
|
||||
// timer setting
|
||||
var clock = setInterval(function() {
|
||||
@ -257,7 +257,7 @@ $(document).ready(function() {
|
||||
showAnswer(false); // timer has ended, so it's a bad answer
|
||||
}
|
||||
$('article #container .chrono').empty().append(chrono);
|
||||
}, 1000);
|
||||
}, 10000000);
|
||||
|
||||
// checking if the answer is good or not
|
||||
$('article .option').click(function() {
|
||||
@ -295,7 +295,7 @@ $(document).ready(function() {
|
||||
if (!infinite) questions < max_questions ? game() : score();
|
||||
else bad_answers < max_infinite_errors ? game() : score();
|
||||
}
|
||||
}, 1000);
|
||||
}, 100000000);
|
||||
}
|
||||
|
||||
function score() {
|
||||
|
||||
216
style.css
216
style.css
@ -18,7 +18,7 @@ h3 { font-variant: small-caps; }
|
||||
/**** HEADER ****/
|
||||
|
||||
header {
|
||||
height:14vh;
|
||||
height:10vh;
|
||||
background: #2f2e2e;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -27,13 +27,13 @@ header {
|
||||
header img {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: 12.5vh;
|
||||
margin-left: 8vw; margin-top: 0.75vh;
|
||||
height: 9vh;
|
||||
margin-left: 8vw; padding-top: 0.4vh;
|
||||
}
|
||||
|
||||
header nav {
|
||||
display: flex; align-items: flex-end;
|
||||
margin-right: 8vw; margin-bottom: 5vh;
|
||||
margin-right: 8vw; margin-bottom: 3vh;
|
||||
}
|
||||
|
||||
header nav ul, header nav ul li {
|
||||
@ -67,7 +67,7 @@ article #container {
|
||||
|
||||
article #container .companion {
|
||||
float: right;
|
||||
width: 280px;
|
||||
width: 260px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@ -167,7 +167,7 @@ article #container #game #configuration #right_config { float: right; }
|
||||
|
||||
article #container #game .button {
|
||||
margin: auto;
|
||||
padding: 20px; padding-top: 30px;
|
||||
padding: 20px;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
@ -191,8 +191,8 @@ article #container input[type=submit]:hover {
|
||||
|
||||
/**** GAME LAUNCHED ****/
|
||||
|
||||
article #container.game_active { height: 68vh; }
|
||||
article #container #top_game { display: flex; justify-content: space-between; height: 8vh; }
|
||||
article #container.game_active { height: 72vh; }
|
||||
article #container #top_game { display: flex; justify-content: space-between; height: 10vh; }
|
||||
article #container #top_game .whois { display: flex; align-items: flex-start; }
|
||||
|
||||
article #container #top_game .chrono {
|
||||
@ -217,14 +217,14 @@ article #container .pokemon img.silhouette { filter: contrast(0%) brightness(170
|
||||
|
||||
article #container #answers {
|
||||
text-align: center;
|
||||
height: 10vh;
|
||||
height: 14vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
article #container #answers input { margin-right: 30px; display: inline; }
|
||||
article #container #answers input:last-child { margin-right: 0px; }
|
||||
article #container #answers input:last-child { margin-right: 30px; }
|
||||
|
||||
article #container #answers .final_answer { font-size: 23px; }
|
||||
article #container #answers .final_answer .good { color:#3ad48d; font-weight:bold; }
|
||||
@ -303,18 +303,17 @@ article #container.diploma #score {
|
||||
#game #flashdex_config h2 { text-decoration: underline; font-size: 1.05em; margin-top: 25px; }
|
||||
#game #flashdex_config span.alternate_forms { margin-top: 20px; margin-bottom: 0px; display: block; font-variant: small-caps; font-size: 19px; }
|
||||
|
||||
#game #flashdex_config p.button { padding: 0px; margin-top: 20px; }
|
||||
|
||||
#loading {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
margin-top:15px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#container #game #flashdex {
|
||||
margin:auto;
|
||||
display:inline-block;
|
||||
display:none;
|
||||
text-align:center;
|
||||
margin-top:2vh;
|
||||
}
|
||||
@ -357,5 +356,192 @@ span.form.mega { background-image: url('img/icon_mega.png'); }
|
||||
span.form.giga {
|
||||
background-image: url('img/icon_giga.png'); background-color: white;
|
||||
background-position: center; background-size:20px;
|
||||
border-radius:50%; border: 1px solid white;
|
||||
border-radius: 50%; border: 1px solid white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*** MOBILE ***/
|
||||
|
||||
@media screen and (max-width:1100px) {
|
||||
article #container {
|
||||
margin-left: 5vw;
|
||||
margin-right: 5vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:800px) {
|
||||
|
||||
h1 { margin: 0.2em 0; font-size:1.3em; }
|
||||
h2 { font-size:1.25em; }
|
||||
h3 { margin: 10px; margin-left: 0; }
|
||||
|
||||
header { height: 12vh; }
|
||||
header img { height: 11vh; margin-left: 4vw; }
|
||||
header nav ul { display: none; }
|
||||
|
||||
#content-wrap { padding-bottom: 8vh; }
|
||||
|
||||
article { margin-top: 2vh; }
|
||||
|
||||
article #container {
|
||||
margin-left: 4vw;
|
||||
margin-right: 4vw;
|
||||
padding: 5px 10px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
article #container #game #configuration #left_config { float: none; }
|
||||
article #container #game #configuration #right_config { float: none; }
|
||||
|
||||
article #container #game #configuration input[name="gen"], article #container #game #selected_options input,
|
||||
article #container #game #configuration .first { margin-left:15px; margin-bottom:5px; }
|
||||
|
||||
article #container #game .button { padding: 10px; padding-top: 20px; }
|
||||
|
||||
article #container #game #configuration input[type="checkbox"] {
|
||||
margin-left: 15px;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
article #container input[type="submit"] {
|
||||
padding: 6px;
|
||||
border: 2px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
article #container.game_active {
|
||||
max-height: 76vh;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
article #container #answers {
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
article #container #answers input:last-child { margin-right: 0px; }
|
||||
|
||||
article #container.game_active div#answers span {
|
||||
display: block;
|
||||
}
|
||||
article #container.diploma #score {
|
||||
background: none;
|
||||
}
|
||||
article #container #seed input {
|
||||
width: 90%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
article #container.diploma #score {
|
||||
padding: 0px;
|
||||
}
|
||||
article #container.diploma {
|
||||
border: none;
|
||||
}
|
||||
|
||||
article #container .pokemon img {
|
||||
height: 37vh;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
article #container .top-companion, article #container .companion {
|
||||
display: none;
|
||||
}
|
||||
|
||||
article #container .middle-companion {
|
||||
width: 250px;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
article #container.about ul {
|
||||
margin-left: 10px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
article #container.about p { margin-left: 0px; }
|
||||
|
||||
#container #game #flashdex .pokedex { width: 230px; height: 260px; }
|
||||
#container #game { text-align: justify; }
|
||||
#game #flashdex .pokedex img { height: 225px; }
|
||||
|
||||
#game #flashdex_config p { text-align: left; }
|
||||
|
||||
#game #flashdex_config .generation {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#game #flashdex_config .generation .gen {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
width:15%;
|
||||
}
|
||||
|
||||
#game #flashdex_config .gen { padding: 0; margin: 0; margin-left: 15px; display: block; }
|
||||
#game #flashdex_config .gen label { padding: 2px; margin: 2px; margin-left: 8px; }
|
||||
|
||||
#game #flashdex_config select.lang { margin-left: 15px; margin-top:5px; }
|
||||
|
||||
#game #flashdex_config p.button { padding-top: 15px; margin-top: 15px; }
|
||||
|
||||
article #container #game .button {
|
||||
padding: 10px; padding-top: 15px;
|
||||
}
|
||||
|
||||
footer { height:6vh; }
|
||||
|
||||
|
||||
|
||||
header {
|
||||
display:block;
|
||||
height: 12vh;
|
||||
margin-top: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
header nav {
|
||||
display: auto;
|
||||
align-items: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
header nav #hamburger {
|
||||
position: absolute;
|
||||
margin-top: 0rem;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
header nav #hamburger .bar1,
|
||||
header nav #hamburger .bar2,
|
||||
header nav #hamburger .bar3 { width:30px; height:3px; background-color:#ff3636; margin:6px 0; transition:0.4s; }
|
||||
|
||||
header nav.active #hamburger .bar1 { transform:rotate(-45deg) translate(-4px, 6px); }
|
||||
header nav.active #hamburger .bar2 { opacity:0; }
|
||||
header nav.active #hamburger .bar3 { transform:rotate(45deg) translate(-6px, -9.5px); }
|
||||
|
||||
header nav.active ul {
|
||||
margin: auto;
|
||||
background: #2f2e2e;
|
||||
width: 100%;
|
||||
text-align:center;
|
||||
padding: 10px;
|
||||
z-index:0;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user