diff --git a/using BS5/README.md b/using BS5/README.md
new file mode 100644
index 0000000..930a24d
--- /dev/null
+++ b/using BS5/README.md	
@@ -0,0 +1,9 @@
+hello there
+this the same project but this time i've used Bootstrap 5
+i'm still biguiner in using it 
+
+but it's a good start 
+peace (:
+
+it will look like this
+(./Screen Shot 2022-11-10 at 08.36.19.png)
diff --git a/using BS5/Screen Shot 2022-11-10 at 08.36.19.png b/using BS5/Screen Shot 2022-11-10 at 08.36.19.png
new file mode 100644
index 0000000..66c0a6a
Binary files /dev/null and b/using BS5/Screen Shot 2022-11-10 at 08.36.19.png differ
diff --git a/using BS5/index.html b/using BS5/index.html
new file mode 100644
index 0000000..205bdfc
--- /dev/null
+++ b/using BS5/index.html	
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lan="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">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./styles/style.css">
+    <link rel="shortcut icon" href="../images/favicon-32x32.png" type="image/x-icon">
+    <title>Document</title>
+
+    <style>
+        :root{
+            --white:hsl(0, 0%, 100%);
+            --l_gray:hsl(212, 45%, 89%);
+            --g_blue:hsl(220, 15%, 55%);
+            --d_blue:hsl(218, 44%, 22%);
+            --mobile:375px;
+            --deskto:1440px;
+            --base-size : .9em;
+        }
+        body{
+            padding: 0;
+            margin: 0;
+            background-color: var(--l_gray);
+            font-family: 'Kumbh Sans', sans-serif;
+        }
+
+        main.container{
+            max-width: 300px;
+            margin: 50px auto;
+
+        }
+
+        section.card:hover{
+            /* border: 1px solid black; */
+            box-shadow: 2px 2px 10px -5px black;            
+
+        }
+
+        section img{
+            margin: 2px auto;
+            max-width: 250px;
+        }
+
+        .card-title{
+            font-size: 1.2em;
+            font-weight: 700;
+            color: var(--d_blue);
+        }
+        .card-text{
+            font-size: var(--base-size);
+            color: var(--g_blue);
+        }
+    </style>
+</head>
+<body>
+    <main class="container text-center rounded-3">
+        <section class="card p-3 rounded-3">
+            <img src="../images/image-qr-code.png" class="card-img-top rounded-3" alt="qr code picture">
+            <p class="card-title">Improve your front-end skills by building projects</p>
+            <p class="card-text">Scan the QR code to visit Frontend Mentor and take you coding skills to the next level.</p>
+        </section>
+    </main>
+</body>
+</html>
\ No newline at end of file
