Related
So here is my problem:
I have black and white images (img tags), and i want to change the color of it except for the black pixels. I used a code that allowed me to do this, but when coloring the image, some of the black pixels are colored too, not only the white as you can see in these images (some of the black lines are colored):
This is my code (to test it please change the image url to a local image so the color changing works)
let hex
var mug=document.getElementById("eyes");
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var originalPixels = null;
var currentPixels = null;
let currentcolor
function color(elem) {
hex='rgb(0,0,0)'
if (elem.classList[0].toString()=='color') {
currentcolor=document.getElementById(elem.id).style.backgroundColor
hex=currentcolor.toString()
}
}
function color1(elem) {
document.getElementById(elem.id).style.fill=currentcolor
getPixels(mug)
hex=hex.substring(4, hex.length-1)
.replace(/ /g, '')
.split(',')
changeColor(hex[0],hex[1],hex[2])
}
function getPixels(img)
{
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
originalPixels = ctx.getImageData(0, 0, img.width, img.height);
currentPixels = ctx.getImageData(0, 0, img.width, img.height);
img.onload = null;
}
function hexToRGB(hex)
{
console.log(hex)
var long = parseInt(hex.replace(/^#/, ""), 16);
return {
R: (long >>> 16) & 0xff,
G: (long >>> 8) & 0xff,
B: long & 0xff
};
}
function changeColor(a,b,c)
{
if(!originalPixels) return; // Check if image has loaded
var newColor = {R: eval(a), G: eval(b), B: eval(c)};
for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
{
if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel
{
console.log(currentPixels.data[I + 3])
if ((currentPixels.data[I]!=0 && currentPixels.data[I+1]!=0 && currentPixels.data[I+2]!=0)) {
currentPixels.data[I] = newColor.R;
currentPixels.data[I + 1] = newColor.G;
currentPixels.data[I + 2] = newColor.B;
}
}
}
console.log(newColor)
ctx.putImageData(currentPixels, 0, 0);
mug.src = canvas.toDataURL("image/png");
}
#boite {
width: 70%;
height: 85%;
border: 5px solid black;
background-color: #e3e2d3;
position: absolute;
left: 0;
right: 0;
top: 5%;
justify-content: center;
display: flex;
align-items: center;
margin-left: 285px;
}
#corps{
width: 300px;
}
#next2{
position: absolute;
width: 25%;
height: 95%;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 20px;
border: 3px solid white;
margin-left: 15px;
margin-top: 15px;
text-align: center;
background-color: #B393DE;
}
#colours {
color: #fff;
justify-content: center;
font: 100 24px/100px sans-serif;
height: 150px;
width: 100%;
text-align: center;
display: flex;
flex-wrap: wrap;
}
#colours div {
height: 50%;
width: 30%;
border: 2px solid rgb(255, 255, 255);
border-radius: 50%;
cursor:pointer;
}
.color{
background-color: #888888;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title>Document</title>
</head>
<body>
<div id="next2" >
<div id="colours">
<div id="red" class="color" style="background-color: #FE2712;" onclick="color(this)"></div>
<div id="red-orange" class="color" style="background-color:#FD5206;" onclick="color(this)"></div>
<div id="orange" class="color" style="background-color: #FB9902;" onclick="color(this)"></div>
<div id="yellow-orange" class="color" style="background-color: #F9BC02;" onclick="color(this)"></div>
<div id="yellow" class="color" style="background-color: #FFFE34;" onclick="color(this)"></div>
<div id="yellow-green" class="color" style="background-color: #D1EA2C;" onclick="color(this)"></div>
<div id="green" class="color" style="background-color: #66B033;" onclick="color(this)"></div>
<div id="blue-green" class="color" style="background-color: #038FCB;" onclick="color(this)"></div>
<div id="blue" class="color" style="background-color: #0247FE;" onclick="color(this)"></div>
<div id="blue-violet" class="color" style="background-color: #3E01A4;" onclick="color(this)"></div>
<div id="violet" class="color" style="background-color: #8601B0;" onclick="color(this)"></div>
<div id="red-violet" class="color" style="background-color: #A9174B;" onclick="color(this)"></div>
<div id="black" class="color" style="background-color: #000000;" onclick="color(this)"></div>
<div id="white" class="color" style="background-color: #ffffff;" onclick="color(this)"></div>
</div>
</div>
<div id="boite">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1876.000000 2501.000000"
preserveAspectRatio="xMidYMid meet" id="corps" width="80%" height="80%">
<g transform="translate(0.000000,2501.000000) scale(0.100000,-0.100000)"
fill="white" stroke="none" id="issasvg" onclick="color1(this)" >
<path d="M8615 24873 c-386 -22 -661 -48 -938 -88 -960 -140 -1780 -418 -2486
-844 -317 -192 -473 -310 -721 -546 -164 -157 -264 -231 -362 -267 -44 -16
-62 -28 -69 -46 -13 -34 6 -80 36 -88 12 -3 99 17 198 45 97 28 179 51 183 51
5 0 -50 -39 -121 -86 -602 -401 -1138 -934 -1593 -1586 -602 -861 -1038 -1873
-1357 -3148 -106 -420 -113 -462 -145 -834 -70 -801 -109 -1055 -242 -1591
-139 -561 -163 -730 -163 -1145 0 -197 4 -325 13 -385 23 -153 62 -325 99
-435 39 -119 144 -344 175 -377 22 -24 62 -30 88 -13 8 5 49 112 91 237 l76
228 8 -50 c59 -407 298 -971 616 -1453 87 -132 132 -179 182 -193 95 -25 146
38 175 217 9 57 20 104 24 104 4 0 8 -5 8 -10 0 -6 25 -67 56 -137 146 -331
327 -595 579 -848 226 -227 390 -356 697 -547 l178 -110 -46 -57 c-935 -1156
-1523 -2549 -1683 -3986 -37 -329 -45 -485 -45 -865 0 -388 13 -603 55 -945
106 -867 372 -1742 769 -2534 67 -134 80 -151 119 -151 53 0 61 23 61 166 0
71 3 152 6 181 l7 52 76 -112 c339 -495 585 -798 841 -1035 538 -498 1161
-855 1925 -1105 779 -254 1708 -374 2624 -338 331 13 498 26 896 71 149 16
275 30 280 30 16 -1 -64 -41 -140 -71 -81 -31 -104 -59 -83 -103 6 -15 23 -30
37 -34 42 -12 555 -7 696 7 575 55 1056 184 1816 487 773 307 1301 585 1764
929 441 326 806 720 1058 1139 60 100 77 122 82 106 3 -11 8 -105 9 -208 2
-104 6 -195 11 -201 12 -20 53 -31 79 -21 41 15 261 480 408 865 693 1807 684
3785 -27 5580 -301 759 -688 1413 -1243 2096 l-23 28 101 76 c213 161 427 344
750 641 369 338 548 553 690 825 l57 111 17 -109 c9 -59 22 -125 28 -145 25
-85 119 -123 188 -76 95 64 374 521 518 848 116 261 219 591 238 761 4 33 10
57 14 52 4 -4 40 -106 80 -226 61 -186 76 -220 96 -229 53 -25 73 -5 155 157
316 626 333 1410 49 2340 -29 94 -70 229 -92 300 -37 122 -514 1993 -592 2320
-57 240 -100 447 -170 813 -108 559 -164 803 -256 1107 -223 739 -541 1319
-968 1766 -59 62 -102 110 -97 107 20 -11 461 -148 478 -148 25 0 57 36 57 66
0 15 -12 37 -32 56 -53 49 -204 159 -328 238 -150 95 -268 183 -465 344 -631
517 -1140 856 -1725 1150 -1004 506 -2012 758 -3295 826 -167 9 -976 11 -1110
3z"/>
</g>
</svg>
<img id="eyes" width="80px" height="40px" src="https://png.pngitem.com/pimgs/s/35-355887_eyes-eye-black-and-white-clip-art-cartoon.png" id="eye1-boite0" class="eye1-boite0 remove" style="position: absolute; width:150px; height:auto" onclick="color1(this)">
</div>
</body>
</html>
Thanks for your help!
I have a animation made in HTML & CSS on codepen.io, here's the animation - https://codepen.io/akshzyx/pen/OJOqpav.
It works fine on codepen but when tried to used in personal website, animations stop working.
Eyes blinking is the only thing that works on website. Tried in 2-3 browsers, same everywhere.
How can I fix this?
// --- Variables --- //
$hover_top: 80px;
$hover_bottom: 30px;
html,
body {
height: 100%;
}
body {
background: #2a88c5 url(http://zmwlt.com/bucket/cz-20150128-what-color-2-bg.jpg) center center / 70%;
position: relative;
}
#robot {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
max-width: 50vw;
max-height: 80vh;
margin: 0 auto;
}
#body {
animation: hover 1.1s ease-in-out 0s infinite alternate
}
#head {
animation: hover 1.1s ease-in-out 0.05s infinite alternate
}
#arms {
animation: hover 1.1s ease-in-out 0.1s infinite alternate
}
#left_arm {
transform-origin: center right;
animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate
}
#right_arm {
transform-origin: center left;
animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate
}
#eyes ellipse {
transform-origin: center center;
animation: eyes_blink 2s ease-out 0s infinite alternate
}
#shadow {
transform-origin: center center;
animation: shadow 1.1s ease-in-out 0s infinite alternate
}
// ---- Animations
#keyframes hover {
0% {
transform: translate3d(0, $hover_top, 0)
}
100% {
transform: translate3d(0, $hover_bottom, 0)
}
}
#keyframes shadow {
0% {
transform: translate3d(0, 0, 0) scale(1.5, 1.2);
opacity: 0.4;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 0.2;
}
}
#keyframes arms_bounce_left {
0% {
transform: translate3d(0, $hover_top, 0)rotate(0deg)
}
100% {
transform: translate3d(0, $hover_bottom, 0)rotate(-10deg)
}
}
#keyframes arms_bounce_right {
0% {
transform: translate3d(0, $hover_top, 0)rotate(0deg)
}
100% {
transform: translate3d(0, $hover_bottom, 0)rotate(10deg)
}
}
#keyframes eyes_blink {
0% {
transform: scale(1, 1)
}
90% {
transform: scale(1, 1)
}
95% {
transform: scale(0.8, 0)
}
100% {
transform: scale(1, 1)
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="robot" x="0" y="0" viewBox="0 0 600 800" enable-background="new 0 0 600 800" xml:space="preserve">
<ellipse id="shadow" opacity="0.4" fill="#2C3332" cx="300" cy="703.4" rx="89" ry="30.6"/>
<g id="left_arm">
<path fill="#BABEB7" d="M184 430.9c-44-18.9-84.8 18-94.2 44.1 -10.9-3.3-22.1-1.3-28.8 5.5 -1 1-1.8 2-2.6 3.2 -1.9 2.1-4.5 5.2-6.2 8.3 -5.8 10-2.3 23.1 7.7 32.4l3.8-3.7 5.7-7.1 -3.8 3.8c-6.8-6.4-10.6-14.6-10.5-22.3 -0.1 7.7 3.7 15.9 10.5 22.2l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 5.6-3.5 13.8-3.4 21 0.8 8.7 5 13 14.3 10.5 21.7 -2.4 1.5-5.3 2.4-8.4 2.5l-5.7 7.1 0.1 6c8.5 0.8 16.5-1.6 21.7-6.8 1.2-1.2 6.3-7.3 7.2-8.8 0 0 0 0 0-0.1 0.6-0.8 1.1-1.5 1.6-2.4 5.5-9.5 2.6-22.1-6.4-31.2 13.2-12.9 33.1-25.2 48.8-9.1C156.5 477.4 189.1 433.1 184 430.9z"/>
<path fill="#DCE0DA" d="M106.3 485c-2.4-2.4-5.2-4.6-8.4-6.5 -2.6-1.5-5.3-2.7-8.1-3.5 -10.9-3.3-22.1-1.3-28.8 5.5 -1.2 1.2-2.3 2.6-3.2 4.1 -5.8 10-2.3 23.3 7.7 32.5l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 0.3-0.8 0.6-1.6 1.1-2.4 4.1-7.1 14.2-9.2 23.3-5.1 0.8 0.3 1.5 0.7 2.3 1.2 1.9 1.1 3.6 2.4 5.1 3.9 5.9 5.9 7.9 14 4.3 20.2 -1.1 2-2.7 3.5-4.6 4.7 -2.4 1.5-5.3 2.4-8.4 2.5l0.1 6c9.4 0.9 18.2-2.1 23.3-8.7 0.6-0.8 1.1-1.5 1.6-2.4C118.1 506.6 115.2 494.1 106.3 485z"/>
</g>
<g id="right_arm">
<path fill="#DCE0DA" d="M547.7 492c-1.8-3-4.3-6.1-6.2-8.3 -0.8-1.2-1.6-2.2-2.6-3.2 -6.7-6.8-17.8-8.8-28.8-5.5 -9.3-26.1-50.2-63-94.1-44.1 -5.1 2.2 27.5 46.5 28.9 45 15.6-16.1 35.6-3.8 48.8 9.1 -8.9 9.1-11.9 21.6-6.4 31.2 0.5 0.8 1 1.6 1.6 2.4 0 0 0 0 0 0.1 0.9 1.6 6 7.6 7.2 8.8 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1c-3.1-0.1-6-1-8.4-2.5 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8 1.9 5.6-0.1 12.2-4.8 17.3l3.8 3.7c6.8-6.3 10.6-14.5 10.5-22.2 0.2 7.8-3.6 16-10.5 22.3l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z"/>
<path fill="#BABEB7" d="M547.7 492c-3.1-5.4-8.8-11-8.8-11s0 0 0 0c1.2 1 2.3 2.4 3.2 3.9 5.8 10 2.3 23.1-7.7 32.4l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z"/>
<path fill="#BABEB7" d="M489 518.6C489 518.6 489 518.6 489 518.6c0.9 1.6 6 7.7 7.2 8.9 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1 -0.1 6C502.9 528.2 494.1 525.1 489 518.6z"/>
<path fill="#BABEB7" d="M534.4 493.8c-4.1-7.1-14.2-9.2-23.3-5.1 -0.8 0.3-1.5 0.7-2.3 1.2 -1.9 1.1-3.6 2.4-5.1 3.9 -5.9 5.9-7.9 14-4.3 20.2 1.1 2 2.7 3.5 4.6 4.7 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8C535.2 495.4 534.8 494.6 534.4 493.8z"/>
</g>
<g id="robot_main">
<g id="body">
<path id="SVGID_3_" fill="#BABEB7" d="M137.4 525.6c0-47.9 60.7-219.3 162.6-219.3 101.9 0 162.6 171.9 162.6 219.3 0 47.5-137.9 56.4-162.6 56.4C275.3 582.1 137.4 573.5 137.4 525.6z"/>
<path fill="#DCE0DA" d="M200.8 522.8c0.1-0.4 0.3-0.8 0.4-1.2C201 522 200.9 522.4 200.8 522.8z"/>
<path fill="#DCE0DA" d="M200.2 524.6c0.1-0.4 0.2-0.8 0.3-1.1C200.5 523.8 200.3 524.2 200.2 524.6z"/>
<path fill="#DCE0DA" d="M201.3 521.1c0.2-0.6 0.4-1.1 0.7-1.6C201.8 520 201.6 520.6 201.3 521.1z"/>
<path fill="#DCE0DA" d="M198.9 534.8c0-0.7 0-1.4 0-2C198.9 533.4 198.9 534.1 198.9 534.8z"/>
<path fill="#DCE0DA" d="M199.8 526.4c0.1-0.4 0.2-0.8 0.3-1.2C200 525.6 199.9 526 199.8 526.4z"/>
<path fill="#DCE0DA" d="M438.8 437.2c-21.1 18.1-64.2 43.3-140.1 43.3 -67.7 0-86.4 14.8-96.7 39.2 -1.9 4.5-3.1 9.7-3.1 15.1 0 13.9 7.7 29.5 29.4 40.2 0 0 0 0 0 0 -0.3 0-0.5 0-0.8 0 0.3 0.1 0.5 0.3 0.8 0.4 31.4 5.2 61.4 6.7 71.7 6.7 24.7 0 162.6-8.9 162.6-56.4C462.6 508.1 454.3 473.7 438.8 437.2z"/>
<path fill="#DCE0DA" d="M199 532.7c0-0.6 0.1-1.3 0.1-1.9C199.1 531.4 199 532.1 199 532.7z"/>
<path fill="#DCE0DA" d="M199.2 530.3c0.1-0.5 0.1-1 0.2-1.4C199.3 529.4 199.2 529.9 199.2 530.3z"/>
<path fill="#DCE0DA" d="M199.4 528.3c0.1-0.4 0.1-0.8 0.2-1.3C199.6 527.5 199.5 527.9 199.4 528.3z"/>
<g id="percent_meter">
<path fill="#EAECE8" d="M370.5 535.3c-0.1 0-0.2 0-0.4 0.1 -18 2.8-41.2 5-70 5 -44.7 0-75.9-5.2-95.4-10.1 0 0 0 0 0 0 0 0 0 0 0 0l-5.8 3c0 0 0 0 0 0 20 5.4 53.1 11.5 101.2 11.5 87.8 0 125-20 125-20l-4.5-3C420.7 521.8 405.2 529.8 370.5 535.3z"/>
<path fill="#EAECE8" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9z"/>
<path fill="#EAECE8" d="M175 524.8C175 524.8 175 524.8 175 524.8 175 524.8 175 524.8 175 524.8z"/>
<polygon fill="#BABEB7" points="420.5 503.6 416.2 505.2 418.5 513.6 420.7 521.8 425.2 524.8 "/>
<polygon fill="#8F918D" points="179.3 504 174.8 524.7 179.3 521.7 182.4 510.3 183.7 505.6 "/>
<path fill="#BABEB7" d="M175 524.8c-0.2-0.1-0.2-0.1-0.2-0.1S174.9 524.7 175 524.8z"/>
<path fill="#BABEB7" d="M175.2 524.9c1 0.5 3.9 1.9 9 3.8 6.6 2.5 14.6 4.5 14.7 4.6C184.8 529.4 177.1 525.8 175.2 524.9z"/>
<path fill="#BABEB7" d="M175.2 524.9c-0.1 0-0.1-0.1-0.2-0.1C175.1 524.8 175.2 524.9 175.2 524.9z"/>
<path fill="#BABEB7" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9c1.9 0.9 9.5 4.5 23.7 8.4 0 0 0 0 0 0l5.8-3c0 0 0 0 0 0 -0.6-0.1-1.2-0.3-1.7-0.4 -16.2-4.2-23.7-8.1-23.7-8.1l-4.5 2.9c0 0 0.1 0 0.2 0.1 0 0 0 0 0 0C175.1 524.8 175.2 524.9 175.2 524.9z"/>
<path fill="#2b8fca" d="M368.7 521.5l-0.4-4.2c-18.5 3.2-41.7 5.8-68.2 5.8 -39.1 0-71.1-5.6-91.6-10.4 -0.5 1.7-0.9 3.2-1.3 4.6 -1.3 5-1.9 8.6-2.6 13 19.5 4.9 50.7 10.1 95.4 10.1 28.8 0 52-2.1 70-5L368.7 521.5z"/>
<path fill="#2479b0" d="M203 511.3c-12.4-3.2-19.3-5.8-19.3-5.8l-1.3 4.7 -3.1 11.5c0 0 7.5 3.9 23.7 8.1 0.6 0.1 1.1 0.3 1.7 0.4 0 0 0 0 0 0 0.6-4.4 1.3-8 2.6-13 0.4-1.4 0.8-2.9 1.3-4.6C206.6 512.2 204.8 511.8 203 511.3z"/>
<path fill="#4C4C4C" d="M418.5 513.6l-2.3-8.4c0 0-17.5 6.8-47.1 12 -0.2 0-0.5 0.1-0.7 0.1l0.4 4.2 1.4 13.9c0.1 0 0.2 0 0.4-0.1 34.7-5.5 50.2-13.5 50.2-13.5L418.5 513.6z"/>
</g>
</g>
<g id="head">
<path fill="#EAECE8" d="M460.3 268.3c-3-50.9-81.4-57.8-160.3-57.8 -78.8 0-156.6 6.9-160 57.4 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3z"/>
<path fill="#9BB2B0" d="M444.4 302.4c-0.1-16.4-0.8-35.6-5.7-44 -1.3-2.3-3.6-6.2-19.4-7 -9.8-0.5-20.2-1-30.7-1.4 -33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -10.5 0.4-20.8 0.9-30.5 1.4 -15.8 0.8-17.9 4.5-19.3 7 -4.7 8.2-5.5 26.8-5.6 43 0.1 46.6 1.8 76.4 17.2 90.4 2.3 2.1 4.9 4.2 7.5 6.2 33.3 24.9 89.7 38.8 119.4 38.8 25.6 0 71.6-10.3 105.3-29 5.1-2.9 10-5.9 14.4-9.1 3-2.2 5.9-4.5 8.5-6.8 6.3-5.7 10.2-14.1 12.6-25.2 2.9-13.5 3.5-31.1 3.7-52.7 0-3.1 0-6.2 0-9.4C444.4 303.7 444.4 303 444.4 302.4z"/>
<path fill="#A4BCB9" d="M388.7 249.9c-33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -28.7 17.5-46.9 49.3-46.9 104 0 14.9 7.8 27.4 19.9 37.7 32.3 27.6 94.9 39 115.8 39 17 0 61.7-7.6 95.1-25.3 7.6-4 14.6-8.6 20.6-13.7 12-10.3 19.9-22.7 19.9-37.7C435.6 299.2 417.4 267.5 388.7 249.9z"/>
<path fill="#EAECE8" d="M428.2 391.7c-2.6 2.4-5.4 4.6-8.5 6.8 -4.4 3.2-9.3 6.3-14.4 9.1 -33.7 18.7-79.7 29-105.3 29 -29.7 0-86.1-14-119.4-38.8 -2.7-2-5.2-4-7.5-6.2 -15.4-14-17.1-43.8-17.2-90.4 0 1 0 2 0 3 0 50 3.1 81.8 19.2 96.4 0.9 0.8 1.7 1.5 2.6 2.3 32.3 27.2 91.1 41.7 122.3 41.7 28.6 0 80.5-12.2 113.8-35.1 3-2.1 5.8-4.2 8.5-6.4 1-0.8 1.9-1.6 2.9-2.5 7.9-7.2 12.7-18.6 15.6-34.2C438.3 377.5 434.5 385.9 428.2 391.7z"/>
<g id="eyes">
<ellipse fill="#2C3332" cx="231" cy="316.7" rx="6.3" ry="17"/>
<ellipse fill="#2C3332" cx="369" cy="316.7" rx="6.3" ry="17"/>
</g>
<path fill="#DCE0DA" d="M460.3 268.3c-4-25.1-14.9-33.6-40-34.9 -41-2.2-92.3-3.3-120.3-3.3 -28 0-79.1 1.2-120.2 3.3 -25 1.3-35.8 9.8-39.8 34.5 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3zM444.4 313.7c-0.1 21.7-0.8 39.2-3.7 52.7 -2.8 15.6-7.6 27-15.6 34.2 -0.9 0.8-1.9 1.7-2.9 2.5 -2.7 2.2-5.5 4.4-8.5 6.4 -33.3 23-85.2 35.1-113.8 35.1 -31.2 0-90-14.5-122.3-41.7 -0.9-0.8-1.8-1.5-2.6-2.3 -16-14.6-19.2-46.4-19.2-96.4 0-1 0-2 0-3 0.1-16.2 0.9-34.8 5.6-43 1.4-2.5 3.5-6.2 19.3-7 9.7-0.5 20.1-1 30.5-1.4 33.2-1.3 67.8-1.9 88.7-1.9 20.9 0 55.5 0.7 88.7 1.9 10.5 0.4 20.9 0.9 30.7 1.4 15.8 0.8 18.1 4.7 19.4 7 4.8 8.4 5.6 27.6 5.7 44 0 0.7 0 1.3 0 1.9C444.4 307.5 444.4 310.6 444.4 313.7z"/>
<g id="Robot_hat">
<path fill="#DCE0DA" d="M354.3 220.3c0-29.9-24.3-54.2-54.2-54.2 -29.9 0-54.2 24.3-54.2 54.2 0 4.7 24.3 4.7 54.2 4.7C330.1 225 354.3 225 354.3 220.3z"/>
<circle fill="#F0C419" cx="300.4" cy="207" r="8.1"/>
<circle fill="#E64C3C" cx="324.7" cy="206" r="8.1"/>
<circle fill="#4EBA64" cx="275.3" cy="206" r="8.1"/>
</g>
</g>
</g>
</svg>
You should use the Complied CSS to get the animations as you can't directly use the SCSS or SASS in your code as it is needed to be compiled to CSS before using.
You can you some of online tools like Json Formatter's SCSS to CSS tool or any NPM packages like node-sass, scss-compile etc.
html,
body {
height: 100%;
}
body {
background: #2a88c5 url(http://zmwlt.com/bucket/cz-20150128-what-color-2-bg.jpg) center center/70%;
position: relative;
}
#robot {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
max-width: 50vw;
max-height: 80vh;
margin: 0 auto;
}
#body {
-webkit-animation: hover 1.1s ease-in-out 0s infinite alternate;
animation: hover 1.1s ease-in-out 0s infinite alternate;
}
#head {
-webkit-animation: hover 1.1s ease-in-out 0.05s infinite alternate;
animation: hover 1.1s ease-in-out 0.05s infinite alternate;
}
#arms {
-webkit-animation: hover 1.1s ease-in-out 0.1s infinite alternate;
animation: hover 1.1s ease-in-out 0.1s infinite alternate;
}
#left_arm {
transform-origin: center right;
-webkit-animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
}
#right_arm {
transform-origin: center left;
-webkit-animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
}
#eyes ellipse {
transform-origin: center center;
-webkit-animation: eyes_blink 2s ease-out 0s infinite alternate;
animation: eyes_blink 2s ease-out 0s infinite alternate;
}
#shadow {
transform-origin: center center;
-webkit-animation: shadow 1.1s ease-in-out 0s infinite alternate;
animation: shadow 1.1s ease-in-out 0s infinite alternate;
}
#-webkit-keyframes hover {
0% {
transform: translate3d(0, 80px, 0);
}
100% {
transform: translate3d(0, 30px, 0);
}
}
#keyframes hover {
0% {
transform: translate3d(0, 80px, 0);
}
100% {
transform: translate3d(0, 30px, 0);
}
}
#-webkit-keyframes shadow {
0% {
transform: translate3d(0, 0, 0) scale(1.5, 1.2);
opacity: 0.4;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 0.2;
}
}
#keyframes shadow {
0% {
transform: translate3d(0, 0, 0) scale(1.5, 1.2);
opacity: 0.4;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 0.2;
}
}
#-webkit-keyframes arms_bounce_left {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(-10deg);
}
}
#keyframes arms_bounce_left {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(-10deg);
}
}
#-webkit-keyframes arms_bounce_right {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(10deg);
}
}
#keyframes arms_bounce_right {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(10deg);
}
}
#-webkit-keyframes eyes_blink {
0% {
transform: scale(1, 1);
}
90% {
transform: scale(1, 1);
}
95% {
transform: scale(0.8, 0);
}
100% {
transform: scale(1, 1);
}
}
#keyframes eyes_blink {
0% {
transform: scale(1, 1);
}
90% {
transform: scale(1, 1);
}
95% {
transform: scale(0.8, 0);
}
100% {
transform: scale(1, 1);
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="robot" x="0" y="0" viewBox="0 0 600 800" enable-background="new 0 0 600 800" xml:space="preserve">
<ellipse id="shadow" opacity="0.4" fill="#2C3332" cx="300" cy="703.4" rx="89" ry="30.6" />
<g id="left_arm">
<path fill="#BABEB7" d="M184 430.9c-44-18.9-84.8 18-94.2 44.1 -10.9-3.3-22.1-1.3-28.8 5.5 -1 1-1.8 2-2.6 3.2 -1.9 2.1-4.5 5.2-6.2 8.3 -5.8 10-2.3 23.1 7.7 32.4l3.8-3.7 5.7-7.1 -3.8 3.8c-6.8-6.4-10.6-14.6-10.5-22.3 -0.1 7.7 3.7 15.9 10.5 22.2l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 5.6-3.5 13.8-3.4 21 0.8 8.7 5 13 14.3 10.5 21.7 -2.4 1.5-5.3 2.4-8.4 2.5l-5.7 7.1 0.1 6c8.5 0.8 16.5-1.6 21.7-6.8 1.2-1.2 6.3-7.3 7.2-8.8 0 0 0 0 0-0.1 0.6-0.8 1.1-1.5 1.6-2.4 5.5-9.5 2.6-22.1-6.4-31.2 13.2-12.9 33.1-25.2 48.8-9.1C156.5 477.4 189.1 433.1 184 430.9z" />
<path fill="#DCE0DA" d="M106.3 485c-2.4-2.4-5.2-4.6-8.4-6.5 -2.6-1.5-5.3-2.7-8.1-3.5 -10.9-3.3-22.1-1.3-28.8 5.5 -1.2 1.2-2.3 2.6-3.2 4.1 -5.8 10-2.3 23.3 7.7 32.5l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 0.3-0.8 0.6-1.6 1.1-2.4 4.1-7.1 14.2-9.2 23.3-5.1 0.8 0.3 1.5 0.7 2.3 1.2 1.9 1.1 3.6 2.4 5.1 3.9 5.9 5.9 7.9 14 4.3 20.2 -1.1 2-2.7 3.5-4.6 4.7 -2.4 1.5-5.3 2.4-8.4 2.5l0.1 6c9.4 0.9 18.2-2.1 23.3-8.7 0.6-0.8 1.1-1.5 1.6-2.4C118.1 506.6 115.2 494.1 106.3 485z" />
</g>
<g id="right_arm">
<path fill="#DCE0DA" d="M547.7 492c-1.8-3-4.3-6.1-6.2-8.3 -0.8-1.2-1.6-2.2-2.6-3.2 -6.7-6.8-17.8-8.8-28.8-5.5 -9.3-26.1-50.2-63-94.1-44.1 -5.1 2.2 27.5 46.5 28.9 45 15.6-16.1 35.6-3.8 48.8 9.1 -8.9 9.1-11.9 21.6-6.4 31.2 0.5 0.8 1 1.6 1.6 2.4 0 0 0 0 0 0.1 0.9 1.6 6 7.6 7.2 8.8 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1c-3.1-0.1-6-1-8.4-2.5 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8 1.9 5.6-0.1 12.2-4.8 17.3l3.8 3.7c6.8-6.3 10.6-14.5 10.5-22.2 0.2 7.8-3.6 16-10.5 22.3l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z" />
<path fill="#BABEB7" d="M547.7 492c-3.1-5.4-8.8-11-8.8-11s0 0 0 0c1.2 1 2.3 2.4 3.2 3.9 5.8 10 2.3 23.1-7.7 32.4l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z" />
<path fill="#BABEB7" d="M489 518.6C489 518.6 489 518.6 489 518.6c0.9 1.6 6 7.7 7.2 8.9 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1 -0.1 6C502.9 528.2 494.1 525.1 489 518.6z" />
<path fill="#BABEB7" d="M534.4 493.8c-4.1-7.1-14.2-9.2-23.3-5.1 -0.8 0.3-1.5 0.7-2.3 1.2 -1.9 1.1-3.6 2.4-5.1 3.9 -5.9 5.9-7.9 14-4.3 20.2 1.1 2 2.7 3.5 4.6 4.7 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8C535.2 495.4 534.8 494.6 534.4 493.8z" />
</g>
<g id="robot_main">
<g id="body">
<path id="SVGID_3_" fill="#BABEB7" d="M137.4 525.6c0-47.9 60.7-219.3 162.6-219.3 101.9 0 162.6 171.9 162.6 219.3 0 47.5-137.9 56.4-162.6 56.4C275.3 582.1 137.4 573.5 137.4 525.6z" />
<path fill="#DCE0DA" d="M200.8 522.8c0.1-0.4 0.3-0.8 0.4-1.2C201 522 200.9 522.4 200.8 522.8z" />
<path fill="#DCE0DA" d="M200.2 524.6c0.1-0.4 0.2-0.8 0.3-1.1C200.5 523.8 200.3 524.2 200.2 524.6z" />
<path fill="#DCE0DA" d="M201.3 521.1c0.2-0.6 0.4-1.1 0.7-1.6C201.8 520 201.6 520.6 201.3 521.1z" />
<path fill="#DCE0DA" d="M198.9 534.8c0-0.7 0-1.4 0-2C198.9 533.4 198.9 534.1 198.9 534.8z" />
<path fill="#DCE0DA" d="M199.8 526.4c0.1-0.4 0.2-0.8 0.3-1.2C200 525.6 199.9 526 199.8 526.4z" />
<path fill="#DCE0DA" d="M438.8 437.2c-21.1 18.1-64.2 43.3-140.1 43.3 -67.7 0-86.4 14.8-96.7 39.2 -1.9 4.5-3.1 9.7-3.1 15.1 0 13.9 7.7 29.5 29.4 40.2 0 0 0 0 0 0 -0.3 0-0.5 0-0.8 0 0.3 0.1 0.5 0.3 0.8 0.4 31.4 5.2 61.4 6.7 71.7 6.7 24.7 0 162.6-8.9 162.6-56.4C462.6 508.1 454.3 473.7 438.8 437.2z" />
<path fill="#DCE0DA" d="M199 532.7c0-0.6 0.1-1.3 0.1-1.9C199.1 531.4 199 532.1 199 532.7z" />
<path fill="#DCE0DA" d="M199.2 530.3c0.1-0.5 0.1-1 0.2-1.4C199.3 529.4 199.2 529.9 199.2 530.3z" />
<path fill="#DCE0DA" d="M199.4 528.3c0.1-0.4 0.1-0.8 0.2-1.3C199.6 527.5 199.5 527.9 199.4 528.3z" />
<g id="percent_meter">
<path fill="#EAECE8" d="M370.5 535.3c-0.1 0-0.2 0-0.4 0.1 -18 2.8-41.2 5-70 5 -44.7 0-75.9-5.2-95.4-10.1 0 0 0 0 0 0 0 0 0 0 0 0l-5.8 3c0 0 0 0 0 0 20 5.4 53.1 11.5 101.2 11.5 87.8 0 125-20 125-20l-4.5-3C420.7 521.8 405.2 529.8 370.5 535.3z" />
<path fill="#EAECE8" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9z" />
<path fill="#EAECE8" d="M175 524.8C175 524.8 175 524.8 175 524.8 175 524.8 175 524.8 175 524.8z" />
<polygon fill="#BABEB7" points="420.5 503.6 416.2 505.2 418.5 513.6 420.7 521.8 425.2 524.8 " />
<polygon fill="#8F918D" points="179.3 504 174.8 524.7 179.3 521.7 182.4 510.3 183.7 505.6 " />
<path fill="#BABEB7" d="M175 524.8c-0.2-0.1-0.2-0.1-0.2-0.1S174.9 524.7 175 524.8z" />
<path fill="#BABEB7" d="M175.2 524.9c1 0.5 3.9 1.9 9 3.8 6.6 2.5 14.6 4.5 14.7 4.6C184.8 529.4 177.1 525.8 175.2 524.9z" />
<path fill="#BABEB7" d="M175.2 524.9c-0.1 0-0.1-0.1-0.2-0.1C175.1 524.8 175.2 524.9 175.2 524.9z" />
<path fill="#BABEB7" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9c1.9 0.9 9.5 4.5 23.7 8.4 0 0 0 0 0 0l5.8-3c0 0 0 0 0 0 -0.6-0.1-1.2-0.3-1.7-0.4 -16.2-4.2-23.7-8.1-23.7-8.1l-4.5 2.9c0 0 0.1 0 0.2 0.1 0 0 0 0 0 0C175.1 524.8 175.2 524.9 175.2 524.9z" />
<path fill="#2b8fca" d="M368.7 521.5l-0.4-4.2c-18.5 3.2-41.7 5.8-68.2 5.8 -39.1 0-71.1-5.6-91.6-10.4 -0.5 1.7-0.9 3.2-1.3 4.6 -1.3 5-1.9 8.6-2.6 13 19.5 4.9 50.7 10.1 95.4 10.1 28.8 0 52-2.1 70-5L368.7 521.5z" />
<path fill="#2479b0" d="M203 511.3c-12.4-3.2-19.3-5.8-19.3-5.8l-1.3 4.7 -3.1 11.5c0 0 7.5 3.9 23.7 8.1 0.6 0.1 1.1 0.3 1.7 0.4 0 0 0 0 0 0 0.6-4.4 1.3-8 2.6-13 0.4-1.4 0.8-2.9 1.3-4.6C206.6 512.2 204.8 511.8 203 511.3z" />
<path fill="#4C4C4C" d="M418.5 513.6l-2.3-8.4c0 0-17.5 6.8-47.1 12 -0.2 0-0.5 0.1-0.7 0.1l0.4 4.2 1.4 13.9c0.1 0 0.2 0 0.4-0.1 34.7-5.5 50.2-13.5 50.2-13.5L418.5 513.6z" />
</g>
</g>
<g id="head">
<path fill="#EAECE8" d="M460.3 268.3c-3-50.9-81.4-57.8-160.3-57.8 -78.8 0-156.6 6.9-160 57.4 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3z" />
<path fill="#9BB2B0" d="M444.4 302.4c-0.1-16.4-0.8-35.6-5.7-44 -1.3-2.3-3.6-6.2-19.4-7 -9.8-0.5-20.2-1-30.7-1.4 -33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -10.5 0.4-20.8 0.9-30.5 1.4 -15.8 0.8-17.9 4.5-19.3 7 -4.7 8.2-5.5 26.8-5.6 43 0.1 46.6 1.8 76.4 17.2 90.4 2.3 2.1 4.9 4.2 7.5 6.2 33.3 24.9 89.7 38.8 119.4 38.8 25.6 0 71.6-10.3 105.3-29 5.1-2.9 10-5.9 14.4-9.1 3-2.2 5.9-4.5 8.5-6.8 6.3-5.7 10.2-14.1 12.6-25.2 2.9-13.5 3.5-31.1 3.7-52.7 0-3.1 0-6.2 0-9.4C444.4 303.7 444.4 303 444.4 302.4z" />
<path fill="#A4BCB9" d="M388.7 249.9c-33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -28.7 17.5-46.9 49.3-46.9 104 0 14.9 7.8 27.4 19.9 37.7 32.3 27.6 94.9 39 115.8 39 17 0 61.7-7.6 95.1-25.3 7.6-4 14.6-8.6 20.6-13.7 12-10.3 19.9-22.7 19.9-37.7C435.6 299.2 417.4 267.5 388.7 249.9z" />
<path fill="#EAECE8" d="M428.2 391.7c-2.6 2.4-5.4 4.6-8.5 6.8 -4.4 3.2-9.3 6.3-14.4 9.1 -33.7 18.7-79.7 29-105.3 29 -29.7 0-86.1-14-119.4-38.8 -2.7-2-5.2-4-7.5-6.2 -15.4-14-17.1-43.8-17.2-90.4 0 1 0 2 0 3 0 50 3.1 81.8 19.2 96.4 0.9 0.8 1.7 1.5 2.6 2.3 32.3 27.2 91.1 41.7 122.3 41.7 28.6 0 80.5-12.2 113.8-35.1 3-2.1 5.8-4.2 8.5-6.4 1-0.8 1.9-1.6 2.9-2.5 7.9-7.2 12.7-18.6 15.6-34.2C438.3 377.5 434.5 385.9 428.2 391.7z" />
<g id="eyes">
<ellipse fill="#2C3332" cx="231" cy="316.7" rx="6.3" ry="17" />
<ellipse fill="#2C3332" cx="369" cy="316.7" rx="6.3" ry="17" />
</g>
<path fill="#DCE0DA" d="M460.3 268.3c-4-25.1-14.9-33.6-40-34.9 -41-2.2-92.3-3.3-120.3-3.3 -28 0-79.1 1.2-120.2 3.3 -25 1.3-35.8 9.8-39.8 34.5 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3zM444.4 313.7c-0.1 21.7-0.8 39.2-3.7 52.7 -2.8 15.6-7.6 27-15.6 34.2 -0.9 0.8-1.9 1.7-2.9 2.5 -2.7 2.2-5.5 4.4-8.5 6.4 -33.3 23-85.2 35.1-113.8 35.1 -31.2 0-90-14.5-122.3-41.7 -0.9-0.8-1.8-1.5-2.6-2.3 -16-14.6-19.2-46.4-19.2-96.4 0-1 0-2 0-3 0.1-16.2 0.9-34.8 5.6-43 1.4-2.5 3.5-6.2 19.3-7 9.7-0.5 20.1-1 30.5-1.4 33.2-1.3 67.8-1.9 88.7-1.9 20.9 0 55.5 0.7 88.7 1.9 10.5 0.4 20.9 0.9 30.7 1.4 15.8 0.8 18.1 4.7 19.4 7 4.8 8.4 5.6 27.6 5.7 44 0 0.7 0 1.3 0 1.9C444.4 307.5 444.4 310.6 444.4 313.7z" />
<g id="Robot_hat">
<path fill="#DCE0DA" d="M354.3 220.3c0-29.9-24.3-54.2-54.2-54.2 -29.9 0-54.2 24.3-54.2 54.2 0 4.7 24.3 4.7 54.2 4.7C330.1 225 354.3 225 354.3 220.3z" />
<circle fill="#F0C419" cx="300.4" cy="207" r="8.1" />
<circle fill="#E64C3C" cx="324.7" cy="206" r="8.1" />
<circle fill="#4EBA64" cx="275.3" cy="206" r="8.1" />
</g>
</g>
</g>
</svg>
JsFiddle : https://jsfiddle.net/sh9wqay5/
Export your code pen
Extract the zip
In the /dist directory
The index.html will work
The problem is you have to use compiled CSS code,and not the scss
If you use VSCode you can install "Live SASS Compiler"
see this other SO Question and its answers
RUN THE WORKING SNIPPET BELOW
html, body {
height: 100%;
}
body {
background: #2a88c5 url(http://zmwlt.com/bucket/cz-20150128-what-color-2-bg.jpg) center center/70%;
position: relative;
}
#robot {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
max-width: 50vw;
max-height: 80vh;
margin: 0 auto;
}
#body {
-webkit-animation: hover 1.1s ease-in-out 0s infinite alternate;
animation: hover 1.1s ease-in-out 0s infinite alternate;
}
#head {
-webkit-animation: hover 1.1s ease-in-out 0.05s infinite alternate;
animation: hover 1.1s ease-in-out 0.05s infinite alternate;
}
#arms {
-webkit-animation: hover 1.1s ease-in-out 0.1s infinite alternate;
animation: hover 1.1s ease-in-out 0.1s infinite alternate;
}
#left_arm {
transform-origin: center right;
-webkit-animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
}
#right_arm {
transform-origin: center left;
-webkit-animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
}
#eyes ellipse {
transform-origin: center center;
-webkit-animation: eyes_blink 2s ease-out 0s infinite alternate;
animation: eyes_blink 2s ease-out 0s infinite alternate;
}
#shadow {
transform-origin: center center;
-webkit-animation: shadow 1.1s ease-in-out 0s infinite alternate;
animation: shadow 1.1s ease-in-out 0s infinite alternate;
}
#-webkit-keyframes hover {
0% {
transform: translate3d(0, 80px, 0);
}
100% {
transform: translate3d(0, 30px, 0);
}
}
#keyframes hover {
0% {
transform: translate3d(0, 80px, 0);
}
100% {
transform: translate3d(0, 30px, 0);
}
}
#-webkit-keyframes shadow {
0% {
transform: translate3d(0, 0, 0) scale(1.5, 1.2);
opacity: 0.4;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 0.2;
}
}
#keyframes shadow {
0% {
transform: translate3d(0, 0, 0) scale(1.5, 1.2);
opacity: 0.4;
}
100% {
transform: translate3d(0, 0, 0) scale(1, 1);
opacity: 0.2;
}
}
#-webkit-keyframes arms_bounce_left {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(-10deg);
}
}
#keyframes arms_bounce_left {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(-10deg);
}
}
#-webkit-keyframes arms_bounce_right {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(10deg);
}
}
#keyframes arms_bounce_right {
0% {
transform: translate3d(0, 80px, 0) rotate(0deg);
}
100% {
transform: translate3d(0, 30px, 0) rotate(10deg);
}
}
#-webkit-keyframes eyes_blink {
0% {
transform: scale(1, 1);
}
90% {
transform: scale(1, 1);
}
95% {
transform: scale(0.8, 0);
}
100% {
transform: scale(1, 1);
}
}
#keyframes eyes_blink {
0% {
transform: scale(1, 1);
}
90% {
transform: scale(1, 1);
}
95% {
transform: scale(0.8, 0);
}
100% {
transform: scale(1, 1);
}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="robot" x="0" y="0" viewBox="0 0 600 800" enable-background="new 0 0 600 800" xml:space="preserve">
<ellipse id="shadow" opacity="0.4" fill="#2C3332" cx="300" cy="703.4" rx="89" ry="30.6"/>
<g id="left_arm">
<path fill="#BABEB7" d="M184 430.9c-44-18.9-84.8 18-94.2 44.1 -10.9-3.3-22.1-1.3-28.8 5.5 -1 1-1.8 2-2.6 3.2 -1.9 2.1-4.5 5.2-6.2 8.3 -5.8 10-2.3 23.1 7.7 32.4l3.8-3.7 5.7-7.1 -3.8 3.8c-6.8-6.4-10.6-14.6-10.5-22.3 -0.1 7.7 3.7 15.9 10.5 22.2l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 5.6-3.5 13.8-3.4 21 0.8 8.7 5 13 14.3 10.5 21.7 -2.4 1.5-5.3 2.4-8.4 2.5l-5.7 7.1 0.1 6c8.5 0.8 16.5-1.6 21.7-6.8 1.2-1.2 6.3-7.3 7.2-8.8 0 0 0 0 0-0.1 0.6-0.8 1.1-1.5 1.6-2.4 5.5-9.5 2.6-22.1-6.4-31.2 13.2-12.9 33.1-25.2 48.8-9.1C156.5 477.4 189.1 433.1 184 430.9z"/>
<path fill="#DCE0DA" d="M106.3 485c-2.4-2.4-5.2-4.6-8.4-6.5 -2.6-1.5-5.3-2.7-8.1-3.5 -10.9-3.3-22.1-1.3-28.8 5.5 -1.2 1.2-2.3 2.6-3.2 4.1 -5.8 10-2.3 23.3 7.7 32.5l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 0.3-0.8 0.6-1.6 1.1-2.4 4.1-7.1 14.2-9.2 23.3-5.1 0.8 0.3 1.5 0.7 2.3 1.2 1.9 1.1 3.6 2.4 5.1 3.9 5.9 5.9 7.9 14 4.3 20.2 -1.1 2-2.7 3.5-4.6 4.7 -2.4 1.5-5.3 2.4-8.4 2.5l0.1 6c9.4 0.9 18.2-2.1 23.3-8.7 0.6-0.8 1.1-1.5 1.6-2.4C118.1 506.6 115.2 494.1 106.3 485z"/>
</g>
<g id="right_arm">
<path fill="#DCE0DA" d="M547.7 492c-1.8-3-4.3-6.1-6.2-8.3 -0.8-1.2-1.6-2.2-2.6-3.2 -6.7-6.8-17.8-8.8-28.8-5.5 -9.3-26.1-50.2-63-94.1-44.1 -5.1 2.2 27.5 46.5 28.9 45 15.6-16.1 35.6-3.8 48.8 9.1 -8.9 9.1-11.9 21.6-6.4 31.2 0.5 0.8 1 1.6 1.6 2.4 0 0 0 0 0 0.1 0.9 1.6 6 7.6 7.2 8.8 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1c-3.1-0.1-6-1-8.4-2.5 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8 1.9 5.6-0.1 12.2-4.8 17.3l3.8 3.7c6.8-6.3 10.6-14.5 10.5-22.2 0.2 7.8-3.6 16-10.5 22.3l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z"/>
<path fill="#BABEB7" d="M547.7 492c-3.1-5.4-8.8-11-8.8-11s0 0 0 0c1.2 1 2.3 2.4 3.2 3.9 5.8 10 2.3 23.1-7.7 32.4l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z"/>
<path fill="#BABEB7" d="M489 518.6C489 518.6 489 518.6 489 518.6c0.9 1.6 6 7.7 7.2 8.9 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1 -0.1 6C502.9 528.2 494.1 525.1 489 518.6z"/>
<path fill="#BABEB7" d="M534.4 493.8c-4.1-7.1-14.2-9.2-23.3-5.1 -0.8 0.3-1.5 0.7-2.3 1.2 -1.9 1.1-3.6 2.4-5.1 3.9 -5.9 5.9-7.9 14-4.3 20.2 1.1 2 2.7 3.5 4.6 4.7 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8C535.2 495.4 534.8 494.6 534.4 493.8z"/>
</g>
<g id="robot_main">
<g id="body">
<path id="SVGID_3_" fill="#BABEB7" d="M137.4 525.6c0-47.9 60.7-219.3 162.6-219.3 101.9 0 162.6 171.9 162.6 219.3 0 47.5-137.9 56.4-162.6 56.4C275.3 582.1 137.4 573.5 137.4 525.6z"/>
<path fill="#DCE0DA" d="M200.8 522.8c0.1-0.4 0.3-0.8 0.4-1.2C201 522 200.9 522.4 200.8 522.8z"/>
<path fill="#DCE0DA" d="M200.2 524.6c0.1-0.4 0.2-0.8 0.3-1.1C200.5 523.8 200.3 524.2 200.2 524.6z"/>
<path fill="#DCE0DA" d="M201.3 521.1c0.2-0.6 0.4-1.1 0.7-1.6C201.8 520 201.6 520.6 201.3 521.1z"/>
<path fill="#DCE0DA" d="M198.9 534.8c0-0.7 0-1.4 0-2C198.9 533.4 198.9 534.1 198.9 534.8z"/>
<path fill="#DCE0DA" d="M199.8 526.4c0.1-0.4 0.2-0.8 0.3-1.2C200 525.6 199.9 526 199.8 526.4z"/>
<path fill="#DCE0DA" d="M438.8 437.2c-21.1 18.1-64.2 43.3-140.1 43.3 -67.7 0-86.4 14.8-96.7 39.2 -1.9 4.5-3.1 9.7-3.1 15.1 0 13.9 7.7 29.5 29.4 40.2 0 0 0 0 0 0 -0.3 0-0.5 0-0.8 0 0.3 0.1 0.5 0.3 0.8 0.4 31.4 5.2 61.4 6.7 71.7 6.7 24.7 0 162.6-8.9 162.6-56.4C462.6 508.1 454.3 473.7 438.8 437.2z"/>
<path fill="#DCE0DA" d="M199 532.7c0-0.6 0.1-1.3 0.1-1.9C199.1 531.4 199 532.1 199 532.7z"/>
<path fill="#DCE0DA" d="M199.2 530.3c0.1-0.5 0.1-1 0.2-1.4C199.3 529.4 199.2 529.9 199.2 530.3z"/>
<path fill="#DCE0DA" d="M199.4 528.3c0.1-0.4 0.1-0.8 0.2-1.3C199.6 527.5 199.5 527.9 199.4 528.3z"/>
<g id="percent_meter">
<path fill="#EAECE8" d="M370.5 535.3c-0.1 0-0.2 0-0.4 0.1 -18 2.8-41.2 5-70 5 -44.7 0-75.9-5.2-95.4-10.1 0 0 0 0 0 0 0 0 0 0 0 0l-5.8 3c0 0 0 0 0 0 20 5.4 53.1 11.5 101.2 11.5 87.8 0 125-20 125-20l-4.5-3C420.7 521.8 405.2 529.8 370.5 535.3z"/>
<path fill="#EAECE8" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9z"/>
<path fill="#EAECE8" d="M175 524.8C175 524.8 175 524.8 175 524.8 175 524.8 175 524.8 175 524.8z"/>
<polygon fill="#BABEB7" points="420.5 503.6 416.2 505.2 418.5 513.6 420.7 521.8 425.2 524.8 "/>
<polygon fill="#8F918D" points="179.3 504 174.8 524.7 179.3 521.7 182.4 510.3 183.7 505.6 "/>
<path fill="#BABEB7" d="M175 524.8c-0.2-0.1-0.2-0.1-0.2-0.1S174.9 524.7 175 524.8z"/>
<path fill="#BABEB7" d="M175.2 524.9c1 0.5 3.9 1.9 9 3.8 6.6 2.5 14.6 4.5 14.7 4.6C184.8 529.4 177.1 525.8 175.2 524.9z"/>
<path fill="#BABEB7" d="M175.2 524.9c-0.1 0-0.1-0.1-0.2-0.1C175.1 524.8 175.2 524.9 175.2 524.9z"/>
<path fill="#BABEB7" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9c1.9 0.9 9.5 4.5 23.7 8.4 0 0 0 0 0 0l5.8-3c0 0 0 0 0 0 -0.6-0.1-1.2-0.3-1.7-0.4 -16.2-4.2-23.7-8.1-23.7-8.1l-4.5 2.9c0 0 0.1 0 0.2 0.1 0 0 0 0 0 0C175.1 524.8 175.2 524.9 175.2 524.9z"/>
<path fill="#2b8fca" d="M368.7 521.5l-0.4-4.2c-18.5 3.2-41.7 5.8-68.2 5.8 -39.1 0-71.1-5.6-91.6-10.4 -0.5 1.7-0.9 3.2-1.3 4.6 -1.3 5-1.9 8.6-2.6 13 19.5 4.9 50.7 10.1 95.4 10.1 28.8 0 52-2.1 70-5L368.7 521.5z"/>
<path fill="#2479b0" d="M203 511.3c-12.4-3.2-19.3-5.8-19.3-5.8l-1.3 4.7 -3.1 11.5c0 0 7.5 3.9 23.7 8.1 0.6 0.1 1.1 0.3 1.7 0.4 0 0 0 0 0 0 0.6-4.4 1.3-8 2.6-13 0.4-1.4 0.8-2.9 1.3-4.6C206.6 512.2 204.8 511.8 203 511.3z"/>
<path fill="#4C4C4C" d="M418.5 513.6l-2.3-8.4c0 0-17.5 6.8-47.1 12 -0.2 0-0.5 0.1-0.7 0.1l0.4 4.2 1.4 13.9c0.1 0 0.2 0 0.4-0.1 34.7-5.5 50.2-13.5 50.2-13.5L418.5 513.6z"/>
</g>
</g>
<g id="head">
<path fill="#EAECE8" d="M460.3 268.3c-3-50.9-81.4-57.8-160.3-57.8 -78.8 0-156.6 6.9-160 57.4 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3z"/>
<path fill="#9BB2B0" d="M444.4 302.4c-0.1-16.4-0.8-35.6-5.7-44 -1.3-2.3-3.6-6.2-19.4-7 -9.8-0.5-20.2-1-30.7-1.4 -33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -10.5 0.4-20.8 0.9-30.5 1.4 -15.8 0.8-17.9 4.5-19.3 7 -4.7 8.2-5.5 26.8-5.6 43 0.1 46.6 1.8 76.4 17.2 90.4 2.3 2.1 4.9 4.2 7.5 6.2 33.3 24.9 89.7 38.8 119.4 38.8 25.6 0 71.6-10.3 105.3-29 5.1-2.9 10-5.9 14.4-9.1 3-2.2 5.9-4.5 8.5-6.8 6.3-5.7 10.2-14.1 12.6-25.2 2.9-13.5 3.5-31.1 3.7-52.7 0-3.1 0-6.2 0-9.4C444.4 303.7 444.4 303 444.4 302.4z"/>
<path fill="#A4BCB9" d="M388.7 249.9c-33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -28.7 17.5-46.9 49.3-46.9 104 0 14.9 7.8 27.4 19.9 37.7 32.3 27.6 94.9 39 115.8 39 17 0 61.7-7.6 95.1-25.3 7.6-4 14.6-8.6 20.6-13.7 12-10.3 19.9-22.7 19.9-37.7C435.6 299.2 417.4 267.5 388.7 249.9z"/>
<path fill="#EAECE8" d="M428.2 391.7c-2.6 2.4-5.4 4.6-8.5 6.8 -4.4 3.2-9.3 6.3-14.4 9.1 -33.7 18.7-79.7 29-105.3 29 -29.7 0-86.1-14-119.4-38.8 -2.7-2-5.2-4-7.5-6.2 -15.4-14-17.1-43.8-17.2-90.4 0 1 0 2 0 3 0 50 3.1 81.8 19.2 96.4 0.9 0.8 1.7 1.5 2.6 2.3 32.3 27.2 91.1 41.7 122.3 41.7 28.6 0 80.5-12.2 113.8-35.1 3-2.1 5.8-4.2 8.5-6.4 1-0.8 1.9-1.6 2.9-2.5 7.9-7.2 12.7-18.6 15.6-34.2C438.3 377.5 434.5 385.9 428.2 391.7z"/>
<g id="eyes">
<ellipse fill="#2C3332" cx="231" cy="316.7" rx="6.3" ry="17"/>
<ellipse fill="#2C3332" cx="369" cy="316.7" rx="6.3" ry="17"/>
</g>
<path fill="#DCE0DA" d="M460.3 268.3c-4-25.1-14.9-33.6-40-34.9 -41-2.2-92.3-3.3-120.3-3.3 -28 0-79.1 1.2-120.2 3.3 -25 1.3-35.8 9.8-39.8 34.5 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3zM444.4 313.7c-0.1 21.7-0.8 39.2-3.7 52.7 -2.8 15.6-7.6 27-15.6 34.2 -0.9 0.8-1.9 1.7-2.9 2.5 -2.7 2.2-5.5 4.4-8.5 6.4 -33.3 23-85.2 35.1-113.8 35.1 -31.2 0-90-14.5-122.3-41.7 -0.9-0.8-1.8-1.5-2.6-2.3 -16-14.6-19.2-46.4-19.2-96.4 0-1 0-2 0-3 0.1-16.2 0.9-34.8 5.6-43 1.4-2.5 3.5-6.2 19.3-7 9.7-0.5 20.1-1 30.5-1.4 33.2-1.3 67.8-1.9 88.7-1.9 20.9 0 55.5 0.7 88.7 1.9 10.5 0.4 20.9 0.9 30.7 1.4 15.8 0.8 18.1 4.7 19.4 7 4.8 8.4 5.6 27.6 5.7 44 0 0.7 0 1.3 0 1.9C444.4 307.5 444.4 310.6 444.4 313.7z"/>
<g id="Robot_hat">
<path fill="#DCE0DA" d="M354.3 220.3c0-29.9-24.3-54.2-54.2-54.2 -29.9 0-54.2 24.3-54.2 54.2 0 4.7 24.3 4.7 54.2 4.7C330.1 225 354.3 225 354.3 220.3z"/>
<circle fill="#F0C419" cx="300.4" cy="207" r="8.1"/>
<circle fill="#E64C3C" cx="324.7" cy="206" r="8.1"/>
<circle fill="#4EBA64" cx="275.3" cy="206" r="8.1"/>
</g>
</g>
</g>
</svg>
I have a navigation bar with 2 icons evenly distributed.
I am wanting to scale them horizontally so they are centered horizontally in relation to the navigation bar.
I think the viewbox of the svg's are cause it to not look visually centred.
I've tried playing with the size without much luck.
I did try justifying content which didn't work.
Then I tried adding padding to the icons to allow for them to move.
Code:
.bar {
display: flex;
justify-content: center;
}
/* Style the navigation menu */
.navbar {
width: 90%;
background: #3CE18F;
/* Forces the icons to not go outside the scrollbar. If we left it to invisble it would display
them outside. */
overflow: auto;
/* Curves the corners of the Nav Bar. */
border-radius: 10px 10px 30px 30px;
position: fixed;
bottom: 3%;
display: block;
margin:auto;
}
/* Navigation links */
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 48.6%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
text-align: center; /* If you want the text to be centered */
}
/* Add a background color on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Style the current/active link */
.navbar a.active {
background-color: #4CAF50;
}
.microphoneIcon {
/* position: absolute;
left: 65.36%;
right: 26.29%;
top: 54.22%;
bottom: 0.46%;*/
fill: #FFFFFF;
stroke: #FFFFFF;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
/* Similar syntax to box-shadow */
/*background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
}
.cameraIcon {
fill: #FFFFFF;
stroke: #FFFFFF;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#009578">
<title>PWA</title>
<link rel="stylesheet" href="src/navigationBar.css">
<!-- Javascript Docs -->
<script type="text/javascript" src="src/index.js"></script>
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="images/logo192.png">
</head>
<body>
<!-- Class for the Bottom Navigation Bar -->
<div class="bar">
<nav class="navbar fixed-bottom navbar-light bg-light nav-fill">
<a href="#">
<svg class='microphoneIcon' id='microphoneIcon' width="42" height="46" viewBox="0 0 42 46" stroke="grey">
<path d='M21 23.7571C25.0314 23.7571 28.2857 21.1043 28.2857 17.8179V5.93928C28.2857 2.65288 25.0314 0 21 0C16.9686 0 13.7143 2.65288 13.7143 5.93928V17.8179C13.7143 21.1043 16.9686 23.7571 21 23.7571ZM18.5714 5.93929C18.5714 4.85043 19.6643 3.95953 21 3.95953C22.3357 3.95953 23.4286 4.85043 23.4286 5.93929V17.8179C23.4286 18.9067 22.3357 19.7976 21 19.7976C19.6643 19.7976 18.5714 18.9067 18.5714 17.8179V5.93929ZM21 27.7167C27.7029 27.7167 33.1429 23.282 33.1429 17.8179H38C38 24.8064 31.6614 30.5477 23.4286 31.5178V37.6155H18.5714V31.5178C10.3386 30.5477 4 24.8064 4 17.8179H8.85714C8.85714 23.282 14.2971 27.7167 21 27.7167Z'/>
</svg>
</a>
<a href="#">
<svg class ='cameraIcon' id='cameraIcon' xmlns="http://www.w3.org/2000/svg" width="50" height="46" viewBox="0 0 50 46">
<path d="M 45 36 a 3 3 90 0 1 -3 3 H 6 a 3 3 90 0 1 -3 -3 V 18 a 3 3 90 0 1 3 -3 h 3.516 a 9 9 90 0 0 6.36 -2.637 l 2.49 -2.484 A 3 3 90 0 1 20.481 9 h 7.032 a 3 3 90 0 1 2.121 0.879 l 2.484 2.484 A 9 9 90 0 0 38.484 15 H 42 a 3 3 90 0 1 3 3 v 18 z M 6 12 a 6 6 90 0 0 -6 6 v 18 a 6 6 90 0 0 6 6 h 36 a 6 6 90 0 0 6 -6 V 18 a 6 6 90 0 0 -6 -6 h -3.516 a 6 6 90 0 1 -4.242 -1.758 l -2.484 -2.484 A 6 6 90 0 0 27.516 6 H 20.484 a 6 6 90 0 0 -4.242 1.758 l -2.484 2.484 A 6 6 90 0 1 9.516 12 H 6 z M 24 33 a 7.5 7.5 90 1 1 0 -15 a 7.5 7.5 90 0 1 0 15 z m 0 3 a 10.5 10.5 90 1 0 0 -21 a 10.5 10.5 90 0 0 0 21 z M 9 19.5 a 1.5 1.5 90 1 1 -3 0 a 1.5 1.5 90 0 1 3 0 z"/>
</svg>
</a>
</nav>
</div>
</body>
</html>
Here is a simple way to scale them horizontally. The display of the navbar must be inline-flex. I have added it.
As you have requested to scale them vertically. I have changed the CSS of a tag width.
Please take a look at the CSS. #Nitrogen
.bar {
display: flex;
justify-content: center;
}
/* Style the navigation menu */
.navbar {
width: 90%;
background: #3CE18F;
/* Forces the icons to not go outside the scrollbar. If we left it to invisble it would display
them outside. */
overflow: auto;
/* Curves the corners of the Nav Bar. */
border-radius: 10px 10px 30px 30px;
position: fixed;
bottom: 3%;
display: block;
margin:auto;
}
/* Navigation links */
.navbar a {
width: 100% !important;
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 48.6%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
text-align: center; /* If you want the text to be centered */
}
/* Add a background color on mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Style the current/active link */
.navbar a.active {
background-color: #4CAF50;
}
.microphoneIcon {
/* position: absolute;
left: 65.36%;
right: 26.29%;
top: 54.22%;
bottom: 0.46%;*/
fill: #FFFFFF;
stroke: #FFFFFF;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
/* Similar syntax to box-shadow */
/*background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
}
.cameraIcon {
fill: #FFFFFF;
stroke: #FFFFFF;
-webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#009578">
<title>PWA</title>
<link rel="stylesheet" href="src/navigationBar.css">
<!-- Javascript Docs -->
<script type="text/javascript" src="src/index.js"></script>
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="images/logo192.png">
</head>
<body>
<!-- Class for the Bottom Navigation Bar -->
<div class="bar">
<nav class="navbar fixed-bottom navbar-light bg-light nav-fill">
<a href="#">
<svg class='microphoneIcon' id='microphoneIcon' width="42" height="46" viewBox="0 0 42 46" stroke="grey">
<path d='M21 23.7571C25.0314 23.7571 28.2857 21.1043 28.2857 17.8179V5.93928C28.2857 2.65288 25.0314 0 21 0C16.9686 0 13.7143 2.65288 13.7143 5.93928V17.8179C13.7143 21.1043 16.9686 23.7571 21 23.7571ZM18.5714 5.93929C18.5714 4.85043 19.6643 3.95953 21 3.95953C22.3357 3.95953 23.4286 4.85043 23.4286 5.93929V17.8179C23.4286 18.9067 22.3357 19.7976 21 19.7976C19.6643 19.7976 18.5714 18.9067 18.5714 17.8179V5.93929ZM21 27.7167C27.7029 27.7167 33.1429 23.282 33.1429 17.8179H38C38 24.8064 31.6614 30.5477 23.4286 31.5178V37.6155H18.5714V31.5178C10.3386 30.5477 4 24.8064 4 17.8179H8.85714C8.85714 23.282 14.2971 27.7167 21 27.7167Z'/>
</svg>
</a>
<a href="#">
<svg class ='cameraIcon' id='cameraIcon' xmlns="http://www.w3.org/2000/svg" width="50" height="46" viewBox="0 0 50 46">
<path d="M 45 36 a 3 3 90 0 1 -3 3 H 6 a 3 3 90 0 1 -3 -3 V 18 a 3 3 90 0 1 3 -3 h 3.516 a 9 9 90 0 0 6.36 -2.637 l 2.49 -2.484 A 3 3 90 0 1 20.481 9 h 7.032 a 3 3 90 0 1 2.121 0.879 l 2.484 2.484 A 9 9 90 0 0 38.484 15 H 42 a 3 3 90 0 1 3 3 v 18 z M 6 12 a 6 6 90 0 0 -6 6 v 18 a 6 6 90 0 0 6 6 h 36 a 6 6 90 0 0 6 -6 V 18 a 6 6 90 0 0 -6 -6 h -3.516 a 6 6 90 0 1 -4.242 -1.758 l -2.484 -2.484 A 6 6 90 0 0 27.516 6 H 20.484 a 6 6 90 0 0 -4.242 1.758 l -2.484 2.484 A 6 6 90 0 1 9.516 12 H 6 z M 24 33 a 7.5 7.5 90 1 1 0 -15 a 7.5 7.5 90 0 1 0 15 z m 0 3 a 10.5 10.5 90 1 0 0 -21 a 10.5 10.5 90 0 0 0 21 z M 9 19.5 a 1.5 1.5 90 1 1 -3 0 a 1.5 1.5 90 0 1 3 0 z"/>
</svg>
</a>
</nav>
</div>
</body>
</html>
put display:flex in to navbar div
.navbar {
display:flex;
}
button in separate lines
.navbar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
I am trying to adapt some js to build an interactive quiz. The quiz should allow users to select an answer, if they click submit they move on to the next question. If they get the answer wrong a feedback button shows up, if they click the button they get some text output.
There is also a hint button at the bottom of the page if the users click the button a 'hint' pops up.
It would be difficult to explain what the issue I am having is without showing some visuals
This is my desired output:
and the bottom:
This is what I am currently getting:
The hint bubble is only supposed to show up after I manually click it, however currently the bubble appears without any user interaction.
This is what my javascript looks like:
var star = '<svg id="star" x="0px" y="0px" viewBox="0 0 512.001 512.001"><path fill="#ffdc64" d="M499.92 188.26l-165.84-15.38L268.2 19.9c-4.6-10.71-19.8-10.71-24.4 0l-65.88 152.97-165.84 15.38c-11.61 1.08-16.3 15.52-7.54 23.22L129.66 321.4 93.04 483.87c-2.56 11.38 9.73 20.3 19.75 14.35L256 413.2l143.2 85.03c10.03 5.96 22.32-2.97 19.76-14.35L382.34 321.4l125.12-109.92c8.77-7.7 4.07-22.14-7.54-23.22z"/><path fill="#ffc850" d="M268.2 19.91c-4.6-10.71-19.8-10.71-24.4 0l-65.88 152.97-165.84 15.38c-11.61 1.08-16.3 15.52-7.54 23.22L129.66 321.4 93.04 483.87c-2.56 11.38 9.73 20.3 19.75 14.35l31.97-18.98c4.42-182.1 89.03-310.33 156.02-383.7L268.2 19.92z"/></svg>';
//Initialisation of variables
var currentQuestion = -1;
var tokens = 200;
var questions =[
{
"id":"q0",
"topic":"Sciences",
"weight":2,
"questionTxt": "Who created the weightlessness theory (Gravity)?",
"hint": "I was an English mathematician, physicist, astronomer, theologian.",
"options":[
{
"optionTxt": "Galileo",
"answer": false
},
{
"optionTxt": "Newton",
"answer": true
},
{
"optionTxt": "Maxwell",
"answer": false
},
{
"optionTxt": "Euler",
"answer": false
}
],
"feedback":"I was an English mathematician, physicist, astronomer, theologian. I was Isaac Newton. Legends said that I discovered it thanks to an apple falling on the floor."
},
{
"id":"q1",
"topic":"Geography",
"weight":1,
"questionTxt": "What is the capital city of Chile?",
"hint": "It is begining with an 'S'.",
"options":[
{
"optionTxt": "Santiago",
"answer": true
},
{
"optionTxt": "San José",
"answer": false
},
{
"optionTxt": "Buenos Aires",
"answer": false
},
{
"optionTxt": "San Diego",
"answer": false
}
],
"feedback":"The capital city of Chile is Santiago."
},
{
"id":"q2",
"topic":"History",
"weight":3,
"questionTxt": "Who was able to write in reverse?",
"hint": "I was very appreciated by Francois 1er.",
"options":[
{
"optionTxt": "Archimedes",
"answer": false
},
{
"optionTxt": "Leonardo di Vinci",
"answer": true
},
{
"optionTxt": "Darwin",
"answer": false
},
{
"optionTxt": "Einstein",
"answer": false
}
],
"feedback":"I was very appreciated by Francois 1er in France. I am Leonardo di Vinci. I did this system of writting in order to protect my ideas! We are able to read my notes only with a mirror."
}
];
var skills = [];
for(var i = 0; i<questions.length; i++){
var topic = questions[i].topic;
if(skills.length===0){
skills.push(questions[i].topic);
}else{
if(skills.findIndex(topics => topics === topic)<0){
skills.push(questions[i].topic)
}
}
}
for(var i = 0; i<skills.length; i++){
$('#skills').append('<div class="skill '+skills[i].toLowerCase()+'">'+skills[i]+'</div>')
}
$('#money').text(tokens);
if(currentQuestion==-1){
questionInit();
}
//--------------------------------------------------------------------------------------
//Logic for the options
$('.option').click(function(){
//only one option can be checked
$('.option').removeClass('checked');
$(this).toggleClass('checked');
var questionSelected = $('#question-options .checked').length;
if(questionSelected===1){
$('#question .submit').css('display','flex');
}
});
//end logic for options
//--------------------------------------------------------------------------------------
//logic for end of test + animations
$('#question .submit').click(function(){
$('.hint, #hint').hide();
$('#question .submit').css('display','none');
if(currentQuestion === questions.length-1){
$('.nextQ').hide();
}else{
$('#question .nextQ').css('display','flex');
}
$('#question .feedback').css('display','flex');
$('.option').addClass('disabled');
$('.option').find('.textOpt').toggleClass('hide');
//add for each options if this is or not the right answer - For only 4 options
// for(var i=0; i<4; i++){
// console.log($('#opt'+i).data("result"))
// }
if($('.checked').data("r")== true){
var currentTopic = questions[currentQuestion].topic.toLowerCase();
$('.'+currentTopic).append(star);
}
});
//end of logic for end of test + animations
//logic for the feedback
$('.feedback').click(function(){
$(this).addClass('disabled');
var feedback = $('#feedback');
var feedbackText = $('#feedback p');
var feedbackTitle = $('#feedback h1');
$('#feedback').append('<h2>Feedback</h2><p>'+questions[currentQuestion].feedback+'</p>');
TweenLite.to(feedback, 0.5, {opacity:"1"});
});
//Logic for the hint button
$('.hint').click(function(){
// $(this).addClass('disabled');
var hint = $('#hint');
if(tokens!==0){
if(hint.hasClass('hide')){
tokens=tokens-100;
$('#money').text(tokens);
}
hint.toggleClass('hide');
}else if(tokens===0 && hint.hasClass('hide')==false){
hint.toggleClass('hide');
}
});
//Logic for the next button
$('.nextQ').click(function(){
$('.feedback, .hint').removeClass('disabled');
$('.hint, #hint').hide();
$('.option').find('svg').remove();
questionInit();
});
function questionInit(){
//reinitialise for each questions the variables and the style + some info in the console
$('.option').removeClass('checked');
$('#question .btn').css('display','none');
$('#feedback').empty();
$('#hint').empty();
$('#hint').addClass('hide');
$('.feedback, .hint, .option').removeClass('disabled');
$('.hint, #hint').show();
max=0;
currentQuestion++;
console.warn("--------------------------------------------------------")
console.warn("Question "+ (currentQuestion + 1));
console.warn(questions[currentQuestion].questionTxt);
console.warn("- - - - - - - - - - - - - - - - - - - ")
//--------------------------------------------------------------------------------------
//append the question from the array question
$('#question-text h1').html("Question "+ (currentQuestion + 1) + " - "+questions[currentQuestion].topic);
$('#question-text p').html(questions[currentQuestion].questionTxt);
$('#hint').append('<h2>Hint</h2><p>'+questions[currentQuestion].hint+'</p>');
var topic = questions[currentQuestion].topic;
var topicItem = '.skill.'+topic.toLowerCase();
for(var i=0; i<4; i++){
var opt = '#opt'+i;
var label = i+1;
var text = questions[currentQuestion].options[i].optionTxt;
var data = questions[currentQuestion].options[i].answer;
$(opt).html('<div class="label" data-label="'+label+'"></div>'+'<div class="textOpt">'+text+'</div>');
$(opt).data('r', data);
if($(opt).data("r") === true){
$(opt).find('.textOpt').addClass('right hide');
}else{
$(opt).find('.textOpt').addClass('wrong hide');
}
}
}
and my html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'second/css/app/quiz_control.css' %}">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'second/js/app/quiz_control.js' %}" defer></script>
</head>
</head>
<div id='strand'>
<div id='profile'>
<div id='picture'></div>
<div id='tokens'>Your hints: <span id='money'></span>/200</div>
<p><i>Each hint is 100</i></p>
<p>You are a star in:</p>
<div id='skills'></div>
</div>
<div id='quiz'>
<div id='question'>
<div id='question-text'>
<h1></h1>
<p></p>
</div>
<div id='question-options'>
<div class='option' id='opt0' data-r=''></div>
<div class='option' id='opt1' data-r=''></div>
<div class='option' id='opt2' data-r=''></div>
<div class='option' id='opt3' data-r''></div>
</div>
<div class='btn-wrapper'>
<div class='submit btn'>Submit</div>
<div class='hint btn'></div>
<div class='feedback btn'>Feedback</div>
<div class='nextQ btn'>Next</div>
</div>
<div class='feedbackTxt'>
<div id='hint' class='hide'></div>
<div id='feedback'></div>
</div>
</div>
</div>
</div>
</html>
This is probably a rookie question, but I have extremely limited experience with javascript.
When your css have commands like &.hide it have to be processed before being served to the browser. To do that in codepen change settings accordingly:
On your site, you have to compile using SCSS before uploading to the server, or use a pipeline to do it automatically, if your host allow it.
Here's the pen with the preprocessor applied. See that I haven't touched your code https://codepen.io/bortao/pen/eYNqdWr
Check out my snippet please, it should work:
$(function(){
var star = '<svg id="star" x="0px" y="0px" viewBox="0 0 512.001 512.001"><path fill="#ffdc64" d="M499.92 188.26l-165.84-15.38L268.2 19.9c-4.6-10.71-19.8-10.71-24.4 0l-65.88 152.97-165.84 15.38c-11.61 1.08-16.3 15.52-7.54 23.22L129.66 321.4 93.04 483.87c-2.56 11.38 9.73 20.3 19.75 14.35L256 413.2l143.2 85.03c10.03 5.96 22.32-2.97 19.76-14.35L382.34 321.4l125.12-109.92c8.77-7.7 4.07-22.14-7.54-23.22z"/><path fill="#ffc850" d="M268.2 19.91c-4.6-10.71-19.8-10.71-24.4 0l-65.88 152.97-165.84 15.38c-11.61 1.08-16.3 15.52-7.54 23.22L129.66 321.4 93.04 483.87c-2.56 11.38 9.73 20.3 19.75 14.35l31.97-18.98c4.42-182.1 89.03-310.33 156.02-383.7L268.2 19.92z"/></svg>';
//Initialisation of variables
var currentQuestion = -1;
var tokens = 200;
var questions =[
{
"id":"q0",
"topic":"Sciences",
"weight":2,
"questionTxt": "Who created the weightlessness theory (Gravity)?",
"hint": "I was an English mathematician, physicist, astronomer, theologian.",
"options":[
{
"optionTxt": "Galileo",
"answer": false
},
{
"optionTxt": "Newton",
"answer": true
},
{
"optionTxt": "Maxwell",
"answer": false
},
{
"optionTxt": "Euler",
"answer": false
}
],
"feedback":"I was an English mathematician, physicist, astronomer, theologian. I was Isaac Newton. Legends said that I discovered it thanks to an apple falling on the floor."
},
{
"id":"q1",
"topic":"Geography",
"weight":1,
"questionTxt": "What is the capital city of Chile?",
"hint": "It is begining with an 'S'.",
"options":[
{
"optionTxt": "Santiago",
"answer": true
},
{
"optionTxt": "San José",
"answer": false
},
{
"optionTxt": "Buenos Aires",
"answer": false
},
{
"optionTxt": "San Diego",
"answer": false
}
],
"feedback":"The capital city of Chile is Santiago."
},
{
"id":"q2",
"topic":"History",
"weight":3,
"questionTxt": "Who was able to write in reverse?",
"hint": "I was very appreciated by Francois 1er.",
"options":[
{
"optionTxt": "Archimedes",
"answer": false
},
{
"optionTxt": "Leonardo di Vinci",
"answer": true
},
{
"optionTxt": "Darwin",
"answer": false
},
{
"optionTxt": "Einstein",
"answer": false
}
],
"feedback":"I was very appreciated by Francois 1er in France. I am Leonardo di Vinci. I did this system of writting in order to protect my ideas! We are able to read my notes only with a mirror."
}
];
var skills = [];
for(var i = 0; i<questions.length; i++){
var topic = questions[i].topic;
if(skills.length===0){
skills.push(questions[i].topic);
}else{
if(skills.findIndex(topics => topics === topic)<0){
skills.push(questions[i].topic)
}
}
}
for(var i = 0; i<skills.length; i++){
$('#skills').append('<div class="skill '+skills[i].toLowerCase()+'">'+skills[i]+'</div>')
}
$('#money').text(tokens);
if(currentQuestion==-1){
questionInit();
}
//--------------------------------------------------------------------------------------
//Logic for the options
$('.option').click(function(){
//only one option can be checked
$('.option').removeClass('checked');
$(this).toggleClass('checked');
var questionSelected = $('#question-options .checked').length;
if(questionSelected===1){
$('#question .submit').css('display','flex');
}
});
//end logic for options
//--------------------------------------------------------------------------------------
//logic for end of test + animations
$('#question .submit').click(function(){
$('.hint, #hint').hide();
$('#question .submit').css('display','none');
if(currentQuestion === questions.length-1){
$('.nextQ').hide();
}else{
$('#question .nextQ').css('display','flex');
}
$('#question .feedback').css('display','flex');
$('.option').addClass('disabled');
$('.option').find('.textOpt').toggleClass('hide');
//add for each options if this is or not the right answer - For only 4 options
// for(var i=0; i<4; i++){
// console.log($('#opt'+i).data("result"))
// }
if($('.checked').data("r")== true){
var currentTopic = questions[currentQuestion].topic.toLowerCase();
$('.'+currentTopic).append(star);
}
});
//end of logic for end of test + animations
//logic for the feedback
$('.feedback').click(function(){
$(this).addClass('disabled');
var feedback = $('#feedback');
var feedbackText = $('#feedback p');
var feedbackTitle = $('#feedback h1');
$('#feedback').append('<h2>Feedback</h2><p>'+questions[currentQuestion].feedback+'</p>');
TweenLite.to(feedback, 0.5, {opacity:"1"});
});
$('.hint').click(function(){
$("#hint").toggleClass('hintTrigger');
})
//Logic for the hint button
$('.hint').click(function(){
// $(this).addClass('disabled');
var hint = $('#hint');
if(tokens!==0){
if(hint.hasClass('hide')){
tokens=tokens-100;
$('#money').text(tokens);
}
hint.toggleClass('hide');
}else if(tokens===0 && hint.hasClass('hide')==false){
hint.toggleClass('hide');
}
});
//Logic for the next button
$('.nextQ').click(function(){
$('.feedback, .hint').removeClass('disabled');
$('.hint, #hint').hide();
$('.option').find('svg').remove();
questionInit();
});
function questionInit(){
//reinitialise for each questions the variables and the style + some info in the console
$('.option').removeClass('checked');
$('#question .btn').css('display','none');
$('#feedback').empty();
$('#hint').empty();
$('#hint').addClass('hide');
$('.feedback, .hint, .option').removeClass('disabled');
$('.hint.btn').show();
max=0;
currentQuestion++;
console.warn("--------------------------------------------------------")
console.warn("Question "+ (currentQuestion + 1));
console.warn(questions[currentQuestion].questionTxt);
console.warn("- - - - - - - - - - - - - - - - - - - ")
//--------------------------------------------------------------------------------------
//append the question from the array question
$('#question-text h1').html("Question "+ (currentQuestion + 1) + " - "+questions[currentQuestion].topic);
$('#question-text p').html(questions[currentQuestion].questionTxt);
$('#hint').append('<h2>Hint</h2><p>'+questions[currentQuestion].hint+'</p>');
var topic = questions[currentQuestion].topic;
var topicItem = '.skill.'+topic.toLowerCase();
for(var i=0; i<4; i++){
var opt = '#opt'+i;
var label = i+1;
var text = questions[currentQuestion].options[i].optionTxt;
var data = questions[currentQuestion].options[i].answer;
$(opt).html('<div class="label" data-label="'+label+'"></div>'+'<div class="textOpt">'+text+'</div>');
$(opt).data('r', data);
if($(opt).data("r") === true){
$(opt).find('.textOpt').addClass('right hide');
}else{
$(opt).find('.textOpt').addClass('wrong hide');
}
}
}
});
#strand{
display:flex;
flex-direction:row;
width:80%;
height: 600px;
background:#e6dedd;
-webkit-box-shadow: 3px 3px 15px 0px rgba(34,40,49,1);
-moz-box-shadow: 3px 3px 15px 0px rgba(34,40,49,1);
box-shadow: 3px 3px 15px 0px rgba(34,40,49,0.7);
margin:8% auto 0 auto;
}
#profile{
width: 40%;
height: 100%;
background:#9fa6a0;
display:flex;
flex-direction:column;
padding:0 20px;
color:white;
justify-content: flex-start;
align-items: center;
#picture{
width: 70%;
margin-top:20px;
height: 165px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='girl' x='0px' y='0px' viewBox='0 0 464 464'%3E%3Cpath fill='%23e69f5f' d='M400 400s-58.9 24-168 24-168-24-168-24l21.16-264.46C91.28 58.99 155.18 0 231.96 0h.07c76.79 0 140.69 59 146.81 135.53L400 400z'/%3E%3Cpath fill='%23e09156' d='M274.81 6.38A147.06 147.06 0 0 0 232.03 0h-.06C155.18 0 91.27 59 85.16 135.53L64 400s28.88 11.71 83.47 18.77L274.8 6.37z'/%3E%3Cpath fill='%23ffd7a3' d='M383.39 414l-1.53-5.24a5.27 5.27 0 0 0-5.73-3.75l-5.33-40a40 40 0 0 0-21.76-30.49l-17.23-8.61a5.05 5.05 0 0 0-6.77 2.29l-34.1-12.55A16 16 0 0 1 280 300.47v-25.8l34.46-14.36A48 48 0 0 0 344 216v-8a24 24 0 1 0 0-48v-16c0-22.1-17.9-56-40-56H160c-22.1 0-40 33.9-40 56v16a24 24 0 1 0 0 48v8a48 48 0 0 0 29.54 44.3L184 274.68v25.8a16 16 0 0 1-10.94 15.18l-34.1 12.54a5.03 5.03 0 0 0-6.74-2.3l-15.72 7.86c-13.4 6.7-21.55 18.12-23.3 31.26l-5.33 40a5.28 5.28 0 0 0-5.73 3.76l-1.53 5.22a5.28 5.28 0 0 0 3.59 6.55l11.8 3.44V448a16 16 0 0 0 16 16h240a16 16 0 0 0 16-16v-24.02l11.8-3.44a5.28 5.28 0 0 0 3.59-6.55z'/%3E%3Cpath fill='%23fdc88e' d='M280 274.67h-96v25.8a16 16 0 0 1-7.75 13.7c66.92 11.56 103.75-39.5 103.75-39.5z'/%3E%3Cpath fill='%23ffe1b2' d='M344 160v-16c0-22.1-17.9-56-40-56H160c-22.1 0-40 33.9-40 56v16a24 24 0 1 0 0 48v8a48 48 0 0 0 29.54 44.3l51.69 21.55a80 80 0 0 0 61.54 0l51.7-21.54A48 48 0 0 0 344 216v-8a24 24 0 1 0 0-48z'/%3E%3Cpath fill='%23623f33' d='M288 192c-4.4 0-8-3.6-8-8v-8c0-4.4 3.6-8 8-8s8 3.6 8 8v8c0 4.4-3.6 8-8 8z'/%3E%3Cpath fill='%23e4b07b' d='M232 248.22c-14.22 0-27.53-3.5-36.5-9.6a8 8 0 1 1 9-13.23c6.29 4.28 16.57 6.83 27.5 6.83s21.21-2.56 27.5-6.83a8 8 0 1 1 9 13.22c-8.97 6.1-22.28 9.6-36.5 9.6z'/%3E%3Cpath fill='%23ffd7a3' d='M162 243.72a37.5 37.5 0 0 1-10-25.62v-34.42c43.63-3.3 102.53-32.2 137.82-59.86L280 114s-71 46-160 46a24 24 0 1 0 0 48v8a48 48 0 0 0 29.54 44.3l51.69 21.55a80.12 80.12 0 0 0 7.73 2.74c-22.85-16.7-38.06-31.31-46.97-40.87z'/%3E%3Cpath fill='%23ff6473' d='M377.2 412.94L370.8 365a40 40 0 0 0-21.76-30.49l-17.23-8.62a5.1 5.1 0 0 0-7.19 3.37C313.53 370.03 276.27 400 232 400c-44.29 0-81.56-29.99-92.64-70.76a5.07 5.07 0 0 0-7.14-3.35l-15.72 7.86c-13.4 6.7-21.55 18.12-23.3 31.26l-6.51 48.84c21.13 7.27 57.3 18.15 57.3 18.15v32h176v-32l57.2-19.06z'/%3E%3Cpath fill='%23f05467' d='M143.8 429.56a47.91 47.91 0 0 0-9.4-26.36l-37.56-50.08a38.98 38.98 0 0 0-3.64 11.9l-6.34 47.55 56.94 16.99z'/%3E%3Cpath fill='%23d4445a' d='M80.61 414a5.28 5.28 0 0 0 3.59 6.54l59.8 17.44V432c0-3.78-.6-7.48-1.46-11.11l-53.86-15.71a5.28 5.28 0 0 0-6.54 3.59l-1.53 5.22z'/%3E%3Cpath fill='%23f05467' d='M320.2 429.56a47.91 47.91 0 0 1 9.4-26.36l37.56-50.08a38.98 38.98 0 0 1 3.64 11.9l6.34 47.55-56.94 16.99z'/%3E%3Cpath fill='%23d4445a' d='M383.39 414a5.28 5.28 0 0 1-3.59 6.54L320 437.98V432c0-3.78.6-7.48 1.46-11.11l53.86-15.71c2.8-.82 5.73.79 6.54 3.59l1.53 5.22z'/%3E%3Cpath fill='%23623f33' d='M176 192c-4.4 0-8-3.6-8-8v-8c0-4.4 3.6-8 8-8s8 3.6 8 8v8c0 4.4-3.6 8-8 8z'/%3E%3Cpath fill='%23e69f5f' d='M103.73 112.98l.27 53.07c75.5 0 138.1-23.59 179.17-44.83C270.4 135.06 251.2 153.91 224 176c0 0 71.23-28.32 111.13-63.5a94.5 94.5 0 0 0-94.5-94.5h-42.4c-52.38 0-94.77 42.6-94.5 94.98z'/%3E%3Cpath fill='%23e09156' d='M269.79 22.59a94.4 94.4 0 0 0-29.16-4.6h-42.4a94.5 94.5 0 0 0-94.5 94.99l.27 53.08c22.02 0 42.93-2.02 62.53-5.39C238.81 105.33 269.67 22.9 269.8 22.6z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-origin: content-box;
background-position:center;
}
#tokens{
font-weight:bold;
font-size:26px;
}
#skills{
width: 100%;
margin-top:20px;
display:flex;
flex-direction:column;
justify-content:flex-start;
text-align:left;
.skill{
margin: 10px 0;
svg{
height:20px;
}
}
}
}
#quiz{
width: 60%;
height: 100%;
padding:0 20px;
position:relative;
background: white;
.option{
cursor:pointer;
height:30px;
position:relative;
margin-bottom:10px;
background-image:none;
display:flex;
flex-direction:row;
font-weight:bold;
transition: 300ms all ease-in;
&.checked, &:hover{
color: #e61c5d;
font-weight: bold;
.label{
&:after{
background:#e61c5d;
}
&:before{
color:white;
}
}
}
.textOpt{
line-height:30px;
&.right{
&:after{
content:'';
position:absolute;
top:2px;
right: 15%;
width:10px;
height:10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='tick'%3E%3Cpath d='M504.502 75.496c-9.997-9.998-26.205-9.998-36.204 0L161.594 382.203 43.702 264.311c-9.997-9.998-26.205-9.997-36.204 0-9.998 9.997-9.998 26.205 0 36.203l135.994 135.992c9.994 9.997 26.214 9.99 36.204 0L504.502 111.7c9.998-9.997 9.997-26.206 0-36.204z'/%3E%3C/svg%3E");
background-size: 10px 10px;
}
&.hide{
&:after{
background-image:none;
}
}
}
&.wrong{
&:after{
content:'';
position:absolute;
top:2px;
right: 15%;
width:10px;
height:10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='cross'%3E%3Cpath d='M505.943 6.058c-8.077-8.077-21.172-8.077-29.249 0L6.058 476.693c-8.077 8.077-8.077 21.172 0 29.249 4.038 4.04 9.332 6.058 14.625 6.058 5.293 0 10.586-2.019 14.625-6.059L505.943 35.306c8.076-8.076 8.076-21.171 0-29.248z'/%3E%3Cpath d='M505.942 476.694L35.306 6.059c-8.076-8.077-21.172-8.077-29.248 0-8.077 8.076-8.077 21.171 0 29.248l470.636 470.636c4.038 4.039 9.332 6.058 14.625 6.058 5.293 0 10.587-2.019 14.624-6.057 8.075-8.078 8.075-21.173-.001-29.25z'/%3E%3C/svg%3E");
background-size: 10px 10px;
}
&.hide{
&:after{
background-image:none;
}
}
}
}
.label{
position:relative;
height:30px;
width:30px;
margin-right:15px;
&:before{
content:attr(data-label);
position:absolute;
top: 5px;
left: 9px;
height: 15px;
z-index:100;
font-weight:bold;
}
&:after{
content:'';
z-index:10;
position:absolute;
background:#ff9280;
top:0;
left:0;
width:100%;
height:30px;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transition: 300ms all ease-in;
}
}
}
}
.disabled{pointer-events:none;}
.btn-wrapper{
display:flex;
flex-direction:row;
width:100%;
justify-content:center;
align-items:space-between;
}
.btn{
cursor:pointer;
width:90px;
height:20px;
background:#e61c5d;
color:white;
margin: 10px 5px;
padding:10px;
display:flex;
justify-content:center;
align-items:center;
z-index:10000;
transition:all 500ms ease-in;
font-weight:bold;
&:hover{
background:#930077;
}
&.feedback, &.submit{
margin-left:0;
}
}
#hint{
position: absolute;
width: 50%;
text-align: center;
bottom: 100px;
right: 58px;
padding: 10px;
border-radius: 20px;
background: #e61c5d;
color: white;
transition:700ms ease all;
display: none;
&.hide{
opacity:0;
}
}
#hint.hintTrigger{
display: block;
}
.hint{
position:absolute;
bottom:10px;
right:10px;
height:45px;
width:45px;
border-radius:20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='bulb' fill='%23ffffff' viewBox='0 0 792 792'%3E%3Cpath d='M324.08 693.8a12.38 12.38 0 0 1 0-24.75h143.86a12.38 12.38 0 0 1 0 24.75H324.08zM340.07 742.91a12.38 12.38 0 0 1 0-24.75h111.89a12.38 12.38 0 0 1 0 24.75h-111.9zM384.36 571.83a12.32 12.32 0 1 1-24.65 0c-.05-52.1-1.54-91.04-8.74-127.08-7.11-35.63-19.85-68.65-42.46-109.39a12.34 12.34 0 0 1 21.56-11.99c24 43.26 37.58 78.48 45.16 116.56 7.5 37.6 9.08 77.96 9.13 131.9zM432.31 571.83a12.32 12.32 0 1 1-24.64 0c.05-53.94 1.62-94.28 9.12-131.9 7.58-38.08 21.17-73.3 45.17-116.56a12.32 12.32 0 0 1 21.53 11.99c-22.61 40.74-35.35 73.79-42.46 109.4-7.17 36.04-8.7 74.97-8.72 127.07z'/%3E%3Cpath d='M315.52 341.11a12.35 12.35 0 0 1 7.53-23.51c8.61 2.78 16.06 6.52 22.95 9.98l.67.36c10.75 5.41 19.7 9.64 26.35 4.23l15.2-12.4a12.35 12.35 0 0 1 17.36 1.8 12.35 12.35 0 0 1-1.8 17.35l-15.22 12.4c-18.95 15.42-34.44 7.92-53.1-1.44l-.57-.26c-6.04-3.04-12.59-6.32-19.37-8.5zM408.39 60.33a12.38 12.38 0 0 1-24.75 0V12.38a12.38 12.38 0 0 1 24.75 0v47.95z'/%3E%3Cpath d='M468.97 317.6a12.33 12.33 0 0 1 15.52 8 12.33 12.33 0 0 1-7.99 15.51c-6.78 2.2-13.33 5.5-19.39 8.54l-.56.25c-18.64 9.36-34.16 16.9-53.11 1.45l-15.21-12.4a12.35 12.35 0 0 1-1.8-17.35 12.35 12.35 0 0 1 17.35-1.8l15.2 12.4c6.66 5.4 15.58 1.15 26.36-4.24l.67-.36c6.9-3.48 14.35-7.22 22.96-10z'/%3E%3Cpath d='M551.7 192.35a219.56 219.56 0 0 1 64.51 155.7 219.46 219.46 0 0 1-42.36 129.78c-22.71 31.07-41.14 51.46-55.45 67.32-25.76 28.48-37.05 40.96-37.05 82.63 0 6.83-5.54 12.37-12.38 12.37H324.12a12.4 12.4 0 0 1-12.4-12.38c0-41.25-11.53-53.85-37.1-81.88l-.03-.02-.02.02c-14.47-15.83-33.08-36.22-56.36-68.06a219.6 219.6 0 0 1-42.36-129.78c0-29.75 5.96-58.22 16.73-84.2l.24-.5a220.44 220.44 0 0 1 47.56-71 220.45 220.45 0 0 1 71.5-47.74v-.03a219.42 219.42 0 0 1 84.2-16.73c29.7 0 58.13 5.96 84.15 16.73a221.08 221.08 0 0 1 71.49 47.77zm39.73 155.7a194.92 194.92 0 0 0-57.23-138.2 195.42 195.42 0 0 0-63.42-42.45A194.81 194.81 0 0 0 396 152.63c-26.53 0-51.8 5.25-74.71 14.77v-.03l-.05.03a195.33 195.33 0 0 0-63.4 42.46 196.3 196.3 0 0 0-42.23 62.8l-.26.67a195.03 195.03 0 0 0-14.77 74.72c0 21.19 3.38 41.6 9.56 60.6a196.19 196.19 0 0 0 27.95 54.59c22.35 30.57 40.56 50.5 54.71 66.02l-.03.03c27.54 30.08 41.23 45.14 43.37 86.13H456.86c2.11-41.27 15.54-56.18 43.2-86.75 13.82-15.3 31.59-34.96 53.84-65.38a194.95 194.95 0 0 0 37.53-115.24zM356.05 792a12.38 12.38 0 0 1 0-24.75h79.92a12.38 12.38 0 0 1 0 24.75h-79.92zM547.84 104.28a12.36 12.36 0 0 1-16.84 4.54A12.36 12.36 0 0 1 526.47 92l23.97-41.53a12.34 12.34 0 0 1 21.37 12.3l-23.97 41.52zM265.53 92.01a12.32 12.32 0 0 1-21.34 12.28L220.2 62.75a12.34 12.34 0 0 1 4.54-16.8 12.36 12.36 0 0 1 16.83 4.53L265.53 92zM157.69 190.78a12.36 12.36 0 0 1 4.54 16.84 12.34 12.34 0 0 1-16.81 4.53l-41.54-23.97a12.32 12.32 0 0 1-4.56-16.81 12.34 12.34 0 0 1 16.84-4.54l41.53 23.95zM646.6 212.15a12.36 12.36 0 0 1-16.83-4.53 12.36 12.36 0 0 1 4.54-16.84l41.53-23.98a12.36 12.36 0 0 1 16.84 4.54 12.37 12.37 0 0 1-4.54 16.84l-41.53 23.97z'/%3E%3Cpath d='M267.44 396.95c2.63 6.27-.3 13.51-6.57 16.14a12.34 12.34 0 0 1-16.14-6.57 162.27 162.27 0 0 1-9.65-31.27 166.4 166.4 0 0 1-3.3-32.62 12.4 12.4 0 0 1 12.38-12.37 12.4 12.4 0 0 1 12.37 12.38c0 9.66.96 18.97 2.74 27.79a137.7 137.7 0 0 0 8.17 26.52zm0-108.66a12.34 12.34 0 0 1-16.14 6.57 12.34 12.34 0 0 1-6.57-16.14 165.16 165.16 0 0 1 15.03-27.77l.02-.02-.02-.03a165.85 165.85 0 0 1 20.1-24.41 164.62 164.62 0 0 1 24.45-20.09v-.02a163.42 163.42 0 0 1 27.81-15.03c9.93-4.2 20.4-7.48 31.25-9.64a164.9 164.9 0 0 1 32.64-3.3 12.38 12.38 0 0 1 0 24.75c-9.7 0-19.03.95-27.82 2.7-9.2 1.83-18.1 4.64-26.5 8.2a139.43 139.43 0 0 0-23.56 12.81h-.03A138.93 138.93 0 0 0 297.4 244a139.8 139.8 0 0 0-17.12 20.76l-.03-.03a139.19 139.19 0 0 0-12.8 23.57z'/%3E%3C/svg%3E");
background-size:45px;
background-repeat:no-repeat;
background-origin: content-box;
&:hover{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='bulb' fill='%23ffffff' viewBox='0 0 792 792'%3E%3Cpath d='M324.08 693.8a12.38 12.38 0 0 1 0-24.75h143.86a12.38 12.38 0 0 1 0 24.75H324.08zM340.07 742.91a12.38 12.38 0 0 1 0-24.75h111.89a12.38 12.38 0 0 1 0 24.75h-111.9zM384.36 571.83a12.32 12.32 0 1 1-24.65 0c-.05-52.1-1.54-91.04-8.74-127.08-7.11-35.63-19.85-68.65-42.46-109.39a12.34 12.34 0 0 1 21.56-11.99c24 43.26 37.58 78.48 45.16 116.56 7.5 37.6 9.08 77.96 9.13 131.9zM432.31 571.83a12.32 12.32 0 1 1-24.64 0c.05-53.94 1.62-94.28 9.12-131.9 7.58-38.08 21.17-73.3 45.17-116.56a12.32 12.32 0 0 1 21.53 11.99c-22.61 40.74-35.35 73.79-42.46 109.4-7.17 36.04-8.7 74.97-8.72 127.07z'/%3E%3Cpath d='M315.52 341.11a12.35 12.35 0 0 1 7.53-23.51c8.61 2.78 16.06 6.52 22.95 9.98l.67.36c10.75 5.41 19.7 9.64 26.35 4.23l15.2-12.4a12.35 12.35 0 0 1 17.36 1.8 12.35 12.35 0 0 1-1.8 17.35l-15.22 12.4c-18.95 15.42-34.44 7.92-53.1-1.44l-.57-.26c-6.04-3.04-12.59-6.32-19.37-8.5zM408.39 60.33a12.38 12.38 0 0 1-24.75 0V12.38a12.38 12.38 0 0 1 24.75 0v47.95z'/%3E%3Cpath d='M468.97 317.6a12.33 12.33 0 0 1 15.52 8 12.33 12.33 0 0 1-7.99 15.51c-6.78 2.2-13.33 5.5-19.39 8.54l-.56.25c-18.64 9.36-34.16 16.9-53.11 1.45l-15.21-12.4a12.35 12.35 0 0 1-1.8-17.35 12.35 12.35 0 0 1 17.35-1.8l15.2 12.4c6.66 5.4 15.58 1.15 26.36-4.24l.67-.36c6.9-3.48 14.35-7.22 22.96-10z'/%3E%3Cpath d='M551.7 192.35a219.56 219.56 0 0 1 64.51 155.7 219.46 219.46 0 0 1-42.36 129.78c-22.71 31.07-41.14 51.46-55.45 67.32-25.76 28.48-37.05 40.96-37.05 82.63 0 6.83-5.54 12.37-12.38 12.37H324.12a12.4 12.4 0 0 1-12.4-12.38c0-41.25-11.53-53.85-37.1-81.88l-.03-.02-.02.02c-14.47-15.83-33.08-36.22-56.36-68.06a219.6 219.6 0 0 1-42.36-129.78c0-29.75 5.96-58.22 16.73-84.2l.24-.5a220.44 220.44 0 0 1 47.56-71 220.45 220.45 0 0 1 71.5-47.74v-.03a219.42 219.42 0 0 1 84.2-16.73c29.7 0 58.13 5.96 84.15 16.73a221.08 221.08 0 0 1 71.49 47.77zm39.73 155.7a194.92 194.92 0 0 0-57.23-138.2 195.42 195.42 0 0 0-63.42-42.45A194.81 194.81 0 0 0 396 152.63c-26.53 0-51.8 5.25-74.71 14.77v-.03l-.05.03a195.33 195.33 0 0 0-63.4 42.46 196.3 196.3 0 0 0-42.23 62.8l-.26.67a195.03 195.03 0 0 0-14.77 74.72c0 21.19 3.38 41.6 9.56 60.6a196.19 196.19 0 0 0 27.95 54.59c22.35 30.57 40.56 50.5 54.71 66.02l-.03.03c27.54 30.08 41.23 45.14 43.37 86.13H456.86c2.11-41.27 15.54-56.18 43.2-86.75 13.82-15.3 31.59-34.96 53.84-65.38a194.95 194.95 0 0 0 37.53-115.24zM356.05 792a12.38 12.38 0 0 1 0-24.75h79.92a12.38 12.38 0 0 1 0 24.75h-79.92zM547.84 104.28a12.36 12.36 0 0 1-16.84 4.54A12.36 12.36 0 0 1 526.47 92l23.97-41.53a12.34 12.34 0 0 1 21.37 12.3l-23.97 41.52zM265.53 92.01a12.32 12.32 0 0 1-21.34 12.28L220.2 62.75a12.34 12.34 0 0 1 4.54-16.8 12.36 12.36 0 0 1 16.83 4.53L265.53 92zM157.69 190.78a12.36 12.36 0 0 1 4.54 16.84 12.34 12.34 0 0 1-16.81 4.53l-41.54-23.97a12.32 12.32 0 0 1-4.56-16.81 12.34 12.34 0 0 1 16.84-4.54l41.53 23.95zM646.6 212.15a12.36 12.36 0 0 1-16.83-4.53 12.36 12.36 0 0 1 4.54-16.84l41.53-23.98a12.36 12.36 0 0 1 16.84 4.54 12.37 12.37 0 0 1-4.54 16.84l-41.53 23.97z'/%3E%3Cpath d='M267.44 396.95c2.63 6.27-.3 13.51-6.57 16.14a12.34 12.34 0 0 1-16.14-6.57 162.27 162.27 0 0 1-9.65-31.27 166.4 166.4 0 0 1-3.3-32.62 12.4 12.4 0 0 1 12.38-12.37 12.4 12.4 0 0 1 12.37 12.38c0 9.66.96 18.97 2.74 27.79a137.7 137.7 0 0 0 8.17 26.52zm0-108.66a12.34 12.34 0 0 1-16.14 6.57 12.34 12.34 0 0 1-6.57-16.14 165.16 165.16 0 0 1 15.03-27.77l.02-.02-.02-.03a165.85 165.85 0 0 1 20.1-24.41 164.62 164.62 0 0 1 24.45-20.09v-.02a163.42 163.42 0 0 1 27.81-15.03c9.93-4.2 20.4-7.48 31.25-9.64a164.9 164.9 0 0 1 32.64-3.3 12.38 12.38 0 0 1 0 24.75c-9.7 0-19.03.95-27.82 2.7-9.2 1.83-18.1 4.64-26.5 8.2a139.43 139.43 0 0 0-23.56 12.81h-.03A138.93 138.93 0 0 0 297.4 244a139.8 139.8 0 0 0-17.12 20.76l-.03-.03a139.19 139.19 0 0 0-12.8 23.57z'/%3E%3C/svg%3E");
background-size:45px;
background-repeat:no-repeat;
background-origin: content-box;
}
}
//HERE YOUR HEADER CONTENT
<div id='strand'>
<div id='profile'>
<div id='picture'></div>
<div id='tokens'>Your hints: <span id='money'></span>/200</div>
<p><i>Each hint is 100</i></p>
<p>You are a star in:</p>
<div id='skills'></div>
</div>
<div id='quiz'>
<div id='question'>
<div id='question-text'>
<h1></h1>
<p></p>
</div>
<div id='question-options'>
<div class='option' id='opt0' data-r=''></div>
<div class='option' id='opt1' data-r=''></div>
<div class='option' id='opt2' data-r=''></div>
<div class='option' id='opt3' data-r=''></div>
</div>
<div class='btn-wrapper'>
<div class='submit btn'>Submit</div>
<div class='hint btn'></div>
<div class='feedback btn'>Feedback</div>
<div class='nextQ btn'>Next</div>
</div>
<div class='feedbackTxt'>
<div id='hint' class='hide'></div>
<div id='feedback'></div>
</div>
</div>
</div>
</div>
Also edited your codepen example here is an example
I'm trying to get mobile comparability to work on my website and all my container <div>'s have a max-width: 1000px; and a width:100%; so my website should be able to reach 1000px, then have that <div> go 100%, but that's not happening. Well on a computer it is, but on mobile the website is showing up as 1000px wide so I'm terribly confused.
Here's a link, hopefully you guys have an idea.
I'll post all my code here, just because I think I have to..
HTML
<html>
<head>
<link href="css/reset.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="section1">
<div id="section1content">
<div id="logoimg">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="300" height="300" viewBox="0 0 1898.000000 1898.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Darryl Huffman's logo
</metadata>
<g id="ttt" transform="translate(0.000000,1898.000000) scale(0.100000,-0.100000)"
stroke="none">
<path d="M9120 18974 c-529 -29 -891 -69 -1315 -145 -2509 -455 -4719 -1889
-6156 -3994 -886 -1299 -1437 -2805 -1598 -4375 -39 -372 -45 -519 -45 -970 0
-451 6 -598 45 -970 135 -1319 547 -2601 1204 -3745 718 -1252 1699 -2313
2890 -3126 967 -660 2065 -1141 3203 -1403 494 -114 929 -180 1462 -223 303
-24 1057 -24 1360 0 533 43 968 109 1462 223 2169 500 4108 1762 5445 3545
1040 1387 1675 3010 1852 4729 39 372 45 519 45 970 0 451 -6 598 -45 970
-161 1570 -712 3076 -1598 4375 -813 1190 -1875 2173 -3125 2890 -1228 704
-2583 1118 -4026 1231 -182 14 -907 26 -1060 18z m1180 -307 c365 -39 851
-113 1105 -168 349 -76 832 -204 925 -246 25 -11 90 -35 145 -53 198 -65 572
-210 800 -311 209 -92 901 -455 975 -511 14 -11 129 -85 255 -166 297 -191
329 -213 601 -424 280 -216 293 -227 496 -408 203 -181 417 -389 607 -591 154
-164 458 -515 501 -577 14 -21 89 -121 167 -223 133 -174 396 -561 458 -674
16 -27 47 -79 70 -115 122 -190 409 -745 527 -1019 70 -164 208 -525 253 -661
21 -63 50 -146 66 -185 35 -86 139 -451 180 -629 16 -72 43 -191 60 -263 36
-160 90 -473 123 -718 66 -476 76 -646 76 -1235 0 -589 -10 -759 -76 -1235
-33 -245 -87 -558 -123 -718 -17 -72 -44 -191 -60 -263 -41 -178 -145 -543
-180 -629 -16 -38 -45 -122 -66 -185 -45 -136 -183 -497 -253 -661 -118 -274
-405 -829 -527 -1019 -23 -36 -54 -87 -70 -115 -62 -113 -325 -500 -458 -674
-78 -102 -153 -202 -167 -223 -43 -62 -347 -413 -501 -577 -190 -202 -404
-410 -607 -591 -203 -181 -216 -192 -496 -408 -272 -211 -304 -233 -601 -424
-126 -81 -241 -155 -255 -166 -74 -56 -766 -419 -975 -511 -228 -101 -602
-246 -800 -311 -55 -18 -120 -42 -145 -53 -93 -42 -576 -170 -925 -246 -262
-57 -754 -131 -1115 -168 -258 -27 -1342 -27 -1600 0 -361 37 -853 111 -1115
168 -349 76 -832 204 -925 246 -25 11 -90 35 -145 53 -198 65 -572 210 -800
311 -209 92 -901 455 -975 511 -14 11 -128 85 -255 166 -297 191 -329 213
-601 424 -280 216 -293 227 -496 408 -203 181 -417 389 -607 591 -154 164
-458 515 -501 577 -14 21 -89 121 -167 223 -133 174 -396 561 -458 674 -16 28
-47 79 -70 115 -122 190 -409 745 -527 1019 -70 164 -208 525 -253 661 -21 63
-50 147 -66 185 -35 86 -139 451 -180 629 -16 72 -43 191 -60 263 -73 326
-151 863 -184 1266 -21 262 -21 1112 0 1374 33 403 111 940 184 1266 17 72 44
191 60 263 41 178 145 543 180 629 16 39 45 122 66 185 45 136 183 497 253
661 118 274 405 829 527 1019 23 36 54 88 70 115 62 113 325 500 458 674 78
102 153 202 167 223 43 62 347 413 501 577 190 202 404 410 607 591 203 181
216 192 496 408 272 211 304 233 601 424 127 81 241 155 255 166 74 56 766
419 975 511 228 101 602 246 800 311 55 18 120 42 145 53 93 42 576 170 925
246 275 59 794 137 1110 165 94 9 188 17 210 20 22 2 312 2 645 1 481 -2 637
-5 760 -18z"/>
<path d="M9045 18469 c-2011 -103 -3912 -866 -5437 -2181 -890 -768 -1628
-1718 -2161 -2785 -620 -1239 -947 -2624 -947 -4013 0 -2161 782 -4256 2199
-5890 776 -895 1712 -1620 2778 -2153 1480 -741 3152 -1058 4803 -911 1886
167 3655 917 5092 2156 890 768 1628 1718 2161 2785 1008 2013 1220 4348 592
6513 -484 1667 -1447 3171 -2753 4298 -987 852 -2136 1475 -3382 1837 -945
274 -1973 394 -2945 344z m-2134 -4989 c767 -59 1441 -277 2034 -658 232 -149
400 -285 611 -496 401 -401 680 -842 878 -1389 80 -221 161 -540 191 -749 l6
-48 1530 0 1529 0 0 1675 0 1675 935 0 935 0 0 -4005 0 -4005 -935 0 -935 0 0
1695 0 1695 -1527 -2 -1526 -3 -23 -140 c-110 -660 -389 -1285 -808 -1809
-114 -143 -398 -425 -549 -545 -590 -467 -1313 -760 -2117 -855 -273 -33 -452
-36 -2092 -36 l-1648 0 0 4005 0 4005 1688 0 c1068 0 1737 -4 1823 -10z m3729
-1367 c0 -757 -2 -1374 -4 -1372 -2 2 -18 54 -35 114 -71 241 -214 573 -350
810 -86 148 -221 346 -327 480 -121 151 -402 431 -557 554 -147 116 -379 273
-515 346 l-92 50 0 198 0 197 940 0 940 0 0 -1377z m0 -5253 l0 -1380 -940 0
-940 0 0 199 c0 190 1 200 20 206 33 11 299 174 404 248 330 234 638 543 882
883 138 194 299 486 398 724 53 126 166 454 166 483 0 9 2 17 5 17 3 0 5 -621
5 -1380z"/>
<path d="M5280 9485 l0 -2576 753 4 c800 4 822 5 1062 57 405 88 800 313 1056
603 326 369 514 821 596 1434 22 167 21 770 -3 963 -87 731 -385 1314 -849
1666 -266 202 -551 323 -920 391 l-140 26 -777 4 -778 4 0 -2576z"/>
</g>
</svg>
</div>
</div>
</div>
<div id="topspace"></div>
<div id="polygons">
<div id="poly1" class="poly"></div>
<div id="poly2" class="poly"></div>
<div id="poly3" class="poly"></div>
<div id="poly4" class="poly"></div>
<div id="poly5" class="poly"></div>
<div id="poly6" class="poly"></div>
<div id="poly7" class="poly"></div>
<div id="poly8" class="poly"></div>
<div id="poly9" class="poly"></div>
<div id="poly10" class="poly"></div>
<div id="poly11" class="poly"></div>
<div id="poly12" class="poly"></div>
<div id="poly13" class="poly"></div>
<div id="poly14" class="poly"></div>
<div id="poly15" class="poly"></div>
<div id="poly16" class="poly"></div>
<div id="poly17" class="poly"></div>
<div id="poly18" class="poly"></div>
<div id="poly19" class="poly"></div>
<div id="poly20" class="poly"></div>
<div id="poly21" class="poly"></div>
<div id="poly22" class="poly"></div>
<div id="poly23" class="poly"></div>
<div id="poly24" class="poly"></div>
<div id="poly25" class="poly"></div>
<div id="poly26" class="poly"></div>
<div id="poly27" class="poly"></div>
<div id="poly28" class="poly"></div>
<div id="poly29" class="poly"></div>
<div id="poly30" class="poly"></div>
</div>
<div class="section" id="section2">
<div class="wrapper">
<h1>ABOUT ME</h1>
<h2>Just a little bit</h2>
<br>
<p>I'm Darryl Huffman!
I am a self taught web designer and developer who's 16.<br>
<br>
What am I doing?   Well, if you don't see me glued to my laptop, I'm probably slaying an ender dragon.   Or quite possibly, I have gone and discovered a way to travel through time and I am probably being chased by a T-Rex.
<br>
<br>
However, when I'm not playing around with my time machine, I spend my time designing and developing with the hope to simplify and brighten our everyday lives.</p>
<div class="wrapper2">
<p>
I like to make websites more than just websites. <br>
I like to make websites, <span id="quoteart">Art</span>.
</p>
</div>
</div>
</div>
<div class="section">
<div class="wrapper">
<h1>WORKS</h1>
<h2>As in things I've worked on</h2>
<br>
<div style="text-align: center;">
<img src="images/portfolio/gravitychimp.png" width="200" class="workimg" id="gravchimp">
<img src="images/portfolio/hmf.png" width="200" class="workimg" id="hmf">
<img src="images/portfolio/sotare.png" width="200" class="workimg" id="sotare">
<img src="images/portfolio/trisearching.png" width="200" class="workimg" id="trisearch">
</div>
<h3 id="work_label"></h3><img id="close_work" src="images/svg/x.svg" style="float:right; width:50px; cursor:pointer;">
<br>
<p id="work_text">
</p>
</div>
</div>
<div class="section" >
<div class="wrapper">
<div class="wrapper" style="border-bottom:none; padding-bottom:0px;">
<h1>CONTACT</h1>
<h2>As in things I've worked on</h2>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js" type="text/javascript"></script>
<script src="js/plax.js" type="text/javascript"></script>
</body>
</html>
CSS
::-moz-selection { /* Code for Firefox */
color: #fff;
background: #000;
}
#font-face {
font-family: 'allura';
src: url('fonts/Allura.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
cursor: url(images/cursor/Normal%20Select.cur), auto;
transition: background .5s;
background-color: #fff;
}
p{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
h1{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
h2{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
h3{
cursor: url(images/cursor/Text%20Select.cur), auto;
}
::-webkit-scrollbar{width: 5px;}
::-webkit-scrollbar-thumb {background-color:#000000;}
::-webkit-scrollbar-track {background-color:#FFFFFF;}
/* END CSS Code for Scrollbar END */
::selection {
color: #fff;
background: #000;
}
.poly {
background-image: url(images/svg/poly.svg);
background-size: contain;
background-repeat: no-repeat;
height:200px;
width:100px;
position: absolute;
}
#section1content {
position: absolute;
top:30%;
width:100%;
text-align: center;
transition: all 1s;
}
#section1 {
width:100%;
height:100%;
position: fixed;
z-index: 1;
transition: all 1s;
}
.section {
width:100%;
position: relative;
z-index: 2;
background-color: #fff;
font-family: 'Raleway', sans-serif;
}
#polygons {
height:100%;
width: 100%;
position: fixed;;
z-index: 0;
top:0px;
-webkit-animation: polyfade .5s; /* Chrome, Safari, Opera */
animation: polyfade .5s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes polyfade {
0% {opacity: 0;}
100% {opacity: 1;}
}
/* Standard syntax */
#keyframes polyfade {
0% {opacity: 0;}
100% {opacity: 1;}
}
body {
overflow-x: hidden;
}
#logoimg {
-webkit-animation: logoimg 1s; /* Chrome, Safari, Opera */
animation: logoimg 1s;
width:298px;
height:295px;
margin-left:auto;
margin-right: auto;
border-radius: 50%;
transition: all 1s;
background-color: #fff;
cursor: url(images/cursor/Link%20Select.cur), auto;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes logoimg {
0% {opacity: 0}
50% {opacity: 0}
100% {opacity: 1}
}
/* Standard syntax */
#keyframes logoimg {
0% {top: 0px;}
100% {top: 100px;}
}
#ttt {
transition: all 1s;
}
#section2 {
}
.wrapper {
width:100%;
max-width: 1000px;
padding-top: 50px;
padding-bottom: 50px;
margin-left: auto;
margin-right: auto;
border-bottom: #E0E0E0 solid 1px;
}
h1 {
font-size: 35px;
font-weight: 700;
}
h3 {
font-size: 30px;
font-weight: 700;
}
h2 {
margin-left: 5px;
color:#acacac;
}
p {
margin-left: 8px;
color: #727272;
font-family: 'Lato', sans-serif;
}
a {
transition: all .5s;
color: #727272;
border-bottom: #d8d8d8 2px solid;
text-decoration: none;
cursor: url(images/cursor/Link%20Select.cur), auto;
}
a:hover{
color: #009cff;
}
#topspace {
height:100%;
width: 100%;
}
#logoimg:hover{
background-color: #000;
}
svg:hover #ttt { fill: #fff; }
#quoteart {
font-family: allura;
font-size: 50px;
}
.quote_from {
float:right;
}
.wrapper2 {
width:100%;
max-width: 1000px;
padding-top: 50px;
font-family: lato;
font-weight: 300;
margin-left: auto;
margin-right: auto;
font-size: 20px;
text-align: center;
}
#-webkit-keyframes kaboom {
from {margin-left: 0px;}
to {margin-left: 50px;}
}
/* Standard syntax */
#keyframes kaboom {
from {background-color: #fa2424;}
to {background-color: #fa2424;}
}
.workimg {
cursor: url(images/cursor/Link%20Select.cur), auto;
width:200px;
height:auto;
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition: all .5s;
}
.workimg:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
#close_work {
display:none;
}
.formfield {
margin-bottom: 30px;
}
.formfield .col {
float: left;
width: 48.5%;
}
.formfield .col.second {
float: right;
}
.formfield .input-holder {
margin: 0px 0px;
}
input.text, #form-contact textarea {
height: 58px;
color: #7f8c8d;
font-family: Raleway;
font-size: 24px;
border: 1px solid #a5aeaf;
padding: 2px 20px 0px;
margin-left: -21px;
outline: none;
width: 100%;
}
#section4 {
max-width:1392px;
}
#form-contact .formfield {
margin-bottom: 30px;
}
textarea {
color: #7f8c8d;
font-family: 'Raleway';
padding: 20px;
height: 150px;
font-size: 14px;
line-height: 18px;
resize: none;
border: 1px solid #a5aeaf;
margin-left: -21px;
outline: none;
width: 100%;
margin-top:30px;
}
#send-message {
width: 225px;
height: 50px;
background-color: #fff;
color: #a5aeaf;
font-family: 'Raleway';
font-size: 18px;
cursor: url(images/cursor/Link%20Select.cur), auto !important;
float: left;
border: 1px solid #a5aeaf;
-webkit-transition: all 200ms linear;
-o-transition: all 200ms linear;
-moz-transition: all 200ms linear;
transition: all 200ms linear;
}
#send-message:hover {
color: #8f999a;
border: 1px solid #8f999a;
}
#result {
font-size: 14px;
float: right;
color: #99a3a4;
margin-top: 18px;
text-transform: uppercase;
}
JavaScript
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#result');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
$(document).ready(function () {
makebg(1);
});
$("#sotare").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "Sotare" );
$("#work_text").html( "I manipulated stylesheets to make the Sotare store match the wordpress theme my client had on his website.<br><br>What I did - Code." );
});
$("#hmf").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "Hide my File" );
$("#work_text").html( "A batch file I created for windows, I wanted to share so I made it a site.<br><br>What I did - Design and Code." );
});
$("#gravchimp").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "Gravity Chimp" );
$("#work_text").html( "An Android app I made, which is a part of the flappy idea. I made it a website and it is soon to be released on iOS.<br><br>What I did - Design and Code." );
});
$("#trisearch").click(function(){
$("#close_work").css({"display": "block"});
$("#work_label").text( "TriSearching" );
$("#work_text").html( "How about you, try searching with TriSearching! It's a design of a search engine, and the results are swiped over, using Bing.<br><br>What I did - Design and Code." );
});
$("#close_work").click(function(){
$("#close_work").css({"display": "none"});
$("#work_label").text( "" );
$("#work_text").html( "" );
});
var bgcolor = "white";
$("#ttt").click(function(){
if(bgcolor == "white"){
$("body").css({"background-color": "#009cff"});
bgcolor = "blue";
} else{ if(bgcolor == "blue"){
$("body").css({"background-color": "#fff"});
bgcolor = "white";
}
}
});
var currentpoly = 1;
$(window).scroll(function() {
$("#polygons").css({
'opacity' : 1-(($(this).scrollTop())/600)
});
});
function makebg(currentpoly){
if(currentpoly < 31){
var width = randomIntFromInterval(50,300);
var height = width * 2;
var rotation = randomIntFromInterval(1,360);
var top = randomIntFromInterval(1,70);
var left = randomIntFromInterval(10,90);
var opacity = randomIntFromInterval(1,20);
var range = randomIntFromInterval(10,60);
$("#poly" + currentpoly).css({
"width": width,
"height": height,
"-webkit-transform": "rotate(" + rotation + "deg)",
"transform": "rotate(" + rotation + "deg)",
"-ms-transform": "rotate(" + rotation + "deg)",
"top": top + "%",
"left": left + "%",
"opacity": "." + opacity
});
$(document).ready(function () {
var toggleStatus = 'small'
setSmall()
$.plax.enable()
$("#range-small").click(function(){
if(toggleStatus != 'small'){
toggleRange()
}
})
$("#range-big").click(function(){
if(toggleStatus != 'big'){
toggleRange()
}
})
function toggleRange() {
if(toggleStatus == 'small'){
setBig()
} else if (toggleStatus == 'big') {
setSmall()
} else {
console.log(toggleStatus)
}
$("#range-big").toggleClass('active')
$("#range-small").toggleClass('active')
return false
}
function setSmall(){
$("#poly" + currentpoly).plaxify({"xRange":range,"yRange":range});
toggleStatus = 'small'
}
})
currentpoly = currentpoly + 1;
makebg(currentpoly);
}
}
function randomIntFromInterval(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
Please do note, I haven't made my code super clean yet because I'm in the middle of making it, so my JS and other code will be better in the future, lol. Thanks in advance!
If its working on your computer but not mobile make sure your setting the view port inside the head tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Im not 100% sure what you want to happen, but assuming you want the website to have a max width of 1000px and for it to shrink as you make it smaller you need to set the main content (in this case the first div section 1) to max-wdith 1000px.
It may also be that one of your nested div's has one wrong width percentage/ value set thats stopping it from shrinking.
Let me know if any of this helps.