Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width" />
    <title>Arturo Cabrera</title>
    <!--Mi estilo-->
    <link rel="stylesheet" type="text/css" href="https://pixmy.github.io/style.css">
    <!--Font awesome-->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/master/devicon.min.css">
    <!--FONTS-->
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Baloo+Bhai" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Arvo:700" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:900" rel="stylesheet"> 

    <link rel="stylesheet" type="text/css" href="https://pixmy.github.io/toggles-full.css">
    <!--JQUERY-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!--Animate-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.2.0/jquery.visible.min.js" type="text/javascript"></script>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toggles/2.0.4/toggles.min.js"></script>
</head>


<body>
    <div class="background"></div>


        <div class="toggle toggle-soft"></div>
    <div class="hire" id="hire"><i class="fa fa-handshake-o animated swing infinite"></i>
        <div class="info display"><div class="correo"><span class="espanol">pixmycode@gmail.com</span>
            <span class="ingles">pixmycode@gmail.com</span></div>
            <div class="tel"><i class="fa"></i></div>
        </div>
        <span class="espanol">Cotratame</span>
        <span class="ingles">Hire me</span>
    </div>


        <div class="start">


        <div class='box'>
            <div class='wave -one'></div>
            <div class='wave -two'></div>
            <div class='wave -three'></div>
        </div>
            <div class="line"></div>
            <div class="line2"></div>
            <div class="center">
                <div class="nombre animated fadeInLeft"><p>AR</p><p>TU</p><p>RO</p></div>
                <div class="iam animated fadeInLeft">
                <span class="espanol">Programador</span>
                <span class="ingles">Developer</span> | UI Styler</div>
            </div>
        </div>

    <div class="body" id="body"> 
        <div class="square" id="first">
            <div class="squareTitle">
                <span class="espanol">Sobre mí</span>
                <span class="ingles">About me</span>
                <span class="squareSubTitle ingles">Hello! get to know me</span>
                <span class="squareSubTitle espanol">Hola! conoceme</span>
            </div>
            <div class="squareImage show1 hidden"><img class="image yo" src="https://s20.postimg.cc/hp1mhy2d9/arturo_1.png" style="background-color:white;"></div>
            <div class="squareText sobreMi show1 hidden">
                <p class="espanol">
                    Me llamo Arturo Cabrera, soy del estado de Guanajuato y me encanta diseñar páginas web, me gusta dar esa primera impresión la cual hace que el usuario se quede dentro de la página, además <i class="fa fa-heart"></i> la programación y me gusta siempre llegar a una solución óptima para el cliente ya sea individualmente o en equipo.
                    Soy un alumno recién egresado del Instituto Tecnológico Superior del Sur de Guanajuato, pero he tenido varias experiencias laborales.
                    <p class="espanol">Por último quiero mencionar que mi Inglés es Avanzado.</p>
                </p>
                <p class="ingles">              
                    My name is Arturo Cabrera, and I'm from the state of Guanajuato. I love to design websites, and like to give a first impression that makes the user stay on the page. I love programming, and always find an optimal solution for the customer, whether solo or in a team. I am a recent graduate of Instituto Tecnológico del sur de Guanajuato, but already have work experience.
                </p>
            </div>
        </div>

        <div class="square" id="second">
            <div class="squareTitleRight">
                <span class="espanol">Mis habilidades</span>
                <span class="ingles">My abilities</span>
                <span class="squareSubTitle espanol">Puntos fuertes de mí</span>
                <span class="squareSubTitle ingles">Knowledge in...</span>
            </div>
            <div class="squareText show2 hidden">
                <div class="habilidades">
                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#E44D26" d="M27.854 116.354l-8.043-90.211h88.378l-8.051 90.197-36.192 10.033z"></path><path fill="#F16529" d="M64 118.704l29.244-8.108 6.881-77.076h-36.125z"></path><path fill="#EBEBEB" d="M64 66.978h-14.641l-1.01-11.331h15.651v-11.064h-27.743l.264 2.969 2.72 30.489h24.759zM64 95.711l-.049.013-12.321-3.328-.788-8.823h-11.107l1.55 17.372 22.664 6.292.051-.015z"></path><path d="M28.034 1.627h5.622v5.556h5.144v-5.556h5.623v16.822h-5.623v-5.633h-5.143v5.633h-5.623v-16.822zM51.816 7.206h-4.95v-5.579h15.525v5.579h-4.952v11.243h-5.623v-11.243zM64.855 1.627h5.862l3.607 5.911 3.603-5.911h5.865v16.822h-5.601v-8.338l-3.867 5.981h-.098l-3.87-5.981v8.338h-5.502v-16.822zM86.591 1.627h5.624v11.262h7.907v5.561h-13.531v-16.823z"></path><path fill="#fff" d="M63.962 66.978v11.063h13.624l-1.284 14.349-12.34 3.331v11.51l22.682-6.286.166-1.87 2.6-29.127.27-2.97h-2.982zM63.962 44.583v11.064h26.725l.221-2.487.505-5.608.265-2.969z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress html">80%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#131313" d="M89.234 5.856h-7.384l7.679 8.333v3.967h-15.816v-4.645h7.678l-7.678-8.333v-3.971h15.521v4.649zm-18.657 0h-7.384l7.679 8.333v3.967h-15.817v-4.645h7.679l-7.679-8.333v-3.971h15.522v4.649zm-18.474.19h-7.968v7.271h7.968v4.839h-13.632v-16.949h13.632v4.839z"></path><path fill="#1572B6" d="M27.613 116.706l-8.097-90.813h88.967l-8.104 90.798-36.434 10.102-36.332-10.087z"></path><path fill="#33A9DC" d="M64.001 119.072l29.439-8.162 6.926-77.591h-36.365v85.753z"></path><path fill="#fff" d="M64 66.22h14.738l1.019-11.405h-15.757v-11.138h27.929000000000002l-.267 2.988-2.737 30.692h-24.925v-11.137z"></path><path fill="#EBEBEB" d="M64.067 95.146l-.049.014-12.404-3.35-.794-8.883h-11.178999999999998l1.561 17.488 22.814 6.333.052-.015v-11.587z"></path><path fill="#fff" d="M77.792 76.886l-1.342 14.916-12.422 3.353v11.588l22.833-6.328.168-1.882 1.938-21.647h-11.175z"></path><path fill="#EBEBEB" d="M64.039 43.677v11.136999999999999h-26.903000000000002l-.224-2.503-.507-5.646-.267-2.988h27.901zM64 66.221v11.138h-12.247l-.223-2.503-.508-5.647-.267-2.988h13.245z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress css">75%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#F0DB4F" d="M2 1v125h125v-125h-125zm66.119 106.513c-1.845 3.749-5.367 6.212-9.448 7.401-6.271 1.44-12.269.619-16.731-2.059-2.986-1.832-5.318-4.652-6.901-7.901l9.52-5.83c.083.035.333.487.667 1.071 1.214 2.034 2.261 3.474 4.319 4.485 2.022.69 6.461 1.131 8.175-2.427 1.047-1.81.714-7.628.714-14.065-.001-10.115.046-20.188.046-30.188h11.709c0 11 .06 21.418 0 32.152.025 6.58.596 12.446-2.07 17.361zm48.574-3.308c-4.07 13.922-26.762 14.374-35.83 5.176-1.916-2.165-3.117-3.296-4.26-5.795 4.819-2.772 4.819-2.772 9.508-5.485 2.547 3.915 4.902 6.068 9.139 6.949 5.748.702 11.531-1.273 10.234-7.378-1.333-4.986-11.77-6.199-18.873-11.531-7.211-4.843-8.901-16.611-2.975-23.335 1.975-2.487 5.343-4.343 8.877-5.235l3.688-.477c7.081-.143 11.507 1.727 14.756 5.355.904.916 1.642 1.904 3.022 4.045-3.772 2.404-3.76 2.381-9.163 5.879-1.154-2.486-3.069-4.046-5.093-4.724-3.142-.952-7.104.083-7.926 3.403-.285 1.023-.226 1.975.227 3.665 1.273 2.903 5.545 4.165 9.377 5.926 11.031 4.474 14.756 9.271 15.672 14.981.882 4.916-.213 8.105-.38 8.581z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress js">70%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#0868AC" d="M27.758 20.421c-7.352 10.565-6.437 24.312-.82 35.54l.411.798.263.506.164.291.293.524c.174.307.353.612.536.919l.306.504c.203.326.41.65.622.973l.265.409c.293.437.592.872.901 1.301l.026.033.152.205c.267.368.542.732.821 1.093l.309.393c.249.313.502.623.759.934l.29.346c.345.406.698.812 1.057 1.208l.021.022.041.045c.351.383.71.758 1.075 1.133l.344.347c.282.284.569.563.858.841l.351.334c.387.364.777.722 1.176 1.07l.018.016.205.174c.351.305.708.605 1.068.902l.442.353c.294.235.591.468.89.696l.477.361c.33.243.663.482.999.717l.363.258.101.072c.318.22.645.431.97.642l.42.28c.5.315 1.007.628 1.519.93l.42.237c.377.217.756.431 1.14.639l.631.326.816.424.188.091.334.161c.427.204.858.405 1.293.599l.273.122c.498.218 1.001.427 1.508.628l.368.144c.469.182.945.359 1.423.527l.179.062c.524.184 1.054.353 1.587.52l.383.114c.542.164 1.079.358 1.638.462 35.553 6.483 45.88-21.364 45.88-21.364-8.674 11.3-24.069 14.28-38.656 10.962-.553-.125-1.089-.298-1.628-.456l-.406-.124c-.526-.161-1.049-.33-1.568-.51l-.215-.077c-.465-.164-.924-.336-1.382-.513l-.388-.152c-.501-.198-1-.405-1.492-.62l-.298-.133c-.423-.191-.842-.384-1.259-.585l-.364-.175c-.327-.159-.65-.328-.974-.495l-.649-.341c-.395-.21-.782-.43-1.167-.654l-.394-.219c-.513-.303-1.019-.615-1.52-.932l-.41-.273c-.363-.234-.725-.473-1.081-.719l-.349-.245c-.344-.242-.685-.489-1.022-.738l-.453-.343c-.31-.237-.618-.476-.922-.721l-.411-.33c-.388-.318-.771-.64-1.149-.969l-.126-.105c-.409-.359-.811-.728-1.208-1.098l-.34-.328c-.294-.279-.584-.561-.868-.851l-.34-.34c-.362-.37-.717-.745-1.065-1.126l-.053-.057c-.368-.402-.728-.813-1.08-1.229l-.283-.336c-.263-.316-.523-.638-.777-.961l-.285-.355c-.307-.397-.605-.793-.898-1.195-8.098-11.047-11.008-26.283-4.535-38.795M50.578 11.519c-5.316 7.65-5.028 17.893-.88 25.983.695 1.356 1.477 2.673 2.351 3.925.796 1.143 1.68 2.501 2.737 3.418.383.422.784.834 1.193 1.238l.314.311c.397.385.801.764 1.218 1.132l.05.043.012.012c.462.405.939.794 1.423 1.178l.323.252c.486.372.981.738 1.489 1.087l.043.033.68.447.322.213c.363.233.73.459 1.104.676l.156.092c.322.185.648.367.975.545l.347.18.682.354.103.047c.469.23.941.453 1.424.663l.314.13c.386.163.775.323 1.167.473l.5.184c.356.132.712.253 1.072.373l.484.155c.511.158 1.017.359 1.549.448 27.45 4.547 33.787-16.588 33.787-16.588-5.712 8.228-16.775 12.153-28.58 9.089-.524-.138-1.042-.288-1.555-.449l-.467-.151c-.365-.117-.728-.243-1.087-.374l-.491-.183c-.394-.152-.784-.309-1.171-.473l-.315-.133c-.485-.211-.962-.434-1.432-.666l-.718-.365-.414-.213c-.306-.166-.61-.338-.909-.514l-.217-.123c-.372-.217-.738-.44-1.1-.672l-.332-.221-.712-.472c-.506-.349-.999-.714-1.484-1.085l-.334-.264c-5.167-4.079-9.263-9.655-11.21-15.977-2.041-6.557-1.601-13.917 1.935-19.891M69.771 4.868c-3.134 4.612-3.442 10.341-1.267 15.435 2.293 5.407 6.992 9.648 12.477 11.66l.682.235.3.096c.323.102.644.22.978.282 15.157 2.929 19.268-7.777 20.362-9.354-3.601 5.185-9.653 6.43-17.079 4.627-.586-.142-1.231-.354-1.796-.555-.725-.259-1.439-.553-2.134-.886-1.318-.634-2.575-1.402-3.741-2.282-6.645-5.042-10.772-14.659-6.436-22.492"></path><path fill="#131B28" d="M66.359 96.295h-4.226c-.234 0-.467.188-.517.417l-1.5 6.94-1.5 6.94c-.049.229-.282.417-.516.417h-2.991c-2.959 0-2.617-2.047-2.011-4.851l.018-.085.066-.354.012-.066.135-.72.145-.771.154-.785.682-3.332.683-3.332c.047-.23-.107-.419-.341-.419h-4.337c-.234 0-.466.188-.514.418l-.933 4.424-.932 4.425-.002.006-.086.412c-1.074 4.903-.79 9.58 5.048 9.727l.17.003h9.163c.234 0 .467-.188.516-.417l1.976-9.289 1.976-9.29c.049-.23-.103-.417-.338-.418zM21.103 96.246h-4.64c-.235 0-.469.188-.521.416l-.44 1.942-.44 1.942c-.051.229.098.416.333.416h4.676c.235 0 .468-.188.518-.417l.425-1.941.425-1.941c.049-.229-.101-.417-.336-.417zM19.757 102.29h-4.677c-.234 0-.469.188-.521.416l-.657 2.91-.656 2.909-.183.834-.631 2.97-.63 2.971c-.049.229-.15.599-.225.821 0 0-.874 2.6-2.343 2.57l-.184-.004-1.271-.023h-.001c-.234-.003-.469.18-.524.407l-.485 2.039-.484 2.038c-.055.228.093.416.326.42.833.01 2.699.031 3.828.031 3.669 0 5.604-2.033 6.843-7.883l1.451-6.714 1.361-6.297c.049-.227-.103-.415-.337-.415zM105.874 100.716l-.194-.801-.191-.82-.097-.414c-.38-1.477-1.495-2.328-3.917-2.328l-3.77-.004-3.472-.005h-3.907c-.234 0-.466.188-.515.417l-.173.816-.204.964-.057.271-1.759 8.24-1.67 7.822c-.05.23-.066.512-.038.626.028.115.479.209.713.209h3.524c.235 0 .532-.042.66-.094s.317-.513.364-.742l.626-3.099.627-3.1.001-.005.084-.413.76-3.56.671-3.144c.05-.229.281-.416.515-.417l11.089-.005c.235.002.383-.185.33-.414zM120.149 93.476l-.854.003h-3.549c-.235 0-.536.159-.667.353l-7.849 11.498c-.132.194-.283.166-.335-.062l-.578-2.533c-.052-.229-.287-.416-.522-.416h-5.045c-.235 0-.374.184-.31.409l2.261 7.921c.064.226.069.596.011.824l-.985 3.833c-.059.228.085.413.32.413h4.987c.234 0 .474-.186.532-.413l.986-3.833c.058-.229.221-.567.363-.755l12.742-16.911c.142-.188.065-.341-.169-.339l-1.339.008zM80.063 103.395v-.004c-.029.254-.264.441-.499.441h-6.397c-.222 0-.334-.15-.301-.336l.006-.015-.004.002.003-.021.029-.109c.611-1.624 1.855-2.69 4.194-2.69 2.634-.001 3.148 1.285 2.969 2.732zm-1.877-7.384c-8.211 0-10.157 4.984-11.249 10.015-1.091 5.128-.998 9.921 7.5 9.921h1.03l.256-.001h.06l1.02-.003h.018c2.244-.009 4.495-.026 5.406-.033.233-.004.461-.191.509-.42l.344-1.681.067-.327.41-2.006c.047-.229-.106-.418-.341-.418h-7.639c-3.039 0-3.941-.807-3.608-3.181h12.211l-.001.001.008-.001c.194-.003.374-.137.445-.315l.029-.106-.001.001c1.813-6.839 1.293-11.445-6.474-11.446zM39.376 103.369l-.116.409v.001l-.922 3.268-.922 3.267c-.063.227-.308.411-.543.411h-4.88c-3.702 0-4.604-2.896-3.702-7.166.901-4.368 2.668-7.083 6.312-7.358 4.98-.376 5.976 3.126 4.773 7.168zm3.348 7.105s2.301-5.588 2.823-8.814c.713-4.319-1.45-10.585-9.804-10.585-8.306 0-11.914 5.981-13.29 12.484-1.376 6.55.427 12.293 8.686 12.246l6.516-.024 6.089-.022c.234-.002.474-.188.534-.414l1.061-4.046c.059-.228-.084-.414-.319-.416l-1.017-.006-1.017-.006c-.199-.001-.313-.131-.289-.302l.027-.095zM83.844 106.733c0 .155-.125.281-.28.281-.154 0-.28-.126-.28-.281 0-.154.125-.279.28-.279.155 0 .28.125.28.279z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress jquery">70%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#5B4282" d="M9.531 112.586h4.161c1.896 0 3.273.27 4.129.81.857.54 1.285 1.398 1.285 2.575 0 .799-.188 1.454-.563 1.966s-.874.82-1.496.924v.091c.848.189 1.459.543 1.834 1.061s.563 1.207.563 2.067c0 1.22-.44 2.171-1.322 2.854-.881.683-2.078 1.024-3.59 1.024h-5.001v-13.372zm2.835 5.296h1.646c.768 0 1.325-.119 1.669-.356.345-.238.517-.631.517-1.18 0-.512-.187-.879-.562-1.102s-.968-.334-1.779-.334h-1.491v2.972zm0 2.25v3.485h1.848c.78 0 1.356-.149 1.729-.448s.558-.756.558-1.372c0-1.109-.793-1.665-2.378-1.665h-1.757zM34.252 119.254c0 2.213-.549 3.915-1.646 5.104s-2.67 1.784-4.719 1.784-3.622-.595-4.719-1.784c-1.098-1.189-1.646-2.896-1.646-5.122s.55-3.925 1.651-5.099 2.678-1.761 4.733-1.761 3.626.592 4.715 1.774c1.087 1.183 1.631 2.885 1.631 5.104zm-9.758 0c0 1.494.283 2.619.851 3.375.567.756 1.414 1.134 2.542 1.134 2.262 0 3.393-1.503 3.393-4.509 0-3.012-1.125-4.518-3.375-4.518-1.128 0-1.979.379-2.552 1.139s-.859 1.885-.859 3.379zM49.161 119.254c0 2.213-.549 3.915-1.646 5.104s-2.67 1.784-4.719 1.784-3.622-.595-4.719-1.784c-1.098-1.189-1.646-2.896-1.646-5.122s.55-3.925 1.651-5.099 2.678-1.761 4.733-1.761 3.626.592 4.715 1.774c1.086 1.183 1.631 2.885 1.631 5.104zm-9.759 0c0 1.494.283 2.619.851 3.375.567.756 1.414 1.134 2.542 1.134 2.262 0 3.393-1.503 3.393-4.509 0-3.012-1.125-4.518-3.375-4.518-1.128 0-1.979.379-2.552 1.139s-.859 1.885-.859 3.379zM57.09 125.958h-2.835v-11.012h-3.631v-2.36h10.097v2.36h-3.631v11.012zM70.671 122.245c0 1.208-.434 2.159-1.303 2.854-.869.695-2.078 1.043-3.626 1.043-1.427 0-2.689-.269-3.786-.805v-2.634c.902.402 1.666.686 2.291.851s1.196.247 1.715.247c.622 0 1.099-.119 1.431-.356.333-.238.499-.591.499-1.061 0-.262-.073-.495-.219-.7-.146-.204-.361-.401-.645-.59s-.861-.491-1.733-.905c-.817-.384-1.43-.753-1.838-1.107-.409-.354-.735-.765-.979-1.234-.244-.47-.366-1.019-.366-1.646 0-1.183.401-2.113 1.203-2.79s1.91-1.015 3.325-1.015c.695 0 1.358.082 1.989.247.631.165 1.291.396 1.98.695l-.915 2.204c-.713-.292-1.303-.497-1.77-.613-.467-.116-.925-.174-1.376-.174-.537 0-.948.125-1.235.375-.287.25-.43.576-.43.979 0 .25.058.468.174.654.116.186.3.366.553.54.253.174.852.486 1.797.938 1.25.598 2.107 1.197 2.57 1.797s.694 1.334.694 2.206zM78.254 125.958h-2.835v-11.012h-3.631v-2.36h10.097v2.36h-3.631v11.012zM86.778 120.827v5.131h-2.835v-13.372h3.896c1.817 0 3.161.331 4.033.992.872.662 1.308 1.667 1.308 3.014 0 .787-.216 1.486-.649 2.099s-1.046 1.093-1.838 1.44c2.012 3.006 3.323 4.948 3.933 5.826h-3.146l-3.192-5.131h-1.51zm0-2.305h.915c.896 0 1.558-.149 1.985-.448s.64-.769.64-1.409c0-.634-.218-1.085-.654-1.354-.436-.268-1.111-.402-2.026-.402h-.86v3.613zM104.494 125.958l-.97-3.183h-4.875l-.97 3.183h-3.055l4.719-13.426h3.466l4.738 13.426h-3.053zm-1.647-5.561c-.896-2.884-1.401-4.515-1.514-4.893-.113-.378-.193-.677-.242-.896-.201.78-.777 2.71-1.729 5.789h3.485zM118.469 116.757c0 1.439-.45 2.54-1.349 3.301-.899.763-2.178 1.144-3.837 1.144h-1.216v4.756h-2.835v-13.372h4.271c1.622 0 2.855.349 3.7 1.047.844.699 1.266 1.74 1.266 3.124zm-6.402 2.122h.933c.872 0 1.524-.172 1.957-.517.433-.345.649-.846.649-1.504 0-.665-.182-1.156-.544-1.473-.363-.317-.932-.476-1.706-.476h-1.29v3.97zM73.951 56.759c-1.983-.653-4.838-.759-8.565-.759h-13.386v20h14.424c2.502 0 4.259-.249 5.271-.437 1.783-.318 3.274-.93 4.472-1.676 1.198-.744 2.183-1.869 2.955-3.293.771-1.424 1.158-3.087 1.158-4.951 0-2.184-.559-3.98-1.677-5.59-1.117-1.611-2.668-2.642-4.652-3.294zM71.895 48.147c1.97-.586 3.455-1.646 4.452-3.003.999-1.357 1.498-3.103 1.498-5.154 0-1.943-.466-3.675-1.398-5.154-.932-1.478-2.263-2.481-3.992-3.027-1.732-.544-4.7-.809-8.906-.809h-11.549v18h12.507c3.435 0 5.897-.399 7.388-.853zM117 16.126c0-7.802-6.325-14.126-14.127-14.126h-77.746c-7.802 0-14.127 6.324-14.127 14.126v77.748c0 7.802 6.325 14.126 14.127 14.126h77.746c7.802 0 14.127-6.324 14.127-14.126v-77.748zm-30.43 57.144c-1.157 2.356-2.589 4.173-4.292 5.451-1.704 1.277-3.841 2.446-6.41 3.098-2.569.653-5.717 1.181-9.444 1.181h-22.424v-59h22.065c4.473 0 8.059.62 10.761 1.804 2.703 1.185 4.818 3.021 6.351 5.483 1.53 2.463 2.296 5.046 2.296 7.735 0 2.502-.68 4.861-2.036 7.071-1.358 2.21-3.408 3.995-6.15 5.352 3.54 1.038 6.263 2.811 8.166 5.313 1.903 2.503 2.855 5.458 2.855 8.866-.001 2.742-.579 5.291-1.738 7.646z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress boot">70%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#fff" d="M13.699 108.645h8.047v17.421h-3.492v-14.026l-3.116.012h-.749c-1.74 0-2.707.073-2.9.218-1.039.282-1.917.882-2.634 1.8-.772 1.104-1.159 2.203-1.159 3.298 0 1.353.523 2.598 1.57 3.733.701.668 1.305 1.071 1.813 1.208.507.258 1.381.387 2.621.387h2.429v3.371h-2.911c-2.159 0-3.983-.568-5.474-1.704-1.079-.854-1.8-1.627-2.162-2.319-.902-1.434-1.354-2.9-1.354-4.398v-.507c0-2.094.785-4.015 2.356-5.763.95-.926 1.728-1.51 2.331-1.752.436-.242 1.035-.471 1.801-.688.684-.195 1.679-.291 2.983-.291zM39.324 112.124c.346.467.596.866.749 1.196.226.395.438.926.641 1.595.241.806.362 1.901.362 3.286v7.865h-3.492v-8.24c0-2.771-1.252-4.623-3.757-5.557-.572-.161-1.075-.246-1.511-.254-.435.008-.934.093-1.498.254-2.505.934-3.757 2.787-3.757 5.557v8.24h-3.504v-7.865c0-1.385.121-2.48.362-3.286.201-.668.415-1.2.641-1.595.153-.338.406-.737.761-1.196 1.877-2.304 4.209-3.456 6.995-3.456 2.788 0 5.123 1.152 7.008 3.456zM49.122 108.657c2.345 0 3.689.052 4.036.157.95.113 2.021.512 3.213 1.196.652.403 1.346 1.019 2.078 1.848 1.305 1.619 1.957 3.459 1.957 5.521 0 1.208-.233 2.348-.7 3.419-.918 2.086-2.429 3.592-4.53 4.519-.975.5-2.473.749-4.494.749h-7.406l-.387-.073v-3.31h8.167c.87 0 1.542-.077 2.018-.229 1.265-.427 2.19-1.063 2.778-1.909.717-1.071 1.075-2.114 1.075-3.129 0-1.023-.31-2.03-.93-3.021-.387-.572-.813-1.006-1.28-1.305-.854-.701-2.074-1.051-3.661-1.051h-8.167v-3.383h6.233zM62.219 108.657h11.188c1.973 0 3.52.592 4.639 1.776.5.467.846.918 1.039 1.353.436.87.652 1.72.652 2.549v.495c0 1.273-.552 2.517-1.654 3.733-.709.676-1.354 1.111-1.934 1.305 1.466 1.563 2.199 3.628 2.199 6.198h-3.516v-.266c0-1.901-.77-3.411-2.308-4.531-.878-.62-2.026-.93-3.443-.93h-6.862v-3.359h11.405c1.248 0 2.094-.616 2.537-1.848.048-.25.08-.459.096-.628 0-.685-.285-1.305-.857-1.86-.491-.387-1.015-.58-1.57-.58 0-.032-.169-.048-.508-.048h-11.103v-3.359zM90.26 108.668h.12c2.675 0 4.958 1.096 6.851 3.286 1.225 1.643 1.836 3.431 1.836 5.364v.121c0 2.674-1.119 4.945-3.358 6.813-1.627 1.208-3.411 1.813-5.352 1.813h-.121c-2.658 0-4.934-1.087-6.826-3.262-.66-.926-1.123-1.776-1.39-2.549-.313-.967-.471-1.913-.471-2.839v-.121c0-2.626 1.083-4.873 3.25-6.742 1.466-1.047 2.803-1.635 4.011-1.764.37-.079.853-.12 1.45-.12zm-5.232 8.675c0 1.514.592 2.843 1.776 3.987 1.055.902 2.162 1.353 3.322 1.353h.338c.935 0 1.885-.318 2.852-.955.998-.733 1.675-1.667 2.029-2.803.112-.298.193-.81.241-1.534 0-1.482-.575-2.791-1.728-3.927-1.079-.958-2.263-1.438-3.552-1.438-1.506 0-2.843.628-4.011 1.885-.491.645-.802 1.192-.931 1.643-.223.629-.336 1.225-.336 1.789zM100.879 108.668h3.491v17.397h-3.491v-17.397zM112.489 108.657c2.344 0 3.688.052 4.035.157.95.113 2.021.512 3.213 1.196.652.403 1.346 1.019 2.078 1.848 1.305 1.619 1.957 3.459 1.957 5.521 0 1.208-.233 2.348-.7 3.419-.918 2.086-2.429 3.592-4.53 4.519-.975.5-2.473.749-4.494.749h-7.406l-.387-.073v-3.31h8.167c.87 0 1.542-.077 2.018-.229 1.265-.427 2.19-1.063 2.778-1.909.717-1.071 1.075-2.114 1.075-3.129 0-1.023-.31-2.03-.93-3.021-.387-.572-.813-1.006-1.28-1.305-.854-.701-2.074-1.051-3.661-1.051h-8.167v-3.383h6.234zM29.19 76.835c-4.484.002-8.128-3.646-8.129-8.13l-.001-24.891c-.001-4.479 3.642-8.127 8.121-8.128 2.178-.002 4.216.843 5.753 2.377 1.537 1.535 2.383 3.578 2.384 5.749l-.002 24.892c.005 2.169-.837 4.21-2.373 5.744-1.534 1.54-3.578 2.387-5.753 2.387M29.184 37.871c-3.282-.002-5.942 2.665-5.943 5.944l.004 24.889c.001 3.291 2.666 5.946 5.944 5.95 3.285-.004 5.946-2.66 5.943-5.949v-24.893c-.002-3.279-2.665-5.943-5.948-5.941"></path><path fill="#fff" d="M92.942 39.104l-2.186-.001-53.54.007-2.186.001-.001-2.186c-.005-8.972 4.883-17.316 12.889-22.246l-3.112-5.682c-.38-.666-.476-1.509-.255-2.28.226-.771.757-1.434 1.469-1.813.412-.233.916-.363 1.424-.362 1.103 0 2.113.599 2.645 1.565l3.258 5.935c3.371-1.237 6.931-1.867 10.607-1.866 3.729-.001 7.307.629 10.691 1.871l3.253-5.944c.524-.965 1.541-1.565 2.642-1.564.496-.001.99.12 1.426.354.732.402 1.242 1.042 1.467 1.819.225.772.134 1.586-.258 2.293l-3.11 5.678c7.993 4.94 12.875 13.279 12.874 22.235l.003 2.186zM77.115 15.52l4.148-7.576c.221-.396.076-.903-.324-1.122-.405-.219-.906-.069-1.12.328l-4.191 7.652c-3.525-1.565-7.473-2.446-11.646-2.442-4.163-.004-8.104.873-11.619 2.434l-4.194-7.635c-.216-.402-.721-.549-1.117-.328-.402.215-.55.721-.327 1.117l4.149 7.569c-8.154 4.206-13.663 12.214-13.658 21.409l53.539-.006c.002-9.193-5.497-17.184-13.64-21.4m-25.309 11.707c-1.231-.002-2.237-1.005-2.237-2.243 0-1.234 1.004-2.247 2.24-2.247 1.24-.001 2.245 1.013 2.246 2.247 0 1.236-1.006 2.242-2.249 2.243m24.379-.005c-1.238.001-2.248-1-2.245-2.244 0-1.231 1.006-2.245 2.245-2.25 1.231.004 2.241 1.018 2.24 2.25.001 1.24-1.004 2.245-2.24 2.244M54.049 105.205c-4.48-.001-8.126-3.645-8.127-8.128l-.002-10.987-2.136.002c-2.282.001-4.422-.885-6.031-2.496-1.612-1.608-2.5-3.751-2.497-6.034l-.008-38.566v-2.188h2.186l53.138-.008 2.187-.001v2.186l.006 38.571c0 4.704-3.826 8.532-8.529 8.531l-2.148.001.002 10.981c0 4.481-3.646 8.129-8.124 8.129-2.171.004-4.209-.839-5.748-2.378-1.539-1.536-2.387-3.576-2.386-5.746v-10.986h-3.653v10.985c-.002 4.482-3.648 8.133-8.13 8.132"></path><path fill="#fff" d="M37.444 77.563c-.003 3.512 2.832 6.347 6.341 6.346h4.318l.005 13.169c-.001 3.279 2.663 5.944 5.94 5.945 3.283 0 5.944-2.668 5.941-5.95v-13.165l8.024-.002-.001 13.168c.004 3.28 2.671 5.948 5.946 5.942 3.284.002 5.946-2.666 5.945-5.946l-.004-13.166 4.334-.001c3.498.001 6.343-2.84 6.343-6.346l-.007-38.573-53.136.009.011 38.57zM98.816 76.825c-4.483.001-8.13-3.642-8.129-8.126l-.006-24.89c.001-4.484 3.642-8.131 8.122-8.131 4.486-.001 8.135 3.646 8.135 8.128l.002 24.889c.001 4.481-3.642 8.131-8.124 8.13M98.809 37.863c-3.282-.003-5.941 2.662-5.941 5.945l.002 24.889c.002 3.287 2.661 5.946 5.945 5.943 3.282 0 5.939-2.657 5.941-5.946l-.006-24.889c-.001-3.282-2.658-5.943-5.941-5.942"></path><path fill="#A4C439" d="M29.184 37.871c-3.282-.002-5.942 2.665-5.943 5.944l.004 24.889c.001 3.291 2.663 5.946 5.945 5.946 3.284 0 5.945-2.656 5.942-5.945v-24.893c-.002-3.279-2.665-5.943-5.948-5.941m47.931-22.351l4.148-7.576c.221-.396.075-.9-.325-1.124-.405-.214-.905-.069-1.119.33l-4.19 7.655c-3.526-1.569-7.471-2.449-11.646-2.444-4.163-.004-8.107.873-11.619 2.434l-4.194-7.635c-.218-.402-.72-.548-1.116-.329-.403.217-.551.722-.328 1.117l4.149 7.57c-8.154 4.206-13.663 12.214-13.658 21.409l53.539-.006c.001-9.194-5.498-17.185-13.641-21.401m-25.309 11.707c-1.231-.002-2.237-1.005-2.237-2.243 0-1.234 1.003-2.248 2.24-2.247 1.24-.001 2.245 1.013 2.246 2.247 0 1.236-1.006 2.242-2.249 2.243m24.379-.005c-1.238.001-2.245-1.002-2.245-2.244.005-1.23 1.006-2.245 2.245-2.25 1.231.004 2.241 1.018 2.24 2.25.003 1.24-1.004 2.245-2.24 2.244m-38.75 11.771l.008 38.572c-.002 3.509 2.836 6.341 6.342 6.341l4.318.001.005 13.169c-.001 3.279 2.665 5.945 5.94 5.945 3.283 0 5.944-2.668 5.945-5.949l-.003-13.164 8.024-.002.003 13.168c0 3.277 2.667 5.948 5.942 5.942 3.284.002 5.946-2.666 5.945-5.946l-.004-13.166 4.334-.003c3.498.001 6.343-2.834 6.345-6.344l-.007-38.572-53.137.008zm67.317 4.813c0-3.283-2.66-5.944-5.943-5.943-3.282-.003-5.941 2.662-5.941 5.945l.005 24.89c-.001 3.286 2.658 5.942 5.942 5.942 3.282 0 5.941-2.657 5.941-5.946l-.004-24.888z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress android">65%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#00618A" d="M2.001 90.458h4.108v-16.223l6.36 14.143c.75 1.712 1.777 2.317 3.792 2.317s3.003-.605 3.753-2.317l6.36-14.143v16.223h4.108v-16.196c0-1.58-.632-2.345-1.936-2.739-3.121-.974-5.215-.131-6.163 1.976l-6.241 13.958-6.043-13.959c-.909-2.106-3.042-2.949-6.163-1.976-1.304.395-1.936 1.159-1.936 2.739v16.197zM33.899 77.252h4.107v8.938c-.038.485.156 1.625 2.406 1.661 1.148.018 8.862 0 8.934 0v-10.643h4.117c.019 0-.004 14.514-.004 14.574.022 3.58-4.441 4.357-6.499 4.417h-12.972v-2.764c.022 0 12.963.003 12.995-.001 2.645-.279 2.332-1.593 2.331-2.035v-1.078h-8.731c-4.062-.037-6.65-1.81-6.683-3.85-.002-.187.089-9.129-.001-9.219z"></path><path fill="#E48E00" d="M56.63 90.458h11.812c1.383 0 2.727-.289 3.793-.789 1.777-.816 2.646-1.922 2.646-3.372v-3.002c0-1.185-.987-2.292-2.923-3.028-1.027-.396-2.292-.605-3.517-.605h-4.978c-1.659 0-2.449-.5-2.646-1.606-.039-.132-.039-.237-.039-.369v-1.87c0-.105 0-.211.039-.342.197-.843.632-1.08 2.094-1.212l.395-.026h11.733v-2.738h-11.535c-1.659 0-2.528.105-3.318.342-2.449.764-3.517 1.975-3.517 4.082v2.396c0 1.844 2.095 3.424 5.61 3.793.396.025.79.053 1.185.053h4.267c.158 0 .316 0 .435.025 1.304.105 1.856.343 2.252.816.237.237.315.475.315.737v2.397c0 .289-.197.658-.592.974-.355.316-.948.527-1.738.58l-.435.026h-11.338v2.738zM100.511 85.692c0 2.817 2.094 4.397 6.32 4.714.395.026.79.052 1.185.052h10.706v-2.738h-10.784c-2.41 0-3.318-.606-3.318-2.055v-14.168h-4.108v14.195zM77.503 85.834v-9.765c0-2.48 1.742-3.985 5.186-4.46.356-.053.753-.079 1.108-.079h7.799c.396 0 .752.026 1.147.079 3.444.475 5.187 1.979 5.187 4.46v9.765c0 2.014-.74 3.09-2.445 3.792l4.048 3.653h-4.771l-3.274-2.956-3.296.209h-4.395c-.752 0-1.543-.105-2.414-.343-2.613-.712-3.88-2.085-3.88-4.355zm4.434-.237c0 .132.039.265.079.423.237 1.135 1.307 1.768 2.929 1.768h3.732l-3.428-3.095h4.771l2.989 2.7c.552-.295.914-.743 1.041-1.32.039-.132.039-.264.039-.396v-9.368c0-.105 0-.238-.039-.37-.238-1.056-1.307-1.662-2.89-1.662h-6.216c-1.82 0-3.008.792-3.008 2.032v9.288z"></path><path fill="#00618A" d="M122.336 66.952c-2.525-.069-4.454.166-6.104.861-.469.198-1.216.203-1.292.79.257.271.297.674.502 1.006.394.637 1.059 1.491 1.652 1.938.647.489 1.315 1.013 2.011 1.437 1.235.754 2.615 1.184 3.806 1.938.701.446 1.397 1.006 2.082 1.509.339.247.565.634 1.006.789v-.071c-.231-.294-.291-.698-.503-1.006l-.934-.934c-.913-1.212-2.071-2.275-3.304-3.159-.982-.705-3.18-1.658-3.59-2.801l-.072-.071c.696-.079 1.512-.331 2.154-.503 1.08-.29 2.045-.215 3.16-.503l1.508-.432v-.286c-.563-.578-.966-1.344-1.58-1.867-1.607-1.369-3.363-2.737-5.17-3.879-1.002-.632-2.241-1.043-3.304-1.579-.356-.181-.984-.274-1.221-.575-.559-.711-.862-1.612-1.293-2.441-.9-1.735-1.786-3.631-2.585-5.458-.544-1.245-.9-2.473-1.579-3.59-3.261-5.361-6.771-8.597-12.208-11.777-1.157-.677-2.55-.943-4.021-1.292l-2.37-.144c-.481-.201-.983-.791-1.436-1.077-1.802-1.138-6.422-3.613-7.756-.358-.842 2.054 1.26 4.058 2.011 5.099.527.73 1.203 1.548 1.58 2.369.248.54.29 1.081.503 1.652.521 1.406.976 2.937 1.651 4.236.341.658.718 1.351 1.149 1.939.264.36.718.52.789 1.077-.443.62-.469 1.584-.718 2.369-1.122 3.539-.699 7.938.934 10.557.501.805 1.681 2.529 3.303 1.867 1.419-.578 1.103-2.369 1.509-3.95.092-.357.035-.621.215-.861v.072l1.293 2.585c.957 1.541 2.654 3.15 4.093 4.237.746.563 1.334 1.538 2.298 1.867v-.073h-.071c-.188-.291-.479-.411-.719-.646-.562-.551-1.187-1.235-1.651-1.867-1.309-1.776-2.465-3.721-3.519-5.745-.503-.966-.94-2.032-1.364-3.016-.164-.379-.162-.953-.502-1.148-.466.72-1.149 1.303-1.509 2.154-.574 1.36-.648 3.019-.861 4.739l-.144.071c-1.001-.241-1.352-1.271-1.724-2.154-.94-2.233-1.115-5.83-.287-8.401.214-.666 1.181-2.761.789-3.376-.187-.613-.804-.967-1.148-1.437-.427-.579-.854-1.341-1.149-2.011-.77-1.741-1.129-3.696-1.938-5.457-.388-.842-1.042-1.693-1.58-2.441-.595-.83-1.262-1.44-1.724-2.442-.164-.356-.387-.927-.144-1.293.077-.247.188-.35.432-.431.416-.321 1.576.107 2.01.287 1.152.479 2.113.934 3.089 1.58.468.311.941.911 1.508 1.077h.646c1.011.232 2.144.071 3.088.358 1.67.508 3.166 1.297 4.524 2.155 4.139 2.614 7.522 6.334 9.838 10.772.372.715.534 1.396.861 2.154.662 1.528 1.496 3.101 2.154 4.596.657 1.491 1.298 2.996 2.227 4.237.488.652 2.374 1.002 3.231 1.364.601.254 1.585.519 2.154.861 1.087.656 2.141 1.437 3.16 2.155.509.362 2.076 1.149 2.154 1.798zM90.237 39.593c-.526-.01-.899.058-1.293.144v.071h.072c.251.517.694.849 1.005 1.293l.719 1.508.071-.071c.445-.313.648-.814.646-1.58-.179-.188-.205-.423-.359-.646-.204-.3-.602-.468-.861-.719z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress mysql">75%</div></div>
                    </div>

                    <div class="habilidad show2 hidden">
                        <div class="habilidadIcon">
                            <svg viewBox="0 0 128 128">
                                <path fill="#0074BD" d="M52.581 67.817s-3.284 1.911 2.341 2.557c6.814.778 10.297.666 17.805-.753 0 0 1.979 1.237 4.735 2.309-16.836 7.213-38.104-.418-24.881-4.113zM50.522 58.402s-3.684 2.729 1.945 3.311c7.28.751 13.027.813 22.979-1.103 0 0 1.373 1.396 3.536 2.157-20.352 5.954-43.021.469-28.46-4.365z"></path><path fill="#EA2D2E" d="M67.865 42.431c4.151 4.778-1.088 9.074-1.088 9.074s10.533-5.437 5.696-12.248c-4.519-6.349-7.982-9.502 10.771-20.378.001 0-29.438 7.35-15.379 23.552z"></path><path fill="#0074BD" d="M90.132 74.781s2.432 2.005-2.678 3.555c-9.716 2.943-40.444 3.831-48.979.117-3.066-1.335 2.687-3.187 4.496-3.576 1.887-.409 2.965-.334 2.965-.334-3.412-2.403-22.055 4.719-9.469 6.762 34.324 5.563 62.567-2.506 53.665-6.524zM54.162 48.647s-15.629 3.713-5.534 5.063c4.264.57 12.758.439 20.676-.225 6.469-.543 12.961-1.704 12.961-1.704s-2.279.978-3.93 2.104c-15.874 4.175-46.533 2.23-37.706-2.038 7.463-3.611 13.533-3.2 13.533-3.2zM82.2 64.317c16.135-8.382 8.674-16.438 3.467-15.353-1.273.266-1.845.496-1.845.496s.475-.744 1.378-1.063c10.302-3.62 18.223 10.681-3.322 16.345 0 0 .247-.224.322-.425z"></path><path fill="#EA2D2E" d="M72.474 1.313s8.935 8.939-8.476 22.682c-13.962 11.027-3.184 17.313-.006 24.498-8.15-7.354-14.128-13.828-10.118-19.852 5.889-8.842 22.204-13.131 18.6-27.328z"></path><path fill="#0074BD" d="M55.749 87.039c15.484.99 39.269-.551 39.832-7.878 0 0-1.082 2.777-12.799 4.981-13.218 2.488-29.523 2.199-39.191.603 0 0 1.98 1.64 12.158 2.294z"></path><path fill="#EA2D2E" d="M94.866 100.181h-.472v-.264h1.27v.264h-.47v1.317h-.329l.001-1.317zm2.535.066h-.006l-.468 1.251h-.216l-.465-1.251h-.005v1.251h-.312v-1.581h.457l.431 1.119.432-1.119h.454v1.581h-.302v-1.251zM53.211 115.037c-1.46 1.266-3.004 1.978-4.391 1.978-1.974 0-3.045-1.186-3.045-3.085 0-2.055 1.146-3.56 5.738-3.56h1.697v4.667h.001zm4.031 4.548v-14.077c0-3.599-2.053-5.973-6.997-5.973-2.886 0-5.416.714-7.473 1.622l.592 2.493c1.62-.595 3.715-1.147 5.771-1.147 2.85 0 4.075 1.147 4.075 3.521v1.779h-1.424c-6.921 0-10.044 2.685-10.044 6.723 0 3.479 2.058 5.456 5.933 5.456 2.49 0 4.351-1.028 6.088-2.533l.316 2.137h3.163v-.001zM70.694 119.585h-5.027l-6.051-19.689h4.391l3.756 12.099.835 3.635c1.896-5.258 3.24-10.596 3.912-15.733h4.271c-1.143 6.481-3.203 13.598-6.087 19.688zM89.982 115.037c-1.465 1.266-3.01 1.978-4.392 1.978-1.976 0-3.046-1.186-3.046-3.085 0-2.055 1.149-3.56 5.736-3.56h1.701v4.667h.001zm4.033 4.548v-14.077c0-3.599-2.059-5.973-6.999-5.973-2.889 0-5.418.714-7.475 1.622l.593 2.493c1.62-.595 3.718-1.147 5.774-1.147 2.846 0 4.074 1.147 4.074 3.521v1.779h-1.424c-6.923 0-10.045 2.685-10.045 6.723 0 3.479 2.056 5.456 5.93 5.456 2.491 0 4.349-1.028 6.091-2.533l.318 2.137h3.163v-.001zM37.322 122.931c-1.147 1.679-3.005 3.008-5.037 3.757l-1.989-2.345c1.547-.794 2.872-2.075 3.489-3.269.532-1.063.753-2.43.753-5.701v-22.482h4.284v22.173c0 4.375-.348 6.144-1.5 7.867z"></path>
                            </svg>
                        </div>
                        <div class="habilidadPorcentaje"><div class="progress java">80%</div></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="square" id="third">
            <div class="squareTitleRight">
                <span class="espanol">Mi Trabajo</span>
                <span class="ingles">My work</span>
                <span class="squareSubTitle">SQLJudge</span></div>
            <div class="squareText trabajo show3 hidden">
                <p>
                <p class="espanol">
                    SQLJudge es el primer juez SQL abierto para todo el mundo en el cual un sin fin de usuarios podrán resolver problemas que serán evaluados por el juez. Este proyecto pretende ofrecer una nueva experiencia de aprendizaje para el alumno.
                    Este proyecto ya se encuentra implementado en algunas escuelas del estado de Guanajuato.</p>
                <p class="ingles">
                    Web designer of SQLJudge page, which is the first SQL judge open to everyone in which endless users can solve problems that will be evaluated by an automatic judge. This project seeks to provide a new learning experience to students.
                    This project is already implemented in some schools in Guanajuato state.
                </p>
                    <p></p>
                    <p></p>
                    <p>Link: <a href="http://sicenet.itsur.edu.mx:8088/_public/views/inicio.aspx">SQLJudge</a></p>
                </p>
            </div>
            <div class="squareImage show3 hidden"><img class="image sqljudge" src="https://s20.postimg.cc/gluva95ml/computer.png"></div>
        </div>

        <div class="square" id="fourth">
            <div class="squareTitle"><span class="squareSubTitle">PS4 Interface</span></div>
            <div class="squareImage show4 hidden"><img class="image yo ps4" src="http://graphiccave.com/wp-content/uploads/2015/04/PS4-Controller-PNG-Graphic-Cave.png"></div>
            <div class="squareText trabajo show4 hidden">
                <p>
                    <p class="espanol">PS4 Interface es un proyecto independiente que asemeja la interfaz gráfica de la consola de sony “playstation 4” en una plataforma web.</p>
                    <p class="ingles">PS4 Interface is an independent project that resembles the GUI console sony "playstation 4" on a web platform.</p>
                    <p></p>
                    <p>Link: <a href="https://pixmy.github.io/ps4">PS4 Interface</a></p>
                </p>
            </div>
        </div>


        <div class="square" id="fifth">
            <div class="squareTitleRight"><span class="squareSubTitle">SSRA</span></div>
            <div class="squareText trabajo show5 hidden">
                <p><p class="espanol">
                    SSRA es un programa que al partir de un número control dado de un alumno este muestra su avance de todos los semestres que ha cursado hasta la fecha desde cuantas materias debe hasta cuantos semestres le hacen falta para terminar.</p>
                    <p class="ingles">Developer of the project that aims to create academy history document of students from ITSUR institution, providing better information for advisers and teachers of a specific student.
