डेवलपर पोर्टफोलियो वेबसाइट टेम्पलेट

2102 lebdev

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

23 July 2025

न्यूमॉर्फिक प्रोफ़ाइल कार्ड HTML CSS टेम्पलेट

12 December 2025

टेलविंड सीएसएस और जीएसएपी का उपयोग करके बनाई गई सिनेमाई पोर्टफोलियो वेबसाइट

20 June 2025

HTML एडमिन डैशबोर्ड टेम्पलेट

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
</head>
<body>
    <main>
        
        <aside>
            <ul class="Links">
                <li onclick="Navigate(0)" class="activeLink">
                    <i class="fa-solid fa-house"></i><p>Dashboard</p>
                </li>
                <li onclick="Navigate(1)">
                    <i class="fa-solid fa-user"></i><p>Profile</p>
                </li>
                <li onclick="Navigate(2)">
                    <i class="fa-solid fa-briefcase"></i><p>Portfolio</p>
                </li>
                <li onclick="Navigate(3)">
                    <i class="fa-solid fa-camera"></i><p>Gallery</p>
                </li>
                <li onclick="Navigate(4)">
                    <i class="fa-solid fa-envelope"></i><p>Contact</p>
                </li>
            </ul>
        </aside>

<div class="swiper mySwiper">
            <div class="SlideContainer swiper-wrapper">
                
                
                <div class="swiper-slide home-slide">
                    <div class="HomeContent">
                        <h1>Hello! I'm <span class="stylized-name">Alex</span>,</h1>
                        <h2>A <span class="professions">Creative Designer</span></h2>
                        <p class="heroline">Passionate about crafting unique digital experiences. With over 7 years in design, I'm here to bring your ideas to life.</p>
                        <div class="buttonGroup">
                            <button>Get in Touch</button>
                            <button>View Portfolio</button>
                        </div>
                    </div>
                    <div class="SideImg">
                        <div class="top-right-corner">
                            <hr class="hr1"><hr class="hr2">
                        </div>
                        <img src="https://picsum.photos/id/238/200/200" alt="Profile Image">
                        <div class="bottom-left-corner">
                            <hr class="hr1"><hr class="hr2">
                        </div>
                    </div>
                    <p class="slide-help">Scroll for more <i class="fa-solid fa-chevron-right fa-shake"></i></p>
                </div>

<div class="swiper-slide about-us">
                    <h1 class="heading">About Me</h1>
                    <h3 class="sub-heading">I'm Alex, <span class="professions">A Creative Designer</span></h3>
                    <p class="aboutme-details">With a background in graphic design and web development, I bring a versatile skill set to any project. From sleek interfaces to powerful websites, my goal is to help brands thrive online.</p>
                    <div class="about-me-division">
                        
                        <div class="about-me-table">
                            <li><span>Experience:</span> 7+ years</li>
                            <li><span>Location:</span> United States</li>
                            <li><span>Availability:</span> Flexible</li>
                            <li><span>Projects Completed:</span> 150+</li>
                            <li><span>Age:</span> 28</li>
                            <li><span>Phone:</span> 987-654-3210</li>
                            <li><span>Languages:</span> HTML, CSS, JavaScript</li>
                            <li><span>Degree:</span> Graphic Design</li>
                            <div class="buttonGroup"><button>Hire Me</button><button>Contact Me</button></div>
                        </div>

<div class="skill-bar">
                            <li><p>HTML</p><div class="bar"><div class="active-bar" style="width:95%"></div></div></li>
                            <li><p>CSS</p><div class="bar"><div class="active-bar" style="width:90%"></div></div></li>
                            <li><p>JavaScript</p><div class="bar"><div class="active-bar" style="width:80%"></div></div></li>
                            <li><p>Photoshop</p><div class="bar"><div class="active-bar" style="width:85%"></div></div></li>
                            <li><p>Illustrator</p><div class="bar"><div class="active-bar" style="width:88%"></div></div></li>
                        </div>
                    </div>
                </div>

<div class="swiper-slide services">
                    <h1 class="heading">Services</h1>
                    <div class="service">
                        <div class="service-icon"><i class="fa-solid fa-laptop-code"></i></div>
                        <h2>UI/UX Design</h2>
                        <p>Crafting intuitive and aesthetic interfaces that engage users effectively.</p>
                    </div>
                    <div class="service">
                        <div class="service-icon"><i class="fa-solid fa-code"></i></div>
                        <h2>Front-End Development</h2>
                        <p>Responsive, fast, and reliable front-end development with modern technologies.</p>
                    </div>
                    <div class="service">
                        <div class="service-icon"><i class="fa-solid fa-search"></i></div>
                        <h2>SEO Optimization</h2>
                        <p>Enhancing website visibility with tailored SEO strategies.</p>
                    </div>
                </div>

