B2014971 – Fixed issue - Fork, Commit, Merge - Hard Issue (HTML) fork…

…-commit-merge#954
phatdattran2k2 · Nov 1, 2023 · 904e5cc · 904e5cc
1 parent 04be201
commit 904e5cc
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 22 deletions.
diff --git a/tasks/html/hard/index.html b/tasks/html/hard/index.html
@@ -9,25 +9,74 @@
         <title>Fork, Commit, Merge - Hard Issue</title>
     </head>
     <body>
-        <h1>Hello B2014971</h1>
         <nav id="navbar">
-            <!-- TODO: Add navbar -->
+            <div id="menu">
+                <li><a href="">About</a></li>
+                <li><a href="">Services</a></li>
+                <li><a href="">Contact</a></li>
+            </div>
         </nav>
 
         <section id="about">
-            <!-- TODO: Add about section -->
+            <div class="content-wrapper">
+                <div class="text">
+                    <h1>About us</h1>
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiumtotam rem aperiam, eaque
+                    ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
+                    quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
+                    nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
+                    numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniamquis
+                    nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
+                    iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
+                    voluptas nulla pariatur?
+                </div>
+                <img src="https://loremflickr.com/320/240" alt="image">
+            </div>
         </section>
 
         <section id="services">
-            <!-- TODO: Add services section -->
+            <div class="content-wrapper">
+                <div class="text">
+                    <h1>Services</h1>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non providentsimilique sunt in culpa qui officia
+                        deserunt mollitia animiid est laborum et dolorum fugaEt harum quidem rerum facilis est et expedita distinctio. Nam
+                        libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere
+                        possimus, omnis voluptas assumenda estomnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut
+                        rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandaeItaque earum rerum hic
+                        tenetur a sapiente delectusut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores
+                        repellat.
+                </div>
+                <img src="https://loremflickr.com/320/240" alt="image">
+            </div>
         </section>
 
         <section id="contact">
-            <!-- TODO: Add contact section -->
+            <div class="content-wrapper">
+                <div class="text">
+                    <h1>Contact us</h1>
+                    <label for="name">Name:</label>
+                    <input type="text">
+                    <label for="email">Email:</label>
+                    <input type="email">
+                    <label for="message">Message:</label>
+                    <textarea rows="5"></textarea>
+                    <button type="submit">Send</button>
+                </div>
+            </div>
         </section>
 
-        <footer>
-            <!-- TODO: Add footer -->
+        <footer class="footer">
+            <div class="content-wrapper">
+                <div class="footer-text">
+                    <div id="footer-links">
+                        <a href="">About</a>
+                        <a href="">Services</a>
+                        <a href="">Contact</a>
+                    </div>
+                    <p class="copyright">©2023 Fork, Commit, Merge. All rights reserved.</p>
+                </div>
+            </div>
         </footer>
     </body>
 </html>
diff --git a/tasks/html/hard/styles.css b/tasks/html/hard/styles.css
@@ -40,29 +40,32 @@ section {
     align-items: center;
 }
 
-.content-wrapper {
+
+.content-wrapper{
     display: flex;
-    align-items: center;
-    padding-left: 400px;
-    padding-right: 400px;
+    padding: 0 10% 0 20% ;
+}
+
+.content-wrapper .text{
+    width: 70%;
+}
+
+.content-wrapper img{
+    width: 30%;
+    border-radius: 5px;
 }
 
+/* #about .content-wrapper img {
+    width: 30%;
+    border-radius: 5px;
+} */
+
 .text {
     flex: 1;
     padding-right: 20px;
 }
 
-img {
-    flex-shrink: 0;
-    max-width: 100%;
-    height: auto;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    margin: 20px 0;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-}
+
 
 h1,
 h2,
@@ -91,13 +94,30 @@ footer {
     color: white;
     padding: 15px;
     text-align: center;
+    display: flex;
+}
+.footer-text{
+    display: flex;
+    flex-direction: column;
+    justify-items: center;
+    text-align: center;
+    align-items: center;
+}
+.copyright,
+#footer-links{display: flex;}
+
+.footer .content-wrapper{
+    width: 100%;
+    display: flow;
 }
 
 #footer-links a {
     color: white;
+    padding: 5px;
     text-decoration: none;
 }
 
 #footer-links a:hover {
     text-decoration: underline;
 }
+