breatheco-de · Bforti · Aug 30, 2023 · Sep 1, 2023 · Sep 1, 2023 · Sep 1, 2023
diff --git a/index.html b/index.html
@@ -5,7 +5,10 @@
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     </head>
     <body>
+
         <div class="container">
+
+
             <h1 class="mb-5">GIT & Bootstrap Collaborative Project</h1>
             <div class="row">
                 <div class="col-sm-4 bg-dark text-center">

diff --git a/website/assets/css/style.css b/website/assets/css/style.css
@@ -1,3 +1,3 @@
 body{
-    background: #BDBDBD;
+    background: white;
 }
diff --git a/website/templates/contact.html b/website/templates/contact.html
@@ -1,2 +1,32 @@
 <!-- your html code here -->
-<p>Hello, I'm contact.html</p>
+
+<body>
+    <div class="col-6 mx-auto">
+    <h1 class=" col-6 my-5 mx-5"><strong>Contact</strong></h1>
+    <p class="text-center col-12">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero suscipit omnis sequi, doloribus, obcaecati itaque necessitatibus aspernatur minima beatae praesentium sunt. Aut beatae temporibus non voluptas incidunt numquam iste fuga También es una composición.</p>
+    </div>
+
+
+
+<!-- FROM -->
+<div class=" border border-dark-subtle col-6 mt-5 mx-auto bg-secondary-subtle">
+    <div class="mb-5 my-5 mx-5 mt-5">
+        <label for="exampleFormControlInput1" class="form-label">Your E-mail</label>
+        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Your Email">
+      </div>
+      <div class="mb-5 my-5 mx-5 mt-5">
+        <label for="exampleFormControlTextarea1" class="form-label">Your message</label>
+        <textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
+        <button type="button" class="btn btn-primary float-end  border border-black mt-2 my-2">Submit</button>
+      </div>
+
+    </div>
+
+<!-- END FORM -->
+
+
+
+
+
+</body>
+</html>
diff --git a/website/templates/navbar.html b/website/templates/navbar.html
@@ -1,2 +1,25 @@
 <!-- your html code here -->
-<p>Hello, I'm the navbar.html</p>
+<nav class="row col-mb-12 navbar navbar-expand-lg bg-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand text-secondary" href="#">Start Bootstrap</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="navbarNav">
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link text-secondary" aria-current="page" href="#">About</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link text-secondary" href="#">Services</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link text-secondary" href="#">Portfolio</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link text-secondary" href="#">Contact</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
diff --git a/website/templates/services.html b/website/templates/services.html
@@ -1,3 +1,18 @@
 <!-- your html code here -->
-<p>Hello, I'm the services.html</p>
-<p>Hello, I'm the services section and I was loaded using ajax from templates/services.html</p>
+<div class="my-3 py-3 container border-top d-flex ">
+
+    <img src="https://i.pinimg.com/564x/a1/7e/3f/a17e3ffa1bccefa792ccc3aa8150beca.jpg" 
+    class="rounded-circle " alt="...">
+    <div>
+        <div class="d-flex">
+        <h2>The Second Heading </h2>
+        <h2 class="text-secondary ms-1"> Is pretty cool Too.</h2>
+        </div>
+        <p class="mt-5"> 
+                                  Antiguamente, las pirámides de Egipto estaban recubiertas de piedra.
+        Sin embargo, a lo largo de los años, gran parte de este revestimiento se ha perdido
+        </p>
+
+   </div>
+
+  </div>
diff --git a/website/templates/tagline.html b/website/templates/tagline.html
@@ -1,3 +1,19 @@
 <!-- your html code here -->
 <!-- Also called a hero image or a jumbotron before bootstrap 5. This might be helpful: https://getbootstrap.com/docs/5.1/examples/jumbotron/ -->
-<p>Hello, I'm the tagline and I was loaded using ajax from templates/tagline.html</p>
+<div class="container-fluid" style="padding: 0px; margin: 0px;">
+    <div class="row col-14">
+  <div class="text-center bg-image img-fluid" style="background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('../website/assets/img/bg.jpg'); height: 100vh;">
+     <div class="d-flex justify-content-center align-items-center h-100">
+          <div class="text-dark">
+              <div class="bg-light" style="width: 1250px;">
+              <h1 class="mb-3 display-1"><strong>One Page Wonder</strong></h1>
+              </div>
+              <div class="bg-light">
+              <h4 class="mb-3 display-5"><strong>Will Knock Your Socks Off</strong></h4>
+              </div>
+          </div>
+      </div>
+    </div>
+  </div> 
+  </div>
+  </div>