diff --git a/index.html b/index.html
index c4849d3..36a3fe3 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,214 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link
+            href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+            integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
+            crossorigin="anonymous">
+        <link rel="stylesheet" href="stylee.css">
+        <script src="https://kit.fontawesome.com/c62f5f7a47.js"
+            crossorigin="anonymous"></script>
 
-  <head></head>
-  <body>
-    <h1>Starting your website</h1>
-  </body>
-</html>
+        <title>Website</title>
+    </head>
+    <body>
+        <header>
+            <nav class="navbar fixed-top navbar-expand bg-light">
+                <div class="container-fluid">
+                    <h2 style="margin-left: 30px;"><span
+                            style=" color: orange;">SCT</span>2023</h2>
+                    <ul class="navbar-nav">
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Home</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">About</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Service</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#">Contact</a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+        </header>
+        <div id="carouselExampleCaptions" class="carousel slide">
+            <div class="carousel-indicators">
+                <button type="button"
+                    data-bs-target="#carouselExampleCaptions"
+                    data-bs-slide-to="0" class="active" aria-current="true"
+                    aria-label="Slide 1"></button>
+                <button type="button"
+                    data-bs-target="#carouselExampleCaptions"
+                    data-bs-slide-to="1" aria-label="Slide 2"></button>
+                <button type="button"
+                    data-bs-target="#carouselExampleCaptions"
+                    data-bs-slide-to="2" aria-label="Slide 3"></button>
+            </div>
+            <div class="carousel-inner">
+                <div class="carousel-item active">
+                    <img
+                        src="https://fastly.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68"
+                        class="d-block w-100"
+                        alt="image1">
+                    <div class="carousel-caption d-none d-md-block">
+                        <h5>First slide label</h5>
+                        <p>Some representative placeholder content for the
+                            first slide.</p>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img
+                        src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ"
+                        class="d-block w-100"
+                        alt="image2">
+                    <div class="carousel-caption d-none d-md-block">
+                        <h5>Second slide label</h5>
+                        <p>Some representative placeholder content for the
+                            second slide.</p>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <img
+                        src="https://fastly.picsum.photos/id/12/2500/1667.jpg?hmac=Pe3284luVre9ZqNzv1jMFpLihFI6lwq7TPgMSsNXw2w"
+                        class="d-block w-100"
+                        alt="image3">
+                    <div class="carousel-caption d-none d-md-block">
+                        <h5>Third slide label</h5>
+                        <p>Some representative placeholder content for the
+                            third slide.</p>
+                    </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>
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-4 col-md-2" id="image">
+                    <img
+                        src="https://fastly.picsum.photos/id/37/2000/1333.jpg?hmac=vpYLNsQZwU2szsZc4Uo17cW786vR0GEUVq4icaKopQI"
+                        alt="cat" width="400px" height="400px">
+                </div>
+                <div class="col-lg-6 col-md-4" id="text">
+                    <h1>We Provide the Best Quality Service Ever</h1>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Nihil recusandae ipsam facere illum vero, velit aliquam
+                        fugit reiciendis impedit? Perspiciatis delectus earum
+                        accusamus ipsa incidunt dolore aperiam, culpa porro
+                        dolorem.
+                    </p>
+                    <button type="button" class="btn btn-warning">Learn More</button>
+                </div>
+            </div>
+        </div>
+        <div class="Cards">
+            <div>
+                <h1>
+                    Service
+                </h1>
+                <p>
+                    Lorem ipsum dolor
+                    sit amet, consectetur adipisicing elit. Ducimus porro quasi
+                    incidunt est deleniti in neque vitae! Consequuntur maxime
+                    nam corporis porro, aliquam ullam cupiditate mollitia
+                    architecto voluptates voluptatum totam!
+                </p>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <i class="fa-solid fa-laptop"
+                        style='font-size:50px;color: white;'></i>
+                    <h1 style="color: white;">Lorem ipsum</h1>
+                    <p style="color: white;">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing
+                        elit. Rem dolorem iusto eligendi nulla mollitia illum
+                        provident ad quidem et. Rem, corporis dolorem.
+                        Blanditiis magni iusto totam illo enim, a optio.
+                    </p>
+                    <button class="btn btn-warning">Read More</button>
+                </div>
+                <div class="col">
+                    <i class="fa-solid fa-laptop"
+                        style='font-size:50px;color: white;'></i>
+                    <h1 style="color: white;">Lorem ipsum</h1>
+                    <p style="color: white;">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing
+                        elit. Rem dolorem iusto eligendi nulla mollitia illum
+                        provident ad quidem et. Rem, corporis dolorem.
+                        Blanditiis magni iusto totam illo enim, a optio.
+                    </p>
+                    <button class="btn btn-warning">Read More</button>
+                </div>
+                <div class="col">
+                    <i class="fa-solid fa-laptop"
+                        style='font-size:50px;color: white;'></i>
+                    <h1 style="color: white;">Lorem ipsum</h1>
+                    <p style="color: white;">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing
+                        elit. Rem dolorem iusto eligendi nulla mollitia illum
+                        provident ad quidem et. Rem, corporis dolorem.
+                        Blanditiis magni iusto totam illo enim, a optio.
+                    </p>
+                    <button class="btn btn-warning">Read More</button>
+                </div>
+            </div>
+        </div>
+        <div class="contact">
+            <div>
+                <h1>
+                    Contact Us
+                </h1>
+                <p>
+                    Lorem, ipsum dolor sit amet consectetur adipisicing elit
+                </div>
+                <div class="form">
+                    <form>
+                        <div class="form-outline mb-2">
+                            <input type="text" class="form-control"
+                                placeholder="Full Name">
+                        </div>
+                        <div class="form-outline mb-2">
+                            <input type="email" class="form-control"
+                                placeholder="Email">
+                        </div>
+                        <div class="form-outline mb-4">
+                            <textarea class="form-control"
+                                placeholder="Write your message"></textarea>
+                        </div>
+                        <button type="button"
+                            class="btn btn-warning btn-block mb-2"
+                            style="width: 100%;">Send Now</button>
+                    </form>
+                </div>
+            </div>
+            <footer
+                style="background-color: rgb(39, 38, 38);text-align: center;height: 50px;">
+                <h7 style="color: white;">@She Codes Too</h5>
+            </footer>
+            <script
+                src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
+                integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
+                crossorigin="anonymous"></script>
+            <script
+                src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"
+                integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS"
+                crossorigin="anonymous"></script>
+        </body>
+    </html>
\ No newline at end of file
diff --git a/stylee.css b/stylee.css
new file mode 100644
index 0000000..953502b
--- /dev/null
+++ b/stylee.css
@@ -0,0 +1,62 @@
+.nav-item {
+    padding-right: 50px;
+}
+
+.container {
+    margin-top: 30px;
+    margin-bottom: 50px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+#text {
+    margin-top: 40px;
+    margin-bottom: 50px;
+}
+
+.Cards {
+    text-align: center;
+    margin-left: 30px;
+    margin-right: 30px;
+}
+.row{
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+.col {
+    align-content: center;
+    margin-top: 50px;
+    margin-bottom: 50px;
+    margin-left: 5px;
+    padding: 20px;
+    background-color: rgb(36, 35, 35);
+    border-radius: 10px;
+}
+.contact {
+    text-align: center;
+    margin: 80px;
+}
+.form{
+    background-color: #f3f3f3;
+    padding: 20px;
+    margin-top: 80px;
+}
+.form-control {
+    border: none;
+}
+
+.form-control:active,
+.form-control:focus {
+    outline: none;
+    -webkit-box-shadow: none;
+}
+/* @media screen and (max-width: 500px) {
+
+    #card,
+    #image,
+    #text {
+        width: 50%;
+    }
+} */
\ No newline at end of file
