Merge pull request #750 from gustavomm19/solution

solution added
breatheco-de · Dec 19, 2023 · f33361c · f33361c
2 parents a79ec97 + a6a02e4
commit f33361c
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 14 deletions.
diff --git a/learn.json b/learn.json
@@ -9,6 +9,7 @@
 	"syntax": "html",
 	"description" : "Build website among a team of several collaborators",
 	"translations": ["es","us"],
+	"solution": "https://github.com/breatheco-de/exercise-collaborative-html-website/tree/solution",
 	"talents": [],
     "autoPlay": false,
     "projectType": "project"

diff --git a/website/assets/css/style.css b/website/assets/css/style.css
@@ -1,3 +1,41 @@
-body{
-    background: #BDBDBD;
+body {
+    background: ffffff;
+}
+
+.box {
+    width: 100%;
+    height: 200px;
+}
+
+.header {
+    padding: 0;
+}
+
+.area-contact {
+    width: 800px;
+    height: 240px;
+    background: gainsboro;
+    margin: 0 auto;
+    padding: 15px 15px 20px 45px;
+}
+
+.letters {
+    text-align: center;
+    text-align: justify;
+}
+
+#jumbotron {
+    background-image: url('../img/bg.jpg');
+    background-size: cover;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    min-height: 600px;
+}
+
+#jumbotron h1 {
+    font-size: 120px;
+}
+
+#jumbotron h2 {
+    font-size: 60px
 }
diff --git a/website/index.html b/website/index.html
@@ -17,7 +17,7 @@
 <body>
 
     <!-- Navigation -->
-    <div class="container-fluid">
+    <div class="container-fluid header">
         <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,32 @@
 <!-- your html code here -->
-<p>Hello, I'm contact.html</p>
+<div class="container pb-5">
+    <div class="letters">
+        <h1 id="contact">Contact</h1>
+        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat tempore nisi illum ut nam quibusdam, ex
+            voluptas rerum,
+            tempora numquam non autem magni cupiditate. Quaerat reiciendis saepe voluptate hic necessitatibus.</p>
+    </div>
+    <div class="area-contact">
+        <form>
+            <div class="row mb-3">
+                <label for="colFormLabel" class="col-sm-2 col-form-label"><strong>Your Email</strong></label>
+                <div class="col-sm-10">
+                    <input type="email" class="form-control" id="colFormLabel" placeholder="Your email">
+                </div>
+            </div>
+
+            <div class="row mb-3">
+                <label for="exampleFormControlTextarea1" class="col-sm-2 col-form-label"><strong>Your
+                        message</strong></label>
+                <div class="col-sm-10">
+                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
+                        placeholder="Please enter your message here...."></textarea>
+                </div>
+            </div>
+            <!--buttom-->
+            <div class="col-12 justify-content-end d-flex">
+                <button type="submit" class="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,18 @@
 <!-- your html code here -->
-<p>Hello, I'm the first_heading.html</p>
+<div style="background-color:white">
+    <div class="container py-4">
+        <hr style="height:1px;border-width:0;color:gray;background-color:gray">
+        <div  class="d-flex justify-content-start ">
+            <div>
+                <span class="fw-bold fs-1">This First Heading</span> <span class="text-secondary fw-bold fs-1"> Will Catch Your Eye</span>
+                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet illum ducimus rerum quo possimus facilis rem, ea, quidem tempora perspiciatis soluta animi libero maiores nulla. Corrupti corporis nobis molestias aperiam?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet illum ducimus rerum quo possimus facilis rem, ea, quidem tempora perspiciatis soluta animi libero maiores nulla. Corrupti corporis nobis molestias aperiam?</p>
+            </div>
+            <img class="rounded-circle ms-3" 
+            src="./assets/img/1.jpg" 
+            alt="Imagen"  
+            width="250" 
+            height="250"
+            >
+        </div>
+    </div>
+</div>
diff --git a/website/templates/footer.html b/website/templates/footer.html
@@ -1,7 +1,9 @@
 <footer>
-    <div class="row">
-        <div class="col-lg-12">
-            <p>Copyright &copy; Your Website Name 2021</p>
+    <div class="container">
+        <div class="row">
+            <div class="col-lg-12">
+                <p>Copyright &copy; Your Website Name 2021</p>
+            </div>
         </div>
     </div>
-</footer>
+</footer>
diff --git a/website/templates/navbar.html b/website/templates/navbar.html
@@ -1,2 +1,17 @@
 <!-- your html code here -->
-<p>Hello, I'm the navbar.html</p>
+<nav class="navbar navbar-expand-lg bg-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand text-secondary" href="getbootstrap.com" target="_blank">Start Bootstrap</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+            <div class="navbar-nav">
+            <a class="nav-link active text-secondary" aria-current="page" href="#firstheading">About</a>
+            <a class="nav-link text-secondary" href="#services">Services</a>
+            <a class="nav-link text-secondary" href="#portfolio">Portfolio</a>
+            <a class="nav-link text-secondary" href="#contact">Contact</a>
+            </div>
+        </div>
+    </div>
+  </nav>
diff --git a/website/templates/portfolio.html b/website/templates/portfolio.html
@@ -1,2 +1,40 @@
 <!-- your html code here -->
-<p>Hello, I'm the portfolio.html</p>
+<div class="container">
+  <hr>
+  <div class="container pt-5 pb-5">
+    <div class="row">
+      <h2 id="portfolio">Portfolio</h2>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi accusantium ducimus, nam et aspernatur
+        inventore nemo, voluptate dolores ullam repellat quibusdam voluptas pariatur exercitationem molestias cupiditate
+        dicta tempora praesentium esse.
+      </p>
+    </div>
+    <div class="row">
+      <div class="col-md-4">
+        <div class="bg-secondary mb-2 box">
+        </div>
+        <p class="h5 text-primary">Project Name</p>
+        <p class="">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi earum non veniam officiis facilis vitae!
+        </p>
+      </div>
+      <div class="col-md-4">
+        <div class="bg-secondary mb-2 box">
+        </div>
+        <p class="h5 text-primary">Project Name</p>
+        <p class="">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi earum non veniam officiis facilis vitae!
+        </p>
+      </div>
+      <div class="col-md-4">
+        <div class="bg-secondary mb-2 box">
+        </div>
+        <p class="h5 text-primary">Project Name</p>
+        <p class="">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi earum non veniam officiis facilis vitae!
+        </p>
+      </div>
+    </div>
+  </div>
+  <hr>
+</div>
diff --git a/website/templates/services.html b/website/templates/services.html
@@ -1,3 +1,21 @@
 <!-- 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 style="background-color:white">
+
+    <div class="container py-4">
+        <div  class="d-flex justify-content-start">
+            <img class="rounded-circle ms-3" 
+            src="./assets/img/2.jpg" 
+            alt="Imagen"  
+            width="250" 
+            height="250">
+            <div>
+                <h1>
+                    The Second Heading <span class="text-muted">is pretty cool too</span>
+                </h1>
+                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet illum ducimus rerum quo possimus
+                    facilis rem, ea, quidem tempora perspiciatis soluta animi libero maiores nulla. Corrupti corporis nobis
+                    molestias aperiam?</p>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/website/templates/tagline.html b/website/templates/tagline.html
@@ -1,3 +1,8 @@
 <!-- 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 py-5" id="jumbotron">
+    <div class="pt-5">
+        <h1 class="display-5 fw-bold text-center bg-light">One Page Wonder</h1>
+    </div> 
+    <h2 class="display-5 fw-bold text-center bg-light">Will Knock Your Socks Off </h2>
+</div>