breatheco-de · MPMiguel · Jul 10, 2023 · Jul 10, 2023 · Jul 11, 2023 · Jul 11, 2023
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
         <title>Choose a website</title>
         <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>
+    <body ">
         <div class="container">
             <h1 class="mb-5">GIT & Bootstrap Collaborative Project</h1>
             <div class="row">

diff --git a/website/assets/css/style.css b/website/assets/css/style.css
@@ -1,3 +1,29 @@
 body{
     background: #BDBDBD;
+}
+
+h1.image-text {
+    font-size: 9vw;
+}
+
+h2.image-text {
+    font-size: 5vw;
+}
+
+div.img-box-1 {
+    margin-top: 6vw;
+}
+
+div.img-box-2 {
+    margin-top: 2vw;
+}
+
+@media only screen and (min-width: 600px) {
+    h1.image-text {
+        font-size: 8vw;
+    }
+
+    h2.image-text {
+        font-size: 4.5vw;
+    }
 }
diff --git a/website/index.html b/website/index.html
@@ -14,10 +14,10 @@
     <link href="assets/css/style.css?v0.1" rel="stylesheet">
 </head>
 
-<body>
+<body class="bg-white">
 
     <!-- Navigation -->
-    <div class="container-fluid">
+    <div class="w-100">
         <span require-file="./templates/navbar.html"></span>
         <!-- Full Width Image Header -->
         <span require-file="./templates/tagline.html"></span>

diff --git a/website/templates/contact.html b/website/templates/contact.html
@@ -1,2 +1,22 @@
 <!-- your html code here -->
-<p>Hello, I'm contact.html</p>
+<div class="container"> 
+  <h3>Contact</h3>
+  <p>Donec ac nulla pharetra, pulvinar neque eu, viverra nunc. Donec eu sem finibus, varius massa in, fermentum ante. Nunc interdum vehicula dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in metus suscipit, ultrices tellus in, ultricies lectus. In vitae felis dignissim, malesuada massa ut, feugiat orci. In hac habitasse platea dictumst.</p>
+  <div class="d-flex justify-content-center align-items-center">
+  <form class="bg-light p-4  col-md-8 col-sm-12 border rounded border-secondary-subtle mb-5">
+      <div class="row mb-3 d-flex">
+        <label class="col-2 fw-bold ms-auto" for="exampleInputEmail1" >Your E-mail</label>
+        <input type="email" class="col-9 border rounded border-secondary-subtle" placeholder="Your email" id="exampleInputEmail1" aria-describedby="emailHelp">
+      </div>
+      <div class="row mb-3">
+        <label  class="col-2 fw-bold p-2 ms-auto" for="floatingTextarea2">Your message</label>
+        <textarea  class="col-9 border rounded border-secondary-subtle" placeholder="Please enter your message here..." id="floatingTextarea2" style="height: 100px"></textarea>
+      </div>
+      <div class="d-flex">
+      <button type="submit" class="ms-auto btn btn-primary">Submit</button>
+    </div>
+    </form>  
+</div>
+
+
+
diff --git a/website/templates/first_heading.html b/website/templates/first_heading.html
@@ -1,2 +1,15 @@
-<!-- your html code here -->
-<p>Hello, I'm the first_heading.html</p>
+<<<<<<< HEAD
+
+=======
+<div class="container d-flex justify-content-center align-items-center mt-5 mb-5 ">
+
+    <div class="ms-4 p-3">
+        <h3>The Second Heading <i class="text-secondary fst-normal">Is Pretty Cool Too</i></h3>
+        <p>Donec ac nulla pharetra, pulvinar neque eu, viverra nunc. Donec eu sem finibus, varius massa in, fermentum
+            ante. Nunc interdum vehicula dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in metus
+            suscipit, ultrices tellus in, ultricies lectus. In vitae felis dignissim, malesuada massa ut, feugiat orci.
+            In hac habitasse platea dictumst.</p>
+    </div>
+    <img src="https://picsum.photos/id/23/200/200" alt="..." class="rounded-circle object-fit-cover">
+</div>
+>>>>>>> 4e82128555191572f1ee2797030234b57146e981
diff --git a/website/templates/navbar.html b/website/templates/navbar.html
@@ -1,2 +1,31 @@
 <!-- your html code here -->
