breatheco-de · DACorona · Dec 31, 2024 · Jan 1, 2025 · Jan 1, 2025 · Jan 1, 2025
diff --git a/website/assets/css/first_heading.css b/website/assets/css/first_heading.css
@@ -0,0 +1,14 @@
+
+
+
+h3{
+    font-size: 35px;
+}
+h5{
+    font-size: 20px;
+}
+
+
+
+
+
diff --git a/website/assets/css/services.css b/website/assets/css/services.css
@@ -0,0 +1,11 @@
+h4,p {
+    width: 70%;
+}
+
+h4{
+    font-size: 30px;
+}
+
+p{
+    font-size: 15px;
+}
diff --git a/website/assets/css/tagline.css b/website/assets/css/tagline.css
@@ -0,0 +1,16 @@
+.jumbotron {
+   background-image: url('../img/bg.jpg');
+   background-size: cover;
+   background-position: center;
+   height: 600px;
+   padding-top: 1%;
+   margin-top: 0%;
+}
+
+h1 {
+   font-size: 90px;
+}
+
+h3{
+   font-size: 58px;
+}
diff --git a/website/templates/contact.html b/website/templates/contact.html
@@ -1,2 +1,47 @@
-<!-- your html code here -->
-<p>Hello, I'm contact.html</p>
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+<body>
+    <section id="contact">
+        <div class="container">
+
+           <div class="mt-4">
+               <h3>Contact</h3>
+               <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis obcaecati porro sed labore modi dolores, doloremque quam error totam iusto tempore. Dolorum repellat voluptas temporibus ea doloremque, consequatur perspiciatis voluptates sint.</p>
+           </div>
+          <div class="form">
+              <div class="container bg-secondary-subtle ps-5" style="width: 70%;">
+                   <div class="row">
+                       <div class="col-2   pe-0 mx-0 pt-5">
+                          <label for="email" class="fw-bold text-end;" >Your E-mail</label>
+                       </div>
+                       <div class="col-10 ms-0 pt-5 pe-3">
+                         <input type="email" name="contact" id="email" placeholder="Your email" class="form-control"  >
+                       </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-2 fw-bold  pt-4 pe-0 mx-0"> 
+                            <label for="message"> Your message</label>
+                        </div>
+                        <div class="col-10 pt-4 pe-3">
+                            <textarea name="message" id="message"  rows="5" class="form-control" placeholder="Please enter your message here.." ></textarea>
+                        </div>
+                    </div>
+                    <div class="d-flex justify-content-end pt-2 pb-3 pe-3">
+                       <button class=" btn btn-primary  " type="submit" href="#"> Submit</button>
+                    </div>   
+             </div>
+          </div>  
+
+
+
+        </div>
+    </section>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</body>
+
+
+
+
+
+
diff --git a/website/templates/first_heading.html b/website/templates/first_heading.html
@@ -1,2 +1,35 @@
-<!-- your html code here -->
-<p>Hello, I'm the first_heading.html</p>
+
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+        <link rel="stylesheet" href="../assets/css/first_heading.css">
+    </head>
+
+    <body>
+        <section id="first_heading">
+         <div class="container pt-4">
+              <hr class="mx-auto py-3" style="width: 85% ">
+              <div class="row ">
+
+                      <div class="col-8 pe-0  me-0 d-flex justify-content-end" >
+
+                          <div class="pt-3 mt-4 " style="width: 90%;">
+                            <p> 
+                               <h3>This First Heading  <span class="text-secondary"> Will Catch Your Eye</span></h3>
+                               <h5 > lorem, ipsum dolor sit amet consectetur adipisicing elit st, aliquid doloremque. Eaque natus consectetur sit </h5>
+                            </p>
+                          </div>
+                      </div>
+                      <div class="col-4 px-0">
+                           <img src="../assets/img/1.jpg" class="rounded-circle border-0 me-3  mt-5 " alt="Imagen del First heading" style=" width:250px ;" >
+                      </div>
+                </div>
+
+            </div>    
+        </section>
+
+
+
+
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    </body>
+
+<!-- your html code here -->
diff --git a/website/templates/navbar.html b/website/templates/navbar.html
@@ -1,2 +1,37 @@
-<!-- your html code here -->
-<p>Hello, I'm the navbar.html</p>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>Navbar</title>
+      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-sm bg-dark " data-bs-theme="dark">
+        <div class="container-fluid">
+            <a href="#" class="navbar-brand text-body-secondary ">Start Bootstrap</a>
+            <div class="collapse navbar-collapse">
+                <ul class="navbar-nav">
+                    <li class="nav-item">
+                        <a href="#" class="nav-link" id="#firstHeading">About</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#" class="nav-link" id="#services">Services</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#" class="nav-link" id="#portfolio">Portfolio</a>
+                    </li>
+                    <li class="nav-item">
+                        <a href="#" class="nav-link" id="#contact">Contact</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+  </body>
+
+</html>
+
+
+
diff --git a/website/templates/portfolio.html b/website/templates/portfolio.html
@@ -1,2 +1,50 @@
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+<body>
+    <section id="portfolio">
+
+        <div class="container">
+         <h3 class="mt-5 mb-3">
+            Portfolio
+         </h3>
+         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore veniam reiciendis doloremque culpa expedita incidunt ipsam, mollitia deserunt iusto esse, excepturi distinctio! Perferendis, minima amet?</p>
+
+         <!--Cards-->
+         <div class="row mt-4">
+            <div class="col-4">
+                <div class="card">
+                   <img src="../assets/img/big-project-image.png" alt="">
+                     <div class="card-body">
+                          <h5 class="card-title text-primary">Proyect title</h5>
+                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
+                        </div>
+                    </div>      
+                </div>
+
+                <div class="col-4">
+                    <div class="card">
+                        <img src="../assets/img/big-project-image.png" alt="">
+                        <div class="card-body">
+                            <h5 class="card-title text-primary">Proyect title</h5>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
+                       </div>
+                    </div>        
+            </div>
+            <div class="col-4">
+                <div class="card">
+                    <img src="../assets/img/big-project-image.png" alt="">
+                    <div class="card-body">
+                        <h5 class="card-title text-primary">Proyect title</h5>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
+                 </div>
+            </div>
+         </div>
+         <!--Cards-->
+
+       </div>
+
+    </section>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</body>
+
 <!-- your html code here -->
