Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's 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 it's URL and the proper URL extention.

+ add another resource

JavaScript

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.

+ 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.

Behavior

Save Automatically?

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

              
                <div class="cv container">
  <div class="row">
    <aside class="col-md-4">
      <img class="img-circle" src="http://temporal.anaislab.com/wp-content/uploads/2016/03/profile.jpg">
      <h2><span>Ana&iuml;s</span> Berbel</h2>
      <p>Soy Ana&iuml;s Berbel Guerrero y mi oficio y pasi&oacute;n es la programaci&oacute;n y maquetaci&oacute;n Web.</p>
      <p>Me considero una persona autodidacta, con muchas inquietudes, muy pulcra y ordenada en cuanto a mis c&oacute;digos se refiere y tambi&eacute;n muy perfecionista con mi trabajo.</p>
      <p>Me gusta el trato con la gente y sobretodo ense&ntilde;ar y transmitir conocimientos.</p>
      <ul class="info">
        <li><a href="#"><i class="fa fa-codepen"></i>codepen.io/Haru89ka</a></li>
        <li><a href="#"><i class="fa fa-envelope"></i>anaisberbel@gmail.com</a></li>
        <li><a href="#"><i class="fa fa-instagram"></i>instagram.com/haru89ka</a></li>
        <li><a href="#"><i class="fa fa-facebook"></i>anaislab</a></li>
        <li><a href="#"><i class="fa fa-twitter"></i>twitter.com/AnaislabBlog</a></li>
      </ul>
    </aside>
    <div class="col-md-8">
      <h1>Habilidades</h1>
      <div class="row skills">
        <div class="col-md-4">
          <section>
            <p>HTML5</p>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>
            <p>CSS3</p>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>
            <p>PHP</p>
            <span></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>
            <p>Photoshop</p>
            <span></span>
            <span></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>
            <p>Dominios</p>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>
            <p>Bootstrap</p>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
        </div>
        <div class="col-md-4">
          <section>
            <p>WordPress</p>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>
            <p>Woocommerce</p>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>
            <p>Javascript</p>
            <span></span>
            <span></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>
            <p>Illustrator</p>
            <span></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>
            <p>Hosting</p>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>
            <p>MySQL</p>
            <span></span>
            <span></span>
            <span></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
        </div>
        <div class="col-md-4">
          <section>            
            <p>Prestashop</p>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>          
            <p>Joomla!</p>
            <span></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>        
            <p>C++</p>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span class="full"></span>
          </section>
          <section>        
            <p>JQuery</p>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>          
            <p>SEO</p>
            <span></span>
            <span></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
          <section>            
            <p>Ajax</p>
            <span></span>
            <span></span>
            <span class="full"></span>
            <span class="full"></span>
            <span class="full"></span>
          </section>
        </div>
      </div>
      <h1>Experiencia</h1>
      <section>
        <h3>Openers &amp; Closers</h3>
        <h4>Web Master</h4>
        <p>Me encuentro ejerciendo de Webmaster, programadora y diseñadora Web para la empresa de cerraderos eléctricos de seguridad Openers&Closers. Así como también me encargo de los temas de seguridad online.</p>
        <p>Mi principal misión es rediseñar la Web y la imagen online de la empresa, el posicionamiento SEO y la creación de un ecommerce.</p>
      </section>
      <section>
        <h3>MB Marketing</h3>
        <h4>Desarrolladora y diseñadora Web y diseñadora gráfica</h4>
        <p>Maquetación, programación Web y creación de temas para WordPress.</p>
        <p>Diseño de flayers y banners de publicidad para la marca Sunweb y catálogo de productos</p>
      </section>
      <section>
        <h3>Freelance</h3>
        <h4>Desarrolladora y diseñadora Web</h4>
        <p>Diseño, maquetación, desarrollo y programación de la Web. Así como encargarme también del SEO, dominio, hosting y seguridad del site.</p>
      </section>
      <section>
        <h3>Reparaci&oacute;n de PC's</h3>
        <h4>Técnica informática</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam cupiditate voluptates fugiat sapiente et deleniti deserunt id officia dolore, expedita quos, libero nobis atque esse quas repellendus, neque nam reprehenderit.</p>
      </section>
      <section>
        <h3>UGT</h3>
        <h4>Técnica informática</h4>
        <p>Mantenimiento de los sistemas informáticos de la empresa</p>
      </section>
      <h1>Estudios</h1>
      <section>
        <h3>Técnico en Estándares Web (XHTML Y CSS)</h3>
        <p>El curso se componía del aprendizaje del lenguaje básico para poder desarrollar potentes sitios web con XHTML que es el lenguaje universal para la creación de sitios y las hojas de estilo en cascada CSS para diseñar y adaptar las webs a tus necesidades.</p>
      </section>
      <section>
        <h3>Curso superior Desarrollo, Creación y Programación de Páginas Web</h3>
        <p>En este curso superior de programación y desarrollo Web he abarcado muchos lenguajes y CMS, tales como: HTML5, CSS3, PHP, MySQL, Javascript, Jquery, WordPress, Woocommerce, Joomla!, Prestashop, etc.</p>
        <p>El objetivo del curso ha sido la preparación de diseñadores que se desenvuelvan en el desarrollo de diseños para los nuevos entornos digitales (web-multimedia).</p>
      </section>
      <section>
        <h3>Técnico en Adobe Illustrator CS6</h3>
        <p>El curso completado me ha ayudado a aprender a manejar las herramientas de Ilustración y obtener el conocimiento necesario para dibujar y componer digitalmente gráficos e imágenes que me permitan el desarrollo de ilustraciones y de composiciones, piezas de diseño gráfico o publicitario, tanto para su uso en la Web o medios digitales, como para la realización de originales de imprenta, entendiendo el manejo de símbolos, efectos y recursos de edición, integrando imágenes y textos.</p>
      </section>
      <section>
        <h3>Título iniciación a Photoshop</h3>
        <p>En este curso online aprendí los conceptos y herramientas básicas de Photoshop</p>
      </section>
    </div>
  </div>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Montserrat:400,700);
