<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
    <link rel="icon" type="image/x-icon" href="resources/img/home/x-icon.jpg">
    <link rel="stylesheet" href="resources/css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body>
    <!-- header -->
    <header>
        <div class="logo">
            <a href="#"><img src="resources/img/home/logo.jpg" alt="logo"></a>
        </div>
        <div class="navDiv">
            <label for="menu"><i class="fa-solid fa-bars"></i></label>
        </div>
        <input type="checkbox" id="menu">
        <ul class="nav">
            <li><label for="menu"><i class="fa-solid fa-xmark"></i></label></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#course">Course</a></li>
            <li><a href="#exercise">Exercise</a></li>
            <!-- <li><a href="#project">Project</a></li>
            <li><a href="#playlist">Playlist</a></li> -->
            <li><a href="#contact">Contact</a></li>
        </ul>
    </header>

    <!-- body -->
    <div class="container">
        <!-- banner -->
        <div class="banner">
            <div class="content">
                <p>WELCOME TO MY PROFILE</p>
                <h1>
                    Hi, I'm Khanh Quy <br>
                    a
                    <span class="gradientText">
                        <span class="text" 
                        data-text1="{Student}&nbsp;"
                        data-text2="{Web&nbsp;Developer}&nbsp;"
                        ></span>
                    </span>
                </h1>
                <div class="info">
                    <p>ABOUT ME</p>
                    <ul>
                        <li><span><i class="fa-solid fa-user"></i></span> <strong>Full Name:</strong> Nguyen Khanh Quy</li>
                        <li><span><i class="fa-solid fa-id-card"></i></span> <strong>ID:</strong> 21110282</li>
                        <li><span><i class="fa-solid fa-chalkboard-user"></i></span> <strong>Class:</strong> 21110CL4</li>
                        <li><span><i class="fa-solid fa-cake-candles"></i></span> <strong>DoB:</strong> 27/09/2003</li>
                        <li><span><i class="fa-solid fa-laptop"></i></span> <strong>Major:</strong> Information Technology</li>
                        <li><span><i class="fa-solid fa-phone"></i></span> <strong>Phone Number:</strong> +84 333 150 xxx</li>
                        <li><span><i class="fa-solid fa-envelope"></i></span> <strong>E-Mail:</strong> 21110282@student.hcmute.edu.vn</li>
                    </ul>
                </div>
                <div class="find">
                    <h3>CONTACT WITH ME</h3>
                    <ul>
                        <li><a href="https://www.facebook.com/minh.trung424/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a></li>
                        <li><a href="https://www.instagram.com/minh.trung424/" target="_blank"><i class="fa-brands fa-square-instagram"></i></a></li>
                        <li><a href="https://x.com/@QuyNguyen424/" target="_blank"><i class="fa-brands fa-square-twitter"></i></a></li>
                        <li><a href="https://telegram.me/quynguyen424/" target="_blank"><i class="fa-brands fa-telegram"></i></a></li>
                        <li><a href="https://github.com/nguyenkhanhquy/" target="_blank"><i class="fa-brands fa-github"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="image-container">
                <img class="avatar" src="resources/img/home/avatar.jpg" alt="avatar">
                <img class="cat" src="resources/img/home/cat.gif" alt="cat">
                <div class="ids anim-typewriter">Rainbow Protocol</div>
            </div>
        </div>

        <!-- course -->
        <div id="course">
            <div class="title"></div>
            <div class="banner">
                <div class="image-container">
                    <img class="web" src="resources/img/home/web.jpg" alt="web">
                    <img class="cat" src="resources/img/home/cat.gif" alt="logo">
                    <div class="ids anim-typewriter">Rainbow Protocol</div>
                </div>
                <div class="content">
                    <p>HCMUTE - FIT</p>
                    <h1>
                        Welcome to <br>
                        <span class="gradientText">
                            <span class="text"
                            data-text1="{Course}"
                            data-text2="{Web&nbsp;Programming}"
                            ></span>
                        </span>
                    </h1>
                    <div class="info">
                        <p>ABOUT COURSE</p>
                        <ul>
                            <li><span><i class="fa-solid fa-user"></i></span> <strong>Instructor: Ph.D. Mai Anh Tho</strong></li>
                            <li><span><i class="fa-solid fa-laptop"></i></span> <strong>Faculty:</strong> Information Technology</li>
                            <li><span><i class="fa-solid fa-id-card"></i></span> <strong>Course ID:</strong> WEPR330479_05CLC</li>
                            <li><span><i class="fa-solid fa-person-chalkboard"></i></span> <strong>Class:</strong> Thursday Afternoon</li>
                            <li><span><i class="fa-regular fa-clock"></i></span> <strong>Time:</strong> 12:30 PM - 4:00 PM</li>
                            <li><span><i class="fa-solid fa-school"></i></span> HCMC University of Technology and Education</li>
                        </ul>
                    </div>
                    <div class="logoUTE">
                        <a href="https://hcmute.edu.vn/" target="_blank">
                            <img src="resources/img/home/Logo HCMUTE Tagline 1_White background.png" alt="HCMUTE">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- exercise -->
        <div id="exercise">
            <div class="title">EXERCISE</div> 
            <p style="text-align: center; font-style: italic;">Web Programming Exercises</p>
                <div class="section-exercise">
                    <div class="section-exercise-btn">
                        <a href="ch05ex2">
                            <div class="card ability-card">
                                <div class="card-exercise">
                                    <strong style="margin-bottom: 8px;">Exercise</strong>
                                    <strong>5.2</strong>
                                </div>
                                <div class="card-desc">
                                    <span><i class="fa-solid fa-code fa-bounce"></i>&nbsp;&nbsp;Get/Post Method</span>
                                </div>
                            </div>
                        </a>
                        <a href="ch06ex2">
                            <div class="card ability-card">
                                <div class="card-exercise">
                                    <strong style="margin-bottom: 8px;">Exercise</strong>
                                    <strong>4.1 + 6.2</strong>
                                </div>
                                <div class="card-desc">
                                    <span><i class="fa-solid fa-square-poll-vertical fa-bounce"></i>&nbsp;&nbsp;Survey Application</span>
                                </div>
                            </div>
                        </a>
                        <a href="ch08ex1">
                            <div class="card ability-card">
                                <div class="card-exercise">
                                    <strong style="margin-bottom: 8px;">Exercise</strong>
                                    <strong>5.1 + 6.1 + 8.1</strong>
                                </div>
                                <div class="card-desc">
                                    <span><i class="fa-solid fa-envelope fa-bounce"></i>&nbsp;&nbsp;Email List Application</span>
                                </div>
                            </div>
                        </a>
                        <a href="ch09ex1">
                            <div class="card ability-card">
                                <div class="card-exercise">
                                    <strong style="margin-bottom: 8px;">Exercise</strong>
                                    <strong>7.1 + 7.2 + 9.1</strong>
                                </div>
                                <div class="card-desc">
                                    <span><i class="fa-solid fa-file-arrow-down fa-bounce"></i>&nbsp;&nbsp;Download Application</span>
                                </div>
                            </div>
                        </a>
                        <a href="loadProducts">
                            <div class="card ability-card">
                                <div class="card-exercise">
                                    <strong style="margin-bottom: 8px;">Exercise</strong>
                                    <strong>7.3 + 9.2</strong>
                                </div>
                                <div class="card-desc">
                                    <span><i class="fa-solid fa-cart-shopping fa-bounce"></i>&nbsp;&nbsp;Cart Application</span>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
        </div>

        <!-- project -->
        <!-- <div id="project">
            <div class="title">PROJECT</div>
            <div class="listProject">
                <div class="item">
                    <div class="content">
                        <div>
                            <div class="name anim-typewriter">
                                Personal Website
                            </div>
                            <div class="image-container">
                                <img src="resources/img/home/profile.png" alt="">
                            </div>
                            <div class="btns">
                                <a href="https://21110282.codes/" target="_blank">
                                    <button class="button"><i class="fa-regular fa-eye"></i><br><span>View</span></button>
                                </a>
                                <a href="https://github.com/nguyenkhanhquy/MyWebApp" target="_blank">
                                    <button class="button"><i class="fa-solid fa-code"></i><br><span>Source Code</span></button>
                                </a>
                            </div>
                        </div>
                        <div>
                            <div>JAVA&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa-brands fa-java"></i></div>
                            <div class="evaluate" style="--point: 65%"></div>
                            <br>
                            <div>HTML5&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa-brands fa-html5"></i></div>
                            <div class="evaluate" style="--point: 16%"></div>
                            <br>
                            <div>CSS3&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa-brands fa-css3-alt"></i></div>
                            <div class="evaluate" style="--point: 19%"></div>
                            <br>
                        </div>
                    </div>  
                </div>

                <div class="item">
                    <div class="content">
                        <div>
                            <div class="name anim-typewriter">
                                Kessoku Band
                            </div>
                            <div class="image-container">
                                <img src="resources/img/home/band.jpg" alt="">
                            </div>
                            <div class="btns">
                                <a href="https://nguyenkhanhquy.github.io/kessoku-band/" target="_blank">
                                    <button class="button"><i class="fa-regular fa-eye"></i><br><span>View</span></button>
                                </a>
                                <a href="https://github.com/nguyenkhanhquy/kessoku-band" target="_blank">
                                    <button class="button"><i class="fa-solid fa-code"></i><br><span>Source Code</span></button>
                                </a>
                            </div>
                        </div>
                        <div>
                            <div>JAVASCRIPT&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa-brands fa-square-js"></i></div>
                            <div class="evaluate" style="--point: 8%"></div>
                            <br>
                            <div>HTML5&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa-brands fa-html5"></i></div>
                            <div class="evaluate" style="--point: 62%"></div>
                            <br>
                            <div>CSS3&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa-brands fa-css3-alt"></i></div>
                            <div class="evaluate" style="--point: 30%"></div>
                            <br>
                        </div>
                    </div>  
                </div>
            </div>
        </div> -->

        <!-- playlist -->
        <!-- <div id="playlist">
            <div class="title"><i class="fa-solid fa-headphones-simple fa-beat"></i>&nbsp;&nbsp;&nbsp;&nbsp;MY PLAYLIST&nbsp;&nbsp;&nbsp;<i class="fa-solid fa-music fa-beat"></i></div>
            <div class="listAudio">   
                <table>
                    <tr>
                        <th class="text-center">No.</th>
                        <th class="text-center">Song</th>
                        <th class="text-center">Duration</th>
                        <th class="text-center">Audio</th>
                    </tr>

                    <tr>
                        <td class="text-left">01</td>
                        <td class="text-center">
                            <p>Butter-Fly</p>
                        </td>
                        <td class="text-right">1:35</td>
                        <td class="text-center">
                            <audio src="musicStore/audio/butter-fly.mp3" controls preload="none"></audio>
                        </td>
                    </tr>

                    <tr>
                        <td class="text-left">02</td>
                        <td class="text-center">
                            <p>Tại Vì Sao</p>
                        </td>
                        <td class="text-right">3:22</td>
                        <td class="text-center">
                            <audio src="musicStore/audio/taivisao.mp3" controls preload="none"></audio>
                        </td>
                    </tr>

                    <tr>
                        <td class="text-left">03</td>
                        <td class="text-center">
                            <p>Thôi Em Đừng Đi</p>
                        </td>
                        <td class="text-right">2:53</td>
                        <td class="text-center">
                            <audio src="musicStore/audio/thoiemdungdi.mp3" controls preload="none"></audio>
                        </td>
                    </tr>

                    <tr>
                        <td class="text-left">04</td>
                        <td class="text-center">
                            <p>Nên Chờ Hay Nên Quên</p>
                        </td>
                        <td class="text-right">3:44</td>
                        <td class="text-center">
                            <audio src="musicStore/audio/nenchohaynenquen.mp3" controls preload="none"></audio>
                        </td>
                    </tr>

                    <tr>
                        <td class="text-left">05</td>
                        <td class="text-center">
                            <p>Lan Man</p>
                        </td>
                        <td class="text-right">3:36</td>
                        <td class="text-center">
                            <audio src="musicStore/audio/lanman.mp3" controls preload="none"></audio>
                        </td>
                    </tr>

                    <tr>
                        <td class="text-left">06</td>
                        <td class="text-center">
                            <p>Cắt Đôi Nỗi Sầu</p>
                        </td>
                        <td class="text-right">3:02</td>
                        <td class="text-center">
                            <audio src="musicStore/audio/catdoinoisau.mp3" controls preload="none"></audio>
                        </td>
                    </tr>
                </table>
            </div>
        </div> -->

        <!-- contact -->
        <div id="contact">
            <div class="title">CONTACT</div>
            <ul class="contact">
                <li><a href="https://www.facebook.com/minh.trung424/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a></li>
                <li><a href="https://www.instagram.com/minh.trung424/" target="_blank"><i class="fa-brands fa-square-instagram"></i></a></li>
                <li><a href="https://x.com/@QuyNguyen424/" target="_blank"><i class="fa-brands fa-square-twitter"></i></a></li>
                <li><a href="https://telegram.me/quynguyen424/" target="_blank"><i class="fa-brands fa-telegram"></i></a></li>
                <li><a href="https://github.com/nguyenkhanhquy/" target="_blank"><i class="fa-brands fa-github"></i></a></li>
            </ul>
        </div>
    </div>

    <!-- footer -->
    <footer>
        <p>&copy; Copyright 2024 Nguyen Khanh Quy</p>
    </footer>
</body>
</html>
