CodeYourFuture · persianquant · Oct 12, 2024 · Oct 19, 2024 · Oct 19, 2024
diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css
@@ -0,0 +1,79 @@
+body {
+    background-color: #e9c46a;
+    font-family: "MongoDB Value Serif", sans-serif;
+    margin: 0;
+    padding: 0;
+    color: #333;
+    font-size: 1.2rem;
+
+}
+
+@font-face{font-family:MongoDB Value Serif;src:url(https://static.mongodb.com/com/fonts/MongoDBValueSerif-Regular.woff2) format('woff2');font-weight:normal;font-display:swap;}
+
+header {
+    text-align: center;
+    padding: 20px;
+    background-color: #2a9d8f;
+    color: white;
+}
+
+main {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.hero {
+    background-color: white;
+    padding: 20px;
+    border: 1px solid #ccc;
+    margin-bottom: 20px;
+}
+
+.hero img {
+    width: 100%;
+    height: auto;
+}
+
+.card-container {
+    display: flex;
+    gap: 20px;
+}
+
+.card {
+    background-color: white;
+    padding: 20px;
+    flex: 1;
+    border: 1px solid #ddd;
+    margin-bottom: 50px;
+}
+
+.card img {
+    width: 100%;
+    height: 300px;
+}
+
+.buttons {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: white;
+    text-decoration: none;
+    border-radius: 5px;
+    text-align: center;
+    margin-top: 10px;
+}
+
+.button-link:hover {
+    background-color: #0056b3;
+}
+
+footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    background-color: #2a9d8f;
+    color: white;
+    padding: 10px 0;
+}
diff --git a/Wireframe/images/branch.jpg b/Wireframe/images/branch.jpg
diff --git a/Wireframe/images/developers.jpg b/Wireframe/images/developers.jpg
diff --git a/Wireframe/images/git.jpg b/Wireframe/images/git.jpg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,11 +3,49 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css">
+    <title>Git Universe</title>
+    <link rel="preload" href="https://static.mongodb.com/com/fonts/MongoDBValueSerif-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="https://static.mongodb.com/com/fonts/MongoDBValueSerif-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="https://static.mongodb.com/com/fonts/MongoDBValueSerif-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+    <!-- Header-->
+    <header>
+      <h1>Welcome to the Git Universe</h1>
+      <p>Here you can find anything about Git</p>
+    </header>
+    <!--Articles-->
+    <main>
+      <section class="articles">
+        <article class="hero">
+          <img src="images/git.jpg" alt="artistic image of git">
+          <h2>What is Git?</h2>
+          <p>Git is a distributed version control system used for tracking changes in code during software development. It allows multiple developers to collaborate, manage versions, and revert to previous states if needed. Learn more here.</p>
+          <a href="https://git-scm.com/book/en/v2/Getting-Started-What-is-Git%3F" target="_blank" class="buttons" >Read more</a>
+        </article>
+
+        <div class="card-container">
+          <article class="card">
+            <img src="images/developers.jpg" alt="A universe of developers and Git">
+            <h2>Why do Developers Need Git?</h2>
+            <p>Developers need Git to track changes, collaborate seamlessly, and manage code efficiently in a distributed environment. Learn more here.</p>
+            <a href="https://www.nobledesktop.com/learn/git/what-is-git" target="_blank" class="buttons">Read more</a>
+          </article>
+
+          <article class="card">
+            <img src="images/branch.jpg">
+            <h2>What is a Branch in Git?</h2>
+            <p>A branch in Git is a parallel version of the codebase that allows developers to work on different features or fixes independently without affecting the main codebase, facilitating collaboration and experimentation. Learn more here.</p>
+            <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" target="_blank" class="buttons">Read more</a>
+          </article>
+        </div>
+      </section>
+    </main>
+
+    <!--Footer is here-->
+    <footer>
+      <p>&copy;2024 Saeid. All rights are reserved.</p>
+    </footer>
 </body>
-</html
+</html>