Carlosferrerhernandez

<header>
  <h1>
                Navigation Animation
            </h1>
  <span>
                Test of navigation animation
            </span>
</header>
<div class="container red topBotomBordersOut">
  <a>HOME</a>

Carlosferrerhernandez

demo:CSS image hover effects

Article - https://www.nxworld.net/tips/css-image-hover-effects.html

A Pen by Naoya on CodePen.

License.

Carlosferrerhernandez

<div class="wrapper">
    <span class="menu"></span>

    <div class="title">
        <h1>Click the burger icon to see the menu !</h1>
    </div>

    <div class="overlay">
        <ul>
            <li><a href="#">Home</a></li>

Carlosferrerhernandez

<div class="ct" id="t1">
 <div class="ct" id="t2">
   <div class="ct" id="t3">
     <div class="ct" id="t4">
<section>  
 <ul>
   <a href="#t1"><li class="icon fa fa-home" id="uno"></li></a>
   <a href="#t2"><li class="icon fa fa-keyboard-o" id="dos"></li></a>
   <a href="#t3"><li class="icon fa fa-coffee" id="tres"></li></a>
   <a href="#t4"><li class="icon fa fa-dribbble" id="cuatro"></li></a>

Carlosferrerhernandez

Dual Sliding Panels

Dual sliding panels with awesome CSS animations. Built with Stylus and vanilla JavaScript. Be sure to checkout the responsive view!

A Pen by Ettrics on CodePen.

License.

Carlosferrerhernandez

Full-Screen Menu Overlay

A full-screen menu, showcasing your brand and website navigation. Built using SCSS and vanilla JS.

A Pen by Ettrics on CodePen.

License.

Carlosferrerhernandez

<div class="com">
	<div class="com__content">
		<section class="com__section com__section--text">
			<h1 class="animate slideInLeft ">Communication Design</h1>
			<p class="animate slideInLeft delay-3">Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.</p>
		</section>
		<section class="com__section com__section--text com__section--text-img">
			<div class="com__section-half">
				<h1 class="animate slideInLeft">Communication Design</h1>
				<p class="animate slideInLeft delay-2">Communication design is a mixed discipline between design and information-development which is concerned with how media intermission such as printed, crafted, electronic media or presentations communicate with people.</p>

Carlosferrerhernandez

Expanding Column Layout

A resposive expanding column layout to present projects, articles, and more.

A Pen by Ettrics on CodePen.

License.

Carlosferrerhernandez

Donut Chart Dial SVG Animation

Flat Donut Chart Dial SVG Animation built with vanillaJS. No jquery required.

A Pen by Carlos Ferrer Hernandez on CodePen.

License.

Carlosferrerhernandez

Animated Data Bar Chart & Graph

An interactive bar graph packed with animations and information. Built with CSS and jQuery.

A Pen by Ettrics on CodePen.

License.