Modul KKN SI 2025

Web Development

Progress90%
Logo SI

Dokumentasi Website Portofolio

Sub-bab 1

Preview

Mulai Praktek !

Saatnya mengimplementasikan apa yang telah dipelajari

Progress: 25% - Mari mulai praktek coding!

Selamat Datang di Sesi Praktek!

Pada sesi ini, kita akan menerapkan konsep-konsep yang telah dipelajari sebelumnya. Anda akan mendapatkan pengalaman langsung dalam coding dan melihat hasil karya Anda secara real-time.

Hands-on Coding

Praktek langsung dengan code editor interaktif menggunakan StackBlitz

Live Preview

Lihat hasil code Anda secara langsung tanpa perlu setup environment

Buka Live Preview →

Siap Memulai Petualangan Coding?

Semua materi telah disiapkan dengan baik. Sekarang saatnya untuk terjun langsung dan mengaplikasikan ilmu yang telah dipelajari. Mari kita coding!

Sub-bab 3

Implementasi Hero Section

Hero Section HTML & CSS

Langkah 22 / 7
index.html

    <!-- Main Content -->
    <div class="main-content">
        <div class="decorative-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
            <div class="shape shape-4"></div>
            <div class="shape shape-5"></div>
            <div class="shape shape-6"></div>
        </div>

        <!-- Hero Section -->
        <div class="hero-section">
            <div class="hero-image">
                <img src="./image/hero-section-profil.png" alt="Profile Picture">
            </div>
            <h1 class="hero-title">
                I'm Rifki Ardhana<br>
                <span class="highlight">Front-end</span> Developer
            </h1>
            <p class="hero-description">
                Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit, Et, Volutpat Feugiat Placerat Lobortis. Natoque Rutrum Semper Sed Suspendisse Nunc Lectus.
            </p>
            <a href="#" class="hire-btn">
                HIRE ME <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
style-hero.css

/* Main Content */
.main-content {
    flex: 1;
    background: var(--bg-white);
    border-radius: 20px;
    padding: 60px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 50px);
}

.decorative-shapes {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.shape {
    position: absolute;
    border-radius: 50%;
}

.shape-1 {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    top: 80px;
    right: 300px;
}

.shape-2 {
    width: 15px;
    height: 15px;
    background: var(--success-color);
    top: 50px;
    right: 450px;
}

.shape-3 {
    width: 25px;
    height: 25px;
    border: 3px solid var(--primary-color);
    background: transparent;
    top: 120px;
    right: 200px;
}

.shape-4 {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 14px solid var(--secondary-color);
    top: 200px;
    right: 100px;
    border-radius: 0;
}

.shape-5 {
    width: 18px;
    height: 18px;
    background: var(--warning-color);
    top: 160px;
    right: 320px;
}

.shape-6 {
    width: 22px;
    height: 22px;
    background: var(--success-color);
    top: 250px;
    right: 250px;
}

.hero-section {
    position: relative;
    z-index: 1;
    margin-bottom: 80px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-title .highlight {
    color: var(--primary-color);
}

.hero-description {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 40px;
    max-width: 500px;
}

.hire-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.hire-btn:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    color: white;
}

.hire-btn i {
    margin-left: 8px;
}

.hero-image {
    position: absolute;
    right: -20px;
    width: 350px;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
Sub-bab 4

Implementasi About Section

About Section HTML & CSS

Langkah 33 / 7
index.html

<!-- About Me Section -->
<div class="about-section">
    <h2 class="about-title">About Me</h2>
    <p class="about-subtitle">User Interface/User Experience And Front End Developer</p>
    
    <div class="about-content">
        <div class="about-image">
            <img src="./image/about-profil.jpeg" alt="About Me Profile Picture">
        </div>
        <div class="about-text">
            <p class="about-description">
                A software engineer, the modern-day architect of digital realms, navigates the ethereal landscapes of code, sculpting intangible structures that shape our technological world. With fingers poised over keyboards like virtuoso pianists, they compose symphonies of logic, their minds a labyrinth of algorithms and solutions.
            </p>
            <p class="about-description">
                Their canvas is a screen, a vast expanse where lines of code dance in intricate patterns, weaving the fabric of programs and applications. Each keystroke is a brushstroke, crafting intricate architectures and breathing life into innovative designs. In this digital atelier, they don the mantle of problem solvers, confronting bugs and glitches like valiant knights in an ever-evolving quest for perfection.
            </p>
        </div>
    </div>
</div>
style-about.css

/* About Me Section */
.about-section {
    position: relative;
    z-index: 1;
    margin-bottom: 80px;
    background: var(--bg-white);
    color: white;
    padding: 80px 60px;
    border-radius: 10px;
    margin-left: -60px;
    margin-right: -60px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
                rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-image {
    flex: 0 0 300px;
    position: relative;
}

.about-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    filter: brightness(0.9);
}

.about-text {
    flex: 1;
}

.about-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
    text-align: center;
}

.about-subtitle {
    color: var(--text-light);
    text-align: center;
    margin-bottom: 40px;
    font-size: 1rem;
}

.about-description {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: justify;
}

.about-download-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.about-download-btn:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    color: white;
}
Sub-bab 5

