devfolio/index.html at master · Th3You7/devfolio · GitHub

1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"><link rel="stylesheet" href="./libs/owl-carousel/assets/owl.carousel.min.css"><link rel="stylesheet" href="./libs/owl-carousel/assets/owl.theme.default.min.css"><link rel="stylesheet" type="text/css" href="./style/style.min.css"><title>DevFolio</title></head><body><!-- Navbar --><nav class="navbar"><div class="container"><div class="navbar_wrapper"><a href="#" class="logo">DevFolio</a> <button class="nav_toggle"><span class="bar"></span> <span class="bar"></span> <span class="bar"></span></button><div class="nav_items"><a href="#" class="nav_item">home</a> <a href="#profile" class="nav_item">about</a> <a href="#services" class="nav_item">services</a> <a href="#portfolio" class="nav_item">work</a> <a href="#blog" class="nav_item">blog</a> <a href="#form" class="nav_item">contact</a></div></div></div></nav><!-- #Header --><header id="header"><div class="intro"><div class="container"><h1 class="intro_title">I am Morgan Freeman</h1><p class="subtitle"><span class="typed"></span></p></div></div></header><!-- Start Profile Section --><section id="profile"><div class="container"><div class="profile_wrapper"><div class="profile_info"><div class="profile_card"><div class="profile_img"><img src="./imgs/testimonial-2.jpg" alt="my image"></div><div class="info"><p><span class="title">name:</span> Morgan Freeman</p><p><span class="title">profile:</span> full stack developer</p><p><span class="title">email:</span> contact@exemple.com</p><p><span class="title">phone:</span> (617) 557-0089</p></div></div><div class="profile_skills"><span class="title">skill</span><div class="skill"><span class="skill_name">html</span> <span class="skill_percentage">85%</span><div class="progress"><div class="progress_html"></div></div></div><div class="skill"><span class="skill_name">css3</span><span class="skill_percentage">75%</span><div class="progress"><div class="progress_css"></div></div></div><div class="skill"><span class="skill_name">php</span><span class="skill_percentage">50%</span><div class="progress"><div class="progress_php"></div></div></div><div class="skill"><span class="skill_name">javascript</span><span class="skill_percentage">90%</span><div class="progress"><div class="progress_js"></div></div></div></div></div><div class="profile_about"><h3>About me</h3><p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt.</p><p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. porttitor at sem.</p><p>Nulla porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p></div></div></div></section><!-- End Profile Section --><!-- Start Services Section--><section id="services"><div class="container"><div class="services_heading"><h2 class="heading">services</h2><p class="subheading">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div><div class="services_wrapper"><div class="service"><div class="service_icon"><span class="icon-1"><i class="fas fa-desktop"></i></span></div><div class="service_content"><h3>Web design</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus inventore, itaque quisquam, vitae nam ex vel reiciendis quia ipsum reprehenderit magni Cum.</p></div></div><div class="service"><div class="service_icon"><span class="icon-2"><i class="fas fa-code"></i></span></div><div class="service_content"><h3>web development</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus inventore, itaque quisquam, vitae nam ex vel reiciendis quia ipsum reprehenderit magni Cum.</p></div></div><div class="service"><div class="service_icon"><span class="icon-3"><i class="fas fa-camera"></i></span></div><div class="service_content"><h3>photography</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus inventore, itaque quisquam, vitae nam ex vel reiciendis quia ipsum reprehenderit magni Cum.</p></div></div><div class="service"><div class="service_icon"><span class="icon-4"><i class="fas fa-mobile-alt"></i></span></div><div class="service_content"><h3>responsive design</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus inventore, itaque quisquam, vitae nam ex vel reiciendis quia ipsum reprehenderit magni Cum.</p></div></div><div class="service"><div class="service_icon"><span class="icon-5"><i class="fas fa-paint-brush"></i></span></div><div class="service_content"><h3>graphic design</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus inventore, itaque quisquam, vitae nam ex vel reiciendis quia ipsum reprehenderit magni Cum.</p></div></div><div class="service"><div class="service_icon"><span class="icon-6"><i class="fas fa-chart-bar"></i></span></div><div class="service_content"><h3>Marketing services</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus inventore, itaque quisquam, vitae nam ex vel reiciendis quia ipsum reprehenderit magni Cum.</p></div></div></div></div></section><!-- End Services Section--><!-- Start Achievement Section--><section id="achievs"><div class="container"><div class="achievs_wrapper"><div class="achiev"><div class="achiev_icon"><span class="icon-1"><i class="fas fa-check"></i></span></div><div class="achiev_content"><span class="num">450</span><p>WORKS COMPLETED</p></div></div><div class="achiev"><div class="achiev_icon"><span class="icon-2"><i class="far fa-calendar"></i></span></div><div class="achiev_content"><span class="num">15</span><p>YEARS OF EXPERIENCE</p></div></div><div class="achiev"><div class="achiev_icon"><span class="icon-3"><i class="fas fa-users"></i></span></div><div class="achiev_content"><span class="num">550</span><p>TOTAL CLIENTS</p></div></div><div class="achiev"><div class="achiev_icon"><span class="icon-4"><i class="fas fa-medal"></i></span></div><div class="achiev_content"><span class="num">36</span><p>AWARD WON</p></div></div></div></div></section><!-- End Achievement Section--><!-- Start Portfolio Section--><section id="portfolio"><div class="container"><div class="portfolio_heading"><h2 class="heading">portfolio</h2><p class="subheading">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div><div class="portfolio_wrapper"><div class="portfolio_card"><div class="card_img"><img src="./imgs/work-1.jpg" alt="tablet and coffe"></div><div class="card_content"><div class="content"><h3>Lorem, ipsum dolor</h3><p><span class="card_section">Web Design</span> / <time datetime="2018-09-18">Sep 18, 2018</time></p></div><div class="open_icon"><img src="./imgs/plus-circle.svg" alt=""></div></div></div><div class="portfolio_card"><div class="card_img"><img src="./imgs/work-2.jpg" alt="a desktop decor"></div><div class="card_content"><div class="content"><h3>Loreda cuno nere</h3><p><span class="card_section">Web Design</span> / <time datetime="2018-09-18">Sep 18, 2018</time></p></div><div class="open_icon"><img src="./imgs/plus-circle.svg" alt=""></div></div></div><div class="portfolio_card"><div class="card_img"><img src="./imgs/work-3.jpg" alt="laptop n papers"></div><div class="card_content"><div class="content"><h3>Mavrito Lana Dere</h3><p><span class="card_section">Web Design</span> / <time datetime="2018-09-18">Sep 18, 2018</time></p></div><div class="open_icon"><img src="./imgs/plus-circle.svg" alt=""></div></div></div><div class="portfolio_card"><div class="card_img"><img src="./imgs/work-4.jpg" alt="opened laptop and cup of coffe"></div><div class="card_content"><div class="content"><h3>bindo laro cado</h3><p><span class="card_section">Web Design</span> / <time datetime="2018-09-18">Sep 18, 2018</time></p></div><div class="open_icon"><img src="./imgs/plus-circle.svg" alt=""></div></div></div><div class="portfolio_card"><div class="card_img"><img src="./imgs/work-5.jpg" alt="desktop from above"></div><div class="card_content"><div class="content"><h3>Studio Lena Mado</h3><p><span class="card_section">Web Design</span> / <time datetime="2018-09-18">Sep 18, 2018</time></p></div><div class="open_icon"><img src="./imgs/plus-circle.svg" alt=""></div></div></div><div class="portfolio_card"><div class="card_img"><img src="./imgs/work-6.jpg" alt="book, notebooks and a phone"></div><div class="card_content"><div class="content"><h3>Mavrito Lana Dere</h3><p><span class="card_section">Web Design</span> / <time datetime="2018-09-18">Sep 18, 2018</time></p></div><div class="open_icon"><img src="./imgs/plus-circle.svg" alt=""></div></div></div></div></div></section><!-- End Portfolio Section--><!-- Start Testimonials Section --><section id="testimonials"><div class="container"><div id="testimonials_wrapper" class="owl-carousel owl-theme"><div class="testimonial"><div class="test_img"><img src="./imgs/testimonial-2.jpg" alt=""></div><div class="test_content"><span class="author">xabi alonso</span><p>Lore ipsum dolor sit amet consectetur, adipisicing elit. Numquam repudiandae sapiente totam, et blanditiis modi temporibus possimus id consequatur.</p></div></div><div class="testimonial"><div class="test_img"><img src="./imgs/testimonial-4.jpg" alt=""></div><div class="test_content"><span class="author">Marta socrate</span><p>Labore praesentium quos aliquam temporibus velit soluta fugit iusto. Ratione exercitationem adipisci eaque facere harum quidem ipsum quis reiciendis, voluptate illum</p></div></div></div></div></section><!-- End Testimonials Section --><!-- Start Blog Section--><section id="blog"><div class="container"><div class="blog_heading"><h2 class="heading">blog</h2><p class="subheading">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p></div><div class="blog_wrapper"><div class="blog_card"><a href="blog.html"><div class="card_img"><img src="./imgs/post-1.jpg" alt="post 1"></div></a><div class="card_content"><div class="category"><h6>travel</h6></div><a href="blog.html"><h3 id="blog_article">See more ideas about Travel</h3></a><p>Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p></div><div class="card_footer"><div class="post_author"><img src="./imgs/testimonial-2.jpg" alt=""><span>Morgan Freeman</span></div><div class="post_date"><span><i class="far fa-clock"></i> </span><time>10 min</time></div></div></div><div class="blog_card"><a href="blog.html"><div class="card_img"><img src="./imgs/post-2.jpg" alt="post 2"></div></a><div class="card_content"><div class="category"><h6>web design</h6></div><a href="blog.html"><h3>See more ideas about Design</h3></a><p>Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p></div><div class="card_footer"><div class="post_author"><img src="./imgs/testimonial-2.jpg" alt=""><span>Morgan Freeman</span></div><div class="post_date"><span><i class="far fa-clock"></i> </span><time>10 min</time></div></div></div><div class="blog_card"><a href="blog.html"><div class="card_img"><img src="./imgs/post-3.jpg" alt="post 3"></div></a><div class="card_content"><div class="category"><h6>web design</h6></div><a href="blog.html"><h3>See more ideas about Desing</h3></a><p>Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p></div><div class="card_footer"><div class="post_author"><img src="./imgs/testimonial-2.jpg" alt=""><span>Morgan Freeman</span></div><div class="post_date"><span><i class="far fa-clock"></i></span> <time>10 min</time></div></div></div></div></div></section><!-- End Blog Section--><!-- #Footer --><footer id="footer"><div class="container"><div class="contact"><div class="form"><h3>Message Us</h3><!--Form--><form id="form"><input type="text" placeholder="Your Name"><br><input type="email" placeholder="Your Email"><br><input type="text" placeholder="Subject"><br><textarea name="message" id="message" placeholder="Message"></textarea><br><button type="submit" id="submit">Send Message</button></form><!--Form --></div><div class="contact_info"><h3>Get in touch</h3><div class="info"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorum dolorem soluta quidem expedita aperiam aliquid at. Totam magni ipsum suscipit amet Autem nemo esse laboriosam ratione nobis mollitia inventore</p><ul><li><span><i class="fas fa-map-marker-alt"></i></span> 329 WASHINGTON ST BOSTON, MA 02108</li><li><span><i class="fas fa-phone"></i></span>(617) 557-0089</li><li><span><i class="fas fa-envelope"></i></span>contact@example.com</li></ul></div><div class="socials"><ul><li><a href="#"><span><i class="fab fa-facebook-f"></i></span></a></li><li><a href="#"><span><i class="fab fa-instagram"></i></span></a></li><li><a href="#"><span><i class="fab fa-twitter"></i></span></a></li><li><a href="#"><span><i class="fab fa-pinterest"></i></span></a></li></ul></div></div></div><!-- Copyright--><div class="copyright_wrapper"><p class="copyright">&copy; Copyright <strong>DevFolio</strong>. All Rights Reserved</p><p class="credits">Designed by BootstrapMade</p><p>Coded By <span>Th3You7</span></p></div></div></footer><!-- back to btn--> <a href="#header" id="back_top"><span><i class="fas fa-chevron-up"></i> </span></a><!-- #Preloader --><div class="preloader"><div></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script><script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script><script src="./script/script.min.js"></script></body></html>