| <!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>Welcome to Charles' site</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> |