diff --git a/index.html b/index.html
new file mode 100644
index 000000000..c44bfc0d7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+
+</head>
+
+<body>
+    <header class="main-menu d-flex justify-content-around">
+        <h1>REVERA</h1>
+
+        <nav class="menu-nav">
+            <ul class="d-flex align-items-center">
+                <li href="#">HOME</li>
+                <li href="#">ABOUT</li>
+                <li href="#">SAMPLE PAGE</li>
+                <li href="#">PORTFOLIO</li>
+                <li href="#">BLOG</li>
+                <li href="#">PARENT PAGE</li>
+                <li href="#">CONTACT</li>
+            </ul>
+        </nav>
+
+
+    </header>
+    <section class="main">
+        <div class="container-fluid">
+          <!-- Bootstrap Carousel -->
+          <div id="slider" class="carousel slide" data-ride="carousel">
+            <div class="carousel-inner">
+              <!-- Slide 1 -->
+              <div class="carousel-item active">
+                <img src="./starter-code/img/slider-1.jpg" class="d-block w-100" alt="Slide 1">
+                <div class="carousel-caption d-none d-md-block">
+                  <!-- Text to display over the image -->
+                  <h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</h1>
+                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint illo nihil, modi reiciendis fuga,
+                    exercitationem velit eveniet pariatur corrupti natus debitis fugit? Quas odio natus aut. Laudantium eius
+                    quas a.</p>
+                  <button href="#" class="read-more">read more</button>
+                </div>
+              </div>
+              <!-- Slide 2 -->
+              <div class="carousel-item">
+                <img src="./starter-code/img/slider-2.jpg" class="d-block w-100" alt="Slide 2">
+                <!-- Repeat the structure for other slides if needed -->
+              </div>
+              <!-- Slide 3 -->
+              <div class="carousel-item">
+                <img src="./starter-code/img/slider-3.jpg" class="d-block w-100" alt="Slide 3">
+                <!-- Repeat the structure for other slides if needed -->
+              </div>
+              <!-- Slide 4 -->
+              <div class="carousel-item">
+                <img src="./starter-code/img/slider-4.jpg" class="d-block w-100" alt="Slide 4">
+                <!-- Repeat the structure for other slides if needed -->
+              </div>
+            </div>
+            <!-- Navigation Arrows -->
+            <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
+              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+              <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
+              <span class="carousel-control-next-icon" aria-hidden="true"></span>
+              <span class="sr-only">Next</span>
+            </a>
+          </div>
+        </div>
+      </section>
+
+    <section class="description-service">
+        <div class="container">
+            <div class="row justify-content-center align-items-center">
+                <div class="col-md-4 justify-content-center">
+                    <img src="./starter-code/img/basic_exclamation.svg" alt="">
+                    <h2>Web design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo est illo aperiam libero odit quis,
+                        delectus similique doloribus, iure, numquam molestiae? Quibusdam incidunt totam beatae
+                        blanditiis omnis earum amet est.
+                    </p>
+                </div>
+                <div class="col-md-4">
+                    <img src="./starter-code/img/basic_info.svg" alt="">
+                    <h2>Web development</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo est illo aperiam libero odit quis,
+                        delectus similique doloribus, iure, numquam molestiae? Quibusdam incidunt totam beatae
+                        blanditiis omnis earum amet est.
+                    </p>
+
+                </div>
+                <div class="col-md-4">
+                    <img src="./starter-code/img/basic_question.svg" alt="">
+                    <h2>Web development</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo est illo aperiam libero odit quis,
+                        delectus similique doloribus, iure, numquam molestiae? Quibusdam incidunt totam beatae
+                        blanditiis omnis earum amet est.
+                    </p>
+
+                </div>
+
+            </div>
+        </div>
+    </section>
+    <section class="latest-projects">
+        <div class="container">
+            <h2 class="section-title">Latest Proyects</h2>
+            <h3>Lorem ipsum blabla</h3>
+            <hr>
+            <div class="row">
+                <div class="col-md-3">
+                    <article>
+                        <img src="./starter-code/img/project-1.jpg" alt="project-1">
+                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                            voluptate!
+                        </p>
+                    </article>
+                </div>
+                <div class="col-md-3">
+                    <img src="./starter-code/img/project-2.jpg" alt="project-1">
+                    <p>Omnis eveniet animi hic cumque quia quod,fuga amet tenetur dolore id ve
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <img src="./starter-code/img/project-3.jpg" alt="project-1">
+                    <p> veritatis expedita alias enim accusantium consequatur
+                        voluptate!
+                    </p>
+                </div>
+                <div class="col-md-3">
+                    <img src="./starter-code/img/project-4.jpg" alt="project-1">
+                    <p> Omnis eveniet animi hic cumque quia quod,
+                        fuga amet tenetur dolore id veniam facere iste
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="latest-artcicles">
+        <div class="container">
+            <h2 class="section-title">Latest articles</h2>
+            <h3>Latest articles from the blog blabla</h3>
+            <hr>
+            <div class="row">
+                <div class="col-md-3">
+                    <article>
+                        <img src="./starter-code/img/slider-1.jpg" alt="project-1">
+                        <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quisquam sunt
+                        </h4>
+                        <h5>Posted on august 25 2023, by admin</h5>
+                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt placeat ratione deleniti
+                            rerum
+                            nisi recusandae voluptate velit ipsam consequatur maiores quibusdam distinctio laboriosam
+                            molestiae, debitis officia sint aspernatur corporis id.
+                        </p>
+                    </article>
+                </div>
+                <div class="col-md-3">
+                    <article>
+                        <img src="./starter-code/img/slider-2.jpg" alt="project-1">
+                        <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quisquam sunt
+                        </h4>
+                        <h5>Posted on august 25 2023, by admin</h5>
+                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, molestias id ipsum non
+                            laudantium
+                            cupiditate praesentium enim consequuntur ut, dolor facere neque debitis ipsam et suscipit
+                            aliquam perspiciatis veritatis cumque.
+                        </p>
+                    </article>
+                </div>
+                <div class="col-md-3">
+                    <article>
+                        <img src="./starter-code/img/slider-3.jpg" alt="project-1">
+                        <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quisquam sunt
+                        </h4>
+                        <h5>Posted on august 25 2023, by admin</h5>
+                        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, repudiandae nostrum dolor,
+                            necessitatibus ipsa laboriosam aspernatur saepe provident consequuntur modi, maiores odio.
+                            Sapiente magnam error mollitia a vero quasi debitis.
+                        </p>
+                    </article>
+                </div>
+                <div class="col-md-3">
+                    <article>
+
+                        <img src="./starter-code/img/slider-4.jpg" alt="project-1">
+                        <h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quisquam sunt
+                        </h4>
+                        <h5>Posted on august 25 2023, by admin</h5>
+                        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos eum, eligendi aliquid soluta
+                            odit
+                            dolorum aliquam? Quaerat doloremque quo qui in dolorum rerum! Laudantium in soluta quos ex
+                            omnis
+                            molestiae.
+                        </p>
+                    </article>
+                </div>
+            </div>
+        </div>
+    </section>
+    <footer>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-3">
+                    <h3>Revera</h3>
+                    <p class="white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sapiente delectus
+                        officia
+                        suscipit, aspernatur quae debitis deleniti rem quis. Vero quam rem eligendi fugiat quod,
+                        voluptate obcaecati corrupti nam voluptatibus.</p>
+                </div>
+                <div class="col-md-3">
+                    <h3>Meta</h3>
+                    <p class="white">Log in</p>
+                    <hr>
+                    <p class="white">BlaBla</p>
+                    <hr>
+                    <p class="white">Comments</p>
+                    <hr>
+                    <p class="white">Wordpress</p>
+                    <hr>
+                </div>
+                <div class="col-md-3">
+                    <h3>Archieves</h3>
+                    <p class="white">August 2023</p>
+                    <hr>
+                </div>
+                <div class="col-md-3">
+                    <h3>Recent posts</h3>
+                    <p class="white"> Magni delectus nam porro quasi quae illo voluptatem minus. Vel accusamus iure,
+                        maiores ex.</p>
+                    <hr>
+                    <p class="white">laboriosam reiciendis labore modi.</p>
+                    <hr>
+                    <p class="white"> Vel accusamus iure, maiores ex ipsam nemo ducimu</p>
+                    <hr>
+                    <p class="white"> Magni delectus nam porro quasi quae</p>
+                    <hr>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 000000000..2e6ec82c7
--- /dev/null
+++ b/style.css
@@ -0,0 +1,102 @@
+h1{
+    font-weight: 800;
+}
+
+img {
+    width: 100%;
+}
+
+.menu-nav ul {
+    list-style: none;
+}
+
+.menu-nav ul li {
+    margin-right: 5px;
+    font-size: 10px;
+    width: 120%;
+    padding: 12px;
+    white-space: nowrap;
+    align-items: center;
+}
+
+.read-more {
+    background-color: transparent;
+    border: 2px solid white;
+    padding: 5px;
+    border-radius: 3px;
+    color: white;
+    text-transform: uppercase;
+}
+
+.description-service {
+    background-color: #ed554b;
+    color: white;
+    align-items: center;
+    padding: 100px 50px;
+    justify-content: center;
+    text-align: center;
+
+}
+
+.description-service img {
+    width: 30%;
+    color: white;
+}
+
+h2 {
+    font-size: 20px;
+}
+
+.section-title {
+    text-transform: uppercase;
+    font-weight: bold;
+}
+
+h3 {
+    color: gray;
+    text-transform: uppercase;
+    font-size: 14px;
+}
+
+.latest-projects {
+    padding-top: 30px;
+
+}
+
+p {
+    font-size: 13px;
+}
+
+h4 {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+h5 {
+    text-transform: uppercase;
+    font-size: 12px;
+    margin-bottom: 3px;
+}
+
+.latest-articles {
+    padding-top: 25px;
+    margin-bottom: 3px;
+}
+
+img {
+    margin-bottom: 10px;
+}
+
+footer {
+    background-color: #3b3b3b;
+    border-top: 5px solid #ed554b;
+    padding-top: 20px;
+}
+
+.white {
+    color: rgb(100, 100, 100);
+}
+
+hr {
+    color: rgb(109, 109, 109);
+}
\ No newline at end of file