This project is part of the internal software of the school.
</p>
                    <p></p>
                    <p></p>
                    <p class="espanol">Link: No disponible, programa privado.</p>
                    <p class="ingles">Link: Not available, private software</p>
                </p>
            </div>
            <div class="squareImage show5 hidden"><img class="image school" src="https://s20.postimg.cc/xg4ntkywt/school.png"></div>
        </div>

        <div class="firma">
        <div class="squareSubTitle fir espanol">Firma:</div>
        <div class="squareSubTitle fir ingles">Signature:</div>

            <svg
               xmlns:dc="http://purl.org/dc/elements/1.1/"
               xmlns:cc="http://creativecommons.org/ns#"
               xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
               xmlns:svg="http://www.w3.org/2000/svg"
               xmlns="http://www.w3.org/2000/svg"
               xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
               xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
               width="75mm"
               height="77mm"
               viewBox="0 0 265.74804 272.83465"
               id="svg4166"
               version="1.1"
               inkscape:version="0.91 r13725"
               sodipodi:docname="arturo.svg">
              <defs
                 id="defs4168" />
              <sodipodi:namedview
                 id="base"
                 pagecolor="#ffffff"
                 bordercolor="#666666"
                 borderopacity="1.0"
                 inkscape:pageopacity="0.0"
                 inkscape:pageshadow="2"
                 inkscape:zoom="0.98994949"
                 inkscape:cx="237.21263"
                 inkscape:cy="204.15392"
                 inkscape:document-units="px"
                 inkscape:current-layer="layer1"
                 showgrid="false"
                 inkscape:window-width="1366"
                 inkscape:window-height="715"
                 inkscape:window-x="-8"
                 inkscape:window-y="-8"
                 inkscape:window-maximized="1" />
              <metadata
                 id="metadata4171">
                <rdf:RDF>
                  <cc:Work
                     rdf:about="">
                    <dc:format>image/svg+xml</dc:format>
                    <dc:type
                       rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                    <dc:title></dc:title>
                  </cc:Work>
                </rdf:RDF>
              </metadata>
              <g
                 inkscape:label="Layer 1"
                 inkscape:groupmode="layer"
                 id="layer1"
                 transform="translate(0,-779.52757)">
                <path
                   style="fill:none;fill-opacity:1;stroke:#2ecc7f;stroke-opacity:0.94117647"
                   id="path4839"
                   d="m 233.74873,905.53196 c 0.4138,-11.24323 -5.27376,-21.90435 -9.84448,-31.81696 -5.01142,-9.43088 -10.40374,-18.87253 -17.37404,-27.03383 -2.96646,-3.47335 -8.85075,-9.4106 -13.24947,-11.48088 -2.16128,-1.01721 -4.64794,-1.10459 -6.97191,-1.65689 -2.32041,0.41248 -5.05506,-0.14853 -6.96125,1.23745 -1.06647,0.77543 4.05857,-0.24436 3.81352,1.05126 -1.05473,5.57664 -4.63465,10.36174 -6.95197,15.54262 -1.53555,6.79564 -3.64875,13.48613 -4.60665,20.38693 -2.82147,20.32599 -1.23562,27.89842 0.1396,48.38529 2.53437,20.08531 6.98063,39.94002 14.0268,58.94132 3.12964,8.43963 6.0952,15.03392 11.04316,22.41853 1.60036,2.3885 3.56801,4.5093 5.35201,6.7639 3.61414,3.2539 7.82795,8.0497 13.37859,7.1521 1.33007,-0.2151 4.87968,-2.2679 3.7187,-1.5842 -11.38984,6.708 -9.93151,5.9705 -5.13228,0.6843 5.50424,-7.8719 8.37529,-17.04506 10.06631,-26.40186 0.30477,-2.00384 0.54707,-4.0208 0.59321,-6.04892 0.006,-0.27932 0.003,-0.55898 -0.009,-0.83811 -0.004,-0.10333 -0.13335,-0.26299 -0.0401,-0.30767 4.41833,-2.11666 8.91979,-4.05523 13.37968,-6.08284 0.0136,4.12153 -0.90655,8.02678 -2.15186,11.92964 -1.43719,3.49182 -1.85043,5.08738 -4.38383,8.26485 -9.55755,11.98741 -25.13656,18.39051 -38.16444,25.27831 -7.28719,2.9238 -14.77164,5.329 -22.36707,7.3088 -2.63203,0.6861 -6.49667,1.7699 -9.36047,1.6325 -1.15782,-0.056 -2.26223,-0.5069 -3.39334,-0.7603 -0.93358,-1.0621 -2.12194,-1.9459 -2.80074,-3.1865 -2.11635,-3.8678 -3.73788,-12.0927 -4.60416,-15.7055 -0.9941,-4.1458 -1.9275,-8.3063 -2.94995,-12.44523 -5.5176,-22.33566 -4.75385,-18.72854 -11.82153,-43.46683 -13.63862,-43.79448 -28.49382,-87.21796 -44.551403,-130.1845 -2.35258,-5.82379 -4.39694,-11.76851 -6.73155,-17.59949 -0.6297,-1.57277 -1.17678,-3.19137 -1.99732,-4.67355 -0.31126,-0.56222 -1.90477,-1.0486 -1.35125,-1.3751 14.12735,-8.33307 12.64945,-8.86358 12.40789,-0.32062 0.53539,21.92158 2.95759,43.74793 3.766206,65.65389 0.60307,16.33737 0.27991,20.99717 -0.0573,37.09455 -0.4449,18.95513 -2.815256,37.77469 -6.417086,56.3671 -0.74384,3.7046 -2.01448,7.26242 -3.23292,10.82845 -0.88472,2.33751 -1.06917,4.83985 -1.63536,7.25445 -1.80607,7.77942 -2.63547,5.86685 -15.3796,11.21955 -0.82943,0.34837 -1.77332,-0.30428 -2.65998,-0.45643 -13.63501,-3.77913 -27.40812,-7.0268 -41.16974,-10.30672 -3.73405,-1.10769 -7.767231,-1.71222 -11.266891,-3.53695 -1.04535,-0.54505 -2.64646,-1.56807 -2.89857,-2.92041 -0.16734,-0.89764 0.15447,-1.81967 0.23171,-2.72951 1.59874,-2.06329 3.00287,-4.29328 4.79621,-6.18987 4.393391,-4.64635 20.085691,-18.76941 24.117151,-22.31972 15.51138,-13.66012 31.34622,-26.96639 46.9623,-40.50765 15.267003,-13.46985 30.572263,-26.92765 44.875323,-41.43029 0,0 12.83185,-5.30384 12.83185,-5.30384 l 0,0 c -15.56784,14.9317 -32.10122,28.79642 -48.370937,42.94809 -11.987446,10.25489 -19.322406,16.48181 -31.309896,26.93783 -12.62598,11.01294 -25.57504,21.98502 -36.85937,34.42242 -1.43749,1.58438 -2.62829,3.37619 -3.94244,5.06429 -0.19515,0.57773 -0.59592,1.12349 -0.58544,1.7332 0.0176,1.0266 1.57025,1.94826 2.18478,2.30089 3.21427,1.84443 6.91324,2.69336 10.39139,3.84664 13.7687,3.80748 27.64311,7.45486 41.78288,9.58487 7.18748,-0.0585 3.19399,-0.4939 -8.63249,7.03244 -0.23413,0.14899 0.56554,-0.13881 0.76246,-0.33437 0.63819,-0.63378 0.30995,-1.88532 0.70419,-2.6283 0.6815,-2.44556 0.95071,-4.95888 1.65904,-7.40244 1.30117,-3.68822 2.76933,-7.31164 3.99772,-11.02684 5.1923,-18.85042 8.68685,-38.12838 9.66709,-57.69256 0.21498,-6.01954 0.58685,-12.03553 0.64495,-18.05863 0.26833,-27.81885 -2.36233,-55.69278 -7.28735,-83.05579 -1.5324,-9.36326 -2.62546,-6.54114 12.56414,-13.43511 0.67114,-0.30461 0.60103,1.34978 0.81867,2.05394 1.30603,4.22572 2.311246,8.5388 3.515216,12.79472 1.00805,3.56334 2.048447,7.11744 3.072667,10.67615 5.35082,18.10218 10.70766,36.20034 16.44178,54.18626 8.25247,25.88514 17.03044,51.59892 25.65917,77.35965 2.88201,8.07287 11.60073,32.24001 14.76195,41.91867 2.69483,8.25073 3.63467,13.3199 6.67638,21.1365 0.71205,1.8298 1.45935,3.6726 2.52458,5.322 0.61651,0.9546 1.63074,1.5831 2.4461,2.3746 0.99362,0.1794 1.97146,0.5142 2.98086,0.5382 2.6073,0.062 6.33006,-0.8603 8.72631,-1.447 7.38711,-1.8087 14.65157,-4.1087 21.66856,-7.0555 -0.89059,0.7918 -3.76633,2.8463 -2.67177,2.3752 6.19013,-2.6641 13.89143,-8.8316 18.18063,-14.1144 2.39004,-2.94373 2.76197,-4.45374 4.0948,-7.73079 1.1112,-3.66767 1.99938,-7.42751 1.72138,-11.29024 14.87388,-8.25707 14.01549,-12.38164 13.25172,-6.11417 -0.26065,2.13894 -0.4856,4.28455 -0.92685,6.39686 -2.053,9.52115 -5.06631,18.87494 -10.18671,27.23064 -6.35256,8.2606 -3.21852,5.1992 -18.75429,13.3831 -2.64522,1.3934 -5.60957,1.3432 -8.29539,0.1207 -3.64744,-1.6603 -6.14704,-4.9588 -8.79982,-7.7526 -1.6297,-2.4108 -3.44303,-4.7073 -4.88911,-7.2326 -4.47507,-7.81474 -7.07714,-14.68147 -9.79272,-23.38642 -6.09422,-19.53535 -10.03808,-39.72825 -12.43869,-60.03061 -0.64995,-8.2119 -1.74742,-16.4006 -1.94985,-24.6357 -0.38311,-15.58576 0.57961,-28.58348 4.35522,-43.6204 1.31681,-5.24441 1.89924,-11.13175 5.3092,-15.32818 11.65762,-14.34635 13.50571,-13.29177 25.63387,-14.59765 2.34693,0.73426 4.87716,1.03405 7.04078,2.2028 2.42164,1.30812 4.47488,3.23024 6.48924,5.10585 5.39416,5.02261 8.38546,9.28865 12.56023,15.38997 5.8727,8.58284 6.34875,9.82113 11.49092,18.78615 1.49108,2.99966 3.0076,5.98681 4.47326,8.99897 3.41038,7.00892 7.23984,14.29539 7.76366,22.22948 0,0 -13.33516,6.7946 -13.33516,6.7946 z"
                   inkscape:connector-curvature="0" />
              </g>
            </svg>
        </div>


        <div class="square" id="comments">
             <div class="squareTitle">
                <span class="espanol">Comentarios</span>
                <span class="ingles">Comments</span>
                <span class="squareSubTitle ingles">What people say about me</span>
                <span class="squareSubTitle espanol">Lo que dicen de mi</span>
            </div>
            <div class="squareImage"><img class="image comentario" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/bubble-icon.png"></div>
            <div class="squareText">
                <script>
                    var idcomments_acct = '086f2496d8331781071cf1b7c1d68977';
                    var idcomments_post_id;
                    var idcomments_post_url;
                </script>
                <span id="IDCommentsPostTitle" style="display:none"></span>
                <script type='text/javascript' src='https://www.intensedebate.com/js/genericCommentWrapperV2.js'></script>
            </div>
        </div>

    </div>
