diff --git a/images/download.jpg b/images/download.jpg
new file mode 100644
index 0000000..76d2c35
Binary files /dev/null and b/images/download.jpg differ
diff --git a/images/download1.jpg b/images/download1.jpg
new file mode 100644
index 0000000..748999e
Binary files /dev/null and b/images/download1.jpg differ
diff --git a/images/download2.jpg b/images/download2.jpg
new file mode 100644
index 0000000..e3897b8
Binary files /dev/null and b/images/download2.jpg differ
diff --git a/index.html b/index.html
index c4849d3..e6c2e4a 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,97 @@
+<!DOCTYPE html>
 <html>
 
-  <head></head>
-  <body>
-    <h1>Starting your website</h1>
-  </body>
+<head>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="style.css" rel="stylesheet">
+</head>
+
+<body>
+    <header>
+        <!-- navBar -->
+        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <div class="container">
+                <a class="navbar-brand" href="#">
+                    <h2><span style="color: yellow;">SCT</span>2023</h2>
+                </a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav ms-auto">
+                        <li class="nav-item"><a class="nav-link" href="/home/">Home</a></li>
+                        <li class="nav-item"><a class="nav-link" href="/about/">About</a></li>
+                        <li class="nav-item"><a class="nav-link" href="/services/">Services</a></li>
+                        <li class="nav-item"><a class="nav-link" href="/contact/">Contact</a></li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+    <main>
+        <!-- carousel -->
+        <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
+            <ol class="carousel-indicators">
+                <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
+                <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
+                <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
+            </ol>
+            <div class="carousel-inner">
+                <div class="carousel-item active">
+                    <img src="images/download2.jpg" class="d-block w-100" alt="...">
+                    <div class="carousel-caption d-none d-md-block">
+                        <h5>slide one label</h5>
+                        <p>random text for the slide one.</p>
+                        <button class="btn btn-primary">Learn more</button>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img src="images/download.jpg" class="d-block w-100" alt="...">
+                    <div class="carousel-caption d-none d-md-block">
+                        <h5>slide two label</h5>
+                        <p>random text for the slide two.</p>
+                        <button class="btn btn-primary">Learn more</button>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img src="images/download1.jpg" class="d-block w-100" alt="...">
+                    <div class="carousel-caption d-none d-md-block">
+                        <h5>slide three label</h5>
+                        <p> random text for the slide three.</p>
+                        <button class="btn btn-primary">Learn more</button>
+                    </div>
+                </div>
+            </div>
+            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
+                data-bs-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Previous</span>
+            </button>
+            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
+                data-bs-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="visually-hidden">Next</span>
+            </button>
+        </div>
+        <!-- final image and text -->
+        <div class="container">
+            <div class="row cardd row1" style="padding: 8%;">
+                <div class="col-4">
+                    <img src="images/download.jpg" width="100%" height="100%">
+                </div>
+                <div class="col-8" style="padding-top: 8%;">
+                    <h2>We provide the best equality Services Ever</h2>
+                    <p>so this is a random peragraph for this task and it means nothing its
+                        just for testing porpuses
+                        so this is a random peragraph for this task and it means nothing its
+                        just for testing porpuses</p>
+                    <button class="btn btn-warning">Learn more</button>
+                </div>
+            </div>
+        </div>
+    </main>
+</body>
+
 </html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7ccc92a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,19 @@
+.navbar {
+    background-color: #ffffff;
+}
+
+.nav-link {
+    color: black;
+    text-decoration: none;
+    margin-right: 10px;
+}
+
+.carousel-caption {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+
+
+.btn-warning {
+    margin-top: 20px;
+}
\ No newline at end of file
