index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <title>Haekal Vcard Template</title>
    
    <link href="img/favicon.ico" rel="shortcut icon">
    
    <link href="css/font.css" rel="stylesheet">
    <link href="css/fontello.css" rel="stylesheet">
    <link href="css/base.min.css" rel="stylesheet">
    <link href="css/skeleton.min.css" rel="stylesheet">
    <link href="css/main.min.css" rel="stylesheet">
    <link href="css/magnific-popup.css" rel="stylesheet">
</head>
<body>
    
    <!-- Preloader -->
    <div id="loader">
        <div id="loaderInner"></div>
    </div>
    
    <div id="wrapper">
        
        <header id="header">
            <div class="mainHeader">
                <div class="container clearfix">
                    <nav id="mainNav">
                        <a href="#" class="mobileBtn"><i class="icon-menu"></i></a>
                        <ul>
                            <li><a href="#wrapper">Home</a></li>
                            <li><a href="#resume">Resume</a></li>
                            <li><a href="#portfolio">Portfolio</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        
        <section id="about" class="about">
            <div class="imgAbout"></div>
            
            <div class="lightGrey">
                <div class="container clearfix">
                
                    <div class="shortBtn">
                        <a href="#" class="print">
                            <span>Print My Resume</span>
                            <i class="icon-print-1"></i>
                        </a>
                        
                        <a href="#" class="download">
                            <span>Download CV</span>
                            <i class="icon-down-circled"></i>
                        </a>
                    </div>
                    
                    <div class="aboutContent overview row">
                        <div class="aboutTitle">
                            <h1>rahmandika haEkal<span>Web Designer / Developer</span></h1>
                        </div>
                        
                        <div class="aboutIntro">
                            <h1>I'am front end web developer focused on responsive theme.</h1>
                            
                            <p>I'am Haekal and a Front end Web Designer . All about me, I've put on this website. More details can you browse through my website. Enjoy the design .</p>
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <div class="darkGrey">
                <div class="container clearfix">
                
                    <div class="aboutContent row">
                        <div class="aboutInfo">
                            <ul>
                                <li><span>Birthdate</span> : 17 December 1998</li>
                                <li><span>Phone</span> : +62 896 8004 2687</li>
                                <li><span>E-mail</span> : rahmandikahaekal31@gmail.com</li>
                                <li><span>Website</span> : https://rahmandikahaekal.github.io/</li>
                                <li><span>Address</span> : Raya Karanganyar st. Kajen . Pekalongan 51182</li>
                            </ul>
                        </div>
                        
                        <div class="aboutSocial">
                            <ul>
                                <li><a href="#"><i class="icon-twitter"></i></a></li>
								<li><a href="#"><i class="icon-facebook"></i></a></li>
								<li><a href="#"><i class="icon-gplus"></i></a></li>
								<li><a href="#"><i class="icon-pinterest"></i></a></li>
								<li><a href="#"><i class="icon-linkedin"></i></a></li>
								<li><a href="#"><i class="icon-dribbble"></i></a></li>
								<li><a href="#"><i class="icon-vimeo"></i></a></li>
								<li><a href="#"><i class="icon-flickr"></i></a></li>
                            </ul>
                        </div>
                        
                    </div>
                    
                </div>
            </div>
        </section>
        
        <section id="resume" class="offset section bBottom">
            <div class="container clearfix">
            
                <div class="intro">
                    <h1 class="titleBig">resume</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
                </div>
                
                <div class="eleven columns resumeDetails top">
                    <div class="employment">
                        <h2 class="titleSmall">My Employment</h2>
                        
                        <div class="em clearfix">
                            <div class="dtIco">
                                <span class="ico"><i class="icon-suitcase"></i></span>
                                <span class="date">2016 - Now</span>
                            </div>
                            
                            <div class="det">
                                <h3>Web Designer <span>- Pondok Programmer</span> </h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                        </div>
                        
                        <div class="em clearfix">
                            <div class="dtIco">
                                <span class="ico"><i class="icon-suitcase"></i></span>
                                <span class="date">2016 - Now</span>
                            </div>
                            
                            <div class="det">
                                <h3>Web Desinger <span>- Pondok Programmer</span> </h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                        </div>
                        
                        <div class="em clearfix">
                            <div class="dtIco">
                                <span class="ico"><i class="icon-suitcase"></i></span>
                                <span class="date">2016 - Now</span>
                            </div>
                            
                            <div class="det">
                                <h3>Web Designer <span>- Pondok Programmer</span> </h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="education">
                        <h2 class="titleSmall">Education</h2>
                        
                        <div class="ed clearfix">
                            <div class="dtIco">
                                <span class="ico"><i class="icon-graduation-cap"></i></span>
                                <span class="date">2016 - 2919</span>
                            </div>
                            
                            <div class="det">
                                <h3>Pondok QODR <span>- Web Design</span> </h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                        </div>
                        
                        <div class="ed clearfix">
                            <div class="dtIco">
                                <span class="ico"><i class="icon-graduation-cap"></i></span>
                                <span class="date">2016 - 2019</span>
                            </div>
                            
                            <div class="det">
                                <h3>Pondok QODR <span>- Web Design</span> </h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                        </div>
                        
                        <div class="ed clearfix">
                            <div class="dtIco">
                                <span class="ico"><i class="icon-graduation-cap"></i></span>
                                <span class="date">2016 - 2019</span>
                            </div>
                            
                            <div class="det">
                                <h3>Pondok QODR <span>- Web Design</span> </h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="five columns skills top">
                    
                    <div class="widget">
                        <h2 class="titleSmall">Programming Skills</h2>
                        <ul class="skillsList clearfix">
                            <li>
                                <h4>html5</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                            <li>
                                <h4>css</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                            <li>
                                <h4>javascript</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                            <li>
                                <h4>jquery</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                            <li>
                                <h4>jquery mobile</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                            <li>
                                <h4>php</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="widget">
                        <h2 class="titleSmall">Graphic Skills</h2>
                        <ul class="skillsList clearfix">
                            <li>
                                <h4>photoshop</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                            <li>
                                <h4>illustrator</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                            <li>
                                <h4>corel draw</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                            <li>
                                <h4>autocad</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                            <li>
                                <h4>3dmax</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="widget">
                        <h2 class="titleSmall">Language</h2>
                        <ul class="skillsList clearfix">
                            <li>
                                <h4>Indonesian</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                            <li>
                                <h4>English</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                            <li>
                                <h4>Japanese</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                            <li>
                                <h4>Arabich</h4>
                                <div class="rating">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                <span class="transparent"></span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="widget">
                        <h2 class="titleSmall">Personal Skills</h2>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        
                        <ul class="pList">
                            <li><i class="icon-ok"></i>Responsible</li>
                            <li><i class="icon-ok"></i>Diligence</li>
                            <li><i class="icon-ok"></i>Labour</li>
                            <li><i class="icon-ok"></i>Creative</li>
                            <li><i class="icon-ok"></i>Funny</li>
                            <li><i class="icon-ok"></i>Great Communicator</li>
                            <li><i class="icon-ok"></i>Flexible</li>
                        </ul>
                    </div>
                    
                    <div class="getcv">
                        <a href="#"><i class="icon-down-circled"></i>
                        <h3>Download CV</h3>
                        </a>
                    </div>
                    
                </div>
                
            </div>
        </section>
        
        <section id="portfolio" class="offset bBottom section">
            <div class="innerContent">
                <div class="container clearfix">
                    
                    <div class="sixteen columns">
                        <h1 class="titleBig">Portfolio</h1>
                    </div>
                
                    <div class="filterNav">
                        <ul id="category" class="filter">
                            <li class="all current"><a href="#">All</a></li>
                            <li class="catWeb"><a href="#">Web Design</a></li>
                            <li class="catGraphic"><a href="#">Graphic Design</a></li>
                            <li class="catMotion"><a href="#">Motion Graphic</a></li>
                        </ul>
                    </div>
                    
                    <div id="works" class="clearfix">
                        <ul class="portfolio clearfix">
                            
                            <li class="one-third column item" data-id="id-1" data-type="catWeb">
                                <div>
                                    <a href="img/w1.jpg" class="folio">
                                        <div class="desc">
                                            <h3 class="projDesc">Project Name <span>&#8226; Web Design &#8226;</span></h3>
                                        </div>
                                        <img src="img/w1.jpg" alt="folio">
                                    </a>
                                </div>
                            </li>
                            
                            <li class="one-third column item" data-id="id-2" data-type="catWeb">
                                <div>
                                    <a href="img/w2.jpg" class="folio">
                                        <div class="desc">
                                            <h3 class="projDesc">Project Name <span>&#8226; Web Design &#8226;</span></h3>
                                        </div>
                                        <img src="img/w2.jpg" alt="folio">
                                    </a>
                                </div>
                            </li>
                            
                            <li class="one-third column item" data-id="id-3" data-type="catGraphic">
                                <div>
                                    <a href="img/w3.jpg" class="folio">
                                        <div class="desc">
                                            <h3 class="projDesc">Project Name <span>&#8226; Graphic Design &#8226;</span></h3>
                                        </div>
                                        <img src="img/w3.jpg" alt="folio">
                                    </a>
                                </div>
                            </li>
                            
                            <li class="one-third column item" data-id="id-4" data-type="catGraphic">
                                <div>
                                    <a href="img/w4.jpg" class="folio">
                                        <div class="desc">
                                            <h3 class="projDesc">Project Name <span>&#8226; Graphic Design &#8226;</span></h3>
                                        </div>
                                        <img src="img/w4.jpg" alt="folio">
                                    </a>
                                </div>
                            </li>
                            
                            <li class="one-third column item" data-id="id-5" data-type="catGraphic">
                                <div>
                                    <a href="img/w5.jpg" class="folio">
                                        <div class="desc">
                                            <h3 class="projDesc">Project Name <span>&#8226; Graphic Design &#8226;</span></h3>
                                        </div>
                                        <img src="img/w5.jpg" alt="folio">
                                    </a>
                                </div>
                            </li>
                            
                            <li class="one-third column item" data-id="id-6" data-type="catMotion">
                                <div>
                                    <a href="img/w6.jpg" class="folio">
                                        <div class="desc">
                                            <h3 class="projDesc">Project Name <span>&#8226; Motion Graphic &#8226;</span></h3>
                                        </div>
                                        <img src="img/w6.jpg" alt="folio">
                                    </a>
                                </div>
                            </li>
                            
                            <li class="one-third column item" data-id="id-7" data-type="catMotion">
                                <div>
                                    <a href="img/w7.jpg" class="folio">
                                        <div class="desc">
                                            <h3 class="projDesc">Project Name <span>&#8226; Motion Graphic &#8226;</span></h3>
                                        </div>
                                        <img src="img/w7.jpg" alt="folio">
                                    </a>
                                </div>
                            </li>
                            
                            <li class="one-third column item" data-id="id-8" data-type="catMotion">
                                <div>
                                    <a href="img/w8.jpg" class="folio">
                                        <div class="desc">
                                            <h3 class="projDesc">Project Name <span>&#8226; Motion Graphic &#8226;</span></h3>
                                        </div>
                                        <img src="img/w8.jpg" alt="folio">
                                    </a>
                                </div>
                            </li>
                            
                            <li class="one-third column item" data-id="id-9" data-type="catMotion">
                                <div>
                                    <a href="img/w9.jpg" class="folio">
                                        <div class="desc">
                                            <h3 class="projDesc">Project Name <span>&#8226; Motion Graphic &#8226;</span></h3>
                                        </div>
                                        <img src="img/w9.jpg" alt="folio">
                                    </a>
                                </div>
                            </li>
                            
                        </ul>
                    </div>
                    
                </div>
            </div>
        </section>
        
        <section id="contact" class="offset section">
            <div class="innerContent">
                <div class="container clearfix">
                
                    <div class="sixteen columns">
                        <h1 class="titleBig">Contact</h1>
                    </div>
                    
                    <div class="sixteen columns contactForm">
                        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit ut et voluptates repudiandae sint et molestiae non recusandae.</p>
                        
                        <div class="cForm">
                            <form method="post" action="send.php">
                                <p>
                                    <label for="name">Name <span class="required">*</span></label>
                                    <input type="text" name="name" id="name">
                                </p>
                                
                                <p>
                                    <label for="email">Email <span class="required">*</span></label>
                                    <input type="text" name="email" id="email">
                                </p>
                                
                                <p>
                                    <label for="subject">Subject</label>
                                    <input type="text" name="subject" id="subject">
                                </p>
                                
                                <p>
                                    <label for="subject">Message <span class="required">*</span></label>
                                    <textarea name="message" id="message" cols="45" rows="10"></textarea>
                                </p>
                                
                                <div class="fBtn"><button id="submit" class="regButton"><i class="icon-paper-plane"></i> Send Message</button></div>
                            </form>
                            
                            <div id="sucess"><h2>Your message has been sent. Thank You!</h2></div>
                            <div id="error"><h2>Sorry your message can not be sent.</h2></div>
                        </div>
                    </div>
                
                </div>
            </div>
        </section>
        
        <footer class="footer offset">
            <div class="footerholder">
                <div class="container clearfix">
                    <div class="eight columns">
                        <p>© 2014 <span class="bLogo">Ekal</span> All Rights Reserved.</p>
                    </div>

                    <div class="eight columns ">
                        <ul class="socialsFooter">
                            <li><a href="#"><i class="icon-facebook"></i></a></li>
                            <li><a href="#"><i class="icon-twitter"></i></a></li>
                            <li><a href="#"><i class="icon-vimeo"></i></a></li>
                            <li><a href="#"><i class="icon-gplus"></i></a></li>
                            <li><a href="#"><i class="icon-pinterest"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
        
    </div>


    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.scrollTo-min.js"></script>
    <script src="js/waypoints.js"></script>
    <script src="js/jquery.quicksand.js"></script>
    <script src="js/modernizr.custom.js"></script>
    <script src="js/jquery.magnific-popup.js"></script>
    <script src="js/script.js"></script>
    <script src="//my.hellobar.com/9f1e118de37e10742883e3aed359fc647e7b4b9b.js" type="text/javascript" charset="utf-8" async="async"></script>

</body>
</html>