</body>


</html>
!

CSS 

              
                body{
	margin:0;
	padding: 0;
}



.cssa {
position:fixed; 
top:140px; 
right:0px; 
z-index:99999; 
}

.cssa a {
width:60px;
height:40px;
text-indent:-9999px;
display:block;
background:url('http://www.cssawds.com/ribbons/brand-award-right.png') no-repeat;
}



#IDCNavList{
	display: none !important;
}

#IDCommentsHeadLogin{
	display: none !important;
}

.idc-head_tools-share{
	display: none !important;
}



#comments a{
	color: #4CAF50;
	font-weight: normal !important;
}

.idc-r{
	background: url("");
}

#comments{
	color: #2d2d2d;
	background-color: #fff;
	font-family: 'Raleway', sans-serif;
}

.toggle{
	position: fixed;
	bottom: 5%;
	left: 2%;
	z-index: 1;
	font-size: calc(1em + 1vmin);
}

.toggle-on{
	font-family: arial !important;
	font-size: calc(.5em + .7vmin) !important;
	color: white !important;
	text-shadow: none !important;
}

.toggle-soft .toggle-on{
	background: #2ecc71 !important;
}

.toggle-soft .toggle-off{
	background: #3498db !important;
}

.toggle-off{
	font-family: arial !important;
	font-size: calc(.5em + .7vmin) !important;
	color: white !important;
	text-shadow: none !important;
}