Implementasi Education Section

Education Section HTML & CSS

Langkah 44 / 7
index.html

<!-- Education Section -->
<div class="education-section">
    <h2 class="education-title">Education</h2>
    
    <div class="education-timeline">
        <div class="education-item">
            <div class="education-content">
                <div class="education-left">
                    <h4>University Of Toronto</h4>
                    <p class="education-role">Student</p>
                    <span class="education-date">Jan 2016 - Dec 2021</span>
                </div>
                <div class="education-right">
                    <h5>Certificate Of Web Training</h5>
                    <p class="education-desc">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium voluptatum repellendus culpa cum ad fuga deserunt omnis mollitia molestiae dolores qui facere est obcaecati alias quidem velit, inventore veritatis libero.
                    </p>
                </div>
            </div>

            <div class="education-content">
                <div class="education-left">
                    <h4>University Of Toronto</h4>
                    <p class="education-role">Student</p>
                    <span class="education-date">Jan 2016 - Dec 2021</span>
                </div>
                <div class="education-right">
                    <h5>Certificate Of Web Training</h5>
                    <p class="education-desc">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium voluptatum repellendus culpa cum ad fuga deserunt omnis mollitia molestiae dolores qui facere est obcaecati alias quidem velit, inventore veritatis libero.
                    </p>
                </div>
            </div>

            <div class="education-content">
                <div class="education-left">
                    <h4>University Of Toronto</h4>
                    <p class="education-role">Student</p>
                    <span class="education-date">Jan 2016 - Dec 2021</span>
                </div>
                <div class="education-right">
                    <h5>Certificate Of Web Training</h5>
                    <p class="education-desc">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium voluptatum repellendus culpa cum ad fuga deserunt omnis mollitia molestiae dolores qui facere est obcaecati alias quidem velit, inventore veritatis libero.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