<div class="swiper-slide gallery">
                    <h1 class="heading">Gallery</h1>
                    <div class="project"><img src="https://picsum.photos/200/300?random=11" alt="Project 1"></div>
                    <div class="project"><img src="https://picsum.photos/200/300?random=12" alt="Project 2"></div>
                    <div class="project"><img src="https://picsum.photos/200/300?random=13" alt="Project 3"></div>
                    <div class="project"><img src="https://picsum.photos/200/300?random=14" alt="Project 4"></div>
                </div>

<div class="swiper-slide contactMe">
                    <h1 class="heading">Contact</h1>
                    <div class="contactinfo"><i class="fa-solid fa-phone"></i><h3>Phone</h3><p>987-654-3210</p></div>
                    <div class="contactinfo"><i class="fa-solid fa-map-marker-alt"></i><h3>Location</h3><p>New York, USA</p></div>
                    <div class="contactinfo"><i class="fa-regular fa-envelope"></i><h3>Email</h3><p>alex@example.com</p></div>
                    <form>
                        <h2>Send a Message</h2>
                        <input type="text" placeholder="Your Name">
                        <input type="email" placeholder="Your Email">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
    <script>
        // JavaScript to initialize Swiper or any other functionality can go here.
    </script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bonbon&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
}

main {
    display: flex;
    height: 100%;
    width: 100%;
    font-family: Poppins;
}

aside {
    width: 280px;
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 1.1rem;
    background-color: #2c3e50;
    backdrop-filter: blur(20px);
}

.Links {
    display: flex;
    flex-direction: column;
    margin: auto;
}

aside li {
    list-style-type: none;
    display: flex;
    padding: 20px;
    gap: 10px;
    color: #ecf0f1;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition-duration: 0.2s;
}

aside li:hover {
    color: #3498db;
}

