Hello fellow developers!
Are you ready to embark on a thrilling journey of creating your very own responsive personal portfolio website? 🌐✨ In this post, we're diving into the realms of HTML, CSS, and JavaScript to craft a stunning showcase of your skills and achievements.
No need to break a sweat—simply copy and paste the provided HTML and CSS code into your favorite code editor, and voila! You're on your way to a sleek and professional online presence.
🎨 Unleash Your Creativity
Modify and customize the code to reflect your unique style and personality. It's not just a website; it's your digital canvas, waiting for your artistic touch. 💻🎉
💡 What's Inside?
Explore the intricacies of responsive design, dynamic interactions with JavaScript, and a touch of CSS magic. Your portfolio is not just about code; it's a reflection of who you are as a developer.
🌈 Bring Your Website to Life
From clean HTML structures to stylish CSS layouts, and the functional elegance of JavaScript—your website will be more than just lines of code; it'll be a living, breathing showcase of your skills.
Ready to elevate your online presence? Let's code our way to a visually stunning and fully responsive personal portfolio website! 🚀🔥
Copy the code, modify it to your heart's content, and let your digital journey begin.
Preview
Click here to download images :- Download
HTML CODE
<!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.0"> <title> Sandeep - Frontend Web Developer </title> <link rel="icon" type="image/x-icon" href="./Images/20221227_132657.png"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" media="screen and (max-width: 821px)" href="responsive.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> </head> <body> <!-- Navbar Section --> <nav id="navbar" class="flex s-around bg-color"> <div class="left-nav"> <h2 class="t-white">Sandeep</h2> </div> <div class="right-nav"> <ul class="flex"> <li><a href="#home" class="t-white roboto">Home</a></li> <li><a href="#about" class="t-white roboto">About Me</a></li> <li><a href="#skills" class="t-white roboto">Skills</a></li> <li><a href="#services" class="t-white roboto">Services</a></li> <li><a href="#projects" class="t-white roboto">Projects</a></li> </ul> </div> </nav> <!-- Bottom Navigator --> <section id="bottom"> <div class="bottom-nav flex s-center items-center"> <ul class="flex s-around items-center"> <a href="#home"> <li class="bottomo-hover flex s-center items-center"><i class="fa-solid fa-house"></i></li> </a> <a href="#about"> <li class="bottomo-hover flex s-center items-center"><i class="fa-solid fa-user"></i></li> </a> <a href="#skills"> <li class="bottomo-hover flex s-center items-center"><i class="fa-solid fa-code"></i></li> </a> <a href="#services"> <li class="bottomo-hover flex s-center items-center"> <i class="fa-solid fa-rocket"></i> </li> </a> </ul> </div> </section> <!-- Home Section --> <section id="home" class="flex s-around sw-80 m-auto"> <div class="home-left flex items-center"> <div class="home-content"> <h6 class="poppinss">Hi, I'm</h6> <h1 class="t-white">Sandeep</h1> <h4 class="poppinss">Frontend Web Developer</h4> <a href="#" target="_blank"><button class="btn poppins">Resume</button></a> <a class="btn live poppins" id="hireme" href="https://in.linkedin.com/in/raju-sheoran-b220781b8" target="_blank">Let's Talk</a> </div> </div> <div class="home-right flex s-center items-center"> <div class="circle flex s-center items-center" id="mainImage"> <!-- Here in src replace the given link with your image link --> <img src="./Images/20221227_132657.png" alt=""> </div> </div> </section> <!-- About Section --> <section id="about"> <h1 class="t-center my-2 t-white f-2">About Me</h1> <div class="about-container flex s-around "> <div class=" about-left flex s-center items-center"> <!-- Here in src replade the given link with your secondary image link --> <img src="./Images/product_img2.jpg" alt="" style="width: 50%;"> </div> <div class="about-right flex"> <div class="about-content"> <h1 class="t-white m-b-1 poppins">Sandeep</h1> <p class="t-white poppins"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto, reprehenderit. Eos quis minima aperiam, numquam perspiciatis dignissimos natus mollitia enim aliquam sint unde sit expedita eum iste assumenda debitis tempore? <!-- A self-tought Frontend Web Developer BCA student looking for an opportunity in Web Development. <br> Who is committed to study web development. Mindset to fullfill the life with wonderful memories and knowledge. --> </p> <a class="btn live poppins" id="hireme" href="https://in.linkedin.com/in/raju-sheoran-b220781b8">Hire Me</a> </div> </div> </div> </section> <!-- Skills Section --> <section id="skills"> <h1 class="t-center my-2 t-white f-2">Skills</h1> <div class="services-container flex s-around h-50"> <div class=" skills-left flex s-center items-center"> <img src="/Images/skills.png" alt=""> </div> <div class="skills-right flex items-center"> <div class="skillss-container"> <div class="html bar p-relative"><span class="bar-content left t-white">HTML</span><span class="bar-content right-skills t-white">90%</span></div> <div class="css bar p-relative"><span class="bar-content left t-white">CSS</span><span class="bar-content right-skills t-white">80%</span></div> <div class="js bar p-relative"><span class="bar-content left t-white">JavaScript</span><span class="bar-content right-skills t-white">75%</span></div> <div class="bootstrap bar p-relative"><span class="bar-content left t-white">Bootstrap</span><span class="bar-content right-skills t-white">50%</span></div> <div class="reactjs bar p-relative"><span class="bar-content left t-white">ReactJs</span><span class="bar-content right-skills t-white">80%</span></div> <div class="html bar p-relative"><span class="bar-content left t-white">Python</span><span class="bar-content right-skills t-white">90%</span></div> </div> </div> </div> </section> <!-- Services Section --> <section id="services"> <h1 class=" t-center my-2 t-white f-2">Services</h1> <div class="services-container flex s-center"> <div class="test-item flex f-col items-center"> <img src="./Images//developer.png" alt=""> <h1 class="t-white poppins">Web Development</h1> <p class="t-white poppins">Web Development is envolving everywhere. Every startup and every bussines have their own websites. As my passion I will help you to build your clean and fast website for your startup or your bussines.</p> </div> <div class="test-item flex f-col items-center"> <img src="./Images//social-media-management.png" alt=""> <h1 class="t-white poppins">Social Media Management</h1> <p class="t-white poppins">Social Media is the power of future. So I'll help in developing brand awareness thow managing your social media handles and will to increase customer loyalty.</p> </div> <div class="test-item flex f-col items-center"> <img src="./Images//startup.png" alt=""> <h1 class="t-white poppins">Growth Strategies</h1> <p class="t-white poppins">As a web developer also I will help your brand to grow up . I will provide the growth strategies for your brand. And also help in searching techniques for your brand.</p> </div> </div> </section> <!-- Projects Section --> <section id="projects"> <h1 class=" t-center my-2 t-white f-2">Projects</h1> <div class="projects-container flex s-center"> <div class="projects-item flex f-col s-center items-center"> <div class="image-container p-one"> <img src="./Images/weatherApp.png" alt=""> </div> <h1 class="t-white poppins">Weather App</h1> <p class="t-white poppins"> A weather app using HTML, CSS and JavaScript. Fetch the weather from the openweather app using fetch api.</p> <div class="buttons flex s-around"> <a href="#" target="_blanks" class="btn mx-1 m-top">GitHub</a> <a href="#" target="_blanks" class="btn m-top live">Live Link</a> </div> </div> <div class="projects-item flex f-col s-center items-center"> <div class="image-container p-one"> <img src="./Images/burgerKing.png" alt=""> </div> <h1 class="t-white poppins">Burger King</h1> <p class="t-white poppins">A simple landing page using HTML and CSS. This webiste is for burger shop who provides all the information of thir services at this landing page.</p> <div class="buttons flex s-around"> <a href="#" target="_blanks" class="btn mx-1 m-top">GitHub</a> <a href="#" target="_blanks" class="btn m-top live">Live Link</a> </div> </div> <div class="projects-item flex f-col s-center items-center"> <div class="image-container p-two"> <img src="./Images/MBA.png" alt=""> </div> <h1 class="t-white poppins">MBA Chai Wala</h1> <p class="t-white poppins">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic obcaecati cum nemo recusandae voluptas ipsum.s</sp> <div class="buttons flex s-around"> <a href="#" target="_blank" class="btn mx-1 m-top">GitHub</a> <a href="#" target="_blank" class="btn m-top live">Live Link</a> </div> </div> <div class="projects-item flex f-col s-center items-center"> <div class="image-container p-three"> <img src="./Images/magicNotes.png" alt=""> </div> <h1 class="t-white poppins">Magic Notes App</h1> <p class="t-white poppins">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic obcaecati cum nemo recusandae voluptas ipsum.s</p> <div class="buttons flex s-around"> <a href="#" target="_blank" class="btn mx-1 m-top">GitHub</a> <a href="#" target="_blank" class="btn m-top live">Live Link</a> </div> </div> <div class="projects-item flex f-col s-center items-center"> <div class="image-container p-three"> <img src="./Images/login.png" alt=""> </div> <h1 class="t-white poppins">Login Form</h1> <p class="t-white poppins">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic obcaecati cum nemo recusandae voluptas ipsum.s</p> <div class="buttons flex s-around"> <a href="#" target="_blank" class="btn mx-1 m-top">GitHub</a> <a href="#" target="_blank" class="btn m-top live">Live Link</a> </div> </div> </div> </section> <!-- Contact Me Section --> <section id="contact" class="m-b-1"> <h1 class=" t-center my-2 t-white f-2">Contact Me</h1> <div class="contact-container flex s-around items-centers"> <div class="form" id="contactForm"> <form action="" id="contactFrom"> <div class="name form-div"> <input type="text" name="name" id="name" class="poppins" placeholder="Enter Your Name"> </div> <div class="email form-div"> <input type="email" name="email" id="email" class="poppins" placeholder="Enter Your Email" required> </div> <div class="phone form-div"> <input type="phone" name="phone" id="phone" class="poppins" placeholder="Enter Your Phone" required> </div> <div class="textarea form-div"> <textarea name="text" id="textarea" cols="30" rows="10" class="poppins" placeholder="Enter Messages"></textarea> </div> <button type="submit" class="btn poppins" id="submit">Send</button> </form> </div> </div> </section> <!-- Footer Section --> <footer id="footer"> <ul class="flex s-center w-80 m-auto my-2 res"> <li><a href="#home" class="poppinss">Home</a></li> <li><a href="#about" class="poppinss">About</a></li> <li><a href="#skills" class="poppinss">Skills</a></li> <li><a href="#projects" class="poppinss">Projects</a></li> <li><a href="#portfolio" class="poppinss">Portfolio</a></li> </ul> <ul class="flex s-center w-80 font-awesome "> <a href="https://in.linkedin.com/in/raju-sheoran-b220781b8" target="_blank"> <li><i class="fa-brands fa-linkedin-in"></i></li> </a> <a href="https://github.com/rajusheoran4" target="_blank"> <li><i class="fa-brands fa-github"></i></li> </a> <a href="https://www.instagram.com/raju_webdev" target="_blank"> <li><i class="fa-brands fa-instagram"></i></li> </a> <a href="https://www.youtube.com/channel/UC6ScgVJbFPpHAnRdrOSJMlg" target="_blank"> <li><i class="fa-brands fa-youtube"></i></li> </a> </ul> <p class="t-center my-2 poppins">© All Rights Reserved - <span class="cpy-white poppins">Sandeep</span></p> </footer> <div id="scroll-top" onclick="scrolltop()"> <span><i class="fa-solid fa-arrow-up"></i></span> </div> </body> <script src="script.js"></script> </html>
CSS CODE
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&family=Ubuntu:wght@300;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@500&family=Ubuntu:wght@300;500;700&display=swap'); body { background-color: #1f1f38; } * { margin: 0px; padding: 0px; box-sizing: border-box; font-family: 'Ubuntu', sans-serif; scroll-behavior: smooth; } #navbar { line-height: 4rem; position: sticky; top: 0; left: 0; z-index: 100; border-bottom: .5px solid #ffffff52; border-width: 80%; margin-bottom: 1rem; } #navbar ul { list-style: none; } #navbar ul li { margin: 0px 1rem; } #navbar ul li a { text-decoration: none; padding: 0.5rem 0.9rem; } nav .right-nav .flex li a:hover{ color: #4db5ff; } .right { display: none; } .checkBtn { display: none; } #check { display: none; } .nav-col a:hover { border-radius: .4rem; color: #1f1f38; background-color: #fff; } /* Home Section */ .home-left, .home-right { width: 48%; padding: 2rem; } .home-right { padding: 0; } .home-left h6, h4 { color: hsl(240deg 8% 43%); margin: 1rem 0; margin-left: 3px; font-size: 1.2rem; } .home-left h1 { font-size: 2.5rem; } .home-right { position: relative; } .home-right img { position: absolute; width: 100%; left: 0; top: 0; background-size: cover; border-radius: 62%; height: 100%; } .circle { width: 17rem; height: 17rem; border-radius: 50%; padding: .5rem; position: relative; } /* About Section */ .about-left, .about-right { width: 48%; } .about-right { padding-right: 4rem; } .aboout-left { position: relative; } .about-left img { width: 90%; border-radius: 1rem; } .about-content p { margin-bottom: 2rem; } /* Skills */ #skills { margin-top: 1rem; } .skills-left { width: 50%; } .skills-left img { width: 70%; } .skills-right { width: 50%; } .skillss-container { width: 100%; } .html { width: 90%; height: .5rem; background-color: #e54c21; margin: 1rem 0; border-radius: 12px; } .css { width: 80%; height: .5rem; background-color: #00a0e4; margin: 1rem 0; border-radius: 12px; } .js { width: 65%; height: .5rem; background-color: yellow; margin: 1rem 0; border-radius: 12px; } .bootstrap { width: 50%; height: .5rem; background-color: #7952b3; margin: 1rem 0; border-radius: 12px; } .reactjs { width: 80%; height: .5rem; background-color: #61dafb; margin: 1rem 0; border-radius: 12px; } .learning { width: 100%; height: .5rem; background-color: #61dbfb; margin: 1rem 0; border-radius: 12px; } .bar { margin: 2rem 0; } .bar-content { position: absolute; bottom: 10px; } .left { left: 0; } .right-skills { right: 0; } /* Services Container */ .services-container { margin: auto; overflow: hidden; width: 80%; } .test-item { width: 20rem; margin: 0 2rem; background: #2c2c6c; border: .5px solid #2c2c6c; border-radius: 1.5rem; padding: 2rem 1rem; text-align: center; transition: all .5s; } .test-item:hover { background-color: transparent; } .test-item img { margin-bottom: 1.3rem; width: 80%; } .test-item h1 { font-size: 1.2rem; margin-bottom: 1rem; } .services li .fa-solid { font-size: 2rem; color: white; margin-bottom: 1.3rem; } .test-item p { line-height: 20px; font-size: .9rem; } /* Projects Section */ .projects-container { justify-content: center; align-items: center; margin: auto; flex-wrap: wrap; } .image-container { bottom: 2rem; height: 10rem; position: relative; } .image-container img { border-radius: 1rem; } .image-container .p-one { width: 200px; } .p-three { background: url('project.png'); } .p-four { background: url('project.png'); } .projects-item { overflow: hidden; width: 20rem; margin: 1rem; background: #2c2c6c; border-radius: 1.5rem; padding: 2rem 1rem; text-align: center; } .projects-item h1 { font-size: 1.2rem; margin-bottom: 1rem; } .projects-item p { line-height: 20px; font-size: .9rem; } /* Contact me Section */ .form { display: flex; width: 80%; padding: 0 2rem; margin: auto; justify-content: center; align-items: center; } .form-div input, textarea { border: 2px solid rgba(77, 181, 255, .4); border-radius: .5rem; width: 100%; margin: 0.5rem 0rem; font-size: .9rem; background: transparent; margin: 0.5rem 0rem; padding: 0.5rem 1rem; color: white; resize: none; } /* Footer Section */ #footer { background-color: #4db5ff; padding: 1rem; } ul li { list-style: none; margin: 0 1rem; } ul li a { text-decoration: none; font-size: 1.2rem; color: #1f1f38; transition: all .5s; } ul li a:hover { color: #fff; } .font-awesome { margin: 1.1rem auto; } .font-awesome li i { background-color: #1f1f38; padding: 0.6rem; border: 1px solid #1f1f38; color: #fff; border-radius: 0.5rem; cursor: pointer; transition: all .4s ease-in-out; } .font-awesome li i:hover { border: 1px solid #1f1f38; border-radius: .5rem; background: transparent; color: #1f1f38; } #footer p { color: #1f1f38; font-size: .9srem; } /* Scroll Top */ #scroll-top { background-color: #4db5ff; color: #151527; padding: 9px; border-radius: 9px; width: 35px; height: 35px; position: fixed; bottom: 1rem; right: 4%; font-size: 1rem; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 2000; } /* Bottom Navigator */ #bottom { position: fixed; width: 100%; height: 6rem; display: none; justify-content: center; align-items: center; z-index: 1000; bottom: 0rem; } #bottom .bottom-nav { height: 4rem; padding: 0 2rem; background-color: #151527; border-radius: 3rem; z-index: 1000; display: -webkit-inline-box; } #bottom .bottom-nav li { color: #fff; width: 3rem; height: 3rem; cursor: pointer; padding: 1rem; border-radius: 50%; transition: all .4s ease-in-out; } #bottom .bottom-nav ul a { text-decoration: none; } #bottom .bottom-nav li:hover { background-color: #4db5ff; } #bottom .bottom-nav li:active { background-color: #4db5ff; } .cpy-white { color: white; } /* Utility Classes */ .poppins { font-family: 'Poppins', sans-serif; } .roboto { font-family: 'Roboto', sans-serif; } .flex { display: flex; } .s-between { justify-content: space-between; } .s-around { justify-content: space-around; } .s-center { justify-content: center; } .items-center { align-items: center; } .f-col { flex-direction: column; } .p-relative { position: relative; } .t-white { color: #fff; } .bg-color { background-color: #1f1f38; } .t-center { text-align: center; } .my-2 { margin: 2rem 0; } .f-2 { font-size: 2rem; } .m-b-1 { margin-bottom: 1rem; } .w-50 { width: 50%; } .w-80 { width: 80%; } .h-50 { height: 50vh; } .mx-1 { margin: 0 1rem; } .m-top { margin-top: 1rem; } .m-auto { margin: auto; } .btn { margin-left: 0 .5rem; font-size: 1rem; color: #4db5ff; cursor: pointer; padding: 0.75rem 1.2rem; border: 1px solid #4db5ff; border-radius: 0.4rem; background: transparent; font-family: 'Poppins', sans-serif; } .buttons a, #hireme { margin-left: 2rem; text-decoration: none; } .btn:hover { color: #1f1f38; border-color: #fff; background-color: #fff; } .live { color: #1f1f38; background-color: #4db5ff; }
JavaScript CODE
function scrolltop() { let a = window.document; a = location.href = '#home'; } let contact = document.getElementById('contactForm'); contact.addEventListener('submit', function (e) { e.preventDefault(); alert(`Sorry Request cannot be accepted due to some technical errors`); })
Follow Us