CodeYourFuture · EmmanuelSiziba · Oct 9, 2024 · Oct 9, 2024 · Oct 9, 2024 · Oct 10, 2024
diff --git a/GIT.jpg b/GIT.jpg
diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,13 +1,51 @@
-<!DOCTYPE html>
+ <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wireframe</title>
+    <title>Guide to Git</title>
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
-</body>
-</html
+    <div class="header">
+      <h1>Guide to Git</h1>
+      <p>The free open source distributed version control system primarily used by developers to manage their source code. See how it works.</p>
+  </div>
+
+  <div class="main-content">
+      <div class="banner">
+          <h2>What is Git?</h2>
+          <p>Git, an open-source distributed version control system (DVCS) created by Linux developer Linus Torvalds in 2005. As of 2024, Git is the most widely used version control system and is used by both individuals and companies, including Microsoft, Netflix, and Google.</p>
+          <a href="https://rogerdudler.github.io/git-guide/" class="button">Read More</a>
+      </div>
+
+      <div class="info-section">
+          <div class="info-card">
+              <img src="https://images.unsplash.com/photo-1707061229170-fc232a07a55f?q=80&w=1481&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Developers need Git">
+              <h2>Why do developers need Git?</h2>
+              <ul>
+                  <li>Tracking Changes: Git allows you to track every change made to your codebase.</li>
+                  <li>Collaboration: Git enables multiple developers to work on the same project simultaneously.</li>
+                  <li>Open Source: Git is widely used in open-source projects, making it the standard for collaborative development.</li>
+                  <li>Rollback and Recovery: Easily revert to previous working versions of your code.</li>
+              </ul>
+              <a href="https://www.nobledesktop.com/learn/git/what-is-git" class="button">Read More</a>
+          </div>
+          <div class="info-card">
+              <img src="https://media.istockphoto.com/id/897695334/vector/code-fork-flat-icons-with-outlines.jpg?s=1024x1024&w=is&k=20&c=c9zwHexRZf9rmLWKIe4N-3x_VS5yrn3QYKa7xkRLVxk=" alt="Branching in Git">
+              <h3>What is a branch in Git?</h3>
+              <p>A branch in Git is a separate line of development that allows you to work on features or fixes independently from the main project. It lets you experiment, make changes, and merge them back without affecting the main codebase.</p>
+              <a href="https://www.atlassian.com/git/tutorials/using-branches#:~:text=In%20Git%2C%20branches%20are%20a,branch%20to%20encapsulate%20your%20changes." class="button">Read More</a>
+          </div>
+      </div>
+  </div>
+
+  <div class="footer">
+      <footer>
+          <p>&copy; 2024 Guide to Git</p>
+      </footer>
+  </div>
+
+  </body>
+  </html>
+
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -0,0 +1,121 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+.header {
+  margin-top: 20px;
+}
+
+.header > h1 {
+  font-size: 2em;
+  margin: 0;
+}
+
+.header > p {
+  color: #666;
+  font-size: 1em;
+}
+
+.main-content {
+  margin: 20px;
+}
+
+.banner {
+  background-image: url('https://images.unsplash.com/photo-1654277041218-84424c78f0ae?q=80&w=1462&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+  background-size: cover;
+  background-position: center;
+  padding: 20px;
+  text-align: left;
+  border-radius: 8px;
+  color: white;
+  position: relative;
+}
+
+.banner > h2 {
+  font-size: 1.5em;
+  color: white;
+}
+
+.banner > p {
+  color: white;
+  font-size: 1em;
+}
+
+.banner .button {
+  display: inline-block;
+  margin-top: 10px;
+  padding: 10px 20px;
+  background-color: orange;
+  color: white;
+  text-decoration: none;
+  border-radius: 5px;
+}
+
+.banner::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  background-color: #000; /* Fallback for older browsers */
+  border-radius: 8px;
+  z-index: 1;
+}
+
+.banner h2, .banner p, .banner .button {
+  position: relative;
+  z-index: 2;
+}
+
+.info-section {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+}
+
+.info-card {
+  width: 45%;
+  background-color: #f8f8f8;
+  border-radius: 8px;
+  padding: 20px;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.info-card > img {
+  width: 100%;
+  max-width: 250px;
+  height: auto;
+  border-radius: 8px;
+  margin: 0 auto;
+}
+
+.info-card > h2, .info-card > h3 {
+  font-size: 1.2em;
+  color: orange;
+  margin-top: 10px;
+}
+
+.info-card > p, .info-card > ul {
+  color: #333;
+  font-size: 1em;
+  margin-top: 10px;
+}
+
+.info-card .button {
+  display: inline-block;
+  margin-top: auto;
+  padding: 10px 20px;
+  background-color: orange;
+  color: white;
+  text-decoration: none;
+  border-radius: 5px;
+  align-self: flex-start;
+}