style-education.css
 /* Education Section */
        .education-section {
            position: relative;
            z-index: 1;
            margin-bottom: 60px;
        }

        .education-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-top: 40px;
            margin-bottom: 20px;
            text-align: center;
        }

        .education-description {
            color: var(--text-light);
            text-align: center;
            margin-bottom: 60px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .education-timeline {
            max-width: 100%;
            margin: 0 auto;
        }

        .education-item {
            margin-bottom: 40px;
            background: var(--bg-light);
            border-radius: 15px;
            padding: 40px;
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
        }

        .education-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .education-content {
            display: flex;
            margin-bottom: 50px;
            gap: 40px;
            align-items: flex-start;
        }

        .education-left {
            flex: 0 0 280px;
        }

        .education-left h4 {
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 8px;
        }

        .education-role {
            color: var(--text-light);
            font-size: 1rem;
            margin-bottom: 15px;
        }

        .education-date {
            background: var(--primary-color);
            color: white;
            padding: 8px 16px;
            border-radius: 25px;
            font-size: 0.9rem;
            font-weight: 500;
            display: inline-block;
        }

        .education-right {
            flex: 1;
        }

        .education-right h5 {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 15px;
        }

        .education-desc {
            color: var(--text-light);
            font-size: 1rem;
            line-height: 1.7;
            text-align: justify;
        }
Sub-bab 6

Implementasi Services Section

Services Section HTML & CSS

Langkah 55 / 7
index.html

    <!-- Services Section -->
        <div class="services-section">
            <h2 class="services-title">My Services</h2>
            <p class="services-description">
                Amet Minim Mollit Non Deserunt Ullamco Est Sit Aliqua Dolor Do Amet Sint. Velit Officia Consequat Duis Enim Velit Mollit. Lorem Ipsum
            </p>

            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-code"></i>
                    </div>
                    <h4>Web Development</h4>
                    <p>Blog, E-Commerce</p>
                </div>

                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h4>UI/UX Design</h4>
                    <p>Mobile App, Website Design</p>
                </div>

                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-microphone"></i>
                    </div>
                    <h4>Sound Design</h4>
                    <p>Voice Over, Beat Making</p>
                </div>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-gamepad"></i>
                    </div>
                    <h4>Game Design</h4>
                    <p>Character Design, Props & Objects</p>
                </div>


                    <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-camera"></i>
                    </div>
                    <h4>Photography</h4>
                    <p>Portrait, Product Photography</p>
                </div>

                <div class="service-card">
                    <div class="service-icon">
                        <i class="fa-solid fa-chart-simple"></i>
                    </div>
                    <h4>Digital Marketing</h4>
                    <p>Content Sosmed, Product Digital</p>
                </div>
            </div>
        </div>
style-services.css

    /* Services Section */
        .services-section {
            position: relative;
            z-index: 1;
        }

        .services-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 20px;
            text-align: center;
        }

        .services-description {
            color: var(--text-light);
            text-align: center;
            margin-bottom: 60px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 40px;
        }

        .service-card {
            background: var(--bg-white);
            padding: 40px 30px;
            border-radius: 15px;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

        .service-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            background: var(--primary-color);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
        }

        .service-card h4 {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 15px;
        }

        .service-card p {
            color: var(--text-light);
            font-size: 0.95rem;
        }
        .order-link {
            color: white;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 15px;
            display: inline-block;
        }
Sub-bab 7

Implementasi Portofolio Section

Portofolio Section HTML & CSS

Langkah 66 / 7
index.html

     <!-- Portfolio Section -->
                <div class="portfolio-section">
                    <h2 class="portfolio-title">Portfolio</h2>
                    <p class="portfolio-description">
                        Amet Minim Mollit Non Deserunt Ullamco Est Sit Aliqua Dolor Do Amet Sint. Velit Officia Consequat Duis Enim Velit Mollit. Lorem Ipsum
                    </p>
    
                    <div class="portfolio-filters">
                        <button class="filter-btn active" data-filter="all">All</button>
                        <button class="filter-btn" data-filter="website">Website Design</button>
                        <button class="filter-btn" data-filter="mobile">App Mobile Design</button>
                        <button class="filter-btn" data-filter="desktop">App Desktop</button>
                        <button class="filter-btn" data-filter="desktop">Photography</button>
                    </div>
    
                    <div class="portfolio-grid">
                        <div class="portfolio-item" data-category="website">
                            <div class="portfolio-image">
                                <img src="" alt="">
                            </div>
                            <div class="portfolio-info">
                                <h4>Name Project</h4>
                                <span class="portfolio-category">Website</span>
                            </div>
                        </div>
    
                        <div class="portfolio-item" data-category="mobile">
                            <div class="portfolio-image">
                                <img src="" alt="">
                            </div>
                            <div class="portfolio-info">
                                <h4>Name Project</h4>
                                <span class="portfolio-category"> Mobile</span>
                            </div>
                        </div>
    
                        <div class="portfolio-item" data-category="desktop">
                            <div class="portfolio-image">
                                <img src="" alt="">
                            </div>
                            <div class="portfolio-info">
                                <h4>Name Project</h4>
                                <span class="portfolio-category">Desktop</span>
                            </div>
                        </div>
    
                        <div class="portfolio-item" data-category="Desktop">
                            <div class="portfolio-image">
                                <img src="" alt="">
                            </div>
                            <div class="portfolio-info">
                                <h4>Name Project</h4>
                                <span class="portfolio-category">Desktop</span>
                            </div>
                        </div>
    
                        <div class="portfolio-item" data-category="Website">
                            <div class="portfolio-image">
                                <img src="" alt="">
                            </div>
                            <div class="portfolio-info">
                                <h4>Name Project</h4>
                                <span class="portfolio-category">Website </span>
                            </div>
                        </div>
    
                        <div class="portfolio-item" data-category="Mobile">
                            <div class="portfolio-image">
                                <img src="" alt="">
                            </div>
                            <div class="portfolio-info">
                                <h4>Name Project</h4>
                                <span class="portfolio-category">Mobile</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
