new default structure

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

src/forum.html → change-password.html

@@ -219,65 +219,69 @@
             </nav>
         </div>
 
-        <section class="relative pb-20 bg-blueGray-50">
+        <section class="relative pb-20">
+            <div class="hidden lg:block absolute inset-0 w-1/2 ml-auto">
+                <div class="flex items-center h-full wow animate__ animate__fadeIn animated animated"
+                    data-wow-delay=".1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeIn;">
+                    <img class="lg:max-w-lg mx-auto" src="assets/imgs/illustrations/change-password.svg" alt="">
+                </div>
+            </div>
             <div class="container">
-                <div class="relative pt-12">
-                    <div class="px-6 py-10 bg-white shadow rounded mt-3">
-                        <div class="flex justify-between">
-                            <div class="w-7/12">
-                                <div
-                                    class="absolute -mt-12 mr-3 bg-white text-sm bg-blue-500 text-white px-5 py-1 shadow rounded right-0">
-                                    Tanya Jawab</div>
-                                <div class="flex gap-3">
-                                    <img src="/assets/imgs/placeholders/img-1.png" class="w-16 h-16" alt="">
-                                    <div class="pl-4">
-                                        <h5 class="font-semibold">Judul Forum</h5>
-                                        <p class="text-blueGray-500">Latest Reply @user2 in 30 minutes ago</p>
-                                        <div class="pt-3 text-gray-800">Hey i wanna ask about next js with mongodb
-                                            databases,
-                                            i'm
-                                            already connect a db
-                                            with next
-                                            but i can't .....</div>
-                                    </div>
-                                </div>
+                <div class="relative flex flex-wrap pt-12">
+                    <div class="lg:flex lg:flex-col w-full lg:w-1/2 py-6 lg:pr-20">
+                        <div class="w-full max-w-lg mx-auto lg:mx-0 my-auto wow animate__ animate__fadeIn animated animated"
+                            data-wow-delay=".3s"
+                            style="visibility: visible; animation-delay: 0.3s; animation-name: fadeIn;">
+                            <span class="text-sm text-blueGray-400">Reset Password</span>
+                            <h4 class="mb-6 text-3xl">Ganti Password</h4>
+                            <div class="flex mb-6 px-4 bg-blueGray-50 rounded border border-gray-200">
+                                <input
+                                    class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none"
+                                    type="password" placeholder="Enter your password">
+                                <button class="ml-4">
+                                    <svg class="h-6 w-6 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg"
+                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
+                                        </path>
+                                    </svg>
+                                </button>
                             </div>
-                            <div class="w-5/12">
-                                <div class="flex justify-end gap-4">
-                                    <div
-                                        class="w-12 h-12 bg-white rounded-full drop-shadow-md flex items-center justify-center">
-                                        <img src="/assets/imgs/placeholders/img-1.png" class="w-8 h-8" alt="">
-                                    </div>
-                                    <div
-                                        class="w-12 h-12 bg-white rounded-full drop-shadow-md flex items-center justify-center">
-                                        <img src="/assets/imgs/placeholders/img-1.png" class="w-8 h-8" alt="">
-                                    </div>
-                                    <div
-                                        class="w-12 h-12 bg-white rounded-full drop-shadow-md flex items-center justify-center">
-                                        <img src="/assets/imgs/placeholders/img-1.png" class="w-8 h-8" alt="">
-                                    </div>
-                                    <div
-                                        class="w-12 h-12 bg-white rounded-full drop-shadow-md flex items-center justify-center">
-                                        <img src="/assets/imgs/placeholders/img-1.png" class="w-8 h-8" alt="">
-                                    </div>
-                                </div>
-                                <div class="flex justify-end py-6">
-                                    <div class="flex justify-start gap-4">
-                                        <div class="font-normal">
-                                            25 Komentar
-                                        </div>
-                                        <div class="font-normal">
-                                            3 Menyukai
-                                        </div>
-                                        <div class="font-normal text-green-600">
-                                            3 Up Vote
-                                        </div>
-                                        <div class="font-normal text-red-600">
-                                            0 Down Vote
-                                        </div>
-                                    </div>
-                                </div>
+                            <div class="flex mb-6 px-4 bg-blueGray-50 rounded border border-gray-200">
+                                <input
+                                    class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none"
+                                    type="password" placeholder="Enter your new password">
+                                <button class="ml-4">
+                                    <svg class="h-6 w-6 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg"
+                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
+                                        </path>
+                                    </svg>
+                                </button>
                             </div>
+                            <button
+                                class="transition duration-300 ease-in-out transform hover:-translate-y-1 block w-full p-4 text-center text-xs text-white font-semibold leading-none bg-blue-500 hover:bg-blue-700 rounded">
+                                Change Password</button>
+                        </div>
+
+                        <div class="w-full mt-12 mx-auto text-center">
+                            <p>Belum punya akun? <br /><a
+                                    class="inline-block text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none wow animate__ animate__fadeIn animated animated"
+                                    data-wow-delay=".1s" href="signup.html"
+                                    style="visibility: visible; animation-delay: 0.1s; animation-name: fadeIn;">Daftar
+                                    Sekarang</a></p>
+                            <p>Atau</p>
+                            <p><a href="login.html"
+                                    class="inline-block text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none wow animate__ animate__fadeIn animated animated"
+                                    data-wow-delay=".1s" href="signup.html"
+                                    style="visibility: visible; animation-delay: 0.1s; animation-name: fadeIn;">Masuk
+                                    Sekarang</a>
+                            </p>
                         </div>
                     </div>
                 </div>
@@ -437,7 +441,6 @@ <h1 class="text-lg font-semibold">Monst</h1>
         </div>
     </div>
     <!--Import Vendor Js-->
-    <script src="https://cdn.tailwindcss.com"></script>
     <script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
     <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
     <script src="assets/js/vendor/waypoints.js"></script>