.background{
  	background: linear-gradient(#2ecc71, #16a085); /* Standard syntax */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	transition: background .2s ease;
}

.body{
	position: fixed;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	overflow-y: scroll;
	transition: background .2s ease;
}

.hire{
	position: fixed;
	z-index: 999;
	background-color: #2ecc71;
	border-radius: 10px;
	padding: 1em;
	color: white;
	font-size: calc(0.75em + .5vmin);
  font-family: 'Raleway', sans-serif !important;
	right: 5%;
	top: 5%;
	cursor: pointer;
	box-shadow: 0px 3px 2px 1px rgba(45,45,45,.5);
	transition: 0.3s ease;
}

.correo{
	margin-bottom: .5em;
}

.hire i{
	margin-right: 5px;
}

.info{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.correo i{
	margin-right: 1em; 
}

.tel i{
	margin-right: 1em; 
}

.hireClick{
	top: 10%;
	left: 20%;
	bottom: 10%;
	right: 20%;
	transition: 0.3s ease;
	text-align: center;
  font-family: 'Raleway', sans-serif !important;
  font-size: calc(1.5em + 1.3vmin);
}

.start{
  background-image:url("https://s20.postimg.cc/s44630fa5/image.jpg") !important;
  background-size: cover;
	background-position: center;
	position: fixed;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
}

.center{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.nombre{
	text-align: center;
	text-shadow: 0px 10px rgba(46, 204, 113,.6);
	color: white;
  font-family: 'Raleway', sans-serif !important;
  font-size: calc(5.75em + 5.3vmin);
	font-weight: bold;
	animation-delay: 0.5s;
}

.nombre p{
	margin-top: -.6em;
}

.iam{
	color: white;
	animation-delay: 0.6s;
	font-family: 'Raleway', sans-serif;
	text-align: center;
	border: 1px solid white;
	color: #2ecc71;
	background-color: white;
	padding: .5em;
	border-radius: 5px;
	border-bottom: 5px solid #2ecc71;
  font-size: calc(0.75em + 1.3vmin);
}

.line{
	height: 1px;
	width: 80%;
	background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
	animation: mymove2 3s linear;
  -webkit-transform: translate(20%, -10%);
  transform: translate(20%, -10%);
}

@keyframes mymove {
    from {transform: translate(120%, -10%);}
    to {transform: translate(-120%, -10%);}
}

@keyframes mymove2 {
    from {transform: translate(120%, -10%);}
    to {transform: translate(20%, -10%);}
}

@keyframes floating {
	0%{transform: translate(0px, 0px) rotate(0deg);}
	20% {transform: translate(0px, 7px) rotate(3deg);}
	40%{transform: translate(0px, -10px) rotate(0 deg);}
	60% {transform: translate(0px, 7px) rotate(-3deg);}
	100%{transform: translate(0px, 0px) rotate(0deg);}
}

.ps4{
	animation: floating 4s linear infinite;
}

.sqljudge{
	animation: floating 4s linear infinite;
}

.school{
	animation: floating 4s linear infinite;
}

.line2{
	height: 1px;
	width: 80%;
	background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
	animation: mymove 3s linear;
  -webkit-transform: translate(-120%, -10%);
  transform: translate(-120%, -10%);
}

/*PARTE DESPUES DE LA PRESENTACION*/

#first{
	background-color: #2d2d2d;
}

#first p{
	font-family: 'Open Sans', sans-serif;
}

.fa-heart{
	color: #e74c3c;
}

.yo{
	border: 12px solid #2ecc71;
	border-bottom-right-radius: 50%;
	border-top-left-radius: 50%;
}

/**/
#second{
	background-color: #fff;
	width: 100%;
}

