<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>profile</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="home">
<div class="peak ">
<p>PEAK</p>
<span class="move">PEAK</span>
</div>
<ul>
<li><a href="#home"><span>[</span><em>Home</em><span>]</span></a></li>
<li><a href="#about"><span>[</span><em>About</em><span>]</span></a></li>
<li><a href="#portfolio"><span>[</span><em>Portfolio</em><span>]</span></a></li>
<li><a href="#services"><span>[</span><em>Services</em><span>]</span></a></li>
<li><a href="#contact"><span>[</span><em>Contact</em><span>]</span></a></li>
</ul>
<img src="images/banner.png" alt="">
</div><!-- home结束 -->
<div id="about">
<div class="about_me">
<strong>ABOUT ME</strong>
<div class="who">
<h4 class="title_mode">Who I am and why I design</h4>
<p class="para">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 class="what_left">
<h4 class="title">WHAT I DO AND MY EXPERIENCE</h4>
<p class="para">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 class="goal_right">
<h4 class="title">MY GOALS</h4>
<p class="para">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="my_skill">
<h4>MY SKILLS</h4>
<ul>
<li>
<span>5%</span>
<p>Web Disign</p>
</li>
<li>
<span>6%</span>
<p>HTML/CSS</p>
</li>
<li>
<span>7%</span>
<p>Javascript</p>
</li>
<li>
<span>8%</span>
<p>NodeJs</p>
</li>
</ul>
</div>
</div><!-- about结束 -->
<div id="portfolio">
<h2>PROTFOLIO</h2>
<ul class="pic_list">
<li>
<a href="#"><img src="images/a1.jpg" alt=""></a>
<div class="meng">
<h5>
VIEW
</h5>
</div>
</li>
<li>
<a href="#"><img src="images/a2.jpg" alt=""></a>
<div class="meng">
<h5>
VIEW
</h5>
</div>
</li>
<li>
<a href="#"><img src="images/a3.jpg" alt=""></a>
<div class="meng">
<h5>
VIEW
</h5>
</div>
</li>
<li>
<a href="#"><img src="images/a4.jpg" alt=""></a>
<div class="meng">
<h5>
VIEW
</h5>
</div>
</li>
<li>
<a href="#"><img src="images/a5.jpg" alt=""></a>
<div class="meng">
<h5>
VIEW
</h5>
</div>
</li>
<li>
<a href="#"><img src="images/a6.jpg" alt=""></a>
<div class="meng">
<h5>
VIEW
</h5>
</div>
</li>
<li>
<a href="#"><img src="images/a7.jpg" alt=""></a>
<div class="meng">
<h5>
VIEW
</h5>
</div>
</li>
<li>
<a href="#"><img src="images/a8.jpg" alt=""></a>
<div class="meng">
<h5>
VIEW
</h5>
</div>
</li>
<li>
<a href="#"><img src="images/a5.jpg" alt=""></a>
<div class="meng">
<h5>
VIEW
</h5>
</div>
</li>
</ul>
</div><!-- portfolio结束 -->
<div id="services">
<div class="featured">
<h2>FEATURED SERVICES</h2>
<ul>
<li>
<div></div>
<div class="icon"></div>
<img src="images/1.png" alt="" class="img">
<h3>VOLUPTATEM</h3>
<p class="para">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugi.</p>
</li>
<li>
<div></div>
<div class="icon"></div>
<img src="images/2.png" alt="" class="img">
<h3>VOLUPTATEM</h3>
<p class="para">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugi.</p>
</li>
<li>
<div></div>
<div class="icon"></div>
<img src="images/3.png" alt="" class="img">
<h3>VOLUPTATEM</h3>
<p class="para">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugi.</p>
</li>
<li>
<div></div>
<div class="icon"></div>
<img src="images/3.png" alt="" class="img">
<h3>VOLUPTATEM</h3>
<p class="para">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugi.</p>
</li>
<li>
<div></div>
<div class="icon"></div>
<img src="images/1.png" alt="" class="img">
<h3>VOLUPTATEM</h3>
<p class="para">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugi.</p>
</li>
<li>
<div></div>
<div class="icon"></div>
<img src="images/2.png" alt="" class="img">
<h3>VOLUPTATEM</h3>
<p class="para">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugi.</p>
</li>
</ul>
</div>
<div class="newsletter">
<div class="wrap">
<h2>NEWSLETTER SIGN UP</h2>
<p class="para">Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing. </p>
<form action="#">
<input type="text" value="Enter email id" class="text">
<input type="submit" value="SUBSCRIBE" class="submit">
</form>
</div>
</div>
</div><!-- services结束 -->
<div id="contact">
<div class="get_touch">
<h2>GET IN TOUCH</h2>
<h4>Feel Free To Contact Us</h4>
<p class="para">Lorem ipsum dolor amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse</p>
</div>
<div class="form">
<div class="container">
<ul>
<li>
<img src="images/1.png" alt="">
<p class="para">Jl. Pahlawan VII No.247-D Sidoarjo-Surabaya-Indonesia</p>
</li>
<li>
<img src="images/menu.png" alt="">
<a href="#" class="para">rudhisasmito@gmail.com</a>
</li>
<li>
<img src="images/1.png" alt="">
<p class="para">+613 0000 0000</p>
</li>
</ul>
<input type="text" value="Your Name" class="text" >
<input type="text" value="Your Email" class="text text1">
<input type="text" value="Subject" class="text">
<textarea name="message" id="" cols="30" rows="10" class="textarea"></textarea>
<input type="submit" class="submit" value="SEND MESSAGE">
</div>
</div>
</div>
<div id="backTop"></div>
</body>
</html>