-<p>Hello, I'm the portfolio.html</p>
diff --git a/website/templates/services.html b/website/templates/services.html
@@ -1,3 +1,32 @@
-<!-- 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>
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+        <link rel="stylesheet" href="../assets/css/services.css">
+
+    <body>
+
+        <section id="services">
+
+            <div class="contaier">
+              <hr class="mx-auto mt-5 p-4" style="width: 80%;">
+                <div class="row">
+                <div class="col-5 text-end pt-3 pe-0   me-0">
+                    <img src="../assets/img/2.jpg" alt="foto servicios" class="img-fluid rounded-circle" style="width: 250px;">
+                </div>
+                <div class="col-7 ms-0 ps-0">
+
+                        <h4>The Second Heading <span class="text-secondary">Is Pretty Cool Too</span></h3>
+                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta exercitationem voluptatibus rerum nesciunt expedita iusto perspiciatis rem quidem minima molestias!</p>
+
+
+                </div>
+              </div>
+
+            </div>
+
+
+
+        </section>
+
+
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    </body>
+
diff --git a/website/templates/tagline.html b/website/templates/tagline.html
@@ -1,3 +1,27 @@
 <!-- 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>
+ <!DOCTYPE html>
+ <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>tagline</title>
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+        <link rel="stylesheet" href="..\assets\css\tagline.css">
+
+
+    </head>
+    <body >
+        <div class="container-fluid px-0" >
+            <div class="jumbotron" id="jumbotron">
+
+               <h1 class="bg-light text-center mt-5 fw-bolder ">One Page Wonder</h1>
+               <h3 class="bg-light text-center mt-2 fw-bold ">Will Knock Your Socks Off</h3>
+
+            </div>
+            <!-- Also called a hero image or a jumbotron before bootstrap 5. This might be helpful: https://getbootstrap.com/docs/5.1/examples/jumbotron/ -->
+
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+    </body>