#second .squareTitleRight{
	margin-right: 0;
}

#second .squareText{
	text-align: center;
	width: 95%;
}

.habilidades{
	width: 60%;
	margin: 0 auto;
}

.habilidad{
  width: 17%;
	min-width: 6em;
	border-radius: 5%;
	padding: .5em;
	background-color: #fff;
	border-bottom: 6px solid #2ECC71;
	margin: .5em;
	display: inline-block;
	box-shadow: 0px -0px 2px 1px rgba(45,45,45,.5);
	transition: 0.3s linear;
}

.habilidad:hover{
	box-shadow: 0px 6px 8px 1px rgba(45,45,45,.4);
	transform: translate(0px, -4px) !important;
	transition: 0.3s ease;
}

.habilidadPorcentaje{
	width: 100%;
	background-color: #2d2d2d;
	text-align: center;
}

.progress{
	color: white;
	font-family: 'Baloo Bhai', cursive;
}

.html{
	background-color: #F39C12;
	width: 80%;
}

.css{
	background-color: #3498DB;
	width: 75%;
}

.js{
	background-color: #F1C40F;
	width: 70%;
}

.jquery{
	background-color: #34495E;
	width: 70%;
}

.boot{
	background-color: #9B59B6;
	width: 70%;
}

.android{
	background-color: #2ECC71;
	width: 65%;
}

