Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Resume</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <style type="text/css">

        body {
            cursor: default;
            position: relative;
            top: 0;
            left: 0;
            margin: 0;
            padding: 0;
            font-family: 'Roboto', cursive;
        }
        @media only screen and (max-width: 666px) {
            .header {
                font-size: 4vw !important;
                background: #00A0DE !important;
            }
            .header h1 {
                padding-bottom: 40px !important;
            }
            .extraInfo {
                font-size: 3vw !important;
            }
            .one { border-right: 3px solid #20b0eE !important }
            .two { border-right: 3px solid #40d0fE !important }
            .thr { border-right: 3px solid #60f0fE !important }
        }
        .header {
            position: relative;
            width: 100%;
            padding: 15px;
            margin: 0;
            background: #0CAA40;
            color: #fff;
            font-size: 3vw;
            text-shadow: inset 0 0 5px #000000;
        }
        .header h1 {
            font-family: 'Roboto', cursive;
            text-shadow: 1px 1px 2px #0000004f;
            padding-bottom: 70px;
            transform: translateY(-15%);
        }
        .extraInfo {
            font-size: 2.1vw;
            list-style: none;
            position: relative;
            text-align: right;
            color: #fff;
            padding: 10px;
            background: #00000000;
            margin: 0;
            transform: translateY(-100%);
            background: #00000011;
        }
        .extraInfo li {
            margin: 3px;
            padding-right: 4px;
            transition: .3s all ease-in-out;
        }
        .one { border-right: 7px solid #2CbA60 }
        .two { border-right: 7px solid #4CdA80 }
        .thr { border-right: 7px solid #6CfAa0 }
        .one:hover { border-right: 30px solid #2CbA60 }
        .two:hover { border-right: 30px solid #4CdA80 }
        .thr:hover { border-right: 30px solid #6CfAa0 }
    </style>
</head>
<body>
    <div class="header">
        <h1>ABRAHAM DUNO AGUILERA</h1>
    </div>
    <ul class="extraInfo">
        <li class="two">abrahamdejesusdunoaguilera@gmail.com</li>
        <li class="thr">Porlamar, Nueva Esparta</li>
        <li class="one">0426-788-3483</li>
    </ul>
    <div class="content">
        <h3 id="es">Skills</h3>
        <h3 id="en">Skills</h3>
        <ul>
            <li>
                <ul>
                    <li id="es">Dise&ntildeo Gr&aacutefico</li>
                    <li id="en">Graphic Design</li>
                    <li>Cinema 4D</li>
                    <li>Photoshop</li>
                    <li>Blender</li>
                    <li>Sony Vegas</li>
                </ul>
                <ul>
                    <li id="es">Nivel</li>
                    <li id="en">Level</li>
                    <li>5/5</li>
                    <li>4/5</li>
                    <li>3/5</li>
                    <li>4/5</li>
                </ul>
            </li>
        </ul>
        <ul>
            <li>
                <ul>
                    <li id="es">Programacion</li>
                    <li id="en">Programming</li>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JS</li>
                    <li>Python</li>
                    <li>Java</li>
                    <li>Ionic</li>
                </ul>
                <ul>
                    <li id="es">Nivel</li>
                    <li id="en">Level</li>
                    <li>5/5</li>
                    <li>5/5</li>
                    <li>4/5</li>
                    <li>3/5</li>
                    <li>3/5</li>
                    <li>3/5</li>
                </ul>
            </li>
        </ul>
        <ul>
            <li>
                <ul>
                    <li id="es">Idiomas</li>
                    <li id="en">Languages</li>
                    <li>Ingles</li>
                </ul>
                <ul>
                    <li id="es">Nivel</li>
                    <li id="en">Level</li>
                    <li>4/5</li>
                </ul>
            </li>
        </ul>
        <br>
        <h3 id="es">EXPERIENCIA LABORAL</h3>
        <h3 id="en">PRIOR WORK EXPERIENCE</h3>
        <br>
        <h3 id="es">EDUCACION</h3>
        <h3 id="en">EDUCATION</h3>
        <ul>
            <li>
                <ul>
                    <li id="es">U.E "Colegio Nuestra Se&ntildeora del Valle" Sep. 2009 - Jun. 2014</li>
                    <li id="es">Bachiller en Ciencias</li>
                    <li id="en">Hihgschool Degree</li>
                </ul>
                <ul>
                    <li id="es">Universidad de Oriente Ene. 2015 - Actualidad</li>
                    <li id="en">Universidad de Oriente Jan. 2015 - Today</li>
                    <li id="es">Licenciatura en Informatica</li>
                    <li id="en">Degree in Computer Science</li>
                </ul>
            </li>
        </ul>

        <br>
        <h3 id="es">EXPERIENCIA EXTRA</h3>
        <h3 id="en">ADDITIONAL EXPERIENCE</h3>
        <br>
    </div>
</body>
</html>