-<p>Hello, I'm the navbar.html</p>
+<div class="w-100">
+    <nav class="navbar navbar-expand-lg bg-black text-white ">
+        <div class="container-fluid">
+          <a class="navbar-brand text-white" href="#">Start Bootsrap</a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarScroll">
+            <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
+              <li class="nav-item">
+                <a class="nav-link active text-white" aria-current="page" href="#">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link text-white" href="#">Services</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link text-white" href="#">Portfolio</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link text-white">Contact</a>
+              </li>
+            </ul>
+            <form class="d-flex" role="search">
+              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+              <button class="btn btn-outline-success" type="submit">Search</button>
+            </form>
+          </div>
+        </div>
+      </nav>
+</div>
diff --git a/website/templates/portfolio.html b/website/templates/portfolio.html
@@ -1,2 +1,41 @@
-<!-- your html code here -->
-<p>Hello, I'm the portfolio.html</p>
+<div class="portfolio mt-5 mb-5 p-5">
+    <div class="title">
+        <h3>Portfolio</h3>
+        <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima laboriosam sint atque libero, iste dolorem officiis, nulla inventore tempore, a mollitia quidem laudantium voluptate sunt blanditiis voluptatibus expedita sequi magnam.</p>
+    </div>
+
+    <div class="row row-cols-1 row-cols-md-3 g-3">
+        <div class="col">
+          <div class="no-outline-card">
+            <img src="https://picsum.photos/id/25/700/400" class="card-img-top" alt="pic">
+            <div class="card-body">
+              <h5 class="card-title text-primary">Project Name</h5>
+              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+            </div>
+          </div>
+        </div>
+        <div class="col">
+          <div class="no-outline-card">
+            <img src="https://picsum.photos/id/26/700/400" class="card-img-top" alt="pic">
+            <div class="card-body">
+              <h5 class="card-title text-primary">Project Name</h5>
+              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+            </div>
+          </div>
+        </div>
+        <div class="col">
+          <div class="no-outline-card">
+            <img src="https://picsum.photos/id/27/700/400" class="card-img-top" alt="pic">
+            <div class="card-body">
+              <h5 class="card-title text-primary">Project Name</h5>
+              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
+            </div>
+          </div>
+        </div>
+
+    </div>
+
+</div>
+
+<div class="mt-5 mb-5 m-5 border border-secondary"></div>
+
diff --git a/website/templates/services.html b/website/templates/services.html
@@ -1,3 +1,11 @@
 <!-- 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 d-flex justify-content-center align-items-center ">
+    <img src="https://picsum.photos/id/23/200/200" alt="..." class="rounded-circle object-fit-cover">
+    <div class="ms-4 p-3">
+        <h3>The Second Heading <i class="text-secondary fst-normal">Is Pretty Cool Too</i></h3>
+        <p>Donec ac nulla pharetra, pulvinar neque eu, viverra nunc. Donec eu sem finibus, varius massa in, fermentum
+            ante. Nunc interdum vehicula dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in metus
+            suscipit, ultrices tellus in, ultricies lectus. In vitae felis dignissim, malesuada massa ut, feugiat orci.
+            In hac habitasse platea dictumst.</p>
+    </div>
+</div>
diff --git a/website/templates/tagline.html b/website/templates/tagline.html
@@ -1,3 +1,17 @@
 <!-- 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="ratio ratio-21x9">
+    <img class="img-fluid" src="https://free4kwallpapers.com/uploads/originals/2021/06/28/porsche-carrera-gt-in-red-wallpaper.jpg" alt="imagen_fondo">
+    <div class="containter">
+        <div class="containter row bg-white mx-3 rounded align-middle img-box-1">
+            <h1 class="text-center align-middle image-text">
+                One Page Wonder
+            </h1>
+        </div>
+        <div class="containter row bg-white mx-3 rounded img-box-2">
+            <h2 class="text-center my-auto image-text">
+                Will Knock Your Socks Off
+            </h2>
+        </div>
+    </div>
+</div>