.cv {padding:20px;}
.cv aside {margin-bottom:60px;}
.cv aside img {display:block;margin:0 auto;}
.cv aside h2, .cv h1, .cv h3, .cv h4 {font-family: 'Montserrat', sans-serif;}
.cv aside h2 {text-align:center;}
.cv aside h2>span {color:#ff5335;}
.cv aside h2:after {
  display:block;
  content:'{';
  color:#ff5335;
  transform:rotate(-90deg) scale(1.6, 2);
  transform-origin: center;
  font-size:60px;
  font-weight:normal;
}
.cv aside ul.info{margin-top:30px;}
.cv aside ul.info a {
  color:#333;
  font-family:'Montserrat',sans-serif;
  margin-bottom:10px;
  display:block;
  letter-spacing:-0.1em;
}
.cv aside ul.info a:hover {text-decoration:none;}
.cv aside ul.info a:hover i {background:#B83C26;}
.cv aside ul.info a>i {
  background:#ff5335;
  color:#fff;
  width:35px;
  height:35px;
  border-radius:35px;
  text-align:center;
  line-height:35px;
  margin-right:15px;
  -webkit-transition:all 200ms linear;
  -moz-transition:all 200ms linear;
  -o-transition:all 200ms linear;
  transition:all 200ms linear;
}
.cv section {margin-bottom:30px;}
.cv p {font-family:'Open Sans',sans-serif;}
.cv h1, .cv h3, .cv h4 {
  text-transform:uppercase;
  font-weight:bold;
}
.cv h1:nth-child(1){margin-top:0;}
.cv h1 {margin:60px 0 30px 0;}
.cv h3 {font-size:18px;line-height:22px;}
.cv h4 {font-size:14px;line-height:14px;}
.cv .skills section {overflow:auto;margin-bottom:0;}
.cv .skills section p {
  float:left;
  max-width:50%;
  word-break:break-word;
}
.cv .skills section span {
  display:inline-block;
  width:15px;
  height:15px;
  background:#bbb;
  border-radius:15px;
  float:right;
  margin:0 1px;
}
.cv .skills section span.full {background:#ff5335;}
              
            
!

JS

              
                
              
            
!
999px

Console