style-portofolio.css

     /* portfolio Section */
        .portfolio-section {
            position: relative;
            z-index: 1;
        }

        .portfolio-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 20px;
            text-align: center;
        }

        .portfolio-description {
            color: var(--text-light);
            text-align: center;
            margin-bottom: 50px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            font-size: 1.1rem;
        }

        .portfolio-filters {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            background: var(--bg-white);
            color: var(--text-light);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            font-family: inherit;
        }

        .filter-btn:hover {
            background: var(--primary-color);
            color: var(--bg-white);
            transform: translateY(-2px);
        }

        .filter-btn.active {
            background: var(--primary-color);
            color: var(--bg-white);
            box-shadow: 0 4px 15px rgba(255, 167, 38, 0.3);
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 40px;
        }

        .portfolio-item {
            background: var(--bg-white);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
            position: relative;
        }

        .portfolio-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        .portfolio-image {
            height: 280px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--bg-light) 0%, #E2E8F0 100%);
        }

        .portfolio-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .portfolio-item:hover .portfolio-image img {
            transform: scale(1.05);
        }

        .portfolio-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 30px;
            background: linear-gradient(135deg, rgba(255, 167, 38, 0.1) 0%, rgba(255, 112, 67, 0.1) 100%);
        }

        .portfolio-placeholder i {
            font-size: 3rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

        .portfolio-placeholder h4 {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 10px;
        }

        .portfolio-placeholder p {
            color: var(--text-light);
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .portfolio-info {
            padding: 25px;
            background: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .portfolio-info h4 {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-dark);
            margin: 0;
        }

        .portfolio-category {
            display: inline-block;
            padding: 6px 12px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: var(--bg-white);
            font-size: 0.85rem;
            font-weight: 500;
            border-radius: 20px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        @media (max-width: 1024px) {
            .portfolio-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }
        }

        @media (max-width: 768px) {
            .portfolio-title {
                font-size: 2rem;
            }

            .portfolio-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .portfolio-filters {
                gap: 10px;
            }

            .filter-btn {
                padding: 10px 18px;
                font-size: 0.9rem;
            }

            .portfolio-image {
                height: 240px;
            }

            .portfolio-placeholder {
                padding: 20px;
            }

            .portfolio-placeholder i {
                font-size: 2.5rem;
            }

            .portfolio-placeholder h4 {
                font-size: 1.1rem;
            }

            .portfolio-info {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 20px 15px;
            }

            .portfolio-title {
                font-size: 1.8rem;
            }

            .portfolio-description {
                font-size: 1rem;
            }

            .portfolio-filters {
                flex-direction: column;
                align-items: center;
            }

            .filter-btn {
                width: 200px;
                text-align: center;
            }

            .portfolio-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Animation for filter transitions */
        .portfolio-item {
            opacity: 1;
            transform: scale(1);
            transition: all 0.5s ease;
        }

        .portfolio-item.filtered {
            opacity: 0;
            transform: scale(0.8);
            pointer-events: none;
        }

        /* Hover effects */
        .portfolio-item:hover .portfolio-placeholder {
            background: linear-gradient(135deg, rgba(255, 167, 38, 0.2) 0%, rgba(255, 112, 67, 0.2) 100%);
        }

        .portfolio-item:hover .portfolio-placeholder i {
            transform: scale(1.1);
            transition: transform 0.3s ease;
        }
Sub-bab 8

Implementasi Contact Section

Contact Section HTML & CSS

Langkah 77 / 7
index.html

            <!-- Contact Section  -->
        <section class="contact-section">
            <h2 class="section-title-contact">Contact Information</h2>
            <div class="row">
                <!-- Contact Form - Main Content -->
                <div class="col-lg-8">
                    <div class="main-content-contact"> 
                            <form id="contactForm">
                                <div class="mb-4">
                                    <label for="fullName" class="form-label">Your Full Name (Required)</label>
                                    <input type="text" class="form-control" id="fullName" required>
                                </div>

                                <div class="mb-4">
                                    <label for="email" class="form-label">Your Email (Required)</label>
                                    <input type="email" class="form-control" id="email" required>
                                </div>

                                <div class="mb-4">
                                    <label for="subject" class="form-label">Subject</label>
                                    <input type="text" class="form-control" id="subject">
                                </div>

                                <div class="mb-4">
                                    <label for="message" class="form-label">Your Message</label>
                                    <textarea class="form-control" id="message" rows="5"></textarea>
                                </div>

                                <button type="submit" class="btn btn-send">
                                    <i class="fas fa-paper-plane me-2"></i>
                                    Send Message
                                </button>
                            </form>
                    </div>
                </div>

                <!-- Contact Information Sidebar -->
                <div class="col-lg-4">
                    <div class="sidebar-contact">
                        <!-- Location Info -->
                        <div class="info-group">
                            <div class="info-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="info-item">
                                <span class="info-label-contact">Country:</span>
                                <span class="info-value">Indonesia</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label-contact">City:</span>
                                <span class="info-value">Surabaya</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label-contact">Street:</span>
                                <span class="info-value">17 Citraland, Ciputra</span>
                            </div>
                        </div>

                        <!-- Email Info -->
                        <div class="info-group">
                            <div class="info-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="info-item">
                                <span class="info-label-contact">Email:</span>
                                <span class="info-value">Rifkiardhana@Gmail.Com</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label-contact">Instagram:</span>
                                <span class="info-value">@rifkiardhana_</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label-contact">Facebook:</span>
                                <span class="info-value">Rifki Ardhana</span>
                            </div>
                        </div>

                        <!-- Phone Info -->
                        <div class="info-group">
                            <div class="info-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div class="info-item">
                                <span class="info-label-contact">Support Services:</span>
                                <span class="info-value">15369</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label-contact">Office:</span>
                                <span class="info-value">+58 (021)356 587 235</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label-contact">Personal:</span>
                                <span class="info-value">+58 (021)356 587 235</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>
style-contact.css

    /* Contact Section */
         .contact-section {
            padding: 60px 0;
        }

        .section-title-contact {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--text-dark);
            text-align: center;
            margin-bottom: 60px;
        }

        .main-content-contact {
            flex: 1;
            padding-right: 30px;
            border-radius: 20px;
            padding: 60px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }
        .form-label {
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 8px;
            font-size: 0.95rem;
        }

        .form-control {
            border: 2px solid var(--border-color);
            border-radius: 12px;
            padding: 15px 20px;
            font-size: 1rem;
            background: var(--bg-light);
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(255, 167, 38, 0.15);
            background: var(--bg-white);
        }

        .form-control::placeholder {
            color: var(--text-light);
        }

        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }

        .btn-send {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border: none;
            color: white;
            padding: 15px 30px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .btn-send:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 167, 38, 0.3);
            color: white;
        }

        /* Sidebar Styles */
        .sidebar-contact {
            width: 300px;
            background: var(--bg-white);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            height: fit-content;
            position: sticky;
            top: 30px;
        }

        .contact-info-groups {
            margin-bottom: 30px;
        }

        .info-group {
            margin-bottom: 30px;
        }

        .info-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            color: white;
            font-size: 1.2rem;
        }

        .info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 9px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .info-item:last-child {
            border-bottom: none;
        }

        .info-label-contact {
            font-weight: 500;
            color: var(--text-light);
            font-size: 0.85rem;
        }

        .info-value {
            font-weight: 600;
            color: var(--text-dark);
            text-align: right;
            font-size: 0.9rem;
        }

        .sidebar-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--text-dark);
        }
        /* Responsive Design */
        @media (max-width: 768px) {
            .section-title {
                font-size: 2rem;
                margin-bottom: 40px;
            }
            .contact-info {
                padding: 30px;
                margin-bottom: 30px;
            }

            .contact-section {
                padding: 40px 0;
            }

            .info-value {
                text-align: left;
                margin-top: 5px;
            }

            .info-item {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 576px) {
            .section-title {
                font-size: 1.8rem;
            }
            .contact-info {
                padding: 25px;
            }
        }