First commit add img css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..446d98a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>Document</title>
+ <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+ <link rel="stylesheet" href="css/style.css">
+ <link rel="stylesheet" href="css/font-awesome.min.css">
+</head>
+<body>
+ <header id="header">
+ <div class="container">
+ <nav>
+ <div id="logo">
+ <a href="">
+ <img src="images/logo1.png" alt="logo">
+ </a>
+ </div>
+
+ <ul class="nav">
+ <ul class="nav">
+
+ <li><a href="#home">home</a></li>
+
+ <li><a href="#about">about</a></li>
+
+ <li><a href="#service">service</a></li>
+
+ <li><a href="#portfolio">portfolio</a></li>
+
+ <li><a href="#contact">contact</a></li>
+
+ </ul>
+ </ul>
+ </nav>
+ </div>
+ </header>
+
+ <!-- Homepage Background Image -->
+ <section class="home_bg" id="home">
+ <div class="container_table">
+ <div class="container_table_cell">
+ <h2>hi, i am Charles</h2>
+
+ <div class="social_icons">
+ <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
+ <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
+ <a href=""><i class="fa fa-github-alt" aria-hidden="true"></i></a>
+ <a href=""><i class="fa fa-skype" aria-hidden="true"></i></a>
+ <a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- About Me -->
+ <section class="about_me clearfix" id="about">
+ <div class="container">
+ <h2>about me</h2>
+
+ <div class="summary">
+ <div class="col-left">
+ <div class="avatar">
+ <img src="images/me.png" alt="avatar">
+ </div>
+ </div>
+
+ <div class="col-right">
+ <div class="personal-info">
+ <h3>hello!</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit maiores facere consequatur omnis ipsa recusandae possimus aspernatur totam illum aliquam excepturi beatae veniam Lorem ipsum dolor sit amet, consectetur.</p>
+ </div>
+
+ <div class="skill">
+ <ul>
+ <li>html5 and css3</li>
+ <li>responsive website design</li>
+ <li>ruby on rails</li>
+ </ul>
+ </div>
+
+ <div class="button-group">
+ <div class="download_cv">
+ <a href="">download CV</a>
+ </div>
+ <div class="hire_me">
+ <a href="">hire me</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- What I Offer -->
+ <section class="my_service clearfix" id="service">
+ <div class="container">
+ <h2>what i offer</h2>
+
+ <div class="service-items">
+ <div class="service-content">
+ <i class="fa fa-html5" aria-hidden="true"></i>
+ <h3>web design and development</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, facere.</p>
+ </div>
+
+ <div class="service-content">
+ <i class="fa fa-css3" aria-hidden="true"></i>
+ <h3>web design and development</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, facere.</p>
+ </div>
+
+ <div class="service-content">
+ <i class="fa fa-camera-retro" aria-hidden="true"></i>
+ <h3>web design and development</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, facere.</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Resume -->
+ <section class="resume">
+ <div class="container">
+ <h2>resume</h2>
+
+ <div class="col-horizontal clearfix">
+ <h3 class="resume-subtitle">education:</h3>
+
+ <div class="col-item">
+ <p class="experience-year">2001 - 2002</p>
+ <div class="resume-detail">
+ <h4>computer science</h4>
+ <h6>google university, australia</h6>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam atque voluptates, dignissimos, in quaerat veritatis maiores fuga dolores dolorem eius.</p>
+ </div>
+ </div>
+
+ <div class="col-item">
+ <p class="experience-year">2002 - 2003</p>
+ <div class="resume-detail">
+ <h4>google collage</h4>
+ <h6>stanford university, BD</h6>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam atque voluptates, dignissimos, in quaerat veritatis maiores fuga dolores dolorem eius.</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-horizontal clearfix">
+ <h3 class="resume-subtitle">experience:</h3>
+
+ <div class="col-item">
+ <p class="experience-year">2004 - 2005</p>
+ <div class="resume-detail">
+ <h4>themeforest company, malibug</h4>
+ <h6>front end developer</h6>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam atque voluptates, dignissimos, in quaerat veritatis maiores fuga dolores dolorem eius.</p>
+ </div>
+ </div>
+
+ <div class="col-item">
+ <p class="experience-year">2005 - 2007</p>
+ <div class="resume-detail">
+ <h4>google company, australia</h4>
+ <h6>wordpress developer</h6>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam atque voluptates, dignissimos, in quaerat veritatis maiores fuga dolores dolorem eius.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section class="quotes">
+ <div class="overlay"></div>
+ <div class="container">
+ <div class="quote-inner">
+ <h3>Let's work together!</h3>
+ <p>I am available for freelance projects</p>
+ <a href="#">get quotes</a>
+ </div>
+ </div>
+ </section>
+
+ <!-- Latest Work -->
+ <section class="works" id="portfolio">
+ <div class="container">
+ <h2>latest work</h2>
+
+ <div class="work-items">
+ <div class="col-work">
+ <a href="images/me.png">
+ <img src="images/me.png" alt="portfolio-1">
+ </a>
+ </div>
+
+ <div class="col-work">
+ <a href="images/me.png">
+ <img src="images/me.png" alt="portfolio-2">
+ </a>
+ </div>
+
+ <div class="col-work">
+ <a href="images/me.png">
+ <img src="images/me.png" alt="portfolio-3">
+ </a>
+ </div>
+
+ <div class="col-work">
+ <a href="images/me.png">
+ <img src="images/me.png" alt="portfolio-4">
+ </a>
+ </div>
+
+ <div class="col-work">
+ <a href="images/me.png">
+ <img src="images/me.png" alt="portfolio-5">
+ </a>
+ </div>
+
+ <div class="col-work">
+ <a href="images/me.png">
+ <img src="images/me.png" alt="portfolio-6">
+ </a>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Contact -->
+ <section class="contact" id="contact">
+ <div class="container">
+ <h2>get in touch</h2>
+
+ <div class="contact-form">
+ <form action="">
+ <div class="form-input">
+ <input type="text" name="name" class="form-style" placeholder="input your name" required>
+ </div>
+
+ <div class="form-input">
+ <input type="email" name="email" class="form-style" placeholder="enter your email" required>
+ </div>
+
+ <div class="form-input">
+ <textarea name="textarea" id="message" cols="30" rows="10" placeholder="write message" required></textarea>
+ </div>
+
+ <div class="form-submit">
+ <input type="submit" name="submit" value="submit">
+ </div>
+ </form>
+ </div>
+ </div>
+ </section>
+
+ <!-- Footer -->
+ <footer id="footer">
+ <div class="container">
+ <div class="footer-content">
+ <p>© 2017 ALPHA Camp | All Rights Reserved.</p>
+ <div class="footer-social-icon">
+ <ul>
+ <li>
+ <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
+ <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
+ <a href=""><i class="fa fa-github-alt" aria-hidden="true"></i></a>
+ <a href=""><i class="fa fa-skype" aria-hidden="true"></i></a>
+ <a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </footer>
+
+</body>
+</html>