Ft 001 add first heading

website/assets/css/style.css

@@ -1,3 +1,5 @@
 body{
-    background: #BDBDBD;
+    background: #ffffff;
+    margin: 0;
+    padding: 0;
 }

website/templates/contact.html

@@ -1,2 +1,34 @@
 <!-- your html code here -->
-<p>Hello, I'm contact.html</p>
+<div class="container my-5 p-3 bg-white">
+    <div class="row">
+        <div class="col-12">
+            <h2 class="display-6 fw-normal">Contact</h2>
+            <p class="lead mt-3">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+            <div class="row justify-content-center mt-4">
+                <div class="col-10">
+                    <div class="bg-light p-5 border rounded">
+                        <form>
+                            <div class="row mb-3 align-items-center">
+                                <label class="col-3 text-end fw-bold">Your E-mail</label>
+                                <div class="col-9">
+                                    <input type="email" class="form-control" placeholder="Your email">
+                                </div>
+                            </div>
+
+                            <div class="row mb-3">
+                                <label class="col-3 text-end fw-bold">Your message</label>
+                                <div class="col-9">
+                                    <textarea class="form-control" rows="4" placeholder="Please enter your message here..."></textarea>
+                                </div>
+                            </div>
+
+                            <div class="text-end">
+                                <button type="submit" class="btn btn-primary px-4">Submit</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

website/templates/first_heading.html

@@ -1,2 +1,14 @@
-<!-- your html code here -->
-<p>Hello, I'm the first_heading.html</p>
+<div class="container my-5 p-3 bg-white">
+    <div class="row align-items-start">
+        <div class="col-lg-8 order-lg-1">
+            <h2 class="display-6 fw-normal">This first Heading <span class="text-muted">Will Catch Your Eye</span></h2>
+            <p class="lead mt-3">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+        </div>
+        <div class="col-lg-4 order-lg-2 text-center pe-5">
+            <img class="img-fluid rounded-circle" 
+                 src="https://img.asmedia.epimg.net/resizer/v2/47CSAGX3JNGLBCXJUUMYXFPB7Y.jpg?auth=d974a8b9df6778f3f412dc2d85cba860aee0d9cdf353c1e8125be86de79de103&width=1200&height=1200&smart=true" 
+                 alt="Walter White">
+        </div>
+    </div>
+    <hr class="mt-5 mb-0">
+</div>

website/templates/navbar.html

@@ -1,2 +1,21 @@
-<!-- your html code here -->
-<p>Hello, I'm the navbar.html</p>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark w-100 m-0 p-0">
+  <div class="w-100 d-flex align-items-center justify-content-between px-3">
+
+    <a class="navbar-brand fw-bold fs-4 m-0" href="#">Start Bootstrap</a>
+
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
+      <ul class="navbar-nav gap-3">
+        <li class="nav-item"><a class="nav-link text-white" href="#about">About</a></li>
+        <li class="nav-item"><a class="nav-link text-white" href="#services">Services</a></li>
+        <li class="nav-item"><a class="nav-link text-white" href="#portfolio">Portfolio</a></li>
+        <li class="nav-item"><a class="nav-link text-white" href="#contact">Contact</a></li>
+      </ul>
+    </div>
+
+  </div>
+</nav>

website/templates/services.html

@@ -1,3 +1,23 @@
-<!-- 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="container my-5 p-3 bg-white">
+    <div class="row align-items-center">
+        <div class="col-lg-4 text-center ps-5">
+            <img class="img-fluid"
+                 style="border-radius: 50%; width: 560px; height: 300px; object-fit: cover;"
+                 src="https://img.freepik.com/foto-gratis/manos-arriba-usando-teclado-pad-pista_23-2148210409.jpg?semt=ais_hybrid&w=740&q=80"
+                 alt="manos_tecleando">
+        </div>
+
+        <div class="col-lg-8">
+            <h2 class="display-6 fw-normal">
+                The Second Heading <span class="text-muted">Is Pretty Cool Too.</span>
+            </h2>
+            <p class="lead mt-3">
+                Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.
+                Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
+            </p>
+        </div>
+
+    </div>
+
+    <hr class="mt-5 mb-0">
+</div>

website/templates/tagline.html

@@ -1,3 +1,15 @@
 <!-- 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="hero-section position-relative w-100" style="height: 50vh; overflow: hidden;">
+
+    <img src="https://images.unsplash.com/photo-1503264116251-35a269479413?q=80&w=1920"
+         class="w-100 h-100 object-fit-cover"
+         alt="Hero Image">
+
+    <div class="position-absolute top-50 start-50 translate-middle text-center text-white">
+        <h1 class="display-3 fw-bold">One Page Wonder</h1>
+        <p class="lead">Will Knock Your Socks Off</p>
+    </div>
+
+</div>