aside li::after {
    position: absolute;
    width: 100%;
    left: 0px;
    height: 1px;
    background: linear-gradient(to left, transparent, #bdc3c7, transparent);
    content: '';
    bottom: 0px;
}

aside li i {
    font-size: 1.3rem;
}

.activeLink {
    color: #3498db;
}

.mySwiper {
    flex: 1;
    height: 100%;
}

.home-slide {
    color: #ecf0f1;
    display: flex;
    background-color: #34495e;
}

.HomeContent {
    margin: auto 0px;
    flex: 1;
    height: auto;
    padding: 100px;
    user-select: none;
}

.SideImg {
    width: 30%;
    margin: auto 10px;
    margin-right: 100px;
    position: relative;
}

.SideImg img {
    width: 100%;
    border-radius: 10px;
}

.SideImg .top-right-corner, .bottom-left-corner {
    position: absolute;
}

.bottom-left-corner {
    left: -50px;
    bottom: -50px;
    rotate: -90deg;
}

.top-right-corner {
    right: -50px;
    top: -50px;
    rotate: 90deg;
}

.hr1 {
    width: 150px;
    height: 10px;
    border: none;
    background: #3498db;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.hr2 {
    width: 10px;
    height: 120px;
    border-bottom-left-radius: 3px;
    background: #3498db;
    border: none;
    border-bottom-right-radius: 3px;
}

.HomeContent h1 {
    font-size: 3em;
    font-weight: 700;
    margin-bottom: 10px;
}

.HomeContent h2 {
    font-size: 2.3em;
    margin-bottom: 10px;
    font-weight: 600;
}

.HomeContent h1 .stylized-name {
    font-weight: 700;
    color: #3498db;
}

.proffesions {
    color: #2980b9;
}

.HomeContent .heroline {
    font-size: 1.5rem;
    font-weight: 300;
    padding-right: 50px;
}

.buttonGroup {
    display: flex;
    padding: 10px 0px;
    margin-top: 10px;
}

.buttonGroup button, .primary {
    padding: 10px 20px;
    border: none;
    outline: none;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 5px;
    cursor: pointer;
    background-color: #2980b9;
    color: #ecf0f1;
    border-radius: 5px;
}

.slide-help {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-weight: 400;
    z-index: 100;
    left: 0%;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.2rem;
}

.mySwiper {
    width: 80vw;
    height: 100vh;
    overflow: hidden;
    background-color: #34495e;
}

.swiper-slide {
    width: 100%;
    background-color: #34495e;
    height: 100%;
}

.about-us {
    width: 100%;
    height: 100%;
    padding: 100px;
    color: #ecf0f1;
}

.heading {
    padding: 20px 10px;
    font-size: 2.5rem;
    color: #3498db;
}

.about-us h3 {
    padding: 10px;
}

.aboutme-details {
    padding: 20px;
    font-weight: 300;
}

.about-me-division {
    display: flex;
}

.about-me-table {
    width: 60%;
    display: grid;
    grid-template-columns: repeat(2, 50%);
}

.about-me-table li {
    padding: 20px;
    position: relative;
}

.about-me-table li::after {
    position: absolute;
    width: 100%;
    left: 0px;
    height: 1px;
    background: linear-gradient(to left, transparent, #bdc3c7, transparent);
    content: '';
    bottom: 0px;
}

.about-me-table span {
    color: #3498db;
    font-weight: bold;
    margin-right: 5px;
}

.about-me-table .buttonGroup {
    grid-column: 1/span 2;
    justify-content: center;
    padding: 50px;
    flex: 1;
}

.skill-bar {
    width: calc(40% - 20px);
}

.skill-bar li {
    width: 100%;
    padding: 10px;
}

.skill-bar p {
    color: #3498db;
    font-weight: bold;
    margin: 10px;
}

.skill-bar .bar {
    width: 100%;
    height: 15px;
    background-color: #2c3e50;
    border-radius: 20px;
}

.active-bar {
    background-color: #3498db;
    height: 100%;
    width: auto;
    border-radius: 20px;
}

.services {
    color: #ecf0f1;
    display: grid;
    grid-template-columns: repeat(3, calc(34% - 10px));
    grid-template-rows: 100px calc(50% - 50px) calc(50% - 50px);
    padding: 100px;
    box-sizing: border-box;
}

.services .heading {
    grid-column: 1/span 3;
}

.services .service {
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    margin: 20px;
    backdrop-filter: blur(10px);
    flex-direction: column;
    transition-duration: 0.25s;
}

.services .service i {
    font-size: 3rem;
    color: #3498db;
}

.services .service .service-icon {
    padding: 0px 50px;
    border-radius: 5px;
    margin: 20px auto;
}

.service h2 {
    color: #3498db;
}

.service:hover {
    background-color: #3498db;
    color: #2c3e50;
}

.service:hover h2, .service:hover i {
    color: #2c3e50;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    padding: 100px;
    grid-template-rows: 100px calc(50% - 50px) calc(50% - 50px);
}

.gallery h1, .gallery h2 {
    grid-column: 1/span 3;
}

.gallery h2 {
    color: #ecf0f1;
    font-weight: 600;
    font-size: 1.5rem;
    padding: 20px 10px;
}

.gallery .project {
    margin: 25px 20px;
    margin-top: 0px;
    background: #2c3e50;
    padding: 5px;
    border-radius: 20px;
}

.gallery .project img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    border: none;
}

.contactMe {
    display: grid;
    grid-template-columns: 20% 80%;
    grid-template-rows: 80px calc(25% - 20px) calc(25% - 20px) calc(25% - 20px) calc(25% - 20px);
    position: relative;
    padding: 100px;
}

.contactMe h1 {
    grid-column: 1/span 3;
    font-size: 2.5rem;
    padding: 30px;
}

.contactMe form {
    grid-area: 2/2/ span 5/span 2;
}

.contactinfo {
    display: flex;
    flex-direction: column;
    padding: 10px;
    color: #ecf0f1;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.contactinfo i {
    padding: 10px;
    font-size: 2.5rem;
    color: #3498db;
    margin: 20px auto;
}

.contactinfo h3 {
    color: #3498db;
}

.contactMe form {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    padding: 20px;
    height: fit-content;
    color: #ecf0f1;
}

.contactMe form h2 {
    grid-column: 1/span 2;
    padding: 20px;
    display: flex;
}

.contactMe form input {
    padding: 15px;
    border-radius: 10px;
    margin: 20px;
    font-size: 1.1rem;
    border: none;
    color: #ecf0f1;
    background-color: #2c3e50;
}

.contactMe form input:focus {
    border: 1px solid #2980b9;
    outline: none;
}

.contactMe form textarea {
    width: calc(100% - 40px);
    grid-column: 1/span 2;
    margin: 20px;
    padding: 20px;
    font-size: 1.1rem;
    border-radius: 10px;
    resize: none;
    border: none;
    color: #ecf0f1;
    background-color: #2c3e50;
}

.contactMe form textarea:focus {
    border: 1px solid #2980b9 !important;
}

.contactMe button {
    grid-column: 1/span 2;
    margin: 20px auto;
}

footer {
    position: absolute;
    bottom: 0px;
    right: 0px;
    text-align: center;
    color: #ecf0f1;
    width: 100%;
    font-weight: 200;
    font-size: 0.8rem;
}

footer li {
    padding: 10px;
}

form h2 .SocialLinks {
    padding: 5px;
    width: fit-content;
    margin-left: auto;
    margin-right: 10px;
    background-color: #2c3e50;
    border-radius: 30px;
}

form h2 .SocialLinks i {
    padding: 10px;
    border-radius: 50%;
    transition-duration: 0.25s;
}

form h2 .SocialLinks i:hover {
    background-color: #2980b9;
}

.about-us {
    overflow: auto;
}

अनुशंसित

न्यूमॉर्फिक प्रोफ़ाइल कार्ड HTML CSS टेम्पलेट

टेलविंड सीएसएस और जीएसएपी का उपयोग करके बनाई गई सिनेमाई पोर्टफोलियो वेबसाइट

HTML एडमिन डैशबोर्ड टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS