<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Portfolio</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="responsive.css"> </head> <body> <!-- Navbar header section --> <header class="header"> <nav class="navbar"> <div class="logo"> <h2 class="logo-heading">Emrit Diyal</h2> </div> <div class="hamburger" id="hamburger"> <i class="fas fa-bars hamburger-icon"></i> <i class="fas fa-times cross-icon"></i> </div> <div class="menu"> <ul class="menu-list"> <li class="menu-list-items"> <a class="links" href="#home"> Home</a> </li> <li class="menu-list-items"> <a class="links" href="#portfolio"> Portfolio</a> </li> <li class="menu-list-items"> <a class="links" href="#about"> About </a> </li> <li class="menu-list-items"> <a class="links" href="#services"> Services </a> </li> <li class="menu-list-items"> <a class="links" href="#contact"> Contact Me </a> </li> </ul> </div> </nav> </header> <!-- Main hero banner --> <section id="home" class="hero"> <div class="intro"> <div class="headings"> <h3 class="greet-heading">Hello, I'm</h3> <h1 class="my-heading">Emrit Diyal</h1> <h4 class="sub-heading"> A Software Engineer with 3 years of Experience. </h4> </div> <div class="intro-buttons"> <button class="btn common-btn">Hire Me</button> <button class="btn ghost-btn">Get Resume</button> </div> </div> </section> <!-- Portfolio Section --> <section class="portfolio" id="portfolio"> <div class="portfolio-heading"> <h1 class="my-heading text-center">Featured Portfolio</h1> </div> <div class="portfolio-content"> <div class="my-row"> <div class="my-col"> <div class="my-card port-card"> <div class="image"> <img src="./Images/designImage2.avif" alt="Web Design Image"> </div> <h3 class="greet-heading blue-text">Web Design</h3> <p class="small-para blue-text">Designing</p> </div> </div> <div class="my-col"> <div class="my-card port-card"> <div class="image"> <img src="./Images/webDevelopment2.avif" alt="Web Development Image"> </div> <h3 class="greet-heading blue-text"> Web Development </h3> <p class="small-para blue-text">Development</p> </div> </div> <div class="my-col"> <div class="my-card port-card"> <div class="image"> <img src="./Images/SEOImage2.avif" alt="SEO Image"> </div> <h3 class="greet-heading blue-text">SEO</h3> <p class="small-para blue-text">Optimization</p> </div> </div> </div> <div class="my-row"> <div class="my-col"> <div class="my-card port-card"> <div class="image"> <img src="./Images/contentImage2.avif" alt="Content Writting Image"> </div> <h3 class="greet-heading blue-text"> Content Writing </h3> <p class="small-para blue-text">Writing</p> </div> </div> <div class="my-col"> <div class="my-card port-card"> <div class="image"> <img src="./Images/wordpressImage2.avif" alt="Wordpress Image"> </div> <h3 class="greet-heading blue-text"> Wordpress Dev </h3> <p class="small-para blue-text"> Content Management System </p> </div> </div> <div class="my-col"> <div class="my-card port-card"> <div class="image"> <img src="./Images/videoEditing2.avif" alt="Video Editing Image"> </div> <h3 class="greet-heading blue-text"> Video Editing </h3> <p class="small-para blue-text">Editing</p> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="about-text"> <h1 class="my-heading">About Me</h1> <p class="lead-para"> GeeksforGeeks is a leading platform that provides computer science resources and coding challenges for programmers and technology enthusiasts, along with interview and exam preparations for upcoming aspirants. With a strong emphasis on enhancing coding skills and knowledge, it has become a trusted destination for over 12 million plus registered users worldwide. The platform offers a vast collection of tutorials, practice problems, interview tutorials, articles, and courses, covering various domains of computer science. </p> <p> Our exceptional mentors hailing from top colleges & organizations have the ability to guide you on a journey from the humble beginnings of coding to the pinnacle of expertise. Under their guidance watch your skills flourish as we lay the foundation and help you conquer the world of coding. </p> </div> <div class="about-image"> <img src="./Images/heroImg2.avif" alt="About Image"> </div> </section> <!-- Services Section --> <section class="services" id="services"> <div class="services-heading"> <h1 class="my-heading text-center">My Services</h1> </div> <div class="services-content"> <div class="my-row"> <div class="my-col"> <div class="my-card"> <div class="icon"> <i class="fas fa-paint-brush"></i> </div> <h3 class="greet-heading blue-text">Web Design</h3> <p class="small-para"> Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </p> <p class="small-para"> Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </p> </div> </div> <div class="my-col"> <div class="my-card"> <div class="icon"> <i class="fa-solid fa-code"></i> </div> <h3 class="greet-heading blue-text"> Web Development </h3> <p class="small-para"> Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </p> <p class="small-para"> Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </p> </div> </div> <div class="my-col"> <div class="my-card"> <div class="icon"> <i class="fas fa-chart-line"></i> </div> <h3 class="greet-heading blue-text">SEO</h3> <p class="small-para"> Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </p> <p class="small-para"> Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </p> </div> </div> </div> <div class="my-row"> <div class="my-col"> <div class="my-card"> <div class="icon"> <i class="fas fa-quote-left"></i> </div> <h3 class="greet-heading blue-text"> Content Writting </h3> <p class="small-para"> Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </p> <p class="small-para"> Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </p> </div> </div> <div class="my-col"> <div class="my-card"> <div class="icon"> <i class="fab fa-wordpress-simple"></i> </div> <h3 class="greet-heading blue-text"> Wordpress Dev </h3> <p class="small-para"> Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </p> <p class="small-para"> Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </p> </div> </div> <div class="my-col"> <div class="my-card"> <div class="icon"> <i class="fas fa-video"></i> </div> <h3 class="greet-heading blue-text"> Video Editing </h3> <p class="small-para"> Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </p> <p class="small-para"> Web development refers to the creating, building, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites. </p> </div> </div> </div> </div> </section> <!-- Contact me section --> <section class="contact" id="contact"> <div class="contact-heading"> <h1 class="my-heading text-center">Contact Me</h1> </div> <div class="contact-content"> <div class="contact-form-container"> <h1 class="greet-heading">Get In Touch</h1> <form class="contact-form"> <input class="form-controls" type="text" placeholder="Your Name"> <input class="form-controls" type="text" placeholder="Your Email"> <input class="form-controls" type="text" placeholder="Your Phone"> <textarea class="form-controls" placeholder="Write your message" name="message" id="" cols="30" rows="10"> </textarea> <input class="form-btn btn common-btn" type="submit" value="Send Message"> </form> </div> <div class="contact-details"> <h1 class="greet-heading">My Contact Details</h1> <div class="details"> <h5 class="contact-heading">EMAIL</h5> <p class="contact-text">[email protected]</p> </div> <div class="details"> <h5 class="contact-heading">PHONE</h5> <p class="contact-text">+91 0123456789</p> </div> <div class="details"> <h5 class="contact-heading">FAX</h5> <p class="contact-text">+91 0123456789</p> </div> <div class="details"> <h5 class="contact-heading">ADDRESS</h5> <p class="contact-text">San Francisco, CA</p> <p>4th Floor8 Lower</p> <p>San Francisco street, M1 50F</p> </div> </div> </div> </section> <!-- Footer section --> <footer class="footer"> <div class="footer-content text-center"> <h4> Copyright © 2023 All rights reserved | This portfolio website template is created by GeeksforGeeks. </h4> <div class="social-links"> <div class="footer-menu"> <ul class="footer-menu-list"> <li class="footer-list-items"> <a class="footer-links" href="#"> <i class="fab fa-facebook-f"></i> </a> </li> <li class="footer-list-items"> <a class="footer-links" href="#"> <i class="fab fa-twitter"></i> </a> </li> <li class="footer-list-items"> <a class="footer-links" href="#"> <i class="fab fa-instagram"></i> </a> </li> <li class="footer-list-items"> <a class="footer-links" href="#"> <i class="fab fa-linkedin-in"></i> </a> </li> </ul> </div> </div> </div> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js" integrity="sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script> <script src="script.js"></script> </body> </html>