.mysql{
	width: 75%;
	background-color: #E67E22;
}

.java{
	background-color: #E74C3C;
	width: 80%;
}

#third{
	background-color: #2d2d2d;
}

#third p {
	font-family: 'Open Sans', sans-serif;
}

#third a{
	color: #2ecc71;
}

#fourth{
	background-color: #2ecc71;
}

#fourth p{
	font-family: 'Open Sans', sans-serif;
}

#fourth a{
	color: #2c3e50;
}

#fifth{
	background-color: white;
}

#fifth p{
	color: #2d2d2d;
	font-family: 'Open Sans', sans-serif;
}




/*CLASES PRINCIPALES------------------------*/

.square{
	width: 100%;
	margin: 0 auto;
	padding-top: 2em;
	padding-bottom: 2em;
}

.squareTitle{
	text-align: center;
	color: #2ecc71;
	font-family: 'Arvo', serif;
  font-size: calc(0.85em + 1.4vmin);
	margin-left: 20%;
}

.squareSubTitle{
	color: #bdc3c7;
	margin-left: 10px;
	padding-left: 10px;
	font-family: 'Raleway', sans-serif;
	border-left: 3px solid #bdc3c7;
}

.squareTitleRight{
	text-align: center;
	color: #2ecc71;
	font-family: 'Arvo', serif;
  font-size: calc(0.85em + 1.4vmin);
	margin-right: 20%;
}

