Feat portfolio

website/index.html

@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
 
     <!-- Custom CSS -->
     <link href="assets/css/style.css?v0.1" rel="stylesheet">
@@ -38,7 +38,7 @@
 
 
     <!-- Optional JavaScript -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
 
 </body>
 

website/templates/contact.html

@@ -1,2 +1,46 @@
-<!-- your html code here -->
-<p>Hello, I'm contact.html</p>
+<div class="container py-5">
+
+    <!--Encabezado-->
+    <h1 class="fw-bold mb-2">Contact</h1>
+    <p class="mb-4 text-secondary">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis
+        euismod semper.
+        Praesent comodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+
+    <div class="row justify-content-center">
+        <div class="col-12 col-md-8">
+
+            <form class="bg-secondary-subtle rounded-3 p-4">
+
+
+                <div class="row align-items-center mb-3">
+                    <div class="col-12 col-sm-3 text-sm-end">
+                        <label for="emailInput" class="form-label fw-semibold mb-0">Your E-mail</label>
+                    </div>
+                    <div class="col-12 col-sm-9">
+                        <input type="email" class="form-control" id="emailInput" placeholder="Your email" required />
+                    </div>
+                </div>
+
+
+
+
+                <div class="row align-items-start mb-3">
+                    <div class="col-12 col-sm-3 text-sm-end pt-sm-2">
+                        <label for="messageInput" class="form-label fw-semibold mb-0">Your message</label>
+                    </div>
+                    <div class="col-12 col-sm-9">
+                        <textarea class="form-control" id="messageInput" rows="5"
+                            placeholder="Please enter your message here..." required></textarea>
+                    </div>
+                </div>
+
+                <!-- Submit-->
+                <div class="row">
+                    <div class="col-12 d-flex justify-content-end">
+                        <button type="submit" class="btn btn-primary px-4">Submit</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

website/templates/first_heading.html

@@ -1,2 +1,9 @@
-<!-- your html code here -->
-<p>Hello, I'm the first_heading.html</p>
+<div class="bg-white p-4 d-flex">
+    <div class="text">
+        <h4><strong>This First Heading </strong>Will Catch Your Eye</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Vivamus lacinia odio vitae vestibulum vestibulum.
+            Cras venenatis euismod malesuada.</p>
+    </div>
+    <img src="https://picsum.photos/1920/1080" class="rounded-circle" width="250" height="250">
+</div>

website/templates/footer.html

@@ -1,7 +1,7 @@
 <footer>
     <div class="row">
         <div class="col-lg-12">
-            <p>Copyright &copy; Your Website Name 2021</p>
+            <p>Copyright &copy; Your Website Name 2026</p>
         </div>
     </div>
 </footer>

website/templates/navbar.html

@@ -1,2 +1,27 @@
-<!-- your html code here -->
-<p>Hello, I'm the navbar.html</p>
+<nav class="navbar navbar-expand-lg bg-dark">
+  <div class="container-fluid">
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item">
+          <a class="nav-link active text-secondary" aria-current="page" href="#">Start Bootsrap</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link text-secondary" 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>

website/templates/portfolio.html

@@ -1,2 +1,33 @@
-<!-- your html code here -->
-<p>Hello, I'm the portfolio.html</p>
+<div class="container py-5">
+
+  <!--Encabezado-->
+  <h1 class="fw-bold mb-2">Portfolio</h1>
+  <p class="mb-4">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.
+      Praesent comodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+
+  <!--Row-->
+  <div class="row g-4">
+
+<div class="col-12 col-md-4">
+  <img src="https://georgianrecipes.com/media/cache/87/7b/877b1628989fdd4e7e4850d29720fca2.webp" alt="Project 1" class="img-fluid rounded w-100" />
+    <h5 class="title mt-3">Project Name</h5>
+  <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+</div>
+
+<div class="col-12 col-md-4">
+  <img src="https://georgianrecipes.com/media/cache/87/7b/877b1628989fdd4e7e4850d29720fca2.webp" alt="Project 2" class="img-fluid rounded w-100" />
+    <h5 class="title mt-3">Project Name</h5>
+  <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+</div>
+
+<div class="col-12 col-md-4">
+  <img src="https://georgianrecipes.com/media/cache/87/7b/877b1628989fdd4e7e4850d29720fca2.webp" alt="Project 3" class="img-fluid rounded w-100" />
+    <h5 class="title mt-3">Project Name</h5>
+  <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
+</div>
+
+ </div>
+</div>

website/templates/services.html

@@ -1,3 +1,10 @@
-<!-- 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="bg-white p-4 d-flex pt-8 pb-4">
+        <img src="https://picsum.photos/1920/1082" class="rounded-circle" width="250" height="250">
+
+    <div class="text">
+        <h4><strong>This First Heading </strong>Will Catch Your Eye</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Vivamus lacinia odio vitae vestibulum vestibulum.
+            Cras venenatis euismod malesuada.</p>
+    </div>
+</div>

website/templates/tagline.html

@@ -1,3 +1,13 @@
-<!-- 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="p-0">
+<div class="position-relative">
+
+  <img src="https://picsum.photos/1920/800" class="w-100 d-block px-0">
+
+  <div class="position-relative top-0 w-100 position-absolute top-50 start-50 translate-middle text-center"
+     style="margin-top: -80px;">  
+
+    <h1 class="bg-opacity-50 bg-white"><strong>One Page Wonder</strong></h1>
+    <p class="bg-opacity-50 bg-white"><strong>Will Knock Your Socks Off</strong></p>
+  </div>
+</div>
+</div>