This is My New Personal Website which made with HTML, CSS, Bootstrap, JavaScript.
Imges:-
Home Page
About Page
Services Page
Skills and Comment Page
Contact Page
Check out the Website: https://imdos.ml
Here is the Source Code:- Download Materials
First you have to Implement Bootstrap with HTML Page.
HTML CODES:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Page Title --><title>Imdad Edition</title><!-- / --><!---Font Icon--><link href="static/plugin/font-awesome/css/fontawesome-all.min.css" rel="stylesheet"><link href="static/plugin/themify-icons/themify-icons.css" rel="stylesheet"><!-- / --><!-- Plugin CSS --><link href="static/plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="static/plugin/owl-carousel/css/owl.carousel.min.css" rel="stylesheet"><link href="static/plugin/magnific/magnific-popup.css" rel="stylesheet"><!-- / --><!-- Theme Style --><link href="static/css/styles.css" rel="stylesheet"><link href="static/css/color/default.css" rel="stylesheet" id="color_theme"><!-- / --><!-- Favicon --><link rel="icon" type="png" href="/static/img/icon.png" /><!-- / --></head><!-- Body Start --><body data-spy="scroll" data-target="#navbarImdad" data-offset="98"><!-- Loading --><div id="loading"><div class="load-circle"><span class="one"></span></div></div><!-- / --><!-- Header --><header><nav class="navbar header-nav fixed-top navbar-expand-lg"><div class="container"><!-- Brand --><a class="navbar-brand" href="#">Imdad Edition <span class="theme-bg"></span></a><!-- / --><!-- Mobile Toggle --><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarImdad" aria-controls="navbarImdad" aria-expanded="false" aria-label="Toggle navigation"><span></span><span></span><span></span></button><!-- / --><!-- Top Menu --><div class="collapse navbar-collapse justify-content-end" id="navbarImdad"><ul class="navbar-nav"><li><a class="nav-link active" href="#home">Home</a></li><li><a class="nav-link" href="#aboutus">About Us</a></li><li><a class="nav-link" href="#services">Services</a></li><li><a class="nav-link" href="#contact">Contact</a></li></ul></div></div></nav></header><!-- Main Start --><main><section id="home" class="home-banner gray-bg" style="background-image: url(static/img/bg_imdad.jpg);"><div class="sec-round"><div class="container full-height"><div class="round-item round-item-1"></div><div class="round-item round-item-2"></div><div class="round-item round-item-3"></div><div class="round-item round-item-4"></div><div class="round-item round-item-5"></div></div></div><div class="container"><div class="row full-screen align-items-center"><div class="col col-md-12 col-lg-8 col-xl-6 p-80px-tb"><div class="home-text-center theme-after m-50px-t"><h4>Hello, I am</h4><h5 class="font-alt">Imdadullah Babu</h5><p>Ethical Hacker/ Web Designer</p><div class="btn-bar"><a href="#" class="m-btn-link m-btn-link-white theme-after">Welcome to My World</a></div></div></div></div></div><a href="#aboutus" data-scroll="smooth" class="mouse-icon hidden-sm"><span class="wheel"></span></a></section><!-- About us --><section id="aboutus" class="section p-0px-b"><div class="container"><div class="row align-items-center"><div class="col-md-6"><div class="about-left"><h2>Imdadullah Babu</h2><h3>Ethical Hacker/ Web Designer</h3><p>I am a Certified Ethical Hacker, Web Designer/Developer and a Student. I am Currently Working for Some well known Cyber Security, Ethical Hacking, Web Developing, Video Editing, Photoshop etc. <br> Also Learning on ProgrammingField I Believe in Helping people with My Abilities and Knowledge base. I am learning these things from last 4-5 years and it feels like learning is a part of my life now.</p><p>My passion is to design digital user experiences through the bold interface and meaningful interactions. Check out my <a class="m-btn-link theme-after" href="#portfolio">Portfolio</a></p><a class="m-btn m-btn-theme" href="#contact">Contact Me <i class="ti-arrow-right"></i></a></div></div><div class="col-md-6 text-center sm-m-45px-t"><img src="static/img/Imdad.jpg" title="" alt=""></div></div></div></section><!-- Counter Start --><section class="counter-section"><div class="container"><div class="counter-row"><div class="row"><div class="col-6 col-md-3 col-sm-6 wow fadeInLeft"><div class="counter-col"><div class="counter-data" data-count="300"><div class="count">300</div><h6>Happy Clients</h6></div></div></div><div class="col-6 col-md-3 col-sm-6 wow fadeInLeft"><div class="counter-col"><div class="counter-data" data-count="375"><div class="count">375</div><h6>Telephonic Talk</h6></div></div></div><div class="col-6 col-md-3 col-sm-6 wow fadeInLeft"><div class="counter-col"><div class="counter-data" data-count="370"><div class="count">370</div><h6>Photo Capture</h6></div></div></div><div class="col-6 col-md-3 col-sm-6 wow fadeInLeft"><div class="counter-col"><div class="counter-data" data-count="450"><div class="count">450</div><h6>Project</h6></div></div></div></div></div></div></section><section id="services" class="section gray-bg services-section"><div class="container"><div class="row justify-content-center m-45px-b md-m-30px-b sm-m-25px-b"><div class="col-12 col-md-10 col-lg-7"><div class="section-title text-center"><h2 class="font-alt">My Services</h2><p>Choose your Need!</p></div></div></div><div class="row"><div class="col-12 col-md-6 col-lg-4"><div class="feature-box-02"><i class="icon theme-bg ti-layout"></i><div class="feature-content"><h5>Web Design</h5><p>When others focus on just graphic design, we look at your brand’s overall personal and device ways in which the website design can accentuate it online.</p><div class="read-more"><a href="#contact" class="more-btn">Contact Me<i class="ti-arrow-right"></i></a></div></div></div></div><div class="col-12 col-md-6 col-lg-4"><div class="feature-box-02"><i class="icon theme-bg ti-world"></i><div class="feature-content"><h5>Web Develop</h5><p>We make sure your website is updated with the latest content and your search engine ranking stays on top.</p><br><div class="read-more"><a href="#contact" class="more-btn">Contact Me<i class="ti-arrow-right"></i></a></div></div></div></div><div class="col-12 col-md-6 col-lg-4"><div class="feature-box-02"><i class="icon theme-bg ti-camera"></i><div class="feature-content"><h5>Photo Editing</h5><p>Our retouching services are professional, affordable and secure. Enjoy amazing results provided by our qualified photo retouchers. </p><br><div class="read-more"><a href="#contact" class="more-btn">Contact Me<i class="ti-arrow-right"></i></a></div></div></div></div><div class="col-12 col-md-6 col-lg-4"><div class="feature-box-02"><i class="icon theme-bg ti-video-clapper"></i><div class="feature-content"><h5>Video Editing</h5><p>Quality guaranteed video editing, audio editing, subtitling, animation, storyboard, more at a competitive pricing model. </p><br><div class="read-more"><a href="#contact" class="more-btn">Contact Me<i class="ti-arrow-right"></i></a></div></div></div></div><div class="col-12 col-md-6 col-lg-4"><div class="feature-box-02"><i class="icon theme-bg ti-android"></i><div class="feature-content"><h5>Android apps</h5><p>We have a strong team of Android app testers which make sure the Android apps we deliver are reliable and high performing and of very high quality.</p><div class="read-more"><a href="#contact" class="more-btn">Contact Me<i class="ti-arrow-right"></i></a></div></div></div></div><div class="col-12 col-md-6 col-lg-4"><div class="feature-box-02"><i class="icon theme-bg ti-image"></i><div class="feature-content"><h5>Logo Design</h5><p>We Provide you to get a custom logo at an affordable price.</p><br><br><br><div class="read-more"><a href="#contact" class="more-btn">Contact Me<i class="ti-arrow-right"></i></a></div></div></div></div></div></div></section><!-- Our Skill --><section class="section skill-section"><div class="container"><div class="row"><div class="col-md-6"><div class="skill-left p-80px-r md-p-40px-r sm-p-0px-r sm-m-40px-b"><h3 class="font-alt">Make beauty Things With Your Passion.</h3><p class="m-30px-b"></p><p class="m-btn m-btn-theme">My Skills <i class="ti-arrow-down"></i></p></div></div><div class="col-md-6"><div class="skills sm-m-20px-b"><div class="progress-lt"><h6>HTML</h6><span>92%</span><div class="progress"><div class="progress-bar theme-g-bg" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-lt"><h6>CSS</h6><span>84%</span><div class="progress"><div class="progress-bar theme-g-bg" role="progressbar" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-lt"><h6>JavaScript</h6><span>80%</span><div class="progress"><div class="progress-bar theme-g-bg" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-lt"><h6>Java (Learning)</h6><span>50%</span><div class="progress"><div class="progress-bar theme-g-bg" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-lt"><h6>PHp</h6><span>65%</span><div class="progress"><div class="progress-bar theme-g-bg" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-lt"><h6>Adobe PS, AI, PR, XD </h6><span>75%</span><div class="progress"><div class="progress-bar theme-g-bg" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-lt"><h6>Android Studio (Learning)</h6><span>60%</span><div class="progress"><div class="progress-bar theme-g-bg" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div></div></div></div></div></section><!-- Comments --><section class="section testimonial-section"><div class="container"><div class="row justify-content-center m-50px-b md-m-40px-b sm-m-25px-b"><div class="col-12 col-md-10 col-lg-7"><div class="section-title text-center"><h2 class="font-alt">What People Say?</h2><p></p></div></div></div><div class="row justify-content-center"><div class="col-md-12"><div id="client-slider-single" class="owl-carousel"><div class="testimonial-col"><div class="img"><img src="static/img/Shakil.jpg" alt="Imdad" title="Imdad" /></div><h6>Shakil Hassan</h6><p>Great Work!</p></div><div class="testimonial-col"><div class="img"><img src="static/img/Kabir.JPG" alt="Imdad" title="Imdad" /></div><h6>Kabir Mahboob</h6><p>One of the Best Design</p></div><div class="testimonial-col"><div class="img"><img src="static/img/Mahmudul.jpg" alt="Imdad" title="Imdad" /></div><h6>Mahmudul Hassan</h6><p>Amazing Dude!</p></div></div></div></div></div></section><!-- Contact Start --><section id="contact" class="section p-0px-b contact-section"><div class="container"><div class="row justify-content-center m-60px-b md-m-40px-b"><div class="col-12 col-md-10 col-lg-7"><div class="section-title text-center"><h2 class="font-alt">Contact Us</h2><p></p></div></div></div><div class="contact-us-box"><div class="row no-gutters"><div class="col-md-6"><div class="contact-info-box"><h2>get in touch</h2><p class="desc">If you have any type of Project on Mentioned this Website Kindly Contact Me!</p><div class="contact-info"><i class="icon theme-bg ti-direction"></i><p>Address<br> Bechimari, Darrang, Assam (INDIA)</p></div><div class="contact-info"><i class="icon theme-bg ti-email"></i><p>Email<br/>imdadullahbabu01@gmail.com</p></div><div class="contact-info"><i class="icon theme-bg ti-mobile"></i><p>Contact No<br/><a href="/static/plugin/contact-info.html">Type Password to get Number</a></p></div></div></div><div class="col-md-6"><!-- Contact Form --><div class="contact-form"><h2>Send your Message</h2><form action="contact" netlify><div class="form-group"><input name="Name" placeholder="Name" class="form-control" type="text" required></div><div class="form-group"><input name="Email" placeholder="Email" class="form-control" type="email" required></div><div class="form-group"><input name="Phone" placeholder="Phone" class="form-control" type="number" required></div><div class="form-group"><textarea name="comment" placeholder="Type your Message" rows="3" class="form-control" required></textarea></div><div class="send"><input class="m-btn m-btn-theme" type="submit" value="Send"></div></form></div></div></div></div></div></section></main><!-- Footer--><footer class="footer"><div class="container"><div class="footer-logo"><span>Imdadullah Babu</span></div><ul class="social-icons"><li><a href="https://www.facebook.com/eh.imdadullah"><i class="fab fa-facebook-f"></i></a></li><li><a href="https://www.instagram.com/eh.imdadullah/?hl=en"><i class="fab fa-instagram"></i></a></li><li><a href="https://twitter.com/babu_imdadullah"><i class="fab fa-twitter"></i></a></li><li><a href="https://www.linkedin.com/in/imdadullah-babu-b5840a118"><i class="fab fa-linkedin"></i></a></li><li><a href="https://github.com/imdadullah12"><i class="fab fa-github"></i></a></li><li><a href="https://www.t.me/Imdadullah12"><i class="fab fa-telegram"></i></a></li></ul><p class="copyright">© 2020 Imdad Edition. All Rights Reserved</p></div></footer><!-- jQuery --><script src="static/js/jquery-3.2.1.min.js"></script><script src="static/js/jquery-migrate-3.0.0.min.js"></script><!-- Plugins --><script src="static/plugin/bootstrap/js/popper.min.js"></script><script src="static/plugin/bootstrap/js/bootstrap.min.js"></script><script src="static/plugin/owl-carousel/js/owl.carousel.min.js"></script><script src="static/plugin/isotope/isotope.pkgd.min.js"></script><script src="static/plugin/magnific/jquery.magnific-popup.min.js"></script><script src="static/plugin/particles/particles.min.js"></script><script src="static/plugin/particles/particles-app.js"></script><!-- custom --><script src="static/js/custom.js"></script></body></html>
0 Comments