.squareImage{
	width: 30%;
	display: inline-block;
	vertical-align: top;
}

.image{
	max-width: 16em;
  max-height:12em;
  width: auto;
  height: auto;
  margin:auto;
	display:block;
}

.squareText{
	width: 60%;
	display: inline-block;
	vertical-align: top;
	padding: 2%;
}

p{
	margin: 0 auto;
	color: white;
	line-height: 1.6;
  font-size: calc(0.9em + 1.3vmin);
}

@media screen and (max-width: 1000px) {
	
	.square{
		width: 100%;
	}
	
	.squareTitle{
		margin-left: 0;
		padding: .5em;
	}
	
	.squareTitleRight{
		margin-right: 0;
		padding: .5em;
	}
	
	.squareImage{
		width: 100%;
	}
	.squareText{
		width: 90%;
		text-align: center;
		margin: 0 auto;
		margin:auto;
		display:block;
	}
	
	.hire{
		width: 100%;
		text-align: center;
		font-size: 160%;
		top: 0;
		left: 0;
		right: 0;
		border-radius: 0;
	}
	
	.habilidad{
		width: 70%;
	}
	
	.progress{
    font-size: calc(0.95em + 1.4vmin);
	}
	
	.hireClick{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
    font-size: calc(1.6em + 1.4vmin);
	}
}

.hidden {
    opacity: 0;
}

.display{
	display: none;
}

.displaySee{
	display: block;
}

.visible {
    opacity: 1;
}

/*waves****************************/
.box {
	position: fixed;
	top: 87%;
	transform: rotate(60deg);
	left: 60%;
}
.wave {
	position: fixed;
	top: 0;
	left: 0;
  opacity: .4;
  position: absolute;
  top: 13%;
  left: 0%;
  background: #16a085;
  width: 1800px;
  height: 1800px;
  margin-left: -150px;
  margin-top: -250px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 7000ms infinite linear;
}
.wave.-three {
  animation: drift 7500ms infinite linear;
	position: fixed;
	background-color: #2ecc71;
}
.wave.-two {
  animation: drift 3000ms infinite linear;
  opacity: .1;
  background: black;
	position: fixed;
}
.box:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  transform: translate3d(0, 0, 0);
}
@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}
/*LOADING SPACE*/
.contain {
	animation-delay: 4s;
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #25a7d7;
  background: -webkit-linear-gradient(#25a7d7, #2962FF);
  background: linear-gradient(#25a7d7, #25a7d7);
}
.icon {
  width: 100px;
  height: 100px;
  margin: 0 5px;
}
/*Animation*/
.icon:nth-child(2) img {-webkit-animation-delay: 0.2s;animation-delay: 0.2s}
.icon:nth-child(3) img {-webkit-animation-delay: 0.3s;animation-delay: 0.3s}
.icon:nth-child(4) img {-webkit-animation-delay: 0.4s;animation-delay: 0.4s}
.icon img {
  -webkit-animation: anim 2s ease infinite;
  animation: anim 2s ease infinite;
  -webkit-transform: scale(0,0) rotateZ(180deg);
  transform: scale(0,0) rotateZ(180deg);
}
@-webkit-keyframes anim{
  0% {
    -webkit-transform: scale(0,0) rotateZ(-90deg);
    transform: scale(0,0) rotateZ(-90deg);opacity:0
  }
  30% {
    -webkit-transform: scale(1,1) rotateZ(0deg);
    transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  50% {
    -webkit-transform: scale(1,1) rotateZ(0deg);
    transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  80% {
    -webkit-transform: scale(0,0) rotateZ(90deg);
    transform: scale(0,0) rotateZ(90deg);opacity:0
  }
}
@keyframes anim{
  0% {
    -webkit-transform: scale(0,0) rotateZ(-90deg);
    transform: scale(0,0) rotateZ(-90deg);opacity:0
  }
  30% {
    -webkit-transform: scale(1,1) rotateZ(0deg);transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  50% {
    -webkit-transform: scale(1,1) rotateZ(0deg);
    transform: scale(1,1) rotateZ(0deg);opacity:1
  }
  80% {
    -webkit-transform: scale(0,0) rotateZ(90deg);
    transform: scale(0,0) rotateZ(90deg);opacity:0
  }
}

.firma{
	padding-top: 1em;
	text-align: center;
	background-color: #2d2d2d;
}

.fir{
	border: 0;
}
!

JS 

              
                
    var firmacount = 0;
    $(document).ready(function(){
        
        
        $(function(){
          // get hash value
          var hash = window.location.hash;
          // now scroll to element with that id
          $('html, body').animate({ scrollTop: $(hash).offset().top });
        });
        
        var altura = $(".body").height();
        var ancho = $(".body").width();

        $(".start").css("height",altura+"px");
        $(".start").css("width",ancho+"px");
        $("#first").css("margin-top",altura+"px");

        $("#hire").on("click", function(){
            $(this).toggleClass("hireClick");
            $('.info').toggleClass("displaySee");
        });

        $('.toggle').toggles({
          drag: true, // allow dragging the toggle between positions
          click: true, // allow clicking on the toggle
          text: {
            on: 'English', // text for the ON position Inglés
            off: 'Español' // and off
          },
          on: true, // is the toggle ON on init
          animate: 250, // animation time (ms)
          width: 100, // width used if not set in css
          height: 30, // height if not set in css
        });


        ingles();

        $('.toggle').on('toggle', function(e, active) {
          if (active) {
            ingles();
          } else {
            espanol();
          }});

    });

    $(window).resize(function(){
        var altura = $(".body").height();
        var ancho = $(".body").width();

        $(".start").css("height",altura+"px");
        $(".start").css("width",ancho+"px");
        $("#first").css("margin-top",altura+"px");
    });

    $( ".body" ).scroll(function() {
        if ($('.line').visible(true,true)) {
            $(".background").css("background", "linear-gradient(#2ecc71, #16a085)");
        }

        if ($('.show1').visible(false,true)) {
            $('.show1').addClass("animated slideInLeft visible");
            $('.show1').removeClass("hidden");
            $(".background").css("background", "linear-gradient(#ecf0f1, #7f8c8d)");
        }

        if ($('.show2').visible(true,true)) {
            $('.show2').addClass("animated slideInRight visible");
        }

        if ($('.show3').visible(true,true)) {
            $('.show3').addClass("animated slideInLeft visible");
            $(".background").css("background", "linear-gradient(#1abc9c, #16a085)");
        }

        if ($('.show4').visible(true,true)) {
            $('.show4').addClass("animated slideInRight visible");
            $(".background").css("background", "linear-gradient(#9b59b6, #34495e)");
        }

        if ($('.show5').visible(true,true)) {
            $('.show5').addClass("animated slideInRight visible");
            $(".background").css("background", "linear-gradient(#7f8c8d,#e74c3c)");
        }

        if($(".firma").visible(true)&& firmacount == 0){
            firmacount = 0;
            var paths = $('#svg4166 path:not(defs path)');
            paths.each(function(i, e) {
                e.style.strokeDasharray = e.style.strokeDashoffset = e.getTotalLength();
            });
            var tl = new TimelineMax();
            tl.add([
                TweenLite.to(paths.eq(0), 4, {
                    strokeDashoffset: 0,
                    delay: 0.0,
                    autoAlpha: 1
                })
            ]);
        }
    });
    


        
    function ingles(){
        $(".espanol").hide();
        $(".ingles").show();
    }

    function espanol(){
        $(".ingles").hide();
        $(".espanol").show();